/*
 * Mother's Day Prayer Card — Direction A: Pressed Botanical
 * Heirloom / editorial register. Imported by both creator page and
 * server-rendered recipient page. Do not duplicate.
 */

:root {
  --card-base: #FAF6EE;
  --card-sage: #8FA68C;
  --card-taupe: #C8B59E;
  --card-rose: #D4A5A0;
  --card-ink: #3A352F;
  --card-mark: #8a7d6b;
}

/* Card container — 4:5 default aspect, but allowed to grow taller when
   content needs more room (long prayer + scripture + mark). overflow:hidden
   removed because it clipped the soulspace.co mark on narrow phones. The
   botanical SVGs have explicit widths + corner anchoring so they never
   escape the card bounds even without clipping. */
.prayer-card {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(143, 166, 140, 0.16) 0%, transparent 38%),
    radial-gradient(ellipse at 88% 92%, rgba(212, 165, 160, 0.14) 0%, transparent 36%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 252, 246, 1) 0%, rgba(250, 246, 238, 1) 80%);
  color: var(--card-ink);
  font-family: 'Castoro', Georgia, serif;
  box-shadow:
    0 1px 2px rgba(58, 53, 47, 0.05),
    0 8px 28px rgba(58, 53, 47, 0.10),
    0 24px 48px rgba(58, 53, 47, 0.08);
  border-radius: 3px;
}

/* Subtle paper grain + warm vignette */
.prayer-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(58, 53, 47, 0.022) 1px, transparent 1px),
    radial-gradient(rgba(58, 53, 47, 0.016) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  pointer-events: none;
  z-index: 1;
}

.prayer-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(58, 53, 47, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Botanical decorations */
.prayer-card .botanical {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.prayer-card .botanical--top-left {
  top: 0;
  left: 0;
  width: 38%;
  max-width: 240px;
  transform-origin: top left;
  opacity: 0.92;
}

.prayer-card .botanical--bottom-right {
  bottom: 0;
  right: 0;
  width: 42%;
  max-width: 260px;
  transform-origin: bottom right;
  opacity: 0.92;
}

.prayer-card .botanical--top-right {
  top: 0;
  right: 4%;
  width: 14%;
  max-width: 80px;
  opacity: 0.55;
  z-index: 2;
}

/* Flourish divider between message and scripture */
.prayer-card .flourish {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 16px;
  margin: 7% 0;
  opacity: 0.9;
}

/* Inner content column. Uses min-height: 100% (not height: 100%) so content
   can push the card taller when needed — without this, Safari enforces the
   aspect-ratio strictly and clips the bottom mark; Brave lets content escape
   the card's painted background. min-height keeps the 4:5 visual identity
   for short prayers but allows growth for longer ones. */
.prayer-card__inner {
  position: relative;
  z-index: 3;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10% 11% 5%;
  box-sizing: border-box;
}

/* Headline: For [Mom's Name] */
.prayer-card__headline {
  font-weight: 400;
  margin: 0;
  color: var(--card-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}

.prayer-card__headline-prefix {
  display: block;
  font-family: 'Castoro', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.78rem, 2.4cqw, 1.05rem);
  color: #6E6256;              /* warm taupe — darker for readability */
  letter-spacing: 0.18em;
  text-transform: lowercase;
  font-weight: 500;
  margin: 0 0 0.2em 0;
  position: relative;
}

/* Decorative dots beside the prefix */
.prayer-card__headline-prefix::before,
.prayer-card__headline-prefix::after {
  content: '·';
  display: inline-block;
  margin: 0 0.6em;
  color: var(--card-sage);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 1.2em;
  vertical-align: middle;
}

.prayer-card__headline-name {
  display: inline-block;
  position: relative;
  padding: 0 0.5em 0.1em;       /* horizontal pad gives Pinyon swashes room */
  font-family: 'Pinyon Script', 'Castoro', cursive;
  font-weight: 400;
  font-size: clamp(2.4rem, 10cqw, 5rem);
  line-height: 1.05;
  color: #5a4a36;
  letter-spacing: 0;
}

.prayer-card__headline-name::after {
  content: '';
  position: absolute;
  bottom: -0.05em;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--card-rose) 20%, var(--card-rose) 80%, transparent);
  opacity: 0.8;
}

/* Message — the prayer is the main content of the card; carries weight */
.prayer-card__message {
  font-family: 'Castoro', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 3.8cqw, 1.6rem);
  line-height: 1.55;
  color: #2A2520;
  margin: 7% 0 0 0;
  max-width: 32ch;
  hyphens: auto;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

/* Auto-scale message font down when prayer is long.
   Set via JS: cardEl.dataset.msgLen = 'short' | 'medium' | 'long' | 'verylong' */
.prayer-card[data-msg-len="medium"] .prayer-card__message {
  font-size: clamp(0.95rem, 2.9cqw, 1.25rem);
  max-width: 36ch;
}
.prayer-card[data-msg-len="long"] .prayer-card__message {
  font-size: clamp(0.85rem, 2.5cqw, 1.1rem);
  line-height: 1.5;
  max-width: 40ch;
}
.prayer-card[data-msg-len="verylong"] .prayer-card__message {
  font-size: clamp(0.78rem, 2.2cqw, 1rem);
  line-height: 1.45;
  max-width: 44ch;
}

/* Scripture body — supporting role to the prayer above. Regular weight, smaller. */
.prayer-card__scripture-text {
  font-family: 'Castoro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(0.82rem, 2.4cqw, 1.05rem);
  line-height: 1.55;
  color: #4A4239;
  margin: 0;
  max-width: 30ch;
  font-style: normal;
}

/* Scripture reference (small caps) — darker sage */
.prayer-card__scripture-ref {
  font-family: 'Tenor Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(0.62rem, 1.6cqw, 0.82rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #4F6B4D;             /* darker sage for AA contrast */
  margin-top: 1.5em;
  font-weight: 500;
}

/* No-scripture variant: hide scripture block (kept for legacy) */
.prayer-card[data-scripture="none"] .flourish,
.prayer-card[data-scripture="none"] .prayer-card__scripture-text,
.prayer-card[data-scripture="none"] .prayer-card__scripture-ref {
  display: none;
}

/* Soulspace mark — pinned to the bottom of the flex inner container via
   margin-top:auto (prayer + scripture stay centered above). Sans-serif so
   the period in "soulspace.co" reads clearly. */
.prayer-card__mark {
  margin: auto 0 0 0;             /* push to bottom of flex inner */
  padding-top: 1.4em;             /* breathing room above */
  text-align: center;
  z-index: 3;
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  font-size: clamp(0.62rem, 1.4cqw, 0.78rem);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: #9A8E80;                 /* lighter taupe — recedes nicely */
  opacity: 1;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}
.prayer-card__mark .heart {
  display: inline-block;
  color: currentColor;            /* same color as the text */
  font-style: normal;
}

/* Container queries for responsive type scaling */
.prayer-card {
  container-type: inline-size;
  container-name: card;
}

/* On narrow cards (mobile recipient view), shrink the botanicals and tighten
   padding so the prayer text doesn't run under the bouquet illustration. */
@container card (max-width: 420px) {
  .prayer-card .botanical--top-left {
    width: 30%;
    max-width: 130px;
    opacity: 0.75;
  }
  .prayer-card .botanical--bottom-right {
    width: 32%;
    max-width: 140px;
    opacity: 0.75;
  }
  .prayer-card .botanical--top-right {
    width: 12%;
    opacity: 0.4;
  }
  .prayer-card__inner {
    padding: 10% 8% 11%;          /* extra bottom padding so the mark isn't clipped */
  }
  .prayer-card__message {
    max-width: 100%;
  }
  .prayer-card__scripture-text {
    max-width: 100%;
  }
  .prayer-card__mark {
    padding-top: 1em;             /* tighter on mobile */
  }
}

/* Empty state hints (creator preview) */
.prayer-card[data-empty="true"] .prayer-card__headline-name::before {
  content: 'Her Name';
  color: var(--card-taupe);
  opacity: 0.5;
  font-style: italic;
}

.prayer-card[data-empty="true"] .prayer-card__message:empty::before {
  content: 'Your message will appear here…';
  color: var(--card-taupe);
  opacity: 0.5;
}

/* Print-specific size lock for image export */
.prayer-card--export {
  width: 1080px;
  max-width: 1080px;
  aspect-ratio: 4 / 5;
  box-shadow: none;
  border-radius: 0;
}

/* Tighter padding + larger type for the downloaded image so older readers
   can read it comfortably. Override base sizes only on export. */
.prayer-card--export .prayer-card__inner {
  padding: 7% 8% 8%;
}
.prayer-card--export .prayer-card__headline-prefix {
  font-size: 1.2rem;
  letter-spacing: 0.18em;
}
.prayer-card--export .prayer-card__headline-name {
  font-size: 6.5rem;
}
.prayer-card--export .prayer-card__message {
  font-size: 2rem;
  line-height: 1.5;
  max-width: 34ch;
  font-weight: 500;
}
.prayer-card--export[data-msg-len="medium"] .prayer-card__message {
  font-size: 1.7rem;
  max-width: 38ch;
}
.prayer-card--export[data-msg-len="long"] .prayer-card__message {
  font-size: 1.45rem;
  max-width: 42ch;
}
.prayer-card--export[data-msg-len="verylong"] .prayer-card__message {
  font-size: 1.25rem;
  line-height: 1.45;
  max-width: 46ch;
}
.prayer-card--export .prayer-card__scripture-text {
  font-size: 1.3rem;
  max-width: 34ch;
  font-weight: 400;
}
.prayer-card--export .prayer-card__scripture-ref {
  font-size: 0.95rem;
  letter-spacing: 0.3em;
}
.prayer-card--export .prayer-card__mark {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.prayer-card--export .flourish {
  width: 96px;
  height: 24px;
  margin: 5% 0;
}

.prayer-card--export-print {
  width: 2400px;
  max-width: 2400px;
}