/* =========================================================
   GEONAUTA — o desenho dos blocos da postagem
   Este arquivo vale nos dois lugares: na prévia do editor e
   na página no ar. É ele que faz o print bater com a vida real.
   ========================================================= */

.gb{ margin:0 0 34px; }
.gb:last-child{ margin-bottom:0; }

.gb__tit{
  font-family:'Fraunces','Georgia',serif;
  font-size:clamp(23px,calc(2.4vw + 2px),29px);
  line-height:1.25;
  color:#3F1700;
  margin:0 0 14px;
  font-weight:600;
}

.gb__txt > p{ margin:0 0 15px; }
.gb__txt > p:last-child{ margin-bottom:0; }

/* ---------- as duas colunas ---------- */
.gb__par{
  display:grid;
  grid-template-columns:var(--gb-img,50%) 1fr;
  gap:26px;
  align-items:start;
}
/* "Texto | imagem": a foto e a segunda coluna, entao a medida vai para ela */
.gb__par--inv{ grid-template-columns:1fr var(--gb-img,50%); }
.gb__par--fotos{ grid-template-columns:var(--gb-img,50%) 1fr; }
.gb__par--fotos{ align-items:start; }

/* de cima para baixo: onde a coluna se apoia */
.gb[data-vert="meio"] .gb__par{ align-items:center; }
.gb[data-vert="base"] .gb__par{ align-items:end; }
.gb[data-vert="esticar"] .gb__par{ align-items:stretch; }

/* quando estica, a foto preenche a altura da coluna vizinha */
.gb[data-esticar] .gb__par{ align-items:stretch; }
.gb[data-esticar] .gb__par .gb__fig{ height:100%; display:flex; flex-direction:column; }
.gb[data-esticar] .gb__par .gb__fig img{ height:100%; object-fit:cover; }

/* ---------- onde o conteudo encosta: da esquerda para a direita ----------
   Numa coluna so, a foto menor que a largura toda precisa saber
   de que lado ficar. A medida e a mesma --gb-img. */
.gb--img-acima > .gb__fig,
.gb--texto-acima > .gb__fig,
.gb--imagem > .gb__fig{ width:var(--gb-img,100%); }

/* no bloco so de texto, a mesma medida e a largura do quadro da escrita */
.gb--texto > .gb__txt{ width:var(--gb-img,100%); }

.gb[data-h="esq"]    > .gb__fig,
.gb[data-h="esq"]    > .gb__txt{ margin-right:auto; }
.gb[data-h="centro"] > .gb__fig,
.gb[data-h="centro"] > .gb__txt{ margin-left:auto; margin-right:auto; }
.gb[data-h="dir"]    > .gb__fig,
.gb[data-h="dir"]    > .gb__txt{ margin-left:auto; }

/* ---------- a figura ---------- */
.gb__fig{ margin:0; }
.gb__fig img{
  display:block; width:100%; height:auto;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(63,44,18,.14);
}
.gb__fig figcaption{
  margin-top:8px;
  font-size:15.5px; line-height:1.45;
  color:#8A7458;
}

.gb--img-acima > .gb__fig,
.gb--texto-acima > .gb__fig,
.gb--imagem > .gb__fig{ margin-bottom:18px; }
.gb--texto-acima > .gb__fig{ margin-bottom:0; margin-top:18px; }

/* ---------- vídeo ---------- */
.gb__video{ margin:0; }
.gb__moldura{
  position:relative; width:100%; padding-top:56.25%;
  border-radius:12px; overflow:hidden; background:#1B1206;
  box-shadow:0 10px 26px rgba(63,44,18,.18);
}
.gb__moldura iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.gb__video figcaption{ margin-top:8px; font-size:15.5px; color:#8A7458; }

/* ---------- moldura vazia: só aparece na prévia do editor ---------- */
.gb__vazio{
  display:flex; align-items:center; justify-content:center;
  min-height:150px;
  border:1px dashed #D8C7A6; border-radius:12px;
  background:#FBF6EC;
  color:#A8906B; font-size:15px; letter-spacing:.04em; text-transform:lowercase;
}

/* ---------- tamanho da letra e alinhamento ---------- */
.tx--p  { font-size:.9em;   }
.tx--m  { font-size:1em;    }
.tx--g  { font-size:1.14em; }
.tx--gg { font-size:1.3em; line-height:1.5; }

.al--esq   { text-align:left;    }
.al--centro{ text-align:center;  }
.al--dir   { text-align:right;   }
.al--just  { text-align:justify; }

/* ---------- celular: as duas colunas viram uma ---------- */
@media (max-width:720px){
  .gb__par,
  .gb__par--inv,
  .gb__par--fotos{ grid-template-columns:1fr; gap:16px; }
  .gb--img-acima > .gb__fig,
  .gb--texto-acima > .gb__fig,
  .gb--imagem > .gb__fig,
  .gb--texto > .gb__txt{ width:100%; }
  .gb[data-vert] .gb__par{ align-items:start; }
  .gb[data-esticar] .gb__par .gb__fig img{ height:auto; }
  /* no celular a foto vem sempre antes do texto, para não empurrar a leitura */
  .gb--texto-img .gb__par .gb__fig{ order:-1; }
}

/* =========================================================
   A CAPA DA POSTAGEM
   Mesma marcacao na previa do editor e na pagina no ar.
   ========================================================= */
.gh{
  --gh-h1:clamp(30px,4.6vw,50px);
  position:relative; overflow:hidden; background:var(--paper-2,#F3EADA);
}
.gh{ height:var(--gh-alt,min(52vh,420px)); }
.gh--baixa{ --gh-alt:min(34vh,260px); }
.gh--media{ --gh-alt:min(52vh,420px); }
.gh--alta { --gh-alt:min(70vh,560px); }
.gh--cheia{ --gh-alt:86vh; }

/* a faixa de dentro e a tarja da secao moram aqui, para o hero
   funcionar sozinho tambem na previa do editor */
.gh .pg-wrap{ width:min(760px,92%); margin:0 auto; }
.gh .pg-chip{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; background:var(--gold,#D1B23D); color:var(--earth-dp,#3B2006);
  padding:6px 13px; border-radius:999px; margin-bottom:14px;
}
.gh .pg-meta{ margin:14px 0 0; font-size:15px; opacity:.9; }

.gh__foto{ position:absolute; inset:0; overflow:hidden; }
.gh__foto img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:center center;
}
.gh__semfoto{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#A8906B; font-size:15px; letter-spacing:.06em;
  background:repeating-linear-gradient(45deg,#FBF6EC,#FBF6EC 12px,#F5ECDB 12px,#F5ECDB 24px);
}

.gh__txt{ position:absolute; inset:0; z-index:2; display:grid; padding:30px 0; }
.gh[data-v="topo"]  .gh__txt{ align-content:start;  }
.gh[data-v="meio"]  .gh__txt{ align-content:center; }
.gh[data-v="base"]  .gh__txt{ align-content:end;    }
.gh[data-h="esq"]    .gh__txt .pg-wrap{ text-align:left;   }
.gh[data-h="centro"] .gh__txt .pg-wrap{ text-align:center; }
.gh[data-h="dir"]    .gh__txt .pg-wrap{ text-align:right;  }

.gh__h1{ margin:0; line-height:1.08; font-weight:400; }
.gh[data-fonte="display"] .gh__h1{ font-family:var(--font-display,'Fraunces',Georgia,serif); }
.gh[data-fonte="serif"]   .gh__h1{ font-family:'Fraunces',Georgia,'Times New Roman',serif; }
.gh[data-fonte="sans"]    .gh__h1{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-weight:700; }

/* titulo SOBRE a foto: precisa do veu escuro para a letra nao sumir */
.gh--tit-sobre .gh__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 35%,rgba(35,24,6,.78));
}
.gh--tit-sobre .gh__txt{ color:#fff; }
.gh--tit-sobre .gh__h1{ text-shadow:0 2px 20px rgba(0,0,0,.45); }
.gh--tit-sobre .pg-meta{ color:#fff; opacity:.9; }

/* titulo ABAIXO da foto: a foto fica limpa e o texto desce para o papel */
.gh--tit-abaixo{ height:auto; overflow:visible; background:none; }
.gh--tit-abaixo .gh__foto{
  position:relative; inset:auto; width:100%; height:var(--gh-alt,min(52vh,420px));
}
.gh--tit-abaixo .gh__txt{
  position:relative; inset:auto; display:block;
  padding:28px 0 6px; color:var(--earth-dp,#3B2006);
}
.gh--tit-abaixo .gh__h1{ color:var(--earth-dp,#3B2006); text-shadow:none; }
.gh--tit-abaixo .pg-meta{ color:#8A7458; }
.gh--tit-abaixo .pg-chip{ margin-bottom:12px; }

@media (max-width:720px){
  .gh{ --gh-h1:clamp(24px,7vw,34px); }
  .gh--alta, .gh--cheia{ --gh-alt:min(52vh,360px); }
}

/* a nota de rodapé da foto da capa */
.gh__legenda{ margin:0; padding:8px 0 0; font-size:14.5px; line-height:1.5; color:#8A7554; font-style:italic; }
.gh__legenda .pg-wrap{ display:block; width:min(760px,88%); margin:0 auto; padding:0; box-sizing:border-box; }
.gh__legenda--esq    .pg-wrap{ text-align:left; }
.gh__legenda--centro .pg-wrap{ text-align:center; }
.gh__legenda--dir    .pg-wrap{ text-align:right; }
@media (max-width:720px){ .gh__legenda .pg-wrap{ width:auto; padding:0 18px; } }

/* as palavras-chave (e a BNCC) embaixo do slogan: uma linha de texto corrido */
.pg-tags{ margin:2px 0 18px; }
.pg-tags__linha{
  margin:0 0 3px; font-family:var(--font-ui,'Montserrat',system-ui,sans-serif);
  font-size:1em; line-height:1.5; color:#6B5A42;
}
.pg-tags__linha b{ font-weight:700; color:#3B2006; }

/* o slogan agora mora dentro da capa, junto da seção e do título */
.gh__slogan{
  margin:10px 0 0; font-size:clamp(17px,calc(1.9vw + 2px),22px); line-height:1.4; font-weight:600;
  max-width:52ch; display:inline-block;
}
.gh[data-h="centro"] .gh__slogan{ margin-left:auto; margin-right:auto; }
.gh--tit-sobre  .gh__slogan{ color:#fff; opacity:.94; text-shadow:0 1px 12px rgba(0,0,0,.45); }
.gh--tit-abaixo .gh__slogan{ color:var(--gold-dp,#3F1700); }
.gh__txt .pg-wrap > .gh__slogan{ display:block; }
.gh[data-h="dir"] .gh__slogan{ margin-left:auto; }

/* listas dentro do texto: ● bolinha preta · ○ bolinha vazada */
.gb-lista{ list-style:none; margin:0 0 1.1em; padding:0; }
.gb-lista li{ position:relative; padding-left:1.6em; margin:.35em 0; line-height:1.7; text-indent:0; }
.gb-lista li::before{
  content:""; position:absolute; left:.35em; top:.62em;
  width:.46em; height:.46em; border-radius:50%; box-sizing:border-box;
}
.gb-li--cheia::before{ background:#1E1609; }
.gb-li--vazia::before{ background:transparent; border:1.6px solid #1E1609; }

/* =========================================================
   24/09 — nota colorida, legenda única do par de fotos,
   hyperlinks e o lugar do quadro de downloads
   ========================================================= */
.gb-nota{
  padding:18px 22px; border-radius:12px; line-height:1.65; color:#3B2006;
  box-shadow:0 1px 0 rgba(62,42,11,.06);
}
.gb-nota p{ font-size:inherit; margin:0 0 .6em; }
.gb-nota p:last-child{ margin-bottom:0; }
.gb-nota .gb-lista{ font-size:inherit; }

.gb__leg-unica{
  margin:10px 0 0; text-align:center; font-size:15.5px; line-height:1.5; color:#8A7458;
  text-indent:0 !important;
}

.gb-link{ color:#3F1700; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.gb-link:hover{ text-decoration-thickness:2px; }

.gb-downloads:empty{ display:none; }
.gb-downloads > .pg-quadro{ margin-top:0; }

/* capa "afastada" (zoom abaixo de 100%): a foto inteira na frente e
   ela mesma, desfocada, preenchendo o resto da moldura */
.gh__foto--afastada{ background:#1b140a; }
.gh__borrao{
  position:absolute; inset:-40px; background-size:cover; background-position:center;
  filter:blur(28px) brightness(.8) saturate(1.1); transform:scale(1.1);
}
.gh__foto--afastada img{ position:relative; z-index:1; }
.gh__foto--afastada::after{ z-index:2; }

/* o recuo agora vem do número de Tabs */
.gb-tab{ display:inline-block; width:calc(1.25cm * var(--gb-escala, 1)); }
/* celular: os recuos (Tab de parágrafo e de lista) encolhem junto com a tela */
@media (max-width:760px){ :root{ --gb-escala:.7; } }
@media (max-width:480px){ :root{ --gb-escala:.5; } }
/* "bolinha" é redonda — o site deixa tudo quadrado com um * {border-radius:0} */
.gb-lista li.gb-li--cheia::before, .gb-lista li.gb-li--vazia::before{ border-radius:50% !important; }
/* lista justificada: o texto do item se espalha até a margem da direita */
.gb-lista.al--just li{ text-align:justify; text-justify:inter-word; }
.gb-lista.al--centro li{ text-align:center; }
.gb-lista.al--dir li{ text-align:right; }
/* o alinhamento da lista vale para o texto de cada item */
.gb-lista.al--just li{ text-align:justify !important; text-justify:inter-word; }
.gb-lista.al--esq li{ text-align:left !important; }
.gb-lista.al--centro li{ text-align:center !important; }
.gb-lista.al--dir li{ text-align:right !important; }
