/* ==========================================================================
   MUNDO SEGURO — Blog (/conteudo, /conteudo/<categoria>, a matéria e /na-midia)
   Frames do Figma: 167:37, 169:369 e 169:597.

   Este arquivo é autossuficiente de propósito: as páginas do blog são
   montadas em PHP e carregam tokens + base + components + sections + este.
   Nada aqui depende de indices.css ou cargas.css.
   ========================================================================== */

/* ==========================================================================
   1. LARGURA
   ==========================================================================
   No Figma o conteúdo vai de x:184 a x:1353, ou seja ~1170px — entre o
   container padrão (1080) e o largo (1280). Como a coluna lateral precisa
   caber em 288px sem espremer os cards, definimos uma largura própria. */

.blog-container { max-width: calc(1170px + 2 * var(--gutter)); }

/* ==========================================================================
   2. FAIXA DO TOPO
   ==========================================================================
   Mesma altura das demais faixas do site (348px), com o gradiente escuro à
   esquerda para o texto branco ter contraste sobre a foto. */

.blog-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 348px;
  padding-block: var(--sp-12);
  overflow: hidden;
  isolation: isolate;
}

.blog-hero picture { display: contents; }

.blog-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgb(6 22 46 / 0.94) 0%,
    rgb(6 22 46 / 0.84) 38%,
    rgb(6 22 46 / 0.38) 70%,
    rgb(6 22 46 / 0.05) 100%
  );
}

.blog-hero > .container { position: relative; z-index: 3; }
.blog-hero__content { max-width: 820px; }

.blog-hero__title {
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  color: var(--c-white);
}

/* "BLOG" fica na própria linha, como no Figma. */
.blog-hero__marca { display: block; }

/* subtítulo curto — nome da categoria */
.blog-hero__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--c-white);
}

/* parágrafo de apoio do índice */
.blog-hero__lead {
  max-width: 640px;
  margin-top: var(--sp-4);
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.92);
}

/* ==========================================================================
   3. LAYOUT DE DUAS COLUNAS
   ========================================================================== */

.blog-corpo {
  background: var(--c-gray-100);
  padding-block: var(--sp-16) var(--sp-20);
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: clamp(var(--sp-8), 4vw, 66px);
  align-items: start;
}

/* A régua vertical do Figma (x:1020) é a borda da coluna lateral. Usar
   border-left aqui — e não um elemento próprio — faz ela acompanhar a altura
   do conteúdo sozinha. */
.blog-lateral {
  border-left: 1px solid var(--c-gray-200);
  padding-left: clamp(var(--sp-6), 3vw, 40px);
  align-self: stretch;
}

.blog-bloco + .blog-bloco { margin-top: var(--sp-16); }

/* Rótulo das seções: "DESTAQUES", "ÚLTIMAS MATÉRIAS" */
.blog-secao {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}

.blog-secao__mae { color: inherit; }
.blog-secao__mae:hover { color: var(--c-blue-text); }

.blog-vazio {
  padding: var(--sp-10);
  background: var(--c-white);
  border-radius: 14px;
  font-size: var(--fs-16);
  color: var(--text-muted);
}

/* ==========================================================================
   4. CARDS
   ========================================================================== */

.post-grade { display: grid; gap: var(--sp-6); }

/* card grande: 378x481 no Figma, 2 por linha */
.post-grade--grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* card pequeno: 251x320, 3 por linha */
.post-grade--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 14px;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* O <a> cobre título, texto e imagem; a etiqueta e a data ficam fora dele
   para não virarem parte do texto do link lido em voz alta. */
.post-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
}
.post-card__link:hover { text-decoration: none; }

.post-card__foto { overflow: hidden; border-radius: 11px; }
.post-card picture { display: contents; }

.post-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.post-card:hover .post-card__img { transform: scale(1.04); }

.post-card__titulo {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--c-navy-frio, #06162e);
}

.post-card__texto {
  flex: 1;
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--c-navy-frio, #06162e);
}

.post-card__mais {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  color: var(--c-blue);
  transition: color var(--dur) var(--ease);
}
.post-card:hover .post-card__mais { color: var(--c-blue-text); }

/* rodapé com etiqueta e data */
.post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-14);
  color: var(--c-gray-300);
}

/* ---------- variante grande ---------- */

.post-card--grande { padding: 22px; }

.post-card--grande .post-card__foto { aspect-ratio: 322 / 149; }

.post-card--grande .post-card__titulo {
  margin-top: var(--sp-5);
  font-size: var(--fs-24);
}

.post-card--grande .post-card__texto { margin-top: var(--sp-4); }

/* ---------- variante pequena ---------- */

/* A foto do card pequeno sangra até a borda; por isso ela fica FORA do
   respiro, e o respiro vive no corpo. */
.post-card__foto--sangria {
  border-radius: 0;
  aspect-ratio: 251 / 130;
}

.post-card__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* ---------- etiqueta de categoria ---------- */

.post-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--c-ink);
  white-space: nowrap;
}

/* ==========================================================================
   5. COLUNA LATERAL
   ========================================================================== */

.blog-lateral__rotulo {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink);
}

.blog-cats__lista { display: grid; gap: var(--sp-3); }

.blog-cats__link {
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: 1.35;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
.blog-cats__link:hover { color: var(--c-blue-text); text-decoration: none; }

.blog-cats__link--ativa { color: var(--c-blue); }

.blog-cats__todas {
  display: inline-block;
  margin-top: var(--sp-5);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-blue);
  transition: color var(--dur) var(--ease);
}
.blog-cats__todas:hover { color: var(--c-blue-text); }

.blog-lateral__bloco + .blog-relatorio,
.blog-cats + .blog-relatorio { margin-top: var(--sp-16); }

/* ---------- bloco do relatório ---------- */

.blog-relatorio__titulo {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--c-blue);
}

/* Mesmo peso e mesma cor da lista de categorias: os dois blocos são vizinhos
   na mesma coluna, e diferenças pequenas entre eles leem como descuido, não
   como hierarquia. */
.blog-relatorio__texto {
  margin-top: var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--c-ink);
}

.blog-relatorio__btn { margin-top: var(--sp-5); }

/* ---------- mini-cards de "outros conteúdos" ---------- */

.post-minis {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
}

/* O contorno existe porque estes cards ficam sobre fundo BRANCO (a matéria não
   tem a faixa cinza das listagens): sem ele, o cartão branco não tem borda
   nenhuma e os três parecem soltos na página. */
.post-mini {
  display: block;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: 14px;
  color: inherit;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}
.post-mini:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--c-gray-300);
  text-decoration: none;
}

.post-mini__foto { aspect-ratio: 186 / 112; overflow: hidden; }
.post-mini picture { display: contents; }

.post-mini__titulo {
  display: block;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-navy-frio, #06162e);
}

/* ==========================================================================
   6. PAGINAÇÃO
   ========================================================================== */

.blog-paginacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

.blog-paginacao__link {
  color: var(--c-blue);
  transition: color var(--dur) var(--ease);
}
.blog-paginacao__link:hover { color: var(--c-blue-text); }

.blog-paginacao__atual { color: var(--text-muted); }

/* ==========================================================================
   7. A MATÉRIA
   ========================================================================== */

.materia { padding-block: var(--sp-12) var(--sp-20); }

.materia__trilha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  color: var(--text-muted);
}
.materia__trilha a { color: var(--text-muted); }
.materia__trilha a:hover { color: var(--c-blue-text); }

.materia__titulo {
  margin-top: var(--sp-4);
  font-size: var(--fs-50);
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  color: var(--c-ink);
}

.materia__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-gray-200);
  font-size: var(--fs-14);
  color: var(--c-gray-300);
}

.materia__autor { color: var(--text-muted); }

.materia__meta-dir {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}

.materia__figura {
  margin-top: var(--sp-6);
  overflow: hidden;
  border-radius: var(--r-card);
}
.materia__figura picture { display: contents; }

/* 780x241 no Figma — bem panorâmico. No celular esse corte engole a foto,
   então lá ela volta para 16:9. */
/* `height: auto` é obrigatório aqui: os atributos width/height do <img>
   valem como CSS de baixa prioridade, e o height do atributo (675px) venceria
   o aspect-ratio — a capa saía no formato do arquivo, não no do desenho. */
.materia__capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 241;
  object-fit: cover;
}

/* ---------- o texto ----------
   O Figma desenha o corpo em 18px semibold #717171. Mantivemos o tamanho,
   mas o peso voltou para regular e a cor escureceu para #414141: uma matéria
   inteira em semibold cinza-claro cansa a leitura, que é justamente o que
   esta página existe para sustentar. Reverter é trocar as duas linhas. */
.materia__texto {
  margin-top: var(--sp-10);
  font-size: var(--fs-18);
  line-height: 1.7;
  color: var(--text-body);
}

.materia__texto > * + * { margin-top: var(--sp-5); }

.materia__texto h2 {
  margin-top: var(--sp-12);
  font-size: var(--fs-28);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--c-navy-frio, #06162e);
}

.materia__texto h3 {
  margin-top: var(--sp-10);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-frio, #06162e);
}

.materia__texto ul,
.materia__texto ol { padding-left: var(--sp-6); }
.materia__texto li + li { margin-top: var(--sp-3); }
.materia__texto ul { list-style: disc; }
.materia__texto ol { list-style: decimal; }

/* ⚠️ Único lugar do blog onde o #00b6ff fica em texto corrido: 2.3:1 sobre
   branco, contra os 4.5:1 que a WCAG pede. O sublinhado ajuda a identificar o
   link mesmo com pouco contraste, e o hover escurece. Se em algum momento a
   leitura do corpo pesar mais que a cor da marca, trocar por
   var(--c-blue-text) aqui resolve sem mexer no resto. */
.materia__texto a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
.materia__texto a:hover { color: var(--c-blue-text); }

.materia__texto blockquote {
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-gray-100);
  border-left: 6px solid var(--c-blue);
  font-size: var(--fs-18);
}

.materia__texto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.materia__texto figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-14);
  color: var(--text-muted);
}

/* Tabela larga rola dentro da própria caixa — a página nunca rola de lado. */
.materia__texto table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-16);
}
.materia__texto th,
.materia__texto td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-gray-200);
  text-align: left;
}
.materia__texto th { background: var(--c-gray-100); font-weight: var(--fw-semibold); }

/* ---------- categorias no rodapé da matéria ---------- */

.materia__cats {
  margin-top: var(--sp-20);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-gray-200);
}

.materia__cats-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-10);
  max-width: 720px;
  list-style: none;
  padding: 0;
}

/* ==========================================================================
   8. NA MÍDIA
   ========================================================================== */

/* A sala de imprensa tem cartões menores que os do blog: aqui não há foto,
   e o que identifica a fonte é o logo do veículo. Três colunas em vez de
   duas, porque o cartão é mais baixo e são quase cem deles. */
.post-grade--midia {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.post-card--midia {
  padding: 20px;
  border: 1px solid var(--c-gray-200);
}

/* Altura fixa para a fileira de logos ficar alinhada mesmo com marcas de
   proporções muito diferentes (a da Transpodata é 11 vezes mais larga que
   alta; a da Segs, 2). O logo é servido a 56px de altura e aparece a 28,
   o que o deixa nítido em tela de alta densidade. */
.midia__marca {
  display: flex;
  align-items: center;
  min-height: 34px;
}
.midia__marca picture { display: contents; }
.midia__logo {
  max-width: 150px;
  max-height: 28px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sem logo, o nome do veículo ocupa o mesmo lugar e o mesmo espaço: a fileira
   de cartões continua alinhada. */
.midia__veiculo {
  display: flex;
  align-items: center;
  min-height: 34px;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.midia__marca + .post-card__titulo,
.midia__veiculo + .post-card__titulo { margin-top: var(--sp-3); }

.post-card--midia .post-card__titulo { font-size: var(--fs-16); }
.post-card--midia .post-card__mais { margin-top: auto; padding-top: var(--sp-4); }
.post-card--midia .post-card__meta { margin-top: var(--sp-3); }

@media (max-width: 900px) {
  .post-grade--midia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .post-grade--midia { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. 404
   ========================================================================== */

.blog-corpo--404 { padding-block: var(--sp-20); }

.blog-404__texto {
  max-width: 620px;
  margin: var(--sp-5) 0 var(--sp-12);
  font-size: var(--fs-18);
  line-height: var(--lh-prose);
  color: var(--text-body);
}
.blog-404__texto a { color: var(--c-blue); text-decoration: underline; }
.blog-404__texto a:hover { color: var(--c-blue-text); }

/* ==========================================================================
   10. TELAS MENORES
   ========================================================================== */

@media (max-width: 1080px) {
  .post-grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* A coluna lateral desce para o fim: com menos de 900px ela espremeria os
     cards a ponto de a foto virar uma tira. */
  .blog-layout { grid-template-columns: minmax(0, 1fr); }

  .blog-lateral {
    border-left: 0;
    border-top: 1px solid var(--c-gray-200);
    padding-left: 0;
    padding-top: var(--sp-10);
    margin-top: var(--sp-12);
  }

  .blog-cats__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-6);
  }

  .post-grade--grande { grid-template-columns: minmax(0, 1fr); }

  .materia__capa { aspect-ratio: 16 / 9; }
  .materia__titulo { font-size: var(--fs-40); }
}

@media (max-width: 720px) {
  .blog-hero { min-height: 0; padding-block: var(--sp-14); }
  .blog-hero::before {
    background: linear-gradient(
      180deg, rgb(6 22 46 / 0.88) 0%, rgb(6 22 46 / 0.92) 100%
    );
  }

  .post-grade--tres { grid-template-columns: minmax(0, 1fr); }

  .materia__cats-lista { grid-template-columns: minmax(0, 1fr); }

  .blog-paginacao { justify-content: space-between; gap: var(--sp-3); }
}