/* =====================================================================
   PLANTÃO REGIÃO DO CARIRI — Sistema Visual
   "Informação, investigação e transparência"

   Sumário
   01. Design tokens (:root)
   02. Reset + base
   03. Layout (container, section, grid macro)
   04. Componentes: Tag
   05. Componentes: Button
   06. Componentes: NavBar + Header + Drawer
   07. Componentes: FeaturedBlock
   08. Componentes: Card
   09. Placeholders de mídia (substituir por <img> real)
   10. Faixa de denúncia segura
   11. Page hero (páginas internas)
   12. Footer
   13. Acessibilidade / utilitários
   14. Responsividade avançada + print
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* --- Cor: superfícies (dark mode) --- */
  --c-bg: #1a1a1a;
  --c-surface: #222222;
  --c-surface-2: #2a2a2a;
  --c-surface-3: #303030;

  /* --- Cor: linhas --- */
  --c-line: #343434;
  --c-line-strong: #4a4a4a;

  /* --- Cor: texto (todos ≥ 4.5:1 sobre #1a1a1a — WCAG AA) --- */
  --c-text: #ffffff;      /* títulos            — 18.4:1 */
  --c-text-body: #eeeeee; /* corpo / resumos    — 15.3:1 */
  --c-text-muted: #a8a8a8;/* metadados, datas   —  7.3:1 */

  /* --- Cor: accent (tags, faixas, kickers) --- */
  --c-accent: #f4544a;        /* sobre #1a1a1a — 5.15:1 */
  --c-accent-dim: #c93a31;
  --c-accent-ink: #1a1a1a;    /* texto sobre accent — 5.15:1 */
  --c-accent-soft: rgba(244, 84, 74, 0.12);

  /* --- Cor: ação primária (CTA / Support) --- */
  --c-action: #2b5fff;        /* texto branco sobre azul — 5.02:1 */
  --c-action-hover: #1c49d6;
  --c-action-soft: rgba(43, 95, 255, 0.14);

  /* --- Cor: apoio semântico (editorias) --- */
  --c-doc: #d9b45b;  /* documentos / contratos */
  --c-just: #6fb3ff; /* justiça / MP */

  /* --- Cor: bronze da marca (usada em apoio à assinatura) --- */
  --c-bronze: #c98d5b;

  /* --- Tipografia --- */
  --f-display: "Inter Tight", Arial, system-ui, sans-serif;  /* títulos */
  --f-serif: "Lora", Georgia, "Times New Roman", serif;      /* corpo e resumos */
  --f-ui: "Inter Tight", Helvetica, system-ui, sans-serif;   /* menu, tags, interface */

  /* Escala fluida (mobile-first, cresce com a viewport) */
  --t-hero: clamp(1.8rem, 1.2rem + 2.1vw, 2.85rem);
  --t-h1: clamp(1.95rem, 1.35rem + 2.6vw, 3.1rem);
  --t-h2: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem);
  --t-h3: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
  --t-lead: clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem);
  --t-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.14em;
  --ls-nav: 0.1em;

  /* --- Espaçamento (escala 4px, com passos fluidos) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-block: clamp(3rem, 2rem + 5vw, 6.5rem);   /* respiro entre seções */
  --s-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);/* padding lateral      */
  --s-grid-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);

  /* --- Estrutura --- */
  --w-container: 1200px;
  --w-prose: 62ch;
  --h-header: 92px;       /* linha 1 do header (assinatura) */
  --h-navbar: 46px;       /* linha 2 (desktop) */

  /* --- Formas e profundidade --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.04);
  --sh-2: 0 10px 30px -12px rgba(0, 0, 0, 0.75);
  --sh-3: 0 24px 60px -20px rgba(0, 0, 0, 0.85);

  /* --- Movimento --- */
  --tr-fast: 140ms cubic-bezier(0.2, 0, 0.2, 1);
  --tr-base: 240ms cubic-bezier(0.2, 0, 0.2, 1);

  /* --- Camadas --- */
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 210;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   02. RESET + BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + var(--h-navbar) + var(--s-4));
}

body {
  min-height: 100vh;
  background-color: var(--c-bg);
  color: var(--c-text-body);
  font-family: var(--f-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--c-text);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
}

::selection {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* Foco visível consistente em todo o site */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------
   03. LAYOUT
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

.section { padding-block: var(--s-block); }
.section--tight { padding-block: calc(var(--s-block) * 0.55); }
.section + .section { padding-top: 0; }

/* Primeira seção da home: entra logo abaixo da navbar */
.section--hero { padding-top: clamp(1.75rem, 1rem + 1.8vw, 2.75rem); }

/* Cabeçalho de seção: rótulo + regra + ação */
.section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-line-strong);
}

.section-head__title {
  font-size: var(--t-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section-head__title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 0.72em;
  margin-right: var(--s-3);
  background: var(--c-accent);
  translate: 0 0.02em;
}

.section-head__desc {
  flex: 1 1 18ch;
  max-width: 46ch;
  font-size: var(--t-small);
  color: var(--c-text-muted);
  line-height: 1.5;
}

.section-head__link {
  margin-left: auto;
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-accent);
  white-space: nowrap;
  transition: color var(--tr-fast);
}

.section-head__link::after {
  content: " →";
  display: inline-block;
  transition: translate var(--tr-fast);
}

.section-head__link:hover::after { translate: 4px 0; }

/* Eyebrow / kicker reutilizável */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-muted);
}

.eyebrow--accent { color: var(--c-accent); }

/* Grade macro de notícias: 1 → 2 → 3 colunas */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-grid-gap);
}

/* ---------------------------------------------------------------------
   04. COMPONENTE: TAG
   --------------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 0.3em 0.66em;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.tag--outline {
  background: transparent;
  color: var(--c-accent);
  box-shadow: inset 0 0 0 1px currentColor;
}

.tag--doc { background: var(--c-doc); color: #1a1a1a; }
.tag--just { background: var(--c-just); color: #10233a; }
.tag--neutral {
  background: var(--c-surface-3);
  color: var(--c-text-body);
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}

/* Lista de tags/chips */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ---------------------------------------------------------------------
   05. COMPONENTE: BUTTON
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px; /* alvo de toque confortável */
  padding: 0.7em 1.25em;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface-3);
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1;
  text-align: center;
  transition: background var(--tr-fast), color var(--tr-fast),
    translate var(--tr-fast), box-shadow var(--tr-fast);
}

.btn--primary { background: var(--c-action); color: #fff; }
.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}

.btn--sm {
  min-height: 38px;
  padding: 0.55em 0.9em;
  font-size: var(--t-micro);
}

.btn--pill { border-radius: 999px; padding-inline: 1.15em; }

.btn--block { width: 100%; }

.btn__icon { width: 1.05em; height: 1.05em; flex: none; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--c-action-hover); }
  .btn--accent:hover { background: var(--c-accent-dim); color: #fff; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-accent); }
  .btn:hover { translate: 0 -1px; }
}

/* Link de leitura (texto + seta) */
.readmore {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 2px;
  transition: color var(--tr-fast), gap var(--tr-fast);
}

.readmore:hover { color: var(--c-accent); gap: var(--s-3); }

/* ---------------------------------------------------------------------
   06. HEADER + NAVBAR + DRAWER
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(26, 26, 26, 0.94);
  border-bottom: 1px solid var(--c-line);
  padding-top: env(safe-area-inset-top, 0);
  transition: box-shadow var(--tr-base), background var(--tr-base);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header { backdrop-filter: blur(10px) saturate(140%); }
}

.site-header.is-stuck {
  box-shadow: var(--sh-2);
  background: rgba(26, 26, 26, 0.98);
}

/* Faixa fina de identidade no topo */
.site-header__rule {
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--c-accent) 0 32%,
    var(--c-action) 32% 64%,
    var(--c-line-strong) 64% 100%
  );
}

/* Linha 1: hambúrguer | logo central | CTA */
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
}

.header-bar__left { justify-self: start; }

/* mantém a assinatura centrada mesmo sem elemento na terceira coluna */
.header-bar > .brand { grid-column: 2; }

/* Botão hambúrguer */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
}

.hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-text);
  transition: translate var(--tr-base), rotate var(--tr-base),
    opacity var(--tr-fast), background var(--tr-fast);
}

.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

@media (hover: hover) {
  .hamburger:hover .hamburger__bar { background: var(--c-accent); }
}

/* Logomarca no header — visível em celular e desktop */
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand__logo {
  width: auto;
  height: clamp(52px, 6.2vw, 80px);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  transition: height var(--tr-base);
}

/* Ao rolar, a assinatura reduz e libera altura de leitura */
.site-header.is-stuck .brand__logo { height: clamp(44px, 4.6vw, 56px); }

/* Linha 2: navegação horizontal (desktop) */
.navbar { display: none; border-top: 1px solid var(--c-line); }

.navbar__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(var(--s-4), 1.6vw, var(--s-6));
  min-height: var(--h-navbar);
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-block: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  color: var(--c-text-body);
  white-space: nowrap;
  transition: color var(--tr-fast);
}

.navbar__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--c-accent);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--tr-base);
}

.navbar__link:hover { color: var(--c-accent); }
.navbar__link:hover::after { scale: 1 1; }

.navbar__link[aria-current="page"] { color: var(--c-text); }
.navbar__link[aria-current="page"]::after { scale: 1 1; }

/* Drawer (mobile / tablet) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr-base), visibility var(--tr-base);
}

.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  left: 0;
  z-index: var(--z-drawer);
  width: min(88vw, 360px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: calc(var(--s-5) + env(safe-area-inset-top, 0)) var(--s-5)
    calc(var(--s-6) + env(safe-area-inset-bottom, 0));
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  box-shadow: var(--sh-3);
  translate: -100% 0;
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: translate var(--tr-base), visibility var(--tr-base);
}

.drawer.is-open { translate: 0 0; visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}

.drawer__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color var(--tr-fast), color var(--tr-fast);
}

.drawer__close:hover { border-color: var(--c-accent); color: var(--c-accent); }

.drawer__nav { display: flex; flex-direction: column; }

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 1.22rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
}

.drawer__link::before {
  content: attr(data-num);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
}

.drawer__link:hover { color: var(--c-accent); padding-left: var(--s-2); }
.drawer__link[aria-current="page"] { color: var(--c-accent); }

/* ---------------------------------------------------------------------
   07. COMPONENTE: FEATURED BLOCK (matéria principal)
   --------------------------------------------------------------------- */
.featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start; /* texto e imagem alinhados pelo topo */
}

.featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.featured__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.featured__meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-line-strong);
}

/* Título: caixa mista, corpo contido — o peso vem da fonte, não do tamanho */
.featured__title {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.015em;
  text-transform: none;
  max-width: 22ch;
}

.featured__title a { transition: color var(--tr-fast); }
.featured__title a:hover { color: var(--c-accent); }

.featured__dek {
  max-width: 54ch;
  margin-top: var(--s-1);
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--c-text-body);
}

/* Faixa inferior do destaque: editoria + assinatura */
.featured__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-2);
}

.featured__byline {
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}

.featured__byline strong { color: var(--c-text-body); font-weight: 600; }

/* Coluna direita do destaque: imagem + bloco de apuração */
.featured__aside {
  display: grid;
  gap: var(--s-4);
}

/* Bloco de "apuração" — reforça o caráter investigativo */
.dossier {
  width: 100%;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.dossier__title {
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-muted);
}

.dossier__list { display: grid; gap: var(--s-2); }

.dossier__item {
  display: flex;
  gap: var(--s-3);
  font-family: var(--f-ui);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--c-text-body);
}

.dossier__item::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  background: var(--c-accent);
  rotate: 45deg;
}

.dossier__item a { border-bottom: 1px solid var(--c-line-strong); }
.dossier__item a:hover { color: var(--c-accent); border-color: currentColor; }

/* ---------------------------------------------------------------------
   08. COMPONENTE: CARD
   --------------------------------------------------------------------- */
.card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--tr-base), translate var(--tr-base),
    box-shadow var(--tr-base);
}

.card__media-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}

.card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  flex: 1;
}

.card__title {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-transform: none;
}

.card__title a { transition: color var(--tr-fast); }

.card__excerpt {
  font-family: var(--f-serif);
  font-size: var(--t-small);
  line-height: 1.58;
  color: var(--c-text-body);
  /* limita o resumo a 3 linhas para manter a grade regular */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  width: 100%;
  border-top: 1px solid var(--c-line);
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
}

.card__foot .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-line-strong);
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--c-line-strong);
    translate: 0 -3px;
    box-shadow: var(--sh-2);
  }
  .card:hover .card__title a { color: var(--c-accent); }
  .card:hover .ph,
  .card:hover .card__img { scale: 1.04; }
}

.card:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--sh-2);
}

/* Variante horizontal (usada quando o card fica largo) */
@container (min-width: 520px) {
  .card--adaptive { flex-direction: row; }
  .card--adaptive .card__media-wrap {
    flex: 0 0 42%;
    border-bottom: 0;
    border-right: 1px solid var(--c-line);
  }
  .card--adaptive .ph { height: 100%; aspect-ratio: auto; }
  .card--adaptive .card__body { padding: var(--s-5); }
  .card--adaptive .card__excerpt { -webkit-line-clamp: 4; }
}

/* ---------------------------------------------------------------------
   09. ÁREA DE MÍDIA
   --------------------------------------------------------------------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #2e2e2e 0%, #1c1c1c 70%);
  transition: scale var(--tr-base);
}

.ph::before {
  /* trama fina, evoca papel/documento digitalizado */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 7px
    ),
    radial-gradient(circle at 78% 18%, rgba(244, 84, 74, 0.16), transparent 55%);
}

.ph::after {
  /* marca d'água da editoria */
  content: attr(data-label);
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 4cqi, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.09);
}

/* Fotos publicadas (mesmo enquadramento das molduras) */
.card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale var(--tr-base);
}

.featured__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}

.ph--featured { aspect-ratio: 16 / 9; }
.ph--wide { aspect-ratio: 21 / 9; }

/* Variações cromáticas por editoria */
.ph--a { background: linear-gradient(145deg, #332b2a 0%, #1b1919 72%); }
.ph--b { background: linear-gradient(145deg, #26303a 0%, #191c1f 72%); }
.ph--c { background: linear-gradient(145deg, #33301f 0%, #1c1b17 72%); }
.ph--d { background: linear-gradient(145deg, #2b2b33 0%, #191920 72%); }
.ph--e { background: linear-gradient(145deg, #24332c 0%, #171c19 72%); }
.ph--f { background: linear-gradient(145deg, #322430 0%, #1d171c 72%); }

/* Etiqueta sobre a mídia (canto) */
.media-flag {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1;
}

.media-credit {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-2);
  z-index: 1;
  max-width: calc(100% - var(--s-6));
  font-family: var(--f-ui);
  font-size: 0.68rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: right;
  color: rgba(255, 255, 255, 0.62);
}

/* Sobre a foto do card o crédito precisa de um véu para continuar legível */
.card__media-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none;
}

.card__media-wrap .media-credit {
  right: var(--s-2);
  bottom: 4px;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
   10. BLOCO INSTITUCIONAL (página Sobre)
   --------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: start;
}

.about-info {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.about-info__title {
  font-size: var(--t-h3);
  text-transform: uppercase;
}

.about-info__email {
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  line-height: 1.4;
  word-break: break-word;
}

.about-info__email a {
  color: var(--c-text);
  border-bottom: 1px solid var(--c-accent);
}

.about-info__email a:hover { color: var(--c-accent); }

/* ---------------------------------------------------------------------
   10b. MATÉRIA (página de reportagem)
   --------------------------------------------------------------------- */
.materia {
  padding-block: clamp(1.75rem, 1rem + 2vw, 3rem) 0;
}

.materia > * {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--s-gutter);
}

.materia__head {
  display: grid;
  gap: var(--s-3);
  max-width: calc(var(--w-container) * 0.72);
}

.materia__title {
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: none;
}

.materia__dek {
  max-width: 60ch;
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--c-text-body);
}

.materia__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
}

.materia__figure {
  margin-block: var(--s-5);
}

.materia__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}

.materia__caption {
  margin-top: var(--s-2);
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.materia__body {
  max-width: var(--w-prose);
  font-family: var(--f-serif);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.12rem);
  line-height: 1.72;
  color: var(--c-text-body);
}

.materia__body p + p { margin-top: var(--s-4); }

.materia__body h2 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
  text-transform: none;
  color: var(--c-text);
}

.materia__body a {
  color: var(--c-text);
  border-bottom: 1px solid var(--c-accent);
}

.materia__body a:hover { color: var(--c-accent); }

.materia__back { margin-top: var(--s-6); }

/* ---------------------------------------------------------------------
   11. PAGE HERO (páginas internas)
   --------------------------------------------------------------------- */
.page-hero {
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(90% 130% at 8% -10%, rgba(244, 84, 74, 0.1), transparent 60%),
    var(--c-bg);
}

.page-hero__inner { display: grid; gap: var(--s-4); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: var(--s-2);
  color: var(--c-line-strong);
}

.breadcrumb a:hover { color: var(--c-accent); }

.page-hero__title {
  font-size: var(--t-h1);
  text-transform: uppercase;
}

.page-hero__lead {
  max-width: var(--w-prose);
  font-family: var(--f-serif);
  font-size: var(--t-lead);
  color: var(--c-text-body);
}

/* Paginação */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-text-body);
  transition: border-color var(--tr-fast), color var(--tr-fast);
}

.pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.pagination [aria-current="page"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

/* ---------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--s-block);
  background: var(--c-surface);
  border-top: 3px solid var(--c-accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
}

.footer-brand { display: grid; gap: var(--s-4); max-width: 42ch; justify-items: start; }

.footer-logo { display: inline-block; }

.footer-logo img {
  width: auto;
  height: clamp(96px, 11vw, 132px);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.footer-brand__text {
  font-family: var(--f-serif);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  line-height: 1.6;
}

.footer-col__title {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line-strong);
  font-family: var(--f-display);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text);
}

.footer-col__list { display: grid; gap: var(--s-3); }

.footer-col__list a {
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
}

.footer-col__list a:hover { color: var(--c-accent); padding-left: 3px; }

/* Faixa inferior: copyright + legais */
.footer-bar { border-top: 1px solid var(--c-line); }

.footer-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-4);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0));
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  color: var(--c-text-muted);
}

.footer-bar__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}

.footer-bar__links a:hover { color: var(--c-accent); }

/* ---------------------------------------------------------------------
   13. ACESSIBILIDADE / UTILITÁRIOS
   --------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: var(--s-4);
  z-index: 999;
  padding: var(--s-2) var(--s-4);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 0 0 var(--r-md) var(--r-md);
  translate: 0 -110%;
  transition: translate var(--tr-fast);
}

.skip-link:focus { translate: 0 0; }

.aviso-vazio {
  grid-column: 1 / -1;
  padding: var(--s-5) 0;
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}

.aviso-js {
  width: 100%;
  max-width: var(--w-container);
  margin: var(--s-6) auto 0;
  padding-inline: var(--s-gutter);
  font-family: var(--f-ui);
  font-size: var(--t-small);
  color: var(--c-text-muted);
}

/* Área clicável estendida do título do card, sem perder semântica */
.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.is-relative { position: relative; }

/* ---------------------------------------------------------------------
   14. RESPONSIVIDADE AVANÇADA
   Estratégia mobile-first: 1 coluna → 2 colunas → 3 colunas.
   --------------------------------------------------------------------- */

/* ≥ 480px — telefones grandes */
@media (min-width: 30em) {
  .footer-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ≥ 640px — tablet retrato: grade em 2 colunas */
@media (min-width: 40em) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); }
}

/* ≥ 900px — desktop: navbar horizontal, destaque em 2 colunas */
@media (min-width: 56.25em) {
  .navbar { display: block; }

  .featured {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
  }
  .featured__body { gap: var(--s-4); }

  .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-7);
  }

  .page-hero__inner { max-width: 80ch; }
}

/* ≥ 1000px — grade em 3 colunas */
@media (min-width: 62.5em) {
  .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* primeiro card ganha destaque secundário ocupando 2 colunas */
  .news-grid--emphasis > :first-child { grid-column: span 2; }
}

/* ≥ 1400px — telas grandes: mais ar, tipografia um passo acima */
@media (min-width: 87.5em) {
  :root {
    --w-container: 1280px;
    --s-block: 7rem;
  }
}

/* Telefone em paisagem: reduz alturas verticais */
@media (max-width: 56.25em) and (orientation: landscape) {
  :root { --s-block: 2.5rem; }
  .ph--featured { aspect-ratio: 16 / 9; }
  .drawer { padding-block: var(--s-4); }
  .drawer__link { padding-block: var(--s-3); font-size: 1.05rem; }
}

/* Preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover { translate: none; }
  .btn:hover { translate: none; }
}

/* Mais contraste quando o sistema pede */
@media (prefers-contrast: more) {
  :root {
    --c-text-muted: #d0d0d0;
    --c-line: #5a5a5a;
    --c-line-strong: #7a7a7a;
  }
  .card { border-width: 2px; }
}

/* Impressão */
@media print {
  .site-header,
  .drawer,
  .overlay,
  .site-footer,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #999; break-inside: avoid; }
  .ph { display: none; }
}