/* ============================================================
   INPRÓS v2 — BLOG (listagem + 3 posts) · pg-blog.css
   Carregue depois de base.css e paginas.css.
   <html class="pagina pg-blog pg-blog-lista">   listagem (blog.html)
   <html class="pagina pg-blog pg-blog-post">    posts

   Momentos-assinatura:
   - a foto de cada artigo se abre DE DENTRO da marca (o Y do INPRÓS
     cresce até virar a foto inteira), como a máscara da home;
   - o número do artigo, em contorno, se preenche com a rolagem;
   - nos posts, a leitura é uma fila de pontos que acende no alto
     da tela ("cada ponto é um homem"); cada post tem a sua figura de
     partículas no hero (sinal, marca, mapa do RS com Torres).
   Sem JS, sem GSAP ou com movimento reduzido: fotos inteiras, números
   cheios, tudo estático e completo.
   ============================================================ */

/* ---------- âncoras da cena ---------- */
.pagina [data-ancora="blogrio"] {
  left: 0;
  width: 100%;
  top: 14vh;
  height: 30vh;
}

/* ============================================================
   Foto que se abre de dentro da marca
   ============================================================ */
.mascara-marca {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--noite-2);
}
.mascara-marca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cinema .mascara-marca[data-mascara] {
  -webkit-mask-image: url("../img/marca/inpros-marca-mascara.svg");
  mask-image: url("../img/marca/inpros-marca-mascara.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* o ponto de crescimento fica no tronco do Y: ao crescer, o tronco cobre o quadro */
  -webkit-mask-position: 57% 71%;
  mask-position: 57% 71%;
  -webkit-mask-size: var(--m, 1800%) auto;
  mask-size: var(--m, 1800%) auto;
}
.cinema .mascara-marca.mascara--aberta {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ============================================================
   LISTAGEM — hero
   ============================================================ */
.blog-heroi__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 40px clamp(32px, 5vw, 96px);
}
.blog-heroi .pag-heroi__lead {
  max-width: 30ch;
}
.blog-indice {
  border-top: 1px solid var(--linha-forte);
  counter-reset: none;
}
.blog-indice li {
  border-bottom: 1px solid var(--linha-forte);
}
.blog-indice a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 16px 4px;
  color: var(--branco);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.4;
  transition: color 0.3s, transform 0.5s var(--ease);
}
.blog-indice a:hover {
  color: var(--luz-forte);
  transform: translateX(10px);
}
.blog-indice__num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--luz);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Cartões dos artigos (listagem e "Leia também")
   ============================================================ */
.blog-lista {
  padding-block: clamp(56px, 10vh, 120px) clamp(80px, 14vh, 170px);
}
.blog-cards {
  border-top: 1px solid rgba(8, 34, 58, 0.22);
}
.blog-card {
  border-bottom: 1px solid rgba(8, 34, 58, 0.22);
}
.blog-card > article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr);
  grid-template-areas: "num img txt";
  align-items: center;
  gap: 28px clamp(28px, 4vw, 72px);
  padding-block: clamp(40px, 8vh, 96px);
}
.blog-card--inverso > article {
  grid-template-areas: "num txt img";
}
.blog-card__img {
  grid-area: img;
  aspect-ratio: 4 / 3;
}
.blog-card__img img {
  transition: transform 1.2s var(--ease), filter 0.8s var(--ease);
}
.blog-card__num {
  grid-area: num;
  align-self: start;
  position: relative;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(4.4rem, 1rem + 7.4vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.blog-card__cheio {
  display: none;
}
.blog-card__num {
  --traco: var(--tinta);
}
.cinema .blog-card__contorno {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--traco);
}
.cinema .blog-card__cheio {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  clip-path: inset(100% 0 0 0);
}
.blog-card__texto {
  grid-area: txt;
  display: grid;
  gap: 18px;
  justify-items: start;
}
.blog-card__titulo {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 760;
  font-size: clamp(2rem, 1.15rem + 2.1vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.blog-card__titulo a {
  color: var(--tinta);
  text-decoration: none;
  transition: font-weight 0.6s var(--ease);
}
/* o cartão inteiro é clicável pelo link do título (um só link por artigo) */
.blog-card__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.blog-card__titulo a:focus-visible {
  outline: none;
}
.blog-card > article:has(.blog-card__titulo a:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 6px;
  border-radius: 6px;
}
.blog-card__resumo {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.blog-card__ler {
  color: var(--tinta-link);
}
.blog-card > article:hover .blog-card__img img {
  transform: scale(1.05);
}
.blog-card > article:hover .blog-card__titulo a {
  font-weight: 880;
}
.blog-card > article:hover .blog-card__ler {
  background-size: 0% 1px;
  background-position: 100% 100%;
}
.blog-card > article:hover .blog-card__ler::after {
  transform: scaleX(1.7);
}

/* ---------- Leia também (noite): dois cartões lado a lado ---------- */
.blog-mais {
  padding-block: clamp(80px, 14vh, 170px) clamp(40px, 8vh, 96px);
}
.blog-mais__titulo {
  margin-bottom: clamp(36px, 6vh, 64px);
}
.blog-cards--duplo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  border-top: 0;
}
.blog-cards--duplo .blog-card {
  border-bottom: 0;
  border-top: 1px solid var(--linha-forte);
}
.blog-cards--duplo .blog-card > article,
.blog-cards--duplo .blog-card--inverso > article {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "img img" "num txt";
  align-items: start;
  padding-block: 28px 40px;
}
.blog-cards--duplo .blog-card__img {
  aspect-ratio: 16 / 10;
}
.blog-cards--duplo .blog-card__num {
  font-size: clamp(3rem, 1rem + 3.4vw, 5.4rem);
}
.blog-cards--duplo .blog-card__titulo {
  font-size: clamp(1.7rem, 1.1rem + 1.3vw, 2.5rem);
}
[data-fundo="noite"] .blog-card__num {
  --traco: var(--luz);
  color: var(--luz);
}
[data-fundo="noite"] .blog-card__titulo a {
  color: var(--branco);
}
[data-fundo="noite"] .blog-card__resumo {
  color: var(--branco-2);
}
[data-fundo="noite"] .blog-card__ler {
  color: var(--luz);
}
[data-fundo="noite"] .blog-card > article:has(.blog-card__titulo a:focus-visible) {
  outline-color: var(--branco);
}

/* ============================================================
   POST — progresso de leitura (fila de pontos no alto da tela)
   ============================================================ */
.leitura {
  --ponto: rgba(124, 192, 238, 0.3);
  --ponto-aceso: var(--luz);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: calc(var(--z-topo) + 1);
  height: 6px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--ponto) 1.3px, transparent 1.9px) 2px 50% / 9px 6px repeat-x;
  transition: opacity 0.4s;
}
.leitura__cheio {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, var(--ponto-aceso) 1.9px, transparent 2.5px) 2px 50% / 9px 6px repeat-x;
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
}
[data-tema="claro"] .leitura {
  --ponto: rgba(8, 34, 58, 0.24);
  --ponto-aceso: var(--tinta-link);
}
.sem-js .leitura {
  display: none;
}

/* ============================================================
   POST — hero
   ============================================================ */
.post-heroi {
  min-height: 92svh;
}
.post-heroi__corpo {
  gap: clamp(16px, 2.4vh, 26px);
}
.post-heroi__num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--luz);
  font-variant-numeric: tabular-nums;
}
.post-heroi__num::after {
  content: "";
  width: 48px;
  height: 1.5px;
  background: currentColor;
}
.post-titulo {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: clamp(2.5rem, 1rem + 3.7vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.006em;
  max-width: min(9.8em, 46vw);
  text-wrap: balance;
}
.post-titulo .palavra-titulo {
  display: inline-block;
  will-change: transform;
}
.post-titulo .linha-split {
  overflow: clip;
  padding-block: 0.14em 0.06em;
  margin-block: -0.14em -0.06em;
}
.post-heroi__lead {
  max-width: 44ch;
}

/* ============================================================
   POST — foto de destaque
   ============================================================ */
.post-destaque {
  padding-bottom: clamp(72px, 14vh, 160px);
}
.post-destaque__img {
  aspect-ratio: 16 / 8;
}
/* a foto do post 1 tem a cabeça perto da borda: ancora o recorte no topo */
.post-destaque__img img[src*="sintomas-destaque"] {
  object-position: 50% 0;
}
/* capa do post 3 (foto do cliente): prioriza as pessoas sentadas, abaixo do centro */
.post-destaque__img img[src*="fila-destaque"] {
  object-position: 50% 62%;
}

/* ============================================================
   POST — texto em papel, sumário fixo ao lado
   ============================================================ */
.post-papel {
  padding-block: clamp(72px, 13vh, 150px) clamp(80px, 14vh, 170px);
}
.post-grade {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: 40px clamp(32px, 5vw, 96px);
  align-items: start;
}
/* "Neste artigo": fixo só dentro da grade do artigo (o sticky para no fim da grade, antes do
   bloco Apoiar e do rodapé); nunca maior que a tela (rola por dentro se precisar) e some com
   suavidade quando a leitura termina (pg-blog.js ajusta --sumario-op) */
.post-lado {
  position: sticky;
  top: calc(var(--topo-h) + 28px);
  max-height: calc(100vh - var(--topo-h) - 56px);
  max-height: calc(100svh - var(--topo-h) - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  opacity: var(--sumario-op, 1);
  transition: opacity 0.45s var(--ease);
}
.post-sumario__rotulo {
  display: block;
  list-style: none;
  margin-bottom: 18px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta);
}
.post-sumario__rotulo::-webkit-details-marker {
  display: none;
}
.post-sumario__lista {
  border-top: 1px solid rgba(8, 34, 58, 0.2);
}
.post-sumario__lista li {
  border-bottom: 1px solid rgba(8, 34, 58, 0.2);
}
.post-sumario__lista a {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 8px;
  padding: 12px 4px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--tinta-2);
  text-decoration: none;
  transition: color 0.3s;
}
.post-sumario__lista a:hover {
  color: var(--tinta);
}
.post-sumario__num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--tinta-link);
  font-variant-numeric: tabular-nums;
}
/* item da seção que está sendo lida: a tinta acende e um ponto entra à esquerda */
.post-sumario__lista a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--tinta-link);
  transform: scale(0);
  transition: transform 0.5s var(--ease);
}
.post-sumario__lista a.ativo {
  color: var(--tinta);
  font-weight: 700;
}
.post-sumario__lista a.ativo::before {
  transform: scale(1);
}

.post-texto {
  max-width: 68ch;
}
.post-secao {
  scroll-margin-top: calc(var(--topo-h) + 24px);
}
.post-secao + .post-secao {
  margin-top: clamp(56px, 9vh, 104px);
}
.post-secao__num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--tinta-link);
  font-variant-numeric: tabular-nums;
}
.post-secao__titulo {
  margin: 0.32em 0 0.62em;
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 760;
  font-size: clamp(2.1rem, 1.3rem + 2.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.004em;
  text-wrap: balance;
  color: var(--tinta);
}
.post-secao p {
  font-size: clamp(1.12rem, 1.02rem + 0.3vw, 1.3rem);
  line-height: 1.75;
  color: var(--tinta);
  text-wrap: pretty;
}
.post-secao p a {
  font-weight: 700;
  text-decoration: underline;
}
.post-secao strong {
  font-weight: 700;
}
.post-fonte {
  margin-top: clamp(48px, 8vh, 80px);
  padding-top: 18px;
  border-top: 1px solid rgba(8, 34, 58, 0.2);
  font-size: 0.95rem;
  color: var(--tinta-2);
}

/* ---------- compartilhar ---------- */
.post-partilha {
  margin-top: clamp(56px, 9vh, 96px);
  padding-top: 26px;
  border-top: 1px solid rgba(8, 34, 58, 0.2);
}
.sem-js .post-partilha {
  display: none;
}
.post-partilha__rotulo {
  margin-bottom: 16px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta);
}
.post-partilha__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 20px;
  border: 1.5px solid rgba(8, 34, 58, 0.36);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-texto);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s, border-color 0.35s;
}
[data-fundo="papel"] .chip {
  color: var(--tinta);
}
.chip:hover,
[data-fundo="papel"] .chip:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

/* ============================================================
   Celular
   ============================================================ */
@media (max-width: 899px) {
  .pagina [data-ancora="blogrio"] {
    top: calc(var(--topo-h) + 4vh);
    height: 26vh;
  }
  .blog-heroi__grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-card > article,
  .blog-card--inverso > article {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "img" "txt";
    gap: 20px;
  }
  .blog-card__num {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
  }
  .blog-cards--duplo {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-cards--duplo .blog-card > article,
  .blog-cards--duplo .blog-card--inverso > article {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "img" "num" "txt";
  }
  .post-titulo {
    max-width: none;
    font-size: clamp(2.2rem, 1.2rem + 4.6vw, 3.4rem);
  }
  .post-destaque__img {
    aspect-ratio: 4 / 3;
  }
  .post-grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-lado {
    position: static;
  }
  .post-sumario {
    padding: 4px 0;
    border-bottom: 1px solid rgba(8, 34, 58, 0.2);
  }
  .post-sumario__rotulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0;
    cursor: pointer;
  }
  .post-sumario__rotulo::after {
    content: "";
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.4s var(--ease);
  }
  .post-sumario[open] .post-sumario__rotulo::after {
    transform: translateY(3px) rotate(-135deg);
  }
  .post-sumario[open] .post-sumario__lista {
    margin: 8px 0 16px;
  }
  .post-sumario__lista a::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__img img,
  .blog-indice a,
  .post-sumario__lista a,
  .post-sumario__lista a::before {
    transition: none;
  }
}


/* celular deitado (paisagem, até 520 px de altura): o título do post fica na coluna da
   esquerda (paginas.css) e é limitado pela altura para caber na primeira tela */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .post-titulo {
    font-size: min(clamp(2.2rem, 1.2rem + 4.6vw, 3.4rem), 10vh);
  }
  /* listagem: o rio continua no alto; o texto sobe para logo abaixo dele */
  .cena-ok .pag-heroi.blog-heroi,
  .pagina:not(.sem-cena):not(.sem-js) .pag-heroi.blog-heroi {
    padding-top: calc(var(--topo-h) + 32vh);
  }
  .blog-heroi .pag-titulo {
    font-size: 20vh;
  }
}