/* galeria.css — estante de infográficos ilustrados (Variante A).
 *
 * Grade de cartões-capa com acento por classe processual (--capa-acento vem do
 * JSON, inline por cartão). Espelha a linguagem do acervo (frontend/styles/
 * acervo.css): cartão claro, cabeçalho tingido, spine de acento, botões na cor.
 */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--escala-base);
  line-height: var(--altura-linha);
  color: var(--texto);
  background: var(--fundo);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.sem-scroll { overflow: hidden; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cor-titulo);
  color: #fff;
  padding: var(--esp-2) var(--esp-4);
  border-radius: 0 0 var(--raio) 0;
  z-index: 20;
}
.skip-link:focus { left: 0; }

/* outline é a técnica correta (não desloca layout), mas o avaliador eMAG
   (ASES, critério 4.4.1) só reconhece a propriedade `border` como indicador
   de foco — border aqui é reforço redundante para esse checklist, não
   substitui o outline. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border: 2px solid var(--foco);
  border-radius: 3px;
}

/* ── Barra de acessibilidade (fonte ± e alto contraste) ─────────────────── */
.barra-a11y {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--esp-2);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--esp-2) var(--esp-5) 0;
}
/* Embarcado no portal, a barra some assim que o pai assume o controle
 * (util/a11y.js:aplicarDeFora — PLANO_ACESSIBILIDADE.md, Fase 2). O `[hidden]`
 * nativo vale `display:none`, mas PERDE para o `display:flex` de autor logo
 * acima — mesma pegadinha já registrada para `.leitor__simples-audio`. */
.barra-a11y[hidden] { display: none; }
.a11y__btn {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cor-forte);
  background: var(--cor-branco);
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: all var(--transicao);
}
.a11y__btn:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.a11y__btn:disabled { opacity: 0.4; cursor: default; }
.a11y__btn[aria-pressed='true'] {
  color: #fff;
  background: var(--cor-titulo);
  border-color: var(--cor-titulo);
}

/* ── Cabeçalho (masthead claro, espelha .acervo__cabecalho) ─────────────── */
.cabecalho {
  background: transparent;
  padding: var(--esp-7) var(--esp-5) 0;
}
.cabecalho__interno {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.cabecalho__chapeu {
  margin: 0 0 20px;
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--acento);
}
.cabecalho__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: var(--escala-h1);
  line-height: var(--altura-linha-titulo);
  color: var(--cor-titulo);
}
.cabecalho__sub {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cor-suave);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
#conteudo { outline: none; }

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-5) var(--esp-7);
}

/* ── Toolbar (barra de ferramentas, espelha .acervo__ferramentas) ───────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--esp-6);
  padding: 14px 0;
  border-top: 1px solid var(--cor-fio);
  border-bottom: 1px solid var(--cor-fio);
}
/* Guard: o atributo `hidden` (UA display:none) é sobreposto por display:flex
   acima; sem isto a barra vazia mostra os fios quando há ≤1 item. */
.toolbar[hidden] { display: none; }

/* Busca em cápsula clara com lupa (espelha .acervo__busca). */
.toolbar__busca {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 380px;
  padding: 10px 16px;
  color: var(--cor-label);
  background: var(--cor-branco);
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
  transition: border-color var(--transicao);
}
.toolbar__busca:focus-within { border-color: var(--acento); }
.toolbar__lupa { flex: none; color: var(--cor-label); }
.toolbar__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: transparent;
  border: 0;
}
.toolbar__input:focus { outline: none; }
.toolbar__input::placeholder { color: var(--cor-suave); }
.toolbar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.toolbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.chip {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-suave);
  background: var(--cor-branco);
  border: 1px solid var(--cor-fio);
  border-radius: var(--raio-pilula);
  padding: 0.38rem 0.8rem;
  cursor: pointer;
  transition: all var(--transicao);
}
.chip:hover { border-color: var(--capa-acento, var(--acento)); color: var(--capa-acento, var(--acento)); }
.chip--ativo {
  color: #fff;
  background: var(--capa-acento, var(--acento));
  border-color: var(--capa-acento, var(--acento));
}

/* ── Grade + cartão ─────────────────────────────────────────────────────── */
.grade {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--cor-fio-card);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.card:hover { box-shadow: var(--sombra-card-hover); transform: translateY(-2px); }

/* Capa clicável (miniatura). */
.card__capa {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--capa-tint, var(--cor-realce-claro));
  cursor: pointer;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__capa::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--capa-acento, var(--acento));
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.card__img--vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--fonte-mono);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--capa-acento, var(--acento));
}

.card__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5) var(--esp-5) var(--esp-4);
  flex: 1 1 auto;
}
.card__cabec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}
.card__classe {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--capa-acento, var(--acento));
  padding: 0.2rem 0.55rem;
  border-radius: var(--raio-pilula);
}
.card__informativo {
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--cor-sub);
}

.card__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--cor-titulo);
}
.card__titulo-link {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.card__titulo-link:hover { color: var(--capa-deep, var(--acento)); }

.card__meta {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--cor-suave);
}

.card__acoes {
  display: flex;
  gap: var(--esp-2);
  margin-top: auto;
  padding-top: var(--esp-2);
}
.card__acao {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  text-align: center;
  padding: 0.55rem 0.9rem;
  border-radius: var(--raio-pilula);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.card__acao--abrir {
  flex: 1 1 auto;
  border: 0;
  color: #fff;
  background: var(--capa-acento, var(--acento));
}
.card__acao--abrir:hover { background: var(--capa-deep, var(--acento)); }
.card__acao--pdf {
  flex: 0 0 auto;
  border: 1px solid var(--cor-fio);
  color: var(--capa-acento, var(--acento));
  background: var(--cor-branco);
}
.card__acao--pdf:hover { background: var(--capa-tint, var(--cor-realce-claro)); }

/* ── Estados / vazio ────────────────────────────────────────────────────── */
.estado {
  color: var(--cor-suave);
  text-align: center;
  padding: var(--esp-6) 0;
}
.estado--erro { color: var(--cor-bordo); }
.vazio {
  background: var(--cor-branco);
  border: 1px solid var(--cor-fio-card);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  max-width: 460px;
  margin: var(--esp-7) auto;
  padding: var(--esp-6) var(--esp-5);
  text-align: center;
}
.vazio strong { display: block; font-size: 1.3rem; color: var(--cor-titulo); margin-bottom: var(--esp-2); }
.vazio span { color: var(--cor-suave); line-height: 1.55; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: rgba(12, 14, 22, 0.82);
  backdrop-filter: blur(2px);
}
/* Controles flutuantes (canto superior direito), sobre o infográfico — no lugar
   da antiga barra navy de largura total (que não assentava bem embarcada num
   iframe). Cluster: um ⋮ (menu de ações) + um ✕ (fechar). */
.lightbox__controles {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
}
.lightbox__menu-wrap { position: relative; }
.lightbox__ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--cor-navy-texto);
  background: rgba(28, 32, 48, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-pilula);
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: var(--sombra-pilula);
  transition: background var(--transicao), transform var(--transicao);
}
.lightbox__ctrl:hover { background: rgba(28, 32, 48, 0.92); }
.lightbox__ctrl:focus-visible {
  outline: 2px solid var(--cor-navy-texto);
  outline-offset: 2px;
}
.lightbox__ctrl[aria-expanded='true'] { background: rgba(28, 32, 48, 0.95); }

/* Dropdown de ações do ⋮ */
.lightbox__menu {
  position: absolute;
  top: calc(100% + var(--esp-2));
  right: 0;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding: var(--esp-1);
  background: var(--cor-navy);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7);
}
.lightbox__menu[hidden] { display: none; }
.lightbox__menu-item {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--cor-navy-texto);
  padding: 0.55rem 0.7rem;
  border-radius: calc(var(--raio) - 4px);
  white-space: nowrap;
  transition: background var(--transicao);
}
.lightbox__menu-item:hover,
.lightbox__menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.lightbox__palco {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--esp-5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.lightbox__img {
  max-width: 720px;
  width: 100%;
  height: auto;
  border-radius: var(--raio);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  background: #fff;
}

/* Palco em modo HTML: o iframe ocupa toda a área útil, sem recuo. */
.lightbox__palco--frame {
  padding: 0;
  display: block;
  overflow: hidden;
}
.lightbox__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ── Responsivo / movimento ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .grade { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
  /* Em coluna, o flex-basis passa a valer na ALTURA; sem isto a cápsula de
     busca cresce verticalmente. Volta à altura do conteúdo, largura cheia. */
  .toolbar__busca { flex: 0 0 auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}

/* ── Alto contraste (data-contraste="alto" via a11y.js) ─────────────────────
   Reforça tinta, fios e foco para leitura AAA. Os acentos por classe (inline)
   permanecem, mas ganham contorno mais forte no cartão. */
:root[data-contraste='alto'] {
  --cor-tinta: #000;
  --cor-titulo: #000;
  --cor-forte: #000;
  --cor-suave: #1a1a1a;
  --cor-label: #1a1a1a;
  --cor-sub: #1a1a1a;
  --cor-fio: #000;
  --cor-fio-card: #000;
  --cor-fio-suave: #333;
  --cor-fio-tenue: #333;
  --fundo: #fff;
  --superficie: #fff;
  --texto: #000;
  --texto-suave: #1a1a1a;
  --foco: #000;
}
:root[data-contraste='alto'] .card,
:root[data-contraste='alto'] .chip,
:root[data-contraste='alto'] .toolbar__busca,
:root[data-contraste='alto'] .a11y__btn { border-width: 2px; }
:root[data-contraste='alto'] .card__meta,
:root[data-contraste='alto'] .cabecalho__sub,
:root[data-contraste='alto'] .card__informativo { color: #000; }
:root[data-contraste='alto'] :focus-visible { outline-width: 3px; }

/* ---------- Alto Contraste do Windows (forced-colors, Fase 7) ------------
   O navegador já troca a maior parte das cores pelas do sistema; aqui só
   reforçamos o foco e o estado pressionado, que dependeriam só de cor/sombra
   para se distinguir do resto. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .a11y__btn[aria-pressed='true'] { border-width: 2px; outline: 2px solid CanvasText; }
}