/* ==========================================================================
   layout.css — grid assimétrico, sangria, seções e marcas de registro
   Sem contêiner central. Os blocos de tinta encostam nas bordas da tela.
   ========================================================================== */

.secao {
  position: relative;
  padding-inline: var(--pad-pagina);
  padding-block: var(--gap-secao);
}

/* Ritmo: a primeira seção depois do hero não precisa do respiro cheio
   em cima, senão o hero parece órfão. */
.secao--colada {
  padding-block-start: clamp(2.5rem, 9vw, 6rem);
}

.secao--sem-pad-baixo {
  padding-block-end: 0;
}

/* ⚠️ FORA DE USO desde 13/08/2026. A cassação usa `.secao.tinta-cheia` com o
   fio de 3px, que é o gesto do resto do site; esta variante veio com a
   repaginada não aprovada. Ver ESTADO-ATUAL.md.

   Seção inteira em tinta cheia, sangrando de borda a borda. É o que leva a
   superfície navy do site para os 30–60% que a linguagem pede: com o navy só
   no CTA, o resto vira papel demais e a página lê como blog. A barra laranja
   de 8px no topo é o laranja fazendo trabalho estrutural, não decorando. */
.secao--tinta {
  background: var(--tinta);
  color: var(--papel);
  border-block-start: 8px solid var(--laranja);
}

.secao--tinta .meta,
.secao--tinta .stat__fonte {
  color: var(--papel-75);
}

.secao--tinta .hairline {
  border-block-start-color: var(--papel-45);
}

/* --- Grid assimétrico ------------------------------------------------------
   No celular é coluna única, sempre. No desktop, 12 colunas com o texto
   ocupando a faixa da esquerda: o vazio da direita é composição, não sobra.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--gap-bloco);
}

@media (min-width: 62rem) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: clamp(1.5rem, 2.5vw, 3rem);
  }

  .col-titulo {
    grid-column: 1 / span 7;
  }

  .col-texto {
    grid-column: 1 / span 6;
  }

  /* Deslocado para a direita: cria a assimetria sem centralizar nada. */
  .col-texto-deslocado {
    grid-column: 6 / span 6;
  }

  .col-lateral {
    grid-column: 9 / span 4;
  }

  .col-cheia {
    grid-column: 1 / -1;
  }
}

/* --- Sangria ---------------------------------------------------------------
   Anula o padding lateral da seção. É como os blocos de tinta e as fotos
   full-bleed encostam na borda física da tela.
   -------------------------------------------------------------------------- */

.sangra {
  margin-inline: calc(var(--pad-pagina) * -1);
}

/* Bloco de tinta que sangra e carrega o próprio respiro interno.
   Acompanhar sempre de `.tinta-cheia`: é lá que moram as inversões de botão,
   hairline e meta. Só com `.bloco-tinta` o botão secundário sai navy sobre
   navy e some — aconteceu na hero das propostas. */
.bloco-tinta {
  background: var(--tinta);
  color: var(--papel);
  padding-inline: var(--pad-pagina);
  padding-block: var(--gap-bloco);
  position: relative;
}

/* --- Marcas de registro ----------------------------------------------------
   Cruzes laranja de 12px nos cantos das seções principais. É o detalhe que
   assina a linguagem de impressão: são as marcas que o gráfico usa para
   alinhar as duas tintas. Decorativas, invisíveis para leitor de tela.
   -------------------------------------------------------------------------- */

.registro {
  position: absolute;
  width: 12px;
  height: 12px;
  color: var(--laranja);
  pointer-events: none;
}

.registro--se {
  inset-block-start: var(--pad-pagina);
  inset-inline-start: var(--pad-pagina);
}

.registro--sd {
  inset-block-start: var(--pad-pagina);
  inset-inline-end: var(--pad-pagina);
}

.registro--ie {
  inset-block-end: var(--pad-pagina);
  inset-inline-start: var(--pad-pagina);
}

.registro--id {
  inset-block-end: var(--pad-pagina);
  inset-inline-end: var(--pad-pagina);
}

/* --- Fios e separadores ---------------------------------------------------- */

.fio-laranja {
  display: block;
  height: var(--fio);
  background: var(--laranja);
  border: 0;
  transform-origin: left center;
}

.fio-largo {
  width: 100%;
}

.fio-curto {
  width: 3.5rem;
}

.hairline {
  border: 0;
  border-block-start: var(--hairline) solid var(--tinta-22);
}

.tinta-cheia .hairline {
  border-block-start-color: var(--papel-45);
}

/* --- Fotos -----------------------------------------------------------------
   .duo é o padrão do site. A foto colorida é uma por página e vira evento
   justamente porque todas as outras são duotone navy.
   -------------------------------------------------------------------------- */

.figura {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo {
  background: var(--tinta);
}

/* Valores afinados olhando o resultado, não no papel: com os 1.12 previstos o
   duotone lavava, porque as fotos do acervo são claras e enevoadas e o blend
   `screen` só clareia. 1.75/0.74 devolve sombras navy de verdade sem chapar
   rosto. Se entrarem fotos novas, refazer a comparação antes de mexer aqui. */
.duo img {
  filter: grayscale(1) contrast(1.75);
  mix-blend-mode: screen;
  opacity: 0.74;
}

/* Foto que serve de campo atrás de outros elementos vai um grau mais fundo:
   aqui o que importa é o peso da tinta, não a leitura do detalhe. */
.duo--fundo img {
  filter: grayscale(1) contrast(2);
  opacity: 0.68;
}

@supports not (mix-blend-mode: screen) {
  .duo img,
  .duo--fundo img {
    filter: grayscale(1) contrast(1.3) brightness(0.92);
    mix-blend-mode: normal;
    opacity: 1;
  }
}

.legenda {
  font-size: var(--fs-meta);
  color: var(--tinta-80);
  padding-block-start: 0.75rem;
  max-width: 46ch;
}

.tinta-cheia .legenda {
  color: var(--papel-75);
}

/* Envelope de parallax: a imagem interna é mais alta que a moldura para ter
   folga de deslocamento sem revelar borda. */
.parallax {
  overflow: hidden;
}

.parallax img {
  height: 118%;
  margin-block-start: -9%;
}

@media (prefers-reduced-motion: reduce) {
  .parallax img {
    height: 100%;
    margin-block-start: 0;
  }
}