/* Blocos de pagina. Continua sem cor literal — tudo vem dos tokens. */

/* ------------------------------------------------------------------- hero */

.hero {
  padding-block: var(--space-24) var(--space-20);
  background:
    radial-gradient(1100px 420px at 12% -12%, var(--color-secondary-soft), transparent 62%),
    var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

.hero__content {
  max-width: 62ch;
}

/* Com imagem, o hero vira duas colunas. Sem imagem, a tipografia carrega
   a hierarquia sozinha — por isso o H1 continua grande. */
.hero--com-imagem .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--space-16);
  align-items: center;
}

.hero--com-imagem .hero__content {
  max-width: none;
}

@media (max-width: 900px) {
  .hero--com-imagem .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .hero--com-imagem .hero__media { order: -1; }
}

.hero__lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__notas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.hero__notas li::before {
  content: "✓";
  margin-right: var(--space-2);
  color: var(--color-secondary);
  font-weight: var(--weight-bold);
}

/* --------------------------------------------------------- card clicavel */

.card--link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.card--link:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card--link .card__title { color: var(--color-primary); }
.card--link:hover .card__title { color: var(--color-secondary); }

/* ------------------------------------------------------ listas de entidade */

.entidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin: 0;
}

.entidade {
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.entidade dt {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.entidade dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.entidades--compacta {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.entidades--compacta .entidade {
  padding: var(--space-4);
}

.lista-marcada {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.lista-marcada li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-text-secondary);
}

/* Paragrafo de abertura que enquadra a secao. Maior que o corpo, mais leve
   que um heading — carrega a contextualizacao sem competir com o H2. */
.destaque {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 64ch;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-secondary);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
}

/* ------------------------------------------------------------- link grid */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-grid li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.link-grid a { text-decoration: none; }
.link-grid a:hover { text-decoration: underline; }

.link-grid--plain li { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- address */

address a {
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   Slots de imagem (secoes 63-67).

   O aspect-ratio reserva o espaco antes de existir arquivo, entao a chegada
   da foto nao empurra o layout. E o que mantem o CLS abaixo de 0.1.
   ------------------------------------------------------------------------- */

.media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Imagem provisoria de diagramacao. O selo so aparece em development; em
   producao o build nem chega aqui — falha antes (guard em content.validar). */
.media--provisoria {
  outline: 2px dashed var(--color-border-strong);
  outline-offset: -2px;
}

.media__selo {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  padding: var(--space-1) var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-muted);
  border-radius: var(--radius-full);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media figcaption {
  padding-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* Gabarito do slot vazio — so existe em development */
.media--slot {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    135deg,
    var(--color-bg-soft),
    var(--color-bg-soft) 14px,
    var(--color-bg) 14px,
    var(--color-bg) 28px
  );
  border: 1px dashed var(--color-border-strong);
}

.media__slot {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  padding: var(--space-6);
  text-align: center;
  max-width: 44ch;
}

.media__slot-tag {
  padding: var(--space-0-5) var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-muted);
  border-radius: var(--radius-full);
}

.media__slot-id {
  font-size: 1rem;
  color: var(--color-text);
}

.media__slot-dim {
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.media__slot-ctx {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.media__slot-path {
  padding: var(--space-1) var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.media__slot-alt {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.media__slot-erro {
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  color: #c13515;
}

/* -------------------------------------------------------------- antes/depois */

.ba-grid {
  display: grid;
  gap: var(--space-12);
}

.ba {
  margin: 0;
}

.ba__par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.ba__lado {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Sem filter, sem brightness, sem transform: manipular o resultado da
   comparacao e explicitamente proibido (secao 87). */
.ba__lado img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ba__rotulo {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow);
}

.ba__rotulo--depois {
  color: var(--color-bg);
  background: var(--color-primary);
}

.ba figcaption {
  padding-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .ba__par { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* -------------------------------------------------------------------------
   Marcador de conteudo pendente.

   So existe em BUILD_MODE=development — o template nem emite o bloco nos
   outros modos. O visual e deliberadamente "andaime": precisa ficar obvio
   que aquilo nao e conteudo final.
   ------------------------------------------------------------------------- */

.pendente {
  margin-block: var(--space-6);
  padding: var(--space-6);
  background: repeating-linear-gradient(
    135deg,
    var(--color-bg-soft),
    var(--color-bg-soft) 12px,
    var(--color-bg) 12px,
    var(--color-bg) 24px
  );
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.pendente__tag {
  display: inline-block;
  margin-right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-muted);
  border-radius: var(--radius-sm);
}

.pendente__bloco {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.pendente__motivo {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  max-width: 76ch;
}

.pendente__motivo em {
  color: var(--color-muted);
  font-style: normal;
}

@media (max-width: 640px) {
  .hero { padding-block: var(--space-16) var(--space-12); }
  .hero__actions .btn { width: 100%; }
}