/* ==========================================================================
   LAUNCH COUNTDOWN — the clock that runs until the doors open.
   Depends on: tokens.css, components.css. Loaded by every page that uses it.

   The block is driven by js/countdown.js: it hides itself when no launch date
   is configured, and swaps .countdown__clock for .countdown__live once the
   date is reached.
   ========================================================================== */

.countdown {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-6);
  border: 1.5px dashed var(--c-line-accent);
  border-radius: var(--radius-xl);
  text-align: center;
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(245, 206, 77, .14), transparent 65%),
    rgba(255, 255, 255, .03);
}

.countdown h2 {
  margin: var(--space-2) 0 var(--space-6);
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
}

/* ---------------------------------------------------------------- clock --- */
.countdown__clock {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.countdown__unit {
  flex: 1 1 110px;
  max-width: 150px;
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}

/* Luckiest Guy has no tabular figures, so a narrow digit re-centres the number
   on every tick. Reserving two characters holds it still — same trick as
   the old chart readout used. */
.countdown__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6.5vw, 3.2rem);
  line-height: 1;
  color: var(--c-gold);
  text-shadow: var(--glow-gold);
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.countdown__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* The seconds pane is the only one that moves every tick — let it breathe */
.countdown__unit--seconds .countdown__value {
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
}

.countdown__date {
  margin-top: var(--space-6);
  font-family: var(--font-marker);
  font-size: var(--text-base);
  color: var(--c-muted);
}

.countdown__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--c-muted);
}

/* ----------------------------------------------------------------- live --- */
.countdown__live h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--c-green);
  text-shadow: 0 0 10px rgba(43, 240, 164, .55), 0 0 34px rgba(43, 240, 164, .3);
}

.countdown__live p {
  margin: var(--space-4) auto 0;
  max-width: 460px;
  color: var(--c-muted);
}

.countdown__live .btn {
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 600px) {
  .countdown { padding: var(--space-7) var(--space-4); }

  /* Two per row beats four cramped columns */
  .countdown__unit { flex-basis: calc(50% - var(--space-3)); }
}


/* ==========================================================================
   Hero chip — the same clock, shrunk to one line under the hero badge.
   index.html only. Driven by the same timer as the block above.
   ========================================================================== */
.hero__countdown {
  margin-top: var(--space-3);
}

.hero__countdown a {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: 7px var(--space-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  font-family: var(--font-marker);
  font-size: var(--text-base);
  color: var(--c-muted);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}

.hero__countdown a:hover {
  border-color: var(--c-line-accent);
  color: var(--c-ink);
}

.hero__countdown b {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.hero__countdown [data-countdown-live] {
  border-color: rgba(43, 240, 164, .4);
  background: rgba(43, 240, 164, .08);
  color: var(--c-green);
}