.umu-blog-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  padding: 20px 24px;
  color: #fff;
  font-family:
    'PingFang SC',
    -apple-system,
    BlinkMacSystemFont,
    'Microsoft YaHei',
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* text-align only — NOT align-items:center. This is a flex column, and
   align-items:center makes flex children shrink to their content width
   instead of stretching to the card's full width (the button already
   controls its own centering via align-self below); without this the text
   node — and, in wp-admin, the textarea's wrapper — collapses to a narrow
   column instead of staying full-width with centered text inside it. */
.umu-blog-card-align-center {
  text-align: center;
}

.umu-blog-card-glow {
  box-shadow: 19px 20px 15px rgba(1, 166, 255, 0.15);
}

/* Approximation of Figma's decorative background blobs (complex nested/masked
   SVG groups in the source file) — simple blurred circles rather than a
   pixel-matched asset, see card-block.php doc comment. */
.umu-blog-card-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.5);
}

.umu-blog-card-blob-1 {
  width: 150px;
  height: 150px;
  right: 40px;
  top: -30px;
}

.umu-blog-card-blob-2 {
  width: 100px;
  height: 100px;
  right: 120px;
  bottom: -40px;
}

/* Anchored with bottom + left/right (never a fixed pixel offset tied to the
   text box) so the decoration stays pinned to the card's edge regardless of
   how long the configured text is — content flows from the top, so a
   bottom-anchored image is never pushed into overlapping it. Each SVG
   already bakes in its own opacity/fade, so no extra opacity here. */
.umu-blog-card-decoration {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

/* Original right/bottom anchor and full width were already correct — the only
   problem was the size itself, not the position or orientation (no rotation
   needed). */
.umu-blog-card-decoration-deco-1 {
  right: 0;
  bottom: -10px;
  width: 53%;
  max-width: 456px;
  height: auto;
}

/* Deliberately bled off the card's own corner — the card's overflow:hidden
   crops it, matching the intended corner-accent look. */
.umu-blog-card-decoration-deco-2 {
  bottom: -70px;
  right: -30px;
  width: 24%;
  max-width: 130px;
  height: auto;
}

.umu-blog-card-decoration-deco-3 {
  left: 0;
  width: 100%;
  height: auto;
}

.umu-blog-card-text,
.umu-blog-card-text-input textarea {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 34px;
  position: relative;
  z-index: 1;
  /* Preserves manual line breaks typed in the editor's textarea — without
	   this, HTML collapses the \n characters (which esc_html() leaves intact)
	   to a single space, so pressing Enter in the editor had no visible
	   effect on the front end. */
  white-space: pre-line;
}

.umu-blog-card-text-input textarea {
  color: #fff;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  width: 100%;
}

.umu-blog-card-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-self: flex-start;
  padding: 12px 28px;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}

.umu-blog-card-align-center .umu-blog-card-button {
  align-self: center;
}

/* text-align is inherited in principle, but Gutenberg's own component
   stylesheet sets text-align on its <textarea> explicitly (and loads after
   ours), which wins over inheriting the card's centered value — only the
   editor's textarea needs this override; the front-end <p> already inherits
   the centered value correctly since it has no such competing rule. */
.umu-blog-card-align-center .umu-blog-card-text-input textarea {
  text-align: center;
}

.umu-blog-card-button-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  background-image: linear-gradient(99deg, #1ac44a 5%, #00aaff 58%, #0080ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}