/* Greybox homepage countdown — upcoming-title timer strip below the hero.
 * Consumes Phase 1 tokens (css/tokens.css). One centered cinematic card
 * sitting below the hero with a calm positive gap (no overlap), so hero →
 * countdown → shelves share a single even rhythm. Poster-hued ambient
 * background, eyebrow, TMDB title artwork, date, live units, details
 * button — all centered. Amber accent used sparingly. */

#home-countdown {
  position: relative;
  width: 100%;
  max-width: var(--gx-max);
  /* First real child of <main>: main::before's hero fade-dissolve is
   * net-zero in layout, so this margin IS the visual gap below the hero —
   * a calm positive gap, no overlap. The dissolve keeps covering the hero's
   * bottom edge exactly like before the strip existed (no hard line).
   * Bottom margin + first-shelf margin give shelves one even gap; while
   * visible, body.has-countdown removes the shelf tuck below (see bottom)
   * so the two never stack into an overlap or a double gap. */
  margin: 1.5rem auto 1.25rem;
  padding-inline: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
  z-index: 1;
}

#home-countdown.hidden { display: none; }

/* While the strip is up, shelves start in normal flow (no tuck): the
 * countdown's own bottom margin is the single gap source. Hidden strip →
 * the classic hero tuck returns untouched. */
body.has-countdown #home-sections:not(:empty) { margin-top: 0; }

.gx-cd-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  border-radius: 1.1rem;
  overflow: hidden;
}

.gx-cd-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  /* Theme artwork, kept legible: a light blur that preserves the still's
   * texture and hues (heavy blurs turned posters to mud), settled by the
   * shade veil below. Backdrop preferred, poster as fallback (see
   * countdown.js) — both resolve through TMDB. */
  filter: blur(10px) saturate(1.3) brightness(0.55);
  transform: scale(1.08);
}

.gx-cd-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(16px, 4vw, 48px);
  right: clamp(16px, 4vw, 48px);
  border-radius: 1.1rem;
  background: linear-gradient(to bottom, rgba(27, 30, 35, 0.66) 0%, rgba(27, 30, 35, 0.58) 40%, rgba(27, 30, 35, 0.78) 100%);
  pointer-events: none;
}

.gx-cd-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.6rem 1.2rem 1.4rem;
  background: rgba(27, 30, 35, 0.42);
  border: 1px solid var(--gx-border);
  border-radius: 1.1rem;
  box-shadow: var(--gx-shadow-soft);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.gx-cd-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gx-accent-strong);
}

.gx-cd-title {
  margin: 0;
  /* Fixed stage for the title: text paints instantly, the TMDB logo swaps
   * into the same box when it arrives — zero layout shift either way. */
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gx-text);
  text-wrap: balance;
}

.gx-cd-logo {
  max-height: 4.2rem;
  max-width: min(26rem, 82%);
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
}

.gx-cd-date {
  margin: 0;
  font-size: 0.8rem;
  color: var(--gx-text-dim);
}

.gx-cd-units {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.gx-cd-unit {
  min-width: 3.6rem;
  text-align: center;
  padding: 0.4rem 0.6rem 0.35rem;
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--gx-border-faint);
}

.gx-cd-num {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gx-text);
  line-height: 1.2;
}

.gx-cd-lab {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gx-text-faint);
}

.gx-cd-out {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gx-accent-strong);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--gx-accent-soft);
  border: 1px solid var(--gx-accent-border);
}

.gx-cd-info { margin-top: 0.35rem; }

@media (max-width: 640px) {
  #home-countdown { margin-top: 1rem; }
  .gx-cd-inner { padding: 1.25rem 0.9rem 1.1rem; }
  .gx-cd-title { min-height: 3rem; }
  .gx-cd-logo { max-height: 3.4rem; }
  .gx-cd-unit { min-width: 3.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gx-cd-bg img { transform: none; }
}