/* ==========================================================================
   Mattera Lab — páginas internas (coleção, sobre, contato)
   Só o que layout.css ainda não resolve. Depende de tokens.css, base.css
   e layout.css, e é carregado DEPOIS dos três.
   Nada aqui redefine classe existente.
   ========================================================================== */

/* --- Hero das páginas internas -------------------------------------------
   A foto de abertura da coleção é um retrato (2:3) e o assunto vive na metade
   de baixo do arquivo. No telefone o quadro quase bate com a proporção nativa,
   então 85svh mostra a foto praticamente inteira. */
.hero--interna img {
  height: var(--altura-hero-interna);
  height: 85svh;
  object-position: center 33%;
}

/* A partir de 1024 a faixa fica larga e o 85svh vira panorâmica: o cover
   preservaria só uns 23% da altura do arquivo, e as peças, que estão embaixo,
   sairiam do quadro. Como no hero da home, a moldura passa a ter proporção
   fixa — 4:3, a mais larga que ainda cabe o assunto inteiro — e o corte desce
   para 83%. Medido no arquivo: as peças ocupam de 42,8% a 90,6% da altura
   (47,8%), e o 4:3 mostra 50%; a janela fica em 41,5%–91,5%, com folga nas
   duas pontas e nenhuma parede vazia. */
@media (min-width: 1024px) {
  .hero--interna img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-position: center 83%;
  }
}

/* --- Página atual no menu -------------------------------------------------
   O menu é a única navegação do site: quem está numa página precisa ver
   qual é. Mesmo sublinhado dos links de texto, no camelo. */
.menu__lista [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cor-link-linha);
  text-underline-offset: 0.25em;
}

/* --- Bloco de texto solto -------------------------------------------------
   Abertura de página e seções sem imagem ao lado: alinhado à esquerda,
   travado na medida de leitura. O item editorial continua sendo o .item. */
.bloco {
  max-width: var(--largura-prosa);
  margin-top: var(--ritmo-item);
}

.bloco > * + * { margin-top: var(--esp-2); }

/* --- Manifesto ------------------------------------------------------------
   O texto mais importante do site: corpo maior que o resto, medida mais
   curta e respiro maior entre parágrafos. Peso continua 300. */
.manifesto {
  max-width: 26em;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18px → 24px */
  line-height: 1.4;
}

.manifesto > * + * { margin-top: var(--esp-4); }

.manifesto__fecho {
  font-style: italic;
  margin-top: var(--esp-6);
}

/* --- Ficha técnica --------------------------------------------------------
   dt e dd na mesma linha, para herdar o text-align do bloco de texto
   (à direita no desktop, à esquerda no mobile). */
.ficha > div + div { margin-top: var(--esp-1); }

.ficha dt {
  display: inline;
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: lowercase;
  color: var(--cor-texto-suave);
}

.ficha dd {
  display: inline;
  margin: 0;
}

/* --- Chamada de contato ---------------------------------------------------
   O único botão do site: link para o Instagram na página de contato.
   Marrom da marca com texto cru — 13,43:1 — e 44px de alvo de toque.
   Sem hover, como o resto do site: a distinção é a superfície, não o efeito. */
/* Especificidade de dois: .bloco > * + * já reivindica a margem destes filhos. */
.bloco .chamada { margin-top: var(--esp-4); }

/* Contorno fino em vez de bloco de cor: o site é branco e um retângulo
   marrom cheio compete com a fotografia. Contraste do texto sobre o branco:
   13,4:1 — bem acima do mínimo, sem precisar de superfície escura. */
.botao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--esp-1) var(--esp-4);
  background-color: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-texto);
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-nav);
  transition: background-color 240ms ease-in-out, color 240ms ease-in-out;
}
.botao:hover,
.botao:focus-visible {
  background-color: var(--cor-texto);
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } }

/* main p a ganha sublinhado no base.css; aqui a superfície já marca o link. */
.botao,
main p a.botao { text-decoration: none; }

/* ── Cabeçalho e navegação das páginas internas ───────────────────────────
   Alinhados ao padrão da home: barra branca, texto solto, sem caixa e sem
   véu. Diferença justificada: as internas ROLAM e têm texto longo, então o
   cabeçalho é sticky (a home não precisa, porque não rola). O menu vive nele
   em vez de flutuar sobre o conteúdo — flutuar exigiria fundo próprio, e é
   exatamente o retângulo que foi descartado. */
.cabecalho {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--cor-divisor, #e1dfe1);
}
.cabecalho__nav {
  margin-left: auto;
  display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 2.4vw, 34px);
}
.cabecalho__nav a {
  position: relative;
  color: var(--marca-marrom);
  text-decoration: none;
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
  min-height: 44px;            /* WCAG 2.5.8: "Sobre" tem só ~37px de texto */
  display: inline-flex; align-items: center;
}
.cabecalho__nav a[aria-current="page"] { opacity: .55; }

/* O sticky come a âncora de #conteudo ao pular; devolve o espaço. */
main[id] { scroll-margin-top: 6rem; }

/* Seletor de idioma das internas: mesmo tratamento da home — texto solto no
   canto inferior direito, sem caixa nem borda. Substitui o .idiomas-fixo
   antigo, que tinha fundo branco (o "retângulo" descartado) e, pior, sumia
   abaixo de 1024px, deixando quem está no celular sem como trocar de idioma. */
.idiomas {
  position: fixed;
  right: clamp(14px, 2.6vw, 28px);
  bottom: clamp(6px, 1.5svh, 16px);
  z-index: 20;
  display: flex; align-items: center; gap: .5em;
  margin: 0;
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
}
.idiomas span { opacity: .5; color: var(--marca-marrom); user-select: none; }
.idiomas a {
  color: var(--marca-marrom);
  text-decoration: none;
  text-transform: uppercase;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.idiomas a[aria-current="page"] { opacity: .5; }