/* ==========================================================================
   Mattera Lab — layout
   Mobile-first. CSS Grid. Sem framework, sem dependência.
   Depende de tokens.css e base.css.
   ========================================================================== */

/* --- Contêiner -----------------------------------------------------------
   O ar não é padding simétrico: é uma coluna vazia à esquerda (27%, com piso
   em px), contra 6% à direita. Essa coluna é o lugar do menu fixo — ver
   --margem-esq em tokens.css. No mobile, 20px dos dois lados. */
.conteudo {
  padding-inline: var(--esp-3);
}

/* Espaço para a barra de menu fixa no rodapé da tela (mobile). */
body { padding-bottom: 4.5rem; }

/* --- Header ---------------------------------------------------------------
   Não é fixo: rola para fora junto com o conteúdo. Fundo branco puro — não o
   cru do manual —, mesma decisão explícita do dono aplicada na home; o
   padding dá folga ≥0,5× a altura da marca em toda volta (manual p.06). */
.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-3);
  background: #fff;
  border-bottom: 1px solid var(--foto-sombra);
}

.cabecalho__logo {
  width: 150px;
  color: var(--cor-texto);
}

.cabecalho__tagline {
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-nav);
  color: var(--cor-texto-suave);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  margin: 0;
}

.hero img {
  width: 100%;
  min-height: var(--altura-hero-interna);
  min-height: 85svh;
  object-fit: cover;
  object-position: center;
}

/* Hero da home: a foto é um flat-lay que ocupa o quadro inteiro e não tem
   margem sobrando para o cover comer. Por isso a moldura assume a proporção
   nativa do arquivo em vez de uma altura em svh — assim nada é cortado e o
   arquivo escolhido nunca é ampliado. Mobile recebe o recorte vertical. */
.hero--home img {
  min-height: 0;
  aspect-ratio: 3 / 4;
}

/* --- Item editorial -------------------------------------------------------
   Mobile: uma coluna, IMAGEM PRIMEIRO e texto embaixo (inverte o desktop).
   Desktop: 510 / 495 / 139 — texto alinhado à direita, colado na imagem. */
.item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-3);
  margin-top: var(--ritmo-item);
}

.item__figura { order: -1; }

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

.item__titulo {
  font-size: var(--fs-corpo);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-corpo);
}

.item__prosa { max-width: var(--largura-prosa); }

/* --- Figura interlúdio ----------------------------------------------------
   Figura solta, filha direta de .conteudo, entre dois itens: é a pausa que
   quebra a coluna de retratos. Margem própria nos dois lados — sem ela ficava
   colada no item de cima e com todo o ar embaixo. */
.conteudo > .figura {
  margin-block: var(--ritmo-item);
}

/* --- Seção alternada ------------------------------------------------------
   Uma única superfície diferente no site inteiro, como na referência. */
.faixa-alt {
  background-color: var(--cor-fundo-alt);
  border-block: 1px solid var(--cor-linha);
  padding-block: var(--esp-6);
  margin-top: var(--ritmo-item);
}

.faixa-alt .item:first-child { margin-top: 0; }

/* Quando a faixa fecha a página, a borda de baixo viraria uma divisória órfã
   entre ela e o rodapé: não desenha nada, só sobra risco. */
.faixa-alt:last-child { border-block-end: 0; }

/* --- Menu fixo ------------------------------------------------------------
   Mobile: barra sólida no rodapé da tela. O botão abre o painel COM FUNDO
   SÓLIDO (a referência abre sem fundo, texto por cima da foto).
   PT|EN mora dentro da própria barra (grid-area idiomas, à direita — já é
   "inferior-direito" dentro do único elemento fixo do rodapé). No desktop
   (≥1024px) a barra vira a caixinha do canto inferior-esquerdo e PT|EN sai
   dela: viraria uma segunda barra fixa se ficasse, então no desktop mora em
   .idiomas-fixo, canto inferior-direito da TELA — ver mais abaixo. */
.menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: var(--cor-menu-fundo);
  border-top: 1px solid var(--cor-linha);
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--fs-nav);
  font-weight: var(--peso-normal);
  letter-spacing: var(--tracking-nav);
  /* No DOM o botão vem ANTES da lista: quem abre o painel pelo teclado cai
     dentro do que abriu, no Tab seguinte. Visualmente a barra continua
     embaixo e a lista aberta em cima — quem devolve essa ordem é a grade,
     não uma reordenação de foco. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "lista lista"
    "botao idiomas";
  align-items: center;
}

/* Alvos de toque do menu: 44×44 (WCAG 2.5.8). O respiro vem do min-height,
   não de gap — assim a área clicável e o ritmo visual são a mesma coisa. */
.menu__botao {
  grid-area: botao;
  justify-self: start;
  background: none;
  border: 0;
  padding: 0 var(--esp-1);
  min-height: 44px;
  min-width: 44px;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--cor-texto);
  cursor: pointer;
}

.menu__lista {
  grid-area: lista;
  display: none;
}

.menu[data-aberto="true"] .menu__lista {
  display: grid;
  padding-bottom: var(--esp-1);
  animation: fadeIn var(--dur-ui) var(--curva);
}

.menu__lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.menu__idiomas {
  grid-area: idiomas;
  justify-self: end;
  display: flex;
  align-items: center;
  color: var(--cor-texto-suave);
}

.menu__idiomas a,
.menu__idiomas [aria-current="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.menu__idiomas [aria-current="true"] { color: var(--cor-texto); }

/* --- PT|EN: canto inferior-direito da TELA (desktop) -----------------------
   Só existe ≥1024px — abaixo disso o PT|EN da própria barra (.menu__idiomas,
   acima) já cobre "inferior-direito"; duplicar aqui criaria uma segunda
   barra fixa sobre a primeira. Fundo sólido branco: o elemento é fixed e a
   página rola por baixo dele, então em algum momento o rodapé escuro
   (marrom) pode estar exatamente atrás — sem fundo opaco o texto marrom
   sumiria contra o rodapé marrom (1:1). Não é véu: é opaco, sem gradiente,
   do mesmo jeito que o cabeçalho já é. */
.idiomas-fixo { display: none; }
@media (min-width: 1024px) {
  .idiomas-fixo {
    position: fixed;
    right: clamp(14px, 2.6vw, 28px);
    bottom: clamp(10px, 2svh, 20px);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .5em;
    background: #fff;
    border: 1px solid var(--foto-sombra);
    padding: 4px 8px;
    color: var(--cor-texto-suave);
  }

  .idiomas-fixo a,
  .idiomas-fixo [aria-current="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .idiomas-fixo [aria-current="true"] { color: var(--cor-texto); }

  /* A barra deixa de existir como barra no desktop (vira a caixinha do
     menu); o PT|EN dela não deve renderizar em paralelo ao .idiomas-fixo. */
  .menu__idiomas { display: none; }
}

/* --- Rodapé --------------------------------------------------------------- */
.rodape {
  /* Sem bloco de cor: o dono pediu o site todo branco. A separação vem de um
     fio discreto, não de uma faixa bordô que competia com a fotografia. */
  background-color: transparent;
  color: var(--cor-texto);
  border-top: 1px solid var(--foto-sombra, #e1dfe1);
  padding: var(--esp-6) var(--esp-3);
}

.rodape a { color: var(--cor-texto); }
.rodape a.link { text-decoration-color: var(--cor-link-linha); }

.rodape__manifesto {
  font-style: italic;
  font-weight: var(--peso-normal); /* só existe itálico 400 em arquivo */
  max-width: var(--largura-prosa);
}

.rodape__contato {
  display: grid;
  gap: var(--esp-1);
  margin-bottom: var(--esp-4);
}

/* O ritmo aqui é o gap da grade; a margem de p + p desalinharia as colunas. */
.rodape__contato p { margin-top: 0; }

/* ==========================================================================
   Tablet — 768px
   ========================================================================== */
@media (min-width: 768px) {

  /* Acima do mobile o hero volta à proporção nativa da foto (3:2). */
  .hero--home img { aspect-ratio: 3 / 2; }

  .cabecalho { padding: 30px var(--esp-5) 22px; } /* ≥0,5× a altura da marca (180px de largura → ~40px de altura) em toda volta */

  .cabecalho__logo { width: 180px; }

  .conteudo { padding-inline: var(--esp-5); }

  .rodape { padding: var(--esp-7) var(--esp-5); }

  .rodape__contato {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-2);
  }
}

/* ==========================================================================
   Desktop — 1024px: entram a margem esquerda larga, o item de 3 colunas
   e o menu no canto inferior esquerdo.
   ========================================================================== */
@media (min-width: 1024px) {

  body { padding-bottom: 0; }

  .conteudo {
    padding-left: var(--margem-esq);
    padding-right: var(--margem-dir);
  }

  .item {
    grid-template-columns: var(--grade-item-media);
    column-gap: 0;
    /* 28,8px — o ritmo vertical da referência. Era 2%, mas a porcentagem
       resolve contra a largura do bloco contentor (965px em 1440), e não da
       janela: dava 19px em 1440 e 13px em 1024, nunca os 28,8 pretendidos. */
    margin-top: var(--esp-4);
  }

  .item__texto {
    grid-column: 1;
    text-align: right;
    padding-right: var(--esp-4);
  }

  .item__prosa { margin-left: auto; }

  .item__figura {
    grid-column: 2;
    order: 0; /* desktop volta à ordem texto → imagem */
  }

  .faixa-alt { padding-block: var(--esp-7); }

  .rodape {
    padding-left: var(--margem-esq);
    padding-right: var(--margem-dir);
    /* Sem reserva extra embaixo: o menu vive dentro da coluna vazia da
       esquerda, à esquerda de --margem-esq, e não alcança mais o texto. */
  }

  /* Menu no canto inferior esquerdo. Fundo sólido branco, borda finíssima —
     mesmo vocabulário do cabeçalho, NUNCA o véu de gradiente que existia
     aqui (o dono pediu para tirar). É fixo e a página rola por baixo dele:
     sem fundo opaco, o texto marrom cairia às vezes sobre foto, às vezes
     sobre o rodapé marrom (1:1 com o próprio texto) — o oposto de "medir
     contraste", seria apostar nele. Sólido resolve isso de graça, sem
     depender de qual conteúdo está por trás em cada posição de rolagem. */
  .menu {
    display: flex;
    flex-direction: column;
    /* desfaz o center da barra mobile: em coluna ele encolheria a lista
       para a largura do texto, centralizada. */
    align-items: stretch;
    left: var(--menu-offset);
    bottom: var(--menu-offset);
    right: auto;
    width: var(--menu-largura);
    border-top: 0;
    border: 1px solid var(--foto-sombra);
    padding: var(--esp-2);
    background-color: #fff;
  }

  /* Cinética discreta: o mesmo vocabulário da home (recuo + traço crescendo
     no hover/foco), em CSS puro — a caixa é pequena e fixa, não precisa da
     proximidade por JS que a home usa sobre uma foto grande. */
  .menu__lista a {
    position: relative;
    transition: transform 240ms ease-in-out;
  }
  .menu__lista a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms ease-in-out;
  }
  .menu__lista a:hover,
  .menu__lista a:focus-visible { transform: translateX(4px); }
  .menu__lista a:hover::after,
  .menu__lista a:focus-visible::after { transform: scaleX(1); }
  /* A página atual já ganha sublinhado permanente em paginas.css
     (.menu__lista [aria-current="page"]) — não duplicar aqui. */

  /* Aqui não há barra: a coluna do flex devolve a ordem visual do DOM. */
  .menu__botao { display: none; }

  .menu__lista,
  .menu[data-aberto="true"] .menu__lista {
    display: grid;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Largo — 1440px: sobra largura para a terceira coluna vazia do item.
   ========================================================================== */
@media (min-width: 1440px) {

  /* 510 / 495 / 139 medidos em 1440. Coluna 3 fica vazia de propósito. */
  .item { grid-template-columns: var(--grade-item); }

  /* A interlúdio não está na grade do item, mas tem de terminar na mesma
     borda direita: reserva os mesmos 139 de 1144 que a coluna vazia. */
  .conteudo > .figura { margin-right: calc(100% * 139 / 1144); }
}