/* ==========================================================================
   cards.css — .wf-card / __title / __body (PLAN §6.2, §11.5d)
   Parchment-deep bg, hairline border, large radius, soft shadow.
   Used by B/C for hotel tiers, schedule items, gift options.
   ========================================================================== */

.wf-card {
  background-color: var(--c-parchment-deep);
  border: 1px solid var(--c-parchment-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
}

.wf-card__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--c-burgundy);
  margin-block-end: var(--space-xs);
  letter-spacing: 0.02em;
}

.wf-card__body {
  color: var(--c-sepia);
}
.wf-card__body > * + * { margin-block-start: var(--space-sm); }

/* Accent modifier — terracotta top edge for highlighted cards. */
.wf-card--accent { border-block-start: 4px solid var(--c-terracotta); }

/* ── Gifts: bank-transfer card ─────────────────────────────────────────────
   Reuses .wf-card; a soft terracotta top edge marks it as the "how to give"
   card. Constrained width so the details read as a tidy block. */
.wf-gifts__bank {
  border-block-start: 4px solid var(--c-terracotta);
  max-width: 32rem;
  margin-inline: auto;
}

/* Value labels (Beneficiary / IBAN / Bank). The trailing ":" is a ::after,
   not inline text, so it can't drift apart from the label if anything wraps. */
.wf-gifts__bank .u-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--c-terracotta-dk);
}
.wf-gifts__bank .u-label::after {
  content: ":";
}

/* Each person's 3 rows (Beneficiary/IBAN/Bank) as a 2-col grid instead of
   3 separate "label: value" lines of inline text: the label column auto-
   sizes to max-content, so regardless of each label's length the values all
   start at the same X — and since both .wf-gifts__person blocks share the
   exact same label text, this also keeps the two people's values aligned
   with each other, not just within one block. */
.wf-gifts__person {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  align-items: baseline;
}

/* Two separate accounts (no joint account): a hairline divider between the
   two .wf-gifts__person blocks reads as "two distinct sets of details"
   rather than one long undifferentiated list. */
.wf-gifts__person + .wf-gifts__person {
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--c-parchment-line);
}

/* Dashed "fill-in" blank — shown until the couple's config.js provides the
   value (populateGifts overwrites it with textContent). A guest never sees an
   empty gap: an on-brand dashed underline invites the couple to complete it. */
.wf-gifts__fill {
  display: inline-block;
  min-width: 12rem;
  min-height: 1.4em;
  vertical-align: bottom;
  border-block-end: 2px dashed var(--c-clay);
}
/* Once populated (non-empty text), drop the dashed rule for a clean value. */
.wf-gifts__fill:not(:empty) {
  min-width: 0;
  border-block-end: 0;
  color: var(--c-sepia);
  font-weight: 600;
}

/* Grid helper for laying out multiple cards (consumed by B/C). */
.wf-card-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .wf-card-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

/* ── Stay: confirmed room rates (Grand Hotel card) ─────────────────────
   A compact inset "rate sheet" inside .wf-card__body: lead-in line, the three
   room rates as a bullet-free <ul> separated by hairlines, then the fine print.
   Lighter parchment on the card's parchment-deep ground so it reads as a note
   pinned to the card, and dense enough that this card (which has NO CTA button)
   still balances its two button-bearing siblings in .wf-card-grid.
   Deliberately all --step--1 / no fixed widths so the longer EN/ES strings
   (e.g. "Habitación individual · 70€/noche") wrap inside the box at 360px. */
.wf-rates {
  background-color: var(--c-parchment);
  border: 1px solid var(--c-parchment-line);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}

/* Lead-in ("writing directly gets you our rate:") — burgundy + 600 so the rate
   sheet has its own little heading without introducing a real heading level. */
.wf-rates__lead {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-burgundy);
  text-wrap: pretty;
}

.wf-rates__list {
  list-style: none;
  margin-block: var(--space-xs) 0;   /* tighter than the card-body stack gap */
  margin-inline: 0;
  padding: 0;                        /* override the base ul indent */
}
.wf-rates__list > li {
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--c-sepia);
  padding-block: var(--space-2xs);
  overflow-wrap: break-word;         /* never push the card wide */
}
.wf-rates__list > li + li {
  border-block-start: 1px solid var(--c-parchment-line);
}

.wf-rates__fine {
  margin-block-start: var(--space-xs);
  line-height: 1.4;
  text-wrap: pretty;
}


/* Food "places" (restaurant recommendations) — bulleted list with the intro
   aligned to the list text. */
.wf-places__intro {
  padding-inline-start: 1.4em;
  margin-block-end: var(--space-sm);
  color: var(--c-sepia-soft);
}
.wf-places {
  list-style: disc;
  margin: 0;
  padding-inline-start: 1.4em;
}
.wf-places > li {
  font-size: var(--step--1);
  color: var(--c-sepia);
  margin-block: var(--space-xs);
  padding-inline-start: 0.2em;
}
.wf-places li::marker { color: var(--c-terracotta); }
.wf-places strong { color: var(--c-burgundy); font-weight: 600; }
.wf-rating { color: var(--c-mustard); white-space: nowrap; font-weight: 600; }

/* Hotel star rating on the #stay accent card. SCOPED modifier on purpose: the
   base .wf-rating (mustard) is left exactly as the #food restaurant ratings
   use it. Measured on this card's --c-parchment-deep ground, mustard is only
   1.79:1 — far too washed out for a 4-star signal — while --c-terracotta, the
   card's own accent token (its 4px top edge), measures 3.98:1, comfortably
   over the 3:1 floor for a decorative aria-hidden glyph and still warm/gold.
   The meaning lives in the adjacent .u-visually-hidden text, not the colour. */
.wf-rating--hotel {
  color: var(--c-terracotta);
  font-size: var(--step--1);
  letter-spacing: 0.08em;          /* a little air between the stars */
  margin-block-end: var(--space-sm);
}

/* Half star: left half filled mustard, right half faded. */
.wf-star-half {
  background: linear-gradient(90deg, var(--c-mustard) 50%, color-mix(in srgb, var(--c-mustard) 28%, transparent) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Extra breathing room above the #food restaurant-list subsection (was an
   inline style; moved to a class so the mobile block below can override it). */
.wf-food__places { margin-block-start: var(--space-2xl); }

/* ── #explore / #food compact mobile layout ──────────────────────────────
   Phones only: a 2-col grid instead of the shared single-column mobile
   default, plus smaller type/padding, so guests scroll less to get through
   these two long card grids. >=48rem keeps the shared .wf-card-grid/.wf-card
   look exactly as everywhere else — this block only ever applies below it. */
@media (max-width: 47.99rem) {
  #explore .wf-card-grid,
  #food .wf-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
  }
  #explore .wf-card,
  #food .wf-card {
    padding: var(--space-sm);
  }
  #explore .wf-card__title,
  #food .wf-card__title {
    font-size: var(--step-0);
    margin-block-end: var(--space-2xs);
  }
  #explore .wf-card__body,
  #food .wf-card__body {
    font-size: var(--step--1);
  }
  #explore .wf-card__body > * + *,
  #food .wf-card__body > * + * {
    margin-block-start: var(--space-2xs);
  }
  .wf-food__places {
    margin-block-start: var(--space-lg);
  }

  /* #stay hotel cards: the ★★★★ rating sits on the same line as the hotel
     name instead of stacked below it, like a compact listing header. The
     title and rating are siblings of .wf-card (not .wf-card__body), so the
     card itself becomes the flex row; .wf-card__body gets flex-basis:100%
     to drop to its own full-width row below. Desktop/tablet (>=48rem) keeps
     the original stacked layout untouched. */
  #stay .wf-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-xs);
  }
  #stay .wf-card__title {
    margin-block-end: 0;
  }
  #stay .wf-rating--hotel {
    margin-block-end: 0;
  }
  #stay .wf-card__body {
    flex-basis: 100%;
  }
}