/* ==========================================================================
   countdown.css — .wf-countdown (PLAN §6.2, BRIEF §3/§5/§6)
   A warm, elegant countdown to the wedding: eyebrow + title, a 4-cell number
   grid (days/hours/mins/secs), a static "X days to go" fallback, two CTAs.
   Mobile-first. Terracotta/parchment palette via BRIEF tokens only.
   CTAs use the shared .wf-btn (>=44px tap target). Reduced motion respected:
   the JS stops ticking; CSS also removes the subtle tick transition.
   New classes defined here (B/C consume, never redefine): .wf-countdown,
   .wf-countdown__title, .wf-countdown__grid, .wf-countdown__cell,
   .wf-countdown__num, .wf-countdown__label, .wf-countdown__static,
   .wf-countdown__cta.
   ========================================================================== */

.wf-countdown {
  text-align: center;
}

/* Section heading — one big letter-spaced small-caps serif title, echoing the
   card (BRIEF §4). Bumped to the page-heading step so it reads as a statement. */
.wf-countdown__title {
  font-family: var(--font-serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--step-3);
  color: var(--c-burgundy);
  margin-block: var(--space-2xs) var(--space-lg);
  text-wrap: balance;
}

/* Number grid — 4 cells, but on narrow phones the seconds cell is dropped
   (it's decorative/aria-hidden; the accessible day-count sentence is
   unaffected) so the remaining 3 fit one row at a compact size instead of
   wrapping to a second line. From small tablets up, all 4 show at full size. */
.wf-countdown__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  max-inline-size: 26rem;
  margin-inline: auto;
}
.wf-countdown__cell:last-child { display: none; }
@media (min-width: 34rem) {
  .wf-countdown__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-inline-size: 44rem;
    gap: var(--space-md);
  }
  .wf-countdown__cell:last-child { display: flex; }
}

/* A single unit cell — warm parchment card with a hairline border + soft shadow.
   Compact padding on mobile (3-up row); roomier from small tablets up. */
.wf-countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-sm);
  padding-inline: var(--space-xs);
  background: var(--c-parchment-deep);
  border: 1px solid var(--c-parchment-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 34rem) {
  .wf-countdown__cell { padding-block: var(--space-md); }
}

/* The big number — terracotta, tabular so digits don't jitter as they tick.
   Smaller step on mobile (3-up row), full size from small tablets up. */
.wf-countdown__num {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: var(--c-terracotta);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@media (min-width: 34rem) {
  .wf-countdown__num { font-size: var(--step-3); }
}

/* Unit label — muted small-caps under the number. */
.wf-countdown__label {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-serif);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  font-size: var(--step--1);
  color: var(--c-sepia-soft);
}

/* Static "X days to go" line — shown when JS is off or reduced-motion is set
   (the grid is hidden by JS in the reduced-motion case). */
.wf-countdown__static {
  margin-block-start: var(--space-lg);
  font-family: var(--font-serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  font-size: var(--step-1);
  color: var(--c-olive);
}

/* CTA row — stacked on mobile (full-bleed-ish), inline from small screens up.
   Buttons inherit the shared 44px tap target from .wf-btn. */
.wf-countdown__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}
.wf-countdown__cta .wf-btn {
  inline-size: min(100%, 22rem);
}
@media (min-width: 30rem) {
  .wf-countdown__cta {
    flex-direction: row;
    justify-content: center;
  }
  .wf-countdown__cta .wf-btn {
    inline-size: auto;
  }
}

/* Reduced motion: no tick transition on the numbers (JS also stops ticking). */
@media (prefers-reduced-motion: reduce) {
  .wf-countdown__num { transition: none; }
}