/* ==========================================================================
   Teaser da Programação · versão A4 (arquivo de wireframes vUVXnbuRbYHpxsceFLdUTR)
   Desktop 50:45 (1440: padding 80, texto 460 + coluna flexível, gap 72)
   Mobile 50:121 (box dos 3 dias em largura total; mesas e palestras lado a lado)
   Componentes: "Stat box" 50:18 · "Destaque dia" 50:44.
   Estrutura/medidas do wireframe, visual da página. Fundo lilás claro com
   gradiente (revisão 08/10/2026), para o Ao vivo escuro, logo acima, prevalecer.
   ========================================================================== */

.cn-teaser-prog {
  position: relative;
  padding-block: var(--teaser-pad);
  background: var(--grad-teaser); color: var(--text-body);
  overflow: hidden;
}
/* silhueta de borboleta bem suave no canto (mesmo símbolo do hero) */
.cn-teaser-prog__shape { position: absolute; z-index: 0; right: -140px; bottom: -110px; width: 420px; height: 367px; color: var(--lilac-200); opacity: .55; rotate: -10deg; pointer-events: none; }
.cn-teaser-prog__inner { position: relative; z-index: 1; }

.cn-teaser-prog__inner { display: grid; grid-template-columns: minmax(0, var(--teaser-text-w)) minmax(0, 1fr); gap: var(--teaser-gap); align-items: center; }

/* ---------- Texto (50:47) ---------- */
.cn-teaser-prog__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); }
.cn-teaser-prog__lead { font: var(--fw-regular) var(--fs-body-l)/var(--lh-body-l) var(--font-sans); color: var(--text-body); }
.cn-teaser-prog__buttons { display: flex; flex-wrap: wrap; gap: var(--space-12); padding-top: var(--space-8); }

/* ---------- Números (50:60 / Stat box 50:18) ---------- */
.cn-teaser-prog__side { display: flex; flex-direction: column; gap: var(--space-40); min-width: 0; }
.cn-teaser-prog__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.cn-stat {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--stat-bg); color: var(--purple-900);
  border: 1px solid var(--stat-border); box-shadow: var(--stat-shadow);
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.cn-stat__num {
  display: block; transform-origin: left bottom;
  font: var(--fw-semibold) var(--fs-stat)/1 var(--font-sans); font-variant-numeric: tabular-nums;
  transition: transform .3s var(--ease-out);
}
.cn-stat__txt { display: flex; flex-direction: column; gap: var(--space-4); }
.cn-stat__label { font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-sans); }
.cn-stat__detail { font: var(--fw-regular) var(--fs-caption)/1.3 var(--font-sans); color: var(--purple-700); }
.cn-stat__more { display: none; } /* complemento do texto só no box largo do mobile */

@media (hover: hover) and (pointer: fine) {
  .cn-stat:hover { transform: translateY(-6px); background: var(--stat-bg-hover); box-shadow: var(--stat-shadow-hover); }
  .cn-stat:hover .cn-stat__num { transform: scale(1.06); }
}

/* ---------- Destaque de cada dia (50:77 / Destaque dia 50:44) ---------- */
.cn-teaser-prog__days { display: flex; flex-direction: column; gap: var(--space-12); }
.cn-teaser-prog__label { color: var(--text-muted); }
.cn-teaser-prog__list { border-bottom: 1px solid var(--line-on-light); }
.cn-dia {
  display: flex; align-items: center; gap: var(--space-20);
  min-height: 80px; padding-block: var(--space-16);
  border-top: 1px solid var(--line-on-light); border-radius: var(--radius-sm);
  transition: background-color var(--dur-base), box-shadow var(--dur-base);
}
/* o fundo do hover se estende 12px para os lados com box-shadow (não altera o layout nem transborda) */
.cn-dia:hover, .cn-dia:focus-visible {
  --hover-bg: color-mix(in srgb, var(--white) 70%, transparent);
  background: var(--hover-bg); box-shadow: 0 0 0 0 var(--hover-bg), -12px 0 0 0 var(--hover-bg), 12px 0 0 0 var(--hover-bg);
}
.cn-dia__date { flex: none; width: 92px; display: flex; flex-direction: column; gap: var(--space-4); font-weight: var(--fw-semibold); color: var(--purple-900); }
.cn-dia__num { font-size: var(--fs-dia); line-height: 1; }
.cn-dia__week { white-space: nowrap; font-size: var(--fs-week); letter-spacing: var(--ls-label); color: var(--text-muted); }
.cn-dia__avatar {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
  border: 2px solid var(--white); border-radius: 50%; background: var(--lilac-200); color: var(--purple-700); box-shadow: 0 0 0 1px var(--lilac-400);
}
.cn-dia__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cn-dia.is-tbd .cn-dia__avatar { border: 1.5px dashed var(--lilac-500); background: transparent; box-shadow: none; }
.cn-dia__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cn-dia__name { font: var(--fw-semibold) var(--fs-body-l)/var(--lh-body) var(--font-sans); color: var(--purple-900); }
.cn-dia.is-tbd .cn-dia__name { color: var(--text-muted); }
.cn-dia__role { font: var(--fw-regular) var(--fs-small)/1.35 var(--font-sans); color: var(--text-muted); }
.cn-dia__arrow { flex: none; color: var(--purple-700); transition: transform var(--dur-base) var(--ease-out); }
.cn-dia:hover .cn-dia__arrow, .cn-dia:focus-visible .cn-dia__arrow { transform: translateX(4px); }

/* ---------- ≤1023: texto em cima, números e lista embaixo ---------- */
@media (max-width: 1023px) {
  .cn-teaser-prog__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
}

/* ---------- ≤767: frame 50:121 ---------- */
@media (max-width: 767px) {
  .cn-teaser-prog { padding-block: var(--space-64); }
  /* ordem do frame 50:121: textos → números → lista → botões (o bloco de texto "abre" no grid) */
  .cn-teaser-prog__inner { gap: var(--space-20); }
  .cn-teaser-prog__text { display: contents; }
  .cn-teaser-prog__text > .cn-chip { justify-self: start; }
  .cn-teaser-prog__side { order: 2; margin-top: var(--space-4); }
  .cn-teaser-prog__lead { font-size: var(--fs-body); line-height: 1.5; }
  .cn-teaser-prog__buttons { order: 3; flex-direction: column; padding-top: var(--space-8); }
  .cn-teaser-prog__buttons .cn-btn { width: 100%; }

  .cn-teaser-prog__side { gap: var(--space-28); }
  .cn-teaser-prog__stats { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .cn-stat { padding: var(--space-14); border-radius: var(--radius-tile); }
  .cn-stat__num { font-size: var(--fs-stat-s); }
  .cn-stat__label { font-size: var(--fs-nav); }
  /* box dos 3 dias: largura total, número à esquerda, divisória, texto à direita */
  .cn-stat--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); }
  .cn-stat--wide .cn-stat__num { font-size: var(--fs-stat-m); padding-right: var(--space-16); border-right: 1px solid var(--stat-border); }
  .cn-stat--wide .cn-stat__label { font-size: var(--fs-body); }
  .cn-stat--wide .cn-stat__detail { font-size: var(--fs-small); }
  .cn-stat__more { display: inline; }
  /* toque: "press" leve */
  .cn-stat { -webkit-tap-highlight-color: transparent; }
  .cn-stat:active { transform: scale(.98); }

  .cn-dia { gap: var(--space-14); }
  .cn-dia__date { width: 64px; }
  .cn-dia__num { font-size: var(--fs-dia-m); }
  .cn-dia__week { letter-spacing: .08em; }
  .cn-dia__avatar { width: 40px; height: 40px; }
  .cn-dia__name { font-size: var(--fs-body); }
  .cn-dia__role { display: none; }
}

@media (max-width: 767px) {
  .cn-teaser-prog__shape { width: 240px; height: 210px; right: -60px; bottom: -40px; }
}