/* ============ Página de cada blog (/blogs/<blog>/) ============
   Abertura como cabeçalho de revista; índice de artigos com variação por blog:
   diário da obra (Casa Verde), índice editorial (Empoderamento, Excelência) e série tipográfica (Ser EDUC).
   A barra superior, o rodapé e o botão "voltar" vêm de css/projeto-pagina.css. */
body.pagina-blog { background: var(--noite); color: var(--bege); }
.pagina-blog main { overflow-x: clip; }
.pagina-blog .pp-topo.pp-topo--solido { background: rgba(8, 21, 14, .86); color: var(--bege); box-shadow: 0 1px 0 rgba(243, 239, 229, .08); }
.pagina-blog .pp-topo--solido .pp-marca img { filter: none; }

/* ---------- Abertura ---------- */
.bp-abre {
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--igapo);
}
.bp-capa, .bp-capa img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-capa img { object-fit: cover; }
.bp-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(8, 21, 14, 1) 0%, rgba(8, 21, 14, .7) 30%, rgba(5, 13, 8, .15) 64%),
    linear-gradient(180deg, rgba(5, 13, 8, .5) 0%, rgba(5, 13, 8, 0) 24%);
}
.bp-abre-texto {
  position: absolute; left: var(--margem); right: var(--margem); bottom: clamp(48px, 11vh, 120px);
}
.bp-abre-texto .rotulo { color: var(--bege); margin-bottom: 1.1em; }
.bp-titulo-blog {
  font-size: clamp(52px, 10vw, 200px);
  line-height: .88;
  --soft: 0;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(5, 13, 8, .35);
}
.bp-titulo-blog .letra { display: inline-block; }
/* nomes com palavras longas: tamanho que cabe sem quebrar a palavra */
.blog-empoderamento-popular .bp-titulo-blog, .blog-excelencia-em-educacao .bp-titulo-blog { font-size: clamp(36px, 7.6vw, 160px); }
.bp-lema {
  margin: .5em 0 0; max-width: 26em;
  font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 2.6vw, 42px); line-height: 1.15;
  color: var(--ouro-reflexo);
}
.bp-autoria {
  display: flex; align-items: center; gap: 14px;
  margin: clamp(20px, 3vh, 34px) 0 0;
  font: 600 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(243, 239, 229, .8);
}
.bp-autoria strong { color: var(--bege); font-weight: 800; }
.bp-autora { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(242, 200, 138, .6), 0 0 0 5px rgba(8, 21, 14, .6); }
.bp-autora img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Apresentação (Ser EDUC) ---------- */
.bp-apresenta { padding: clamp(70px, 12vh, 140px) var(--margem) 0; }
.bp-apresenta-texto { max-width: 920px; margin-left: auto; margin-right: clamp(0px, 8vw, 160px); }
.bp-apresenta-texto p {
  margin: 0;
  font-family: var(--serif); font-weight: 330;
  font-size: clamp(21px, 2vw, 32px); line-height: 1.42;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 0;
  color: rgba(243, 239, 229, .92);
}

/* ---------- Índice ---------- */
.bp-indice { padding: clamp(80px, 13vh, 150px) var(--margem) clamp(80px, 13vh, 150px); }
.bp-indice-cabeca { margin-bottom: clamp(40px, 7vh, 80px); }
.bp-indice-cabeca .rotulo { color: var(--bege); }
.bp-indice-titulo { font-size: clamp(34px, 4.4vw, 80px); --soft: 60; }
.bp-lista { list-style: none; margin: 0; padding: 0; }
.bp-link { display: grid; align-items: center; color: inherit; text-decoration: none; position: relative; }
.bp-mini { display: block; overflow: hidden; background: var(--igapo); }
.bp-mini picture, .bp-mini img { display: block; width: 100%; height: 100%; }
.bp-mini img { object-fit: cover; transition: transform 1.2s var(--ease-org), filter .8s; filter: saturate(.9); }
.bp-num { font-family: var(--serif); font-weight: 340; font-variant-numeric: tabular-nums; color: var(--ouro); font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0; line-height: 1; }
.bp-texto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bp-titulo {
  font-family: var(--serif); font-weight: 380;
  font-size: clamp(22px, 2vw, 34px); line-height: 1.12;
  font-variation-settings: 'opsz' 72, 'SOFT' 60, 'WONK' 0;
  text-wrap: balance;
  background: linear-gradient(var(--ouro), var(--ouro)) 0 100% / 0% 1px no-repeat;
  padding-bottom: 4px; width: fit-content; max-width: 100%;
  transition: background-size .8s var(--ease-org), color .4s;
}
.bp-data { font: 700 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 239, 229, .58); }
.bp-link .seta { width: 26px; height: 26px; fill: none; stroke: var(--ouro-reflexo); stroke-width: 1.4; justify-self: end; transition: transform .6s var(--ease-org); }
.bp-link:hover .bp-titulo, .bp-link:focus-visible .bp-titulo { background-size: 100% 1px; color: var(--ouro-reflexo); }
.bp-link:hover .bp-mini img, .bp-link:focus-visible .bp-mini img { transform: scale(1.06); filter: saturate(1.05); }
.bp-link:hover .seta, .bp-link:focus-visible .seta { transform: translateX(8px); }

/* Diário da obra (Casa Verde): linha do tempo que se desenha ao rolar */
.bp-lista--diario { position: relative; --eixo: clamp(64px, 7vw, 120px); }
.bp-lista--diario::before {
  content: ''; position: absolute; left: var(--eixo); top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--ouro), rgba(216, 167, 99, .2));
  transform-origin: 50% 0; transform: scaleY(var(--linha, 1));
}
.bp-lista--diario .bp-link {
  grid-template-columns: var(--eixo) minmax(0, 4fr) minmax(0, 6fr) 40px;
  gap: clamp(18px, 3vw, 56px);
  padding: clamp(22px, 3.4vh, 40px) 0;
}
.bp-lista--diario .bp-link::before {
  content: ''; position: absolute; left: var(--eixo); top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--noite); box-shadow: 0 0 0 1px var(--ouro);
  transition: background-color .4s, box-shadow .4s;
}
.bp-lista--diario .bp-link:hover::before, .bp-lista--diario .bp-link:focus-visible::before { background: var(--ouro); box-shadow: 0 0 0 5px rgba(216, 167, 99, .25); }
.bp-lista--diario .bp-num { grid-column: 1; grid-row: 1; font-size: clamp(30px, 3vw, 54px); padding-right: 22px; text-align: right; }
.bp-lista--diario .bp-mini { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 10; margin-left: clamp(8px, 1.4vw, 24px); }
.bp-lista--diario .bp-texto { grid-column: 3; }
.bp-lista--diario .bp-item:nth-child(even) .bp-mini { aspect-ratio: 4 / 3; width: 82%; }

/* Índice editorial (Empoderamento, Excelência): o primeiro em destaque, os demais em lista */
.bp-lista--indice { border-top: 1px solid rgba(243, 239, 229, .14); }
.bp-lista--indice .bp-item { border-bottom: 1px solid rgba(243, 239, 229, .1); }
.bp-lista--indice .bp-link { grid-template-columns: 4.6em minmax(0, 1fr) clamp(96px, 11vw, 170px) 40px; gap: clamp(14px, 2.4vw, 40px); padding: 20px 0; }
.bp-lista--indice .bp-num { grid-column: 1; grid-row: 1; font-size: clamp(26px, 2.4vw, 40px); }
.bp-lista--indice .bp-texto { grid-column: 2; grid-row: 1; }
.bp-lista--indice .bp-mini { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 3; }
.bp-lista--indice .bp-item--sem-foto .bp-texto { grid-column: 2 / span 2; }
.bp-lista--indice .bp-item:first-child .bp-link {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2vh 4vw;
  padding: 0 0 clamp(30px, 5vh, 60px); align-items: end;
}
.bp-lista--indice .bp-item:first-child .bp-mini { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 16 / 10; }
.bp-lista--indice .bp-item:first-child .bp-num { grid-column: 2; grid-row: 1; font-size: clamp(64px, 8vw, 140px); align-self: end; }
.bp-lista--indice .bp-item:first-child .bp-texto { grid-column: 2; grid-row: 2; }
.bp-lista--indice .bp-item:first-child .bp-titulo { font-size: clamp(30px, 3.2vw, 56px); }
.bp-lista--indice .bp-item:first-child .seta { position: absolute; right: 0; bottom: clamp(30px, 5vh, 60px); }
.bp-lista--indice .bp-item:first-child { margin-bottom: 10px; }

/* Série tipográfica (Ser EDUC): numerais grandes, sem fotografias */
.bp-lista--serie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 90px); border-top: 1px solid rgba(243, 239, 229, .14); }
.bp-lista--serie .bp-item { border-bottom: 1px solid rgba(243, 239, 229, .1); }
.bp-lista--serie .bp-link { grid-template-columns: clamp(80px, 9vw, 150px) minmax(0, 1fr) 30px; gap: clamp(14px, 2vw, 30px); padding: clamp(20px, 3vh, 34px) 0; }
.bp-lista--serie .bp-num {
  font-size: clamp(56px, 6.4vw, 116px); font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px rgba(216, 167, 99, .75);
  transition: color .5s, -webkit-text-stroke-color .5s;
}
.bp-lista--serie .bp-link:hover .bp-num, .bp-lista--serie .bp-link:focus-visible .bp-num { color: var(--ouro); }
.bp-lista--serie .bp-titulo { font-size: clamp(20px, 1.7vw, 28px); }

/* ---------- Outros blogs ---------- */
.bp-outros {
  padding: clamp(80px, 13vh, 150px) var(--margem) clamp(80px, 13vh, 140px);
  background: var(--igapo);
  text-align: center;
}
.bp-outros-titulo { font-size: clamp(30px, 3.6vw, 64px); --soft: 60; margin-bottom: clamp(36px, 6vh, 64px); }
.bp-outros ul { list-style: none; margin: 0 0 clamp(44px, 7vh, 80px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); text-align: left; }
.bp-outros li a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; color: var(--bege); text-decoration: none; }
.bp-outros picture, .bp-outros img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-outros img { object-fit: cover; filter: brightness(.5) saturate(.9); transition: transform 1.3s var(--ease-org), filter .8s; }
.bp-outros li a span {
  position: absolute; left: 22px; right: 60px; bottom: 20px;
  font-family: var(--serif); font-weight: 380; text-transform: uppercase;
  font-size: clamp(22px, 2vw, 36px); line-height: .98;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
}
.bp-outros li a .seta { position: absolute; right: 20px; bottom: 22px; width: 26px; height: 26px; fill: none; stroke: var(--ouro-reflexo); stroke-width: 1.4; transition: transform .6s var(--ease-org); }
.bp-outros li a:hover img, .bp-outros li a:focus-visible img { transform: scale(1.07); filter: brightness(.65) saturate(1); }
.bp-outros li a:hover .seta, .bp-outros li a:focus-visible .seta { transform: translateX(6px); }

/* ---------- Estados iniciais da animação (apenas com JS + movimento) ---------- */
html.anim .bp-titulo-blog { visibility: hidden; }
html.anim .bp-abre-texto .rotulo, html.anim .bp-lema, html.anim .bp-autoria { opacity: 0; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .bp-abre-texto { left: 20px; right: 20px; bottom: 52px; }
  .bp-titulo-blog { font-size: clamp(44px, 14vw, 80px); }
  .blog-empoderamento-popular .bp-titulo-blog, .blog-excelencia-em-educacao .bp-titulo-blog { font-size: 9.4vw; }
  .bp-autoria { font-size: 11px; letter-spacing: .14em; }
  .bp-apresenta { padding: 56px 20px 0; }
  .bp-apresenta-texto { margin: 0; }
  .bp-indice { padding: 64px 20px; }

  .bp-lista--diario { --eixo: 18px; }
  .bp-lista--diario .bp-link { grid-template-columns: var(--eixo) minmax(0, 1fr) 30px; gap: 8px 18px; padding: 22px 0; align-items: start; }
  .bp-lista--diario .bp-link::before { top: 32px; }
  .bp-lista--diario .bp-num { grid-column: 2; grid-row: 1; text-align: left; padding: 0; font-size: 28px; }
  .bp-lista--diario .bp-mini, .bp-lista--diario .bp-item:nth-child(even) .bp-mini { grid-column: 2 / span 2; grid-row: 2; width: 100%; margin: 0; aspect-ratio: 16 / 10; }
  .bp-lista--diario .bp-texto { grid-column: 2; grid-row: 3; }
  .bp-lista--diario .seta { grid-column: 3; grid-row: 3; }

  .bp-lista--indice .bp-link { grid-template-columns: 2.6em minmax(0, 1fr) 84px; gap: 14px; padding: 18px 0; align-items: start; }
  .bp-lista--indice .bp-link .seta { display: none; }
  .bp-lista--indice .bp-mini { aspect-ratio: 1; }
  .bp-lista--indice .bp-item:first-child .bp-link { grid-template-columns: 1fr; gap: 16px; padding-bottom: 28px; }
  .bp-lista--indice .bp-item:first-child .bp-mini { grid-row: 1; }
  .bp-lista--indice .bp-item:first-child .bp-num { grid-column: 1; grid-row: 2; font-size: 56px; }
  .bp-lista--indice .bp-item:first-child .bp-texto { grid-column: 1; grid-row: 3; }
  .bp-lista--indice .bp-titulo { font-size: 20px; }
  .bp-lista--indice .bp-item:first-child .bp-titulo { font-size: 28px; }

  .bp-lista--serie { grid-template-columns: 1fr; }
  .bp-lista--serie .bp-link { grid-template-columns: 76px minmax(0, 1fr) 24px; }
  .bp-lista--serie .bp-num { font-size: 56px; }

  .bp-outros { padding: 64px 20px; }
  .bp-outros ul { grid-template-columns: 1fr; }
  .bp-outros li a { aspect-ratio: 16 / 9; }
}

/* ---------- Movimento reduzido ---------- */
html.reduzido .bp-link:hover .bp-mini img, html.reduzido .bp-link:focus-visible .bp-mini img,
html.reduzido .bp-outros li a:hover img, html.reduzido .bp-outros li a:focus-visible img { transform: none; }