/* Hallmark · genre: editorial-moderno · macrostructure: Long Document · theme: Alvorada (branco + âmbar elétrico) · fonts: Fraunces + Switzer · enrichment: none · nav: topo-fixo · footer: pager · pre-emit: P4 H5 E4 S4 R4 V4 · contrast: pass · mobile: pass · tokens: pass */

/* layout-01 · “Diário” — a leitura matinal como página de revista moderna.
   Moldura de 74rem sem deserto lateral: cabeçalho e passagem ocupam a moldura
   inteira; a coluna de leitura fica centrada na medida e os momentos fortes
   (pull-quote, banda escura da prática, card do vídeo) sangram mais largos
   por cima dela. A passagem é o espetáculo: Fraunces ROMANA em corpo display
   com aspas penduradas em âmbar vivo. Assinatura da página = régua-gradiente
   (--grad-amber) na data, reprisada uma única vez no fio da frase-chave.
   Efeitos: entrada orquestrada do herói (stagger por “hold” nos keyframes —
   sob reduced-motion o base zera a duração e tudo aparece instantâneo, sem
   janela invisível de animation-delay) + data-rev nas seções seguintes.
   Identidade estrutural: nenhum token da série é sobrescrito.
   Pós-crítica: a passagem (--text-display, mín 2.375rem/máx 4.75rem) domina o
   título (--d1-titulo-size, mín 1.75rem/máx 2.9rem) e a frase-chave
   (--d1-frase-size, mín 1.5rem/máx 2.375rem) em TODO viewport — os três
   clamps nunca se cruzam. */

/* ---------- Tokens do layout ---------- */

body.layout-01 {
  --d1-titulo-size: clamp(1.75rem, 3vw + 0.9rem, 2.9rem);
  --d1-frase-size: clamp(1.5rem, 2vw + 1rem, 2.375rem);
  --d1-passagem-leading: 1.16;
  --d1-banda-muted: oklch(76% 0.02 70); /* texto apagado sobre --color-band (≈8:1, AA) */
  --d1-larg-frase: 52rem;  /* a pull-quote sangra além da coluna de leitura */
  --d1-larg-curios: 56rem; /* grade das curiosidades */
  --d1-regua-larg: 4.5rem;
  --d1-regua-alt: 4px;
  --d1-recuo-aspas: 0.55ch;
}

/* ---------- Moldura (sem deserto lateral) ---------- */

.diario__cabecalho,
.sec-passagem,
.sec-curiosidades,
.sec-aprofundamento,
.d1-anuncio,
.d1-rodape {
  max-width: var(--largura-max);
  padding-inline: var(--pad-lateral);
  margin-inline: auto;
}

/* Seções de leitura: grade de 3 trilhas — a trilha central é a medida do
   corpo; a frase-chave escapa por cima das trilhas laterais. */
.sec-mensagem,
.sec-frases,
.sec-buscar__mold {
  max-width: var(--largura-max);
  padding-inline: var(--pad-lateral);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--measure)) 1fr;
}

.sec-mensagem > *,
.sec-frases > *,
.sec-buscar__mold > * {
  grid-column: 2;
  min-width: 0;
}

/* ---------- Entrada orquestrada do herói ----------
   Stagger por “hold” (0%→N% parado) em vez de animation-delay: quando o base
   zera as durações em prefers-reduced-motion, tudo aparece de imediato. */

@keyframes d1-regua-entra {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes d1-entra-0 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes d1-entra-1 { 0%, 20% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes d1-entra-2 { 0%, 33% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes d1-entra-3 { 0%, 43% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes d1-entra-4 { 0%, 50% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }

/* ---------- 1 · Cabeçalho generoso ---------- */

.diario__cabecalho {
  padding-top: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.diario__assinatura {
  width: var(--d1-regua-larg);
  height: var(--d1-regua-alt);
  border-radius: 999px;
  background: var(--grad-amber);
  transform-origin: left center;
  animation: d1-regua-entra var(--dur-3) var(--ease-out) both;
}

.diario__data {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-accent-text);
  animation: d1-entra-0 var(--dur-3) var(--ease-out) both;
}

.diario__titulo {
  margin-top: var(--space-lg);
  font-family: var(--font-serif);
  font-style: normal; /* romana — itálico em display é vetado (38a) */
  font-size: var(--d1-titulo-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--leading-display);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  animation: d1-entra-1 calc(var(--dur-3) * 1.25) var(--ease-out) both;
}

.diario__tema {
  margin-top: var(--space-md);
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-neutral);
  overflow-wrap: anywhere;
  min-width: 0;
  animation: d1-entra-2 calc(var(--dur-3) * 1.5) var(--ease-out) both;
}

/* ---------- Cabeças de seção inline (small caps + quadradinho âmbar) ---------- */

.diario__cabeca {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-neutral);
  overflow-wrap: anywhere;
  min-width: 0;
}

.diario__cabeca::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 1px;
  background: var(--color-accent);
  margin-right: 0.6em;
}

/* ---------- 2 · Passagem — o espetáculo tipográfico ---------- */

.sec-passagem {
  margin-top: clamp(var(--space-2xl), 6vw, var(--space-3xl));
}

.passagem__texto {
  font-family: var(--font-serif);
  font-style: normal; /* serifa ROMANA — itálico em display é vetado (38a) */
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--d1-passagem-leading);
  color: var(--color-ink);
  text-indent: calc(-1 * var(--d1-recuo-aspas)); /* aspa de abertura pendurada */
  overflow-wrap: anywhere;
  min-width: 0;
  animation: d1-entra-3 calc(var(--dur-3) * 1.75) var(--ease-out) both;
}

.passagem__texto::before {
  content: open-quote;
  color: var(--color-accent); /* âmbar vivo: glifo grande, papel decorativo */
  font-weight: 900;
}

.passagem__texto::after {
  content: close-quote;
  color: var(--color-accent);
  font-weight: 900;
}

.passagem__ref {
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  animation: d1-entra-4 calc(var(--dur-3) * 2) var(--ease-out) both;
}

.passagem__ref::before {
  /* marcador âmbar da referência */
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 1px;
  background: var(--color-accent);
  margin-right: 0.6em;
}

.passagem__versao {
  font-weight: 400;
  color: var(--color-neutral);
}

.passagem__versao::before {
  content: " \00B7 ";
}

/* ---------- 3 · Mensagem (coluna centrada; a frase-chave sangra) ---------- */

.sec-mensagem {
  margin-top: clamp(var(--space-2xl), 7vw, var(--space-4xl));
}

.mensagem__paragrafo {
  margin-top: var(--space-lg);
  overflow-wrap: anywhere;
}

/* lede: o primeiro parágrafo abre um degrau acima do corpo */
.diario__cabeca + .mensagem__paragrafo {
  margin-top: var(--space-xl);
  font-size: var(--text-md);
  line-height: 1.6;
}

.sec-mensagem > .frase-chave {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, var(--d1-larg-frase));
  margin-block: var(--space-2xl);
}

.frase-chave::before {
  /* reprise da régua-gradiente; estica no hover, convidando ao gesto de
     compartilhar logo abaixo */
  content: "";
  display: block;
  width: var(--d1-regua-larg);
  height: var(--d1-regua-alt);
  border-radius: 999px;
  background: var(--grad-amber);
  margin-bottom: var(--space-lg);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}

.frase-chave:hover::before {
  transform: scaleX(1.6);
}

.frase-chave__texto {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--d1-frase-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-ink);
  text-indent: calc(-1 * var(--d1-recuo-aspas));
  overflow-wrap: anywhere;
  min-width: 0;
}

.frase-chave__texto::before {
  content: open-quote;
  color: var(--color-accent);
  font-weight: 900;
}

.frase-chave__texto::after {
  content: close-quote;
  color: var(--color-accent);
  font-weight: 900;
}

.frase-chave__acao {
  margin-top: var(--space-md);
}

/* ---------- 4 · Curiosidades — grade que preenche a moldura ---------- */

.sec-curiosidades {
  margin-top: var(--space-3xl);
}

.sec-curiosidades > .diario__cabeca,
.curiosidades {
  max-width: var(--d1-larg-curios);
  margin-inline: auto;
}

.curiosidades {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
}

@media (min-width: 768px) {
  .curiosidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.curiosidades__item {
  position: relative;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
  overflow-wrap: anywhere;
  min-width: 0;
}

.curiosidades__item::before {
  /* mini-régua âmbar assentada sobre o fio */
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.25rem;
  height: 3px;
  border-radius: 999px;
  background: var(--color-accent);
}

/* ---------- 5 · Frases importantes ---------- */

.sec-frases {
  margin-top: var(--space-3xl);
}

.frases {
  margin-top: var(--space-lg);
}

.frases__item + .frases__item {
  margin-top: var(--space-xl);
}

.frases__texto {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-ink);
  text-indent: calc(-1 * var(--d1-recuo-aspas));
  overflow-wrap: anywhere;
  min-width: 0;
}

.frases__texto::before {
  content: open-quote;
  color: var(--color-accent);
  font-weight: 700;
}

.frases__texto::after {
  content: close-quote;
  color: var(--color-accent);
  font-weight: 700;
}

.diario__nota {
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  color: var(--color-neutral);
}

/* ---------- 6 · Para buscar hoje — banda escura full-bleed ---------- */

.sec-buscar {
  margin-top: var(--space-4xl);
  background: var(--color-band);
  color: var(--color-band-ink);
}

.sec-buscar__mold {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.sec-buscar .diario__cabeca {
  color: var(--color-band-ink); /* neutral não passa AA sobre a banda */
}

.sec-buscar .checklist {
  margin-top: var(--space-lg);
}

/* Checklist sobre a banda: mesmos gestos do base, tinta invertida */
.sec-buscar .checklist__caixa {
  border-color: var(--d1-banda-muted);
  background: transparent;
}

.sec-buscar .checklist__label:hover .checklist__caixa {
  border-color: var(--color-band-ink);
}

.sec-buscar .checklist__caixa:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.sec-buscar .checklist__texto {
  color: var(--color-band-ink);
}

.sec-buscar .checklist__caixa:checked ~ .checklist__texto {
  color: var(--d1-banda-muted);
}

.sec-buscar :focus-visible {
  outline-color: var(--color-accent); /* --color-focus não passa 3:1 sobre a banda */
}

/* ---------- 7 e 9 · Patrocinados (slot vazio não ocupa espaço) ---------- */

.d1-anuncio {
  margin-top: var(--space-2xl);
}

.d1-anuncio > .ad-card {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ---------- 8 · Aprofundamento — card do vídeo na largura da moldura ---------- */

.sec-aprofundamento {
  margin-top: var(--space-3xl);
}

.sec-aprofundamento .video-card {
  margin-top: var(--space-lg);
}

@media (min-width: 1024px) {
  body.layout-01 .video-card {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: var(--space-xl) var(--space-2xl);
  }
}

/* ---------- 10 · Pager ---------- */

.d1-rodape {
  margin-top: var(--space-4xl);
  padding-bottom: var(--space-3xl);
}