/* ==========================================================================
   Blog — o mesmo blog nas duas peles
   ==========================================================================
   O blog é compartilhado entre Agromarketing e Technology. A marcação é uma
   só; o que muda é a matéria em volta. Por isso tudo aqui lê cores de
   variáveis `--b-*`, declaradas duas vezes: no papel (padrão) e no escuro
   (`.tech-page`). Tamanho e espaço são fixos em rem, porque as duas folhas de
   base usam escalas com o mesmo nome e valores diferentes.
   ========================================================================== */

:root {
  --b-texto: #1d1d1d;
  --b-apoio: #56663f;
  --b-titulo: #2e4e05;
  --b-fio: #e3e0cf;
  --b-sup: #fff;
  --b-sup-2: #f3ead2;
  --b-destaque: #abcd30;
  --b-link: #2e4e05;
  --b-sombra: 0 18px 48px rgba(31,54,3,.12);
  --b-raio: 14px;
  --b-fonte: 'Acumin', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.tech-page {
  --b-texto: #dfe7cf;
  --b-apoio: #a9ba91;
  --b-titulo: #eef3e2;
  --b-fio: rgba(171,205,48,.24);
  --b-sup: #1b2710;
  --b-sup-2: #24331a;
  --b-link: #abcd30;
  --b-sombra: 0 20px 50px rgba(0,0,0,.5);
  --b-raio: 20px;
}

/* ── Abertura da listagem ─────────────────────────────────────────────── */
.blog-abertura h1 { max-width: 18ch; }
.blog-abertura .lead { max-width: 56ch; }
.secao.blog-abertura { padding-block: 88px 72px; }
.tech-page .blog-abertura { padding-block: 72px 24px; }
.tech-page .blog-abertura h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }

.blog-filtros {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px;
}
.blog-filtros a {
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font-size: .875rem; font-variation-settings: 'wght' 600, 'wdth' 94;
  color: var(--creme, #f8e4af); box-shadow: inset 0 0 0 1.5px rgba(248,228,175,.28);
  transition: background .16s, box-shadow .16s, color .16s;
}
.blog-filtros a:hover { box-shadow: inset 0 0 0 1.5px #f8e4af; color: #f8e4af; }
.blog-filtros a[aria-current] { background: #abcd30; color: #1f3603; box-shadow: none; }
.tech-page .blog-filtros a { color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--borda); }
.tech-page .blog-filtros a:hover { color: var(--texto); box-shadow: inset 0 0 0 1px var(--limao); }
.tech-page .blog-filtros a[aria-current] { background: var(--limao); color: #16200c; }

.blog-lista { padding-block: 72px 96px; }
.tech-page .blog-lista { padding-block: 32px 96px; }

/* ── Cartão de post ───────────────────────────────────────────────────────
   O cartão inteiro é clicável pelo link do título esticado (`::after`), e
   não por um <a> em volta de tudo: leitor de tela anuncia só o título, não
   o parágrafo inteiro como nome do link. */
.posts--grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post-cartao {
  position: relative; display: flex; flex-direction: column;
  background: var(--b-sup); border: 1px solid var(--b-fio); border-radius: var(--b-raio);
  overflow: hidden; transition: transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s, border-color .28s;
}
.post-cartao:hover { transform: translateY(-4px); box-shadow: var(--b-sombra); }
.tech-page .post-cartao { background: linear-gradient(160deg, var(--sup-2), var(--sup-1)); }
.tech-page .post-cartao:hover { border-color: var(--limao); }
.post-cartao:focus-within { outline: 3px solid var(--b-destaque); outline-offset: 3px; }

.post-cartao__capa { position: relative; aspect-ratio: 16 / 9; background: var(--b-sup-2); overflow: hidden; }
.post-cartao__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,.7,.3,1); }
.post-cartao:hover .post-cartao__capa img { transform: scale(1.04); }
/* Sem capa, o cartão ganha o bambuzal da frente: nunca um retângulo cinza. */
.post-cartao__sem-capa { position: absolute; inset: 0; background: #1f3603 url('../images/pixel/gomo-campo.png') repeat 0 0 / 72px 48px; image-rendering: pixelated; }
.post-cartao__sem-capa--agro { background-color: #2e4e05; }
.post-cartao__sem-capa--tech { background-color: #0f1609; opacity: .9; }
.post-cartao__sem-capa::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 52px; translate: -50% -50%;
  background: url('../images/pixel/broto.svg') center / contain no-repeat; filter: brightness(1.5);
}
.post-cartao__video {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(15,22,9,.82); color: #f8e4af;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; font-variation-settings: 'wght' 650, 'wdth' 92;
}
.post-cartao__video::before { content: ''; border-left: 8px solid #abcd30; border-block: 5px solid transparent; }

.post-cartao__corpo { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.post-cartao__titulo { margin: 0; font-size: 1.3rem; line-height: 1.22; font-variation-settings: 'wght' 650, 'wdth' 86; color: var(--b-titulo); max-width: none; }
.post-cartao__titulo a { color: inherit; text-decoration: none; }
.post-cartao__titulo a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-cartao__titulo a:focus-visible { outline: none; }
.post-cartao__resumo { margin: 0; color: var(--b-apoio); font-size: .95rem; line-height: 1.55; }
.post-cartao__ler { margin-top: auto; padding-top: 8px; font-size: .875rem; color: var(--b-link); font-variation-settings: 'wght' 600, 'wdth' 94; }

/* O mais recente, largo, na abertura da listagem. */
.post-cartao--destaque { flex-direction: row; margin-bottom: 32px; }
.post-cartao--destaque .post-cartao__capa { flex: 1.25; aspect-ratio: auto; min-height: 340px; }
.post-cartao--destaque .post-cartao__corpo { flex: 1; padding: 40px; justify-content: center; gap: 14px; }
.post-cartao--destaque .post-cartao__titulo { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); font-variation-settings: 'wght' 700, 'wdth' 76; line-height: 1.1; }
.post-cartao--destaque .post-cartao__resumo { font-size: 1.05rem; }
.post-cartao--destaque .post-cartao__ler { margin-top: 8px; }

/* ── Meta: frente, data, tempo ────────────────────────────────────────── */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; max-width: none;
  font-size: .8rem; color: var(--b-apoio); font-variation-settings: 'wght' 500, 'wdth' 96;
}
.post-meta__texto span { margin-inline: 4px; opacity: .6; }
.post-frente {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-variation-settings: 'wght' 700, 'wdth' 90;
  background: #f8e4af; color: #2e4e05;
}
.post-frente--tech { background: #16200c; color: #abcd30; }
.post-frente--grupo { background: #e8efd2; color: #2e4e05; }
.tech-page .post-frente { background: rgba(171,205,48,.12); color: var(--limao); box-shadow: inset 0 0 0 1px var(--borda); }
.tech-page .post-frente--agro { background: rgba(248,228,175,.12); color: #f8e4af; box-shadow: inset 0 0 0 1px rgba(248,228,175,.26); }

/* ── Estado vazio e paginação ─────────────────────────────────────────── */
.blog-vazio { max-width: 40rem; padding: 48px; border: 1px dashed var(--b-fio); border-radius: var(--b-raio); }
.blog-vazio h2 { font-size: 1.6rem; margin-bottom: 12px; color: var(--b-titulo); }
.blog-vazio p { color: var(--b-apoio); }

.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--b-fio); }
.paginacao__item { font-variation-settings: 'wght' 600, 'wdth' 94; font-size: .95rem; color: var(--b-link); }
.paginacao__item--off { opacity: .4; }
.paginacao__onde { font-size: .875rem; color: var(--b-apoio); }

/* ── Artigo ───────────────────────────────────────────────────────────── */
.artigo-secao { padding-block: 72px 96px; }
.tech-page .artigo-secao { padding-block: 64px 64px; }
.artigo { --medida: 44rem; }
.artigo__topo, .prosa, .artigo__pe { max-width: var(--medida); margin-inline: auto; }
.artigo__rastro { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; font-size: .875rem; color: var(--b-apoio); }
.artigo__rastro a { color: var(--b-link); }
.artigo__titulo {
  font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.02em;
  font-variation-settings: 'wght' 700, 'wdth' 68; color: var(--b-titulo); max-width: 22ch; margin: 0 0 20px;
}
.artigo__resumo { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.5; color: var(--b-apoio); margin: 0 0 28px; max-width: 60ch; }
.artigo__topo .post-meta { padding-bottom: 32px; border-bottom: 1px solid var(--b-fio); }
.artigo__capa { margin: 40px auto 0; max-width: 64rem; }
.artigo__capa img { width: 100%; max-height: 600px; object-fit: cover; border-radius: var(--b-raio); }

/* A prosa: medida de leitura, ritmo de 8, e cada bloco do editor com lugar
   próprio. É o que o painel produz, e só isso: h2, h3, h4, listas, citação,
   código, imagem, vídeo e divisória. */
.prosa { margin-top: 48px; color: var(--b-texto); font-size: 1.15rem; line-height: 1.75; }
.prosa > * { margin: 0 0 1.35em; max-width: none; }
.prosa > *:last-child { margin-bottom: 0; }
.prosa h2, .prosa h3, .prosa h4 { color: var(--b-titulo); max-width: 28ch; }
.prosa h2 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); line-height: 1.12; margin: 2.2em 0 .6em; font-variation-settings: 'wght' 700, 'wdth' 74; }
.prosa h3 { font-size: 1.45rem; line-height: 1.2; margin: 1.8em 0 .5em; font-variation-settings: 'wght' 650, 'wdth' 86; }
.prosa h4 { font-size: 1.2rem; margin: 1.6em 0 .4em; font-variation-settings: 'wght' 650, 'wdth' 92; }
.prosa a { color: var(--b-link); text-decoration: underline; text-decoration-color: var(--b-destaque); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prosa strong, .prosa b { font-variation-settings: 'wght' 680, 'wdth' 98; color: var(--b-titulo); }
.tech-page .prosa p, .tech-page .prosa li { color: var(--b-texto); }
.tech-page .prosa figcaption { color: var(--b-apoio); }
.tech-page .prosa strong, .tech-page .prosa b { color: var(--texto); }
.prosa ul, .prosa ol { padding-left: 1.4em; }
.prosa li { margin-bottom: .45em; padding-left: .2em; }
.prosa li::marker { color: var(--b-destaque); font-variation-settings: 'wght' 700; }
.prosa ul li::marker { content: '■  '; font-size: .7em; }
.prosa blockquote {
  margin-inline: 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--b-destaque);
  font-size: 1.3rem; line-height: 1.5; color: var(--b-titulo); font-variation-settings: 'wght' 500, 'wdth' 94;
}
.prosa blockquote p { margin: 0 0 .6em; max-width: none; }
.prosa blockquote p:last-child { margin: 0; }
.prosa code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .88em; background: var(--b-sup-2); padding: .12em .4em; border-radius: 4px; }
.prosa pre { background: #16200c; color: #dfe7cf; padding: 20px 24px; border-radius: 10px; overflow-x: auto; font-size: .95rem; line-height: 1.6; }
.prosa pre code { background: none; padding: 0; color: inherit; }
.prosa hr { border: 0; height: 12px; margin: 2.6em 0; background: url('../images/pixel/junta-h.svg') repeat-x left center / auto 100%, linear-gradient(to bottom, transparent 6.25%, #4a7d0a 6.25% 12.5%, #5b9a0d 12.5% 31.25%, #3f6a08 31.25% 75%, #2e4e05 75% 93.75%, transparent 93.75%); width: 180px; }
.prosa img { border-radius: 10px; margin-inline: auto; }
.prosa figure { margin-inline: 0; }
.prosa figcaption { margin-top: 10px; font-size: .9rem; color: var(--b-apoio); text-align: center; }

/* Imagem e vídeo saem da medida do texto: alargam até 56rem. */
.prosa > figure, .prosa > p > img:only-child { width: min(56rem, calc(100vw - 48px)); max-width: none; margin-left: 50%; translate: -50% 0; }
.prosa > p:has(> img:only-child) { margin-block: 2em; }

/* ── Vídeo ────────────────────────────────────────────────────────────── */
.video { margin-block: 2.2em; }
.video__quadro { position: relative; aspect-ratio: 16 / 9; border-radius: var(--b-raio); overflow: hidden; background: #0f1609; box-shadow: var(--b-sombra); }
.video__quadro video, .video__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video__capa { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; color: #f8e4af; }
.video__capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s cubic-bezier(.22,.7,.3,1), filter .3s; }
.video--vimeo .video__capa { background: #1f3603 url('../images/pixel/gomo-campo.png') repeat 0 0 / 72px 48px; image-rendering: pixelated; }
.video__capa::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,22,9,0) 40%, rgba(15,22,9,.7)); }
.video__capa:hover img { transform: scale(1.03); filter: brightness(.9); }
.video__play {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 16px; border-radius: 999px; background: #abcd30; color: #1f3603;
  font-size: 1rem; font-variation-settings: 'wght' 650, 'wdth' 92; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .2s cubic-bezier(.18,1.42,.38,1);
}
.video__play::before { content: ''; width: 0; height: 0; border-left: 14px solid #1f3603; border-block: 9px solid transparent; margin-left: 4px; }
.video__capa:hover .video__play { transform: scale(1.05); }
.video__capa:focus-visible { outline: 4px solid #abcd30; outline-offset: -4px; }

/* ── Pé do artigo ─────────────────────────────────────────────────────── */
.artigo__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--b-fio); }
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.compartilhar__rotulo { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--b-apoio); margin-right: 6px; font-variation-settings: 'wght' 650, 'wdth' 92; }
.compartilhar a, .compartilhar button {
  font: inherit; font-size: .875rem; font-variation-settings: 'wght' 600, 'wdth' 94; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 0; background: transparent; text-decoration: none;
  color: var(--b-link); box-shadow: inset 0 0 0 1.5px var(--b-fio); transition: box-shadow .16s;
}
.compartilhar a:hover, .compartilhar button:hover { box-shadow: inset 0 0 0 1.5px var(--b-destaque); }
.artigo__voltar { font-size: .95rem; color: var(--b-link); font-variation-settings: 'wght' 600, 'wdth' 94; }

.artigo-chamada__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.artigo-chamada .acoes { margin-top: 24px; }
.tech-page .artigo-chamada { padding-block: 72px; }

.tech-blog-section { padding-block: 72px; }

/* ── Aviso de prévia ──────────────────────────────────────────────────── */
.previa-aviso {
  position: sticky; top: 0; z-index: 130; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  padding: 10px 16px; background: #f8e4af; color: #1f3603; font-size: .9rem; text-align: center;
}
.previa-aviso strong { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; background: #1f3603; color: #f8e4af; padding: 2px 8px; border-radius: 4px; }
.previa-aviso a { color: #1f3603; font-variation-settings: 'wght' 650, 'wdth' 94; }

/* ── Home: seção "Do blog" ────────────────────────────────────────────── */
.cabeca--com-acao, .section-header--com-acao { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.cabeca--com-acao::after { display: none; }
.section-header--com-acao .section-title { margin-bottom: 0; }

@media (max-width: 1000px) {
  .posts--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-cartao--destaque { flex-direction: column; }
  .post-cartao--destaque .post-cartao__capa { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
  .post-cartao--destaque .post-cartao__corpo { padding: 28px; }
}
@media (max-width: 700px) {
  .posts--grade { grid-template-columns: 1fr; }
  .artigo-chamada__grade { grid-template-columns: 1fr; gap: 16px; }
  .prosa { font-size: 1.075rem; }
  .prosa > figure, .prosa > p > img:only-child { width: 100%; margin-left: 0; translate: none; }
  .secao.blog-abertura { padding-block: 64px 48px; }
  .blog-vazio { padding: 28px; }
  .paginacao__onde { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .post-cartao, .post-cartao__capa img, .video__capa img, .video__play { transition: none; }
}