/* ============ 04 · Blogs — "Quatro cadernos" ============
   Depois da parede clara de Projetos, o site vira a página para uma noite de leitura:
   quatro blogs como cadernos de uma revista cultural, em grade assimétrica de 12 colunas.
   A margem ondulada (js/territorios.js) sobe no topo desta seção. */
.blogs {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--noite) 0, rgba(8, 21, 14, 0) 260px),
    radial-gradient(ellipse 55% 45% at 85% 22%, rgba(216, 167, 99, .13), transparent 100%),
    radial-gradient(ellipse 50% 50% at 8% 80%, rgba(36, 74, 50, .55), transparent 100%),
    var(--noite);
  color: var(--bege);
  padding: clamp(70px, 12vh, 140px) calc(var(--margem) + 60px) clamp(90px, 14vh, 160px) var(--margem);
  overflow-x: clip;
}
/* fio dourado que separa Blogs de Territórios (ambas escuras) */
.blogs::after {
  content: ''; position: absolute; left: var(--margem); right: calc(var(--margem) + 60px); bottom: 0;
  height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 167, 99, .35), transparent);
}

/* ---------- Cabeçalho ---------- */
.bl-cabeca {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2vh 5vw; align-items: end;
  margin-bottom: clamp(56px, 10vh, 120px);
}
.bl-cabeca .rotulo { grid-column: 1 / -1; color: var(--bege); margin-bottom: 0; }
.bl-titulo {
  font-size: clamp(40px, 5.6vw, 104px);
  line-height: .94;
  --soft: 40;
  text-wrap: balance;
}
.bl-titulo .letra { display: inline-block; }
.bl-intro {
  margin: 0; max-width: 34em;
  font-size: clamp(15px, 1.1vw, 18px); line-height: 1.7;
  color: rgba(243, 239, 229, .74);
  border-left: 1px solid rgba(216, 167, 99, .45);
  padding-left: clamp(16px, 1.6vw, 26px);
}

/* ramo desenhado por traço no espaço livre sob Ser EDUC */
.bl-ramo { position: absolute; right: calc(var(--margem) + 70px); bottom: clamp(60px, 10vh, 120px); width: min(24vw, 360px); height: 46vh; color: var(--ouro); opacity: .3; }

/* ---------- Grade dos cadernos ---------- */
.bl-cadernos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 34px); row-gap: clamp(40px, 7vh, 90px);
  align-items: start;
}
.bl-caderno[data-pos="1"] { grid-column: 1 / span 7; grid-row: 1; }
.bl-caderno[data-pos="4"] { grid-column: 9 / span 4; grid-row: 1 / span 2; margin-top: clamp(40px, 12vh, 150px); }
.bl-caderno[data-pos="2"] { grid-column: 1 / span 4; grid-row: 2; }
.bl-caderno[data-pos="3"] { grid-column: 5 / span 4; grid-row: 2; margin-top: clamp(20px, 5vh, 60px); }

.bl-link {
  position: relative; display: block;
  color: inherit; text-decoration: none;
  transition: transform .8s var(--ease-org);
}
.bl-capa {
  position: relative; display: block; overflow: hidden;
  background: var(--igapo);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.bl-capa picture, .bl-capa img { display: block; width: 100%; height: 100%; }
.bl-capa img { object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease-org), filter .8s; filter: saturate(.92); }
.bl-capa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 13, 8, .9) 0%, rgba(5, 13, 8, .35) 42%, rgba(5, 13, 8, 0) 70%);
}
.bl-caderno[data-pos="1"] .bl-capa { aspect-ratio: 16 / 10; }
.bl-caderno[data-pos="2"] .bl-capa { aspect-ratio: 1 / 1; }
.bl-caderno[data-pos="4"] .bl-capa { aspect-ratio: 3 / 4.4; }

.bl-num {
  position: absolute; left: 18px; top: 16px; z-index: 2;
  font: 700 11px/1 var(--sans); letter-spacing: .26em;
  color: var(--ouro-reflexo);
  padding: 7px 10px; border: 1px solid rgba(242, 200, 138, .45); border-radius: 100px;
  background: rgba(5, 13, 8, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bl-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 2vw, 32px);
}
.bl-nome {
  font-family: var(--serif); font-weight: 380; text-transform: uppercase;
  font-size: clamp(30px, 3.3vw, 60px); line-height: .94; letter-spacing: -.01em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(5, 13, 8, .5);
  /* linha dourada desenhada por máscara no hover */
  background: linear-gradient(var(--ouro), var(--ouro)) 0 100% / 0% 2px no-repeat;
  padding-bottom: 6px; width: fit-content; max-width: 100%;
  transition: background-size .8s var(--ease-org), font-variation-settings .8s;
}
.bl-nome .letra { display: inline-block; }
.bl-caderno[data-pos="1"] .bl-nome { font-size: clamp(36px, 4.6vw, 84px); }
.bl-caderno[data-pos="2"] .bl-nome { font-size: clamp(24px, 2.5vw, 44px); }
.bl-caderno[data-pos="4"] .bl-nome { font-size: clamp(28px, 3vw, 54px); }
.bl-meta { font: 700 11px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 239, 229, .78); }
.bl-ler {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--ouro-reflexo);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s, transform .6s var(--ease-org);
}
.bl-ler .seta, .bl-link .seta { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease-org); }

/* Excelência: pôster tipográfico — a foto vira um recorte circular sobre papel */
.bl-caderno[data-pos="3"] .bl-capa {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 36%, rgba(216, 167, 99, .22), transparent 55%),
    var(--bege);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.bl-caderno[data-pos="3"] .bl-capa::after { display: none; }
.bl-caderno[data-pos="3"] .bl-capa picture {
  position: absolute; left: 50%; top: 9%; width: 62%; height: auto; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 38, 26, .2), 0 0 0 12px var(--bege), 0 0 0 13px rgba(183, 104, 67, .5);
}
.bl-caderno[data-pos="3"] .bl-num { color: var(--terracota); border-color: rgba(183, 104, 67, .5); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bl-caderno[data-pos="3"] .bl-info { color: var(--tinta); text-align: center; align-items: center; }
.bl-caderno[data-pos="3"] .bl-nome { text-shadow: none; color: var(--floresta); font-size: clamp(28px, 2.7vw, 50px); }
.bl-caderno[data-pos="3"] .bl-meta { color: var(--tinta-suave); }
.bl-caderno[data-pos="3"] .bl-ler { color: var(--terracota); }

/* Ser EDUC: capa vertical e alta, deslocada para baixo */
.bl-caderno[data-pos="4"] .bl-info { padding-bottom: clamp(22px, 2.4vw, 36px); }

/* ---------- Hover / foco ---------- */
.bl-link:hover, .bl-link:focus-visible { transform: translateY(-6px); }
.bl-link:hover .bl-capa img, .bl-link:focus-visible .bl-capa img { transform: scale(1.07); filter: saturate(1.05); }
.bl-link:hover .bl-nome, .bl-link:focus-visible .bl-nome { background-size: 100% 2px; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.bl-link:hover .bl-ler, .bl-link:focus-visible .bl-ler { opacity: 1; transform: none; }
.bl-link:hover .bl-ler .seta, .bl-link:focus-visible .bl-ler .seta { transform: translateX(5px); }
.bl-link:focus-visible { outline-offset: 8px; }
@media (hover: none) { .bl-ler { opacity: 1; transform: none; } }

/* ---------- Estado inicial da entrada (apenas com JS + movimento) ---------- */
html.anim .blogs.bl-preparado .bl-titulo { visibility: hidden; }

/* ---------- Tablet ---------- */
@media (min-width: 861px) and (max-width: 1180px) {
  .bl-caderno[data-pos="1"] { grid-column: 1 / span 8; }
  .bl-caderno[data-pos="4"] { grid-column: 9 / span 4; }
  .bl-caderno[data-pos="2"] { grid-column: 1 / span 4; }
  .bl-caderno[data-pos="3"] { grid-column: 5 / span 4; }
  .bl-ler { opacity: 1; transform: none; }
}

/* ---------- Celular: uma coluna, foto grande alternando com pôster tipográfico ---------- */
@media (max-width: 860px) {
  .blogs { padding: 70px 20px 90px; }
  .blogs::after { left: 20px; right: 20px; }
  .bl-cabeca { grid-template-columns: 1fr; gap: 22px; margin-bottom: 44px; }
  .bl-titulo { font-size: clamp(36px, 10.5vw, 56px); }
  .bl-cadernos { grid-template-columns: 1fr; row-gap: 26px; }
  .bl-caderno[data-pos] { grid-column: 1; grid-row: auto; margin-top: 0; }
  .bl-caderno[data-pos="1"] .bl-capa, .bl-caderno[data-pos="2"] .bl-capa { aspect-ratio: 4 / 3.4; }
  .bl-caderno[data-pos="4"] .bl-capa { aspect-ratio: 4 / 4.6; }
  .bl-caderno[data-pos="3"] .bl-capa { aspect-ratio: 4 / 4.4; }
  .bl-caderno[data-pos="3"] .bl-capa picture { width: 54%; top: 8%; }
  .bl-nome, .bl-caderno[data-pos="1"] .bl-nome { font-size: clamp(30px, 9vw, 44px); }
  .bl-caderno[data-pos="3"] .bl-nome { font-size: clamp(26px, 7.6vw, 38px); }
  .bl-caderno[data-pos="2"] .bl-nome { font-size: clamp(26px, 8vw, 40px); }
  .bl-ramo { display: none; }
  .bl-ler { opacity: 1; transform: none; }
}

/* ---------- Movimento reduzido ---------- */
html.reduzido .bl-link:hover, html.reduzido .bl-link:focus-visible { transform: none; }
html.reduzido .bl-link:hover .bl-capa img, html.reduzido .bl-link:focus-visible .bl-capa img { transform: scale(1.02); }
html.reduzido .bl-ler { opacity: 1; transform: none; }