/* ==========================================================================
   Countdown · Figma 1:846 (1920 × 255, conteúdo 1236)
   ≥1280: texto 423 · relógio 486 · CTA 268, em linha (igual ao Figma)
   1024–1279: [título | relógio] / [infos | CTA]
   ≤1023: empilhado e centralizado (disposição do wireframe, visual do desktop)
   ========================================================================== */

.cn-countdown {
  background: var(--grad-countdown); /* antes var(--bg-dark): igual ao fundo novo do hero */
  padding-block: var(--space-48);
}

.cn-countdown__inner {
  width: min(100% - 2 * var(--gutter), var(--container-cd));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--cd-text-w)) auto auto;
  grid-template-areas:
    "title clock cta"
    "info  clock cta";
  /* Figma: space-between (o gap de 40 do auto layout não vale): sobram ~30px entre as colunas */
  justify-content: space-between;
  align-items: center;
  column-gap: var(--space-24);
  row-gap: var(--space-12);
}
.cn-countdown__title { grid-area: title; color: var(--white); }
.cn-countdown__info  { grid-area: info; }
.cn-countdown__clock { grid-area: clock; }
.cn-countdown__cta   { grid-area: cta; }

/* Título: IBM 300 + segunda linha em Fraunces 700 itálico maiúsculo (1:849) */
.cn-countdown__title em {
  display: block;
  font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-bold);
  font-variation-settings: var(--fraunces-axes);
  text-transform: uppercase;
  color: var(--lilac-150);
}

/* Infos (1:850 / 1:855): ícone 22 + IBM 400 14 */
.cn-countdown__info { display: grid; gap: var(--space-12); }
.cn-countdown__info li {
  display: flex; align-items: center; gap: var(--space-8);
  font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-sans);
  color: var(--white);
}
.cn-countdown__info svg { flex: none; color: var(--lilac-400); }

/* ---------- Relógio: dígitos que rolam (odômetro) ---------- */
.cn-count__num { display: inline-flex; }
.cn-count__slot { display: inline-grid; overflow: clip; }
.cn-count__slot > * { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) {
  .cn-count__slot > .is-in  { animation: cn-digit-in .5s var(--ease-out) both; }
  .cn-count__slot > .is-out { animation: cn-digit-out .5s var(--ease-out) both; }
  .cn-countdown .cn-count__sep { animation: cn-sep-pulse 1s ease-in-out infinite; }
  .cn-countdown.is-offscreen .cn-count__sep { animation-play-state: paused; }
}
@keyframes cn-digit-in  { from { transform: translateY(100%); } }
@keyframes cn-digit-out { to   { transform: translateY(-100%); opacity: 0; } }
@keyframes cn-sep-pulse { 50% { opacity: .35; } }

/* Depois da data: some o relógio, fica o título */
.cn-countdown.is-live .cn-countdown__clock,
.cn-countdown.is-over .cn-countdown__clock,
.cn-countdown.is-over .cn-countdown__cta { display: none; }

/* ---------- 1024–1279 ---------- */
@media (max-width: 1279px) {
  .cn-countdown__inner {
    grid-template-columns: minmax(0, var(--cd-text-w)) auto;
    grid-template-areas:
      "title clock"
      "info  cta";
    row-gap: var(--space-24);
  }
  .cn-countdown__cta { justify-self: center; }
}

/* ---------- ≤1023: empilhado ---------- */
@media (max-width: 1023px) {
  .cn-countdown__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "clock" "info" "cta";
    justify-content: stretch;
    justify-items: center;
    row-gap: var(--space-32);
    text-align: center;
  }
  .cn-countdown__info { gap: var(--space-8); }
  .cn-countdown__info li { justify-content: center; }
}

/* ---------- ≤767: mobile ---------- */
@media (max-width: 767px) {
  .cn-countdown__inner { row-gap: var(--space-28); }
  /* wireframe: "Marque na sua agenda" menor que a chamada */
  .cn-countdown__title { font-size: var(--fs-band-lead-m); line-height: 1.4; }
  .cn-countdown__title em { font-size: var(--fs-countdown-title); line-height: 1.2; }
  .cn-countdown__clock { justify-self: stretch; }
  .cn-countdown__cta { justify-self: stretch; }
  .cn-countdown__cta .cn-btn { width: 100%; }
}