/* =========================================================================
   LOCATELLI — design system "A Conquista do Espaço"

   ATENÇÃO: esta folha é carregada EXCLUSIVAMENTE por aldo-locatelli.html.
   Nenhuma outra página do site usa este design system.

   ESCOPO: o sistema vale apenas do <main> para dentro. O cabeçalho e o
   rodapé continuam vindo de main.css, idênticos ao restante do site — por
   isso os tokens do site são remapeados dentro de `main`, e não em :root:
   variáveis CSS são herdadas, então a troca alcança todo o conteúdo sem
   vazar para a chrome da página.

   Fundamentos do sistema:
   · Paleta de 5 cores chapadas, sem gradientes
   · Tipografia integralmente manuscrita (Jim Nightshade + Bad Script)
   · Bordas retas — raio zero em tudo
   · Molduras sólidas de 6px em plum ao redor das reproduções
   · Sem sombras, desfoques ou transparências
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens do design system
   Nomes exclusivos do sistema — não colidem com os tokens do site.
   ---------------------------------------------------------------------- */
:root {
  /* Paleta ---------------------------------------------------------- */
  --color-black:            #000000;
  --color-plum:             #3d1f31;
  --color-terracotta:       #71392a;
  --color-tan:              #d6c4a4;
  --color-white:            #ffffff;
  --color-plum-light:       #5a3049;
  --color-terracotta-light: #8f4c3a;
  --color-tan-dark:         #c2ac83;

  --text-muted: #5c5044;

  /* Tipografia ------------------------------------------------------ */
  --font-display: "Jim Nightshade", "Snell Roundhand", cursive;
  --font-body:    "Bad Script", "Segoe Script", cursive;

  --text-eyebrow:  20px;
  --text-title-sm: 32px;
  --text-title-md: 48px;
  --text-title-lg: 72px;
  --text-body-xs:  14px;  /* legendas de imagem */
  --text-body-sm:  16px;
  --text-body-md:  20px;
  --text-body-lg:  24px;

  --leading-tight:  1.05;
  --leading-snug:   1.25;
  --leading-normal: 1.5;

  --tracking-eyebrow: 0.04em;

  --border-width-frame: 3px;
}

/* -------------------------------------------------------------------------
   2. Escopo do sistema — apenas o conteúdo
   Remapeia os tokens do site dentro de `main`, para que o reset e os
   utilitários de base.css (foco, seleção) sigam a linguagem do projeto
   sem que o cabeçalho e o rodapé sejam afetados.
   ---------------------------------------------------------------------- */
main {
  --fonte-display: var(--font-display);
  --fonte-texto:   var(--font-body);

  --fundo:       var(--color-tan);
  --texto:       var(--color-black);
  --texto-suave: var(--text-muted);
  --borda:       var(--color-plum);

  /* O vermelho da marca dá lugar ao terracota nos estados de foco */
  --cor-vermelho: var(--color-terracotta);

  /* Bordas retas em todo o sistema */
  --raio-sm:   0;
  --raio-md:   0;
  --raio-lg:   0;
  --raio-pill: 0;

  background-color: var(--color-tan);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
}

main h1,
main h2,
main h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

/* =========================================================================
   3. ABERTURA — cartela + logotipo do projeto
   ========================================================================= */
.projeto-abertura {
  padding-block: var(--esp-7) var(--esp-8);
  background-color: var(--color-tan);
}

.apresenta {
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-align: center;
}

.projeto-abertura__interno {
  display: grid;
  gap: var(--esp-6);
  align-items: center;
  margin-top: var(--esp-6);
}

.projeto-logotipo img {
  width: 100%;
  max-width: 340px;
}

.projeto-chamada {
  max-width: 46ch;
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
}

/* =========================================================================
   O PAINEL — reprodução completa, ampliável
   ========================================================================= */
.painel {
  padding-bottom: var(--esp-8);
  background-color: var(--color-tan);
}

.painel__link {
  display: block;
  position: relative;
  border: var(--border-width-frame) solid var(--color-plum);
  cursor: zoom-in;
}

/* A obra aparece inteira: sem recorte, apenas escalada à largura */
.painel__imagem {
  display: block;
  width: 100%;
  height: auto;
}

/* No alto à direita: embaixo cobriria o título pintado na própria obra */
.painel__dica {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 14px;
  background-color: var(--color-plum);
  color: var(--color-tan);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-eyebrow);
}

.painel__link:hover .painel__dica {
  background-color: var(--color-terracotta);
}

/* Ampliação ---------------------------------------------------------------
   A imagem aparece inteira, flutuando sobre a página: o diálogo ocupa toda a
   viewport mas é transparente, e o backdrop não pinta nada — o conteúdo da
   página continua visível atrás. Clicar na área vazia fecha. */
.ampliar {
  /* O diálogo vive fora de <main>, então recebe o token do sistema aqui */
  --cor-vermelho: var(--color-terracotta);

  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  background-color: transparent;
  border: none;
  overflow: hidden;
}

/* O `display` só entra quando aberto: o navegador usa display:none para
   manter o diálogo fechado, e defini-lo fora daqui o deixaria sempre visível. */
.ampliar[open] {
  display: grid;
  place-items: center;
}

.ampliar::backdrop {
  background-color: transparent;
}

.ampliar__quadro {
  display: flex;
  max-width: 92vw;
  max-height: 92dvh;
}

/* Sem recorte e sem rolagem: a imagem encolhe até caber por inteiro */
.ampliar__imagem {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92dvh;
  background-color: var(--color-white);
  border: var(--border-width-frame) solid var(--color-plum);
}

.ampliar__fechar {
  position: fixed;
  top: var(--esp-4);
  right: var(--esp-4);
  z-index: 1;
  width: 48px;
  height: 48px;
  background-color: var(--color-plum);
  color: var(--color-tan);
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1;
}

.ampliar__fechar:hover {
  background-color: var(--color-terracotta);
}

/* =========================================================================
   4. SEÇÕES DE CONTEÚDO
   Composição assimétrica: painel sólido de texto + reprodução emoldurada.
   O painel alterna plum/terracota e troca de lado a cada seção.
   ========================================================================= */
.secao-projeto {
  padding-block: var(--esp-7);
  background-color: var(--color-tan);
}

.secao-projeto__interno {
  display: grid;
  /* Respiro entre o painel de texto e as imagens — vale tanto na coluna
     (lado a lado, no desktop) quanto na linha (empilhados, no celular). */
  gap: var(--esp-5);
  align-items: stretch;
}

/* Painel sólido de texto ------------------------------------------------- */
.secao-projeto__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--esp-7) var(--esp-6);
  background-color: var(--color-plum);
  color: var(--color-tan);
}

.secao-projeto:nth-child(even) .secao-projeto__texto {
  background-color: var(--color-terracotta);
}

.secao-projeto__numero {
  margin-bottom: var(--esp-3);
  color: var(--color-tan);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  opacity: 0.75;
}

.secao-projeto__titulo {
  margin-bottom: var(--esp-5);
  color: var(--color-tan);
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  line-height: var(--leading-tight);
}

.secao-projeto__paragrafo {
  max-width: 46ch;
  color: var(--color-tan);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
}

/* Espaça os filhos diretos: parágrafos, listas, citação e os pares
   rótulo+texto do 2º/3º quadro (seção 10) */
.secao-projeto__paragrafo > * + * {
  margin-top: var(--esp-4);
}

.secao-projeto__paragrafo ul,
.secao-projeto__paragrafo ol {
  padding-left: 1.1em;
}

.secao-projeto__paragrafo li + li {
  margin-top: var(--esp-2);
}

/* Rótulo curto acima de um trecho — usado na linha de local (seção 1) e
   nos intertítulos "2º/3º Quadro" (seção 10) */
.secao-projeto__rotulo {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-eyebrow);
  opacity: 0.85;
}

/* Citação de fechamento (seção 12) — filete reto, sem aspas decorativas,
   coerente com as bordas retas do sistema */
.secao-projeto__citacao {
  padding-left: var(--esp-4);
  border-left: 3px solid var(--color-tan);
}

.secao-projeto__citacao cite {
  display: block;
  margin-top: var(--esp-2);
  font-size: var(--text-body-sm);
  font-style: normal;
  opacity: 0.8;
}

/* Reprodução emoldurada -------------------------------------------------- */
.secao-projeto__figura {
  display: flex;
  /* Item de grid/flex encolhe abaixo do conteúdo por padrão só se min-width
     for zerado — sem isso, galerias com vários quadros forçam a coluna a
     estourar a largura disponível. */
  min-width: 0;
  /* No celular a imagem vem depois do texto (a ordem no DOM é imagem
     primeiro, para acessibilidade); a partir de 900px isso é zerado e a
     posição lado a lado passa a mandar — ver breakpoint abaixo. */
  order: 2;
}

.secao-projeto__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: var(--border-width-frame) solid var(--color-plum);
}

/* Placeholder — substituir por <img> quando a imagem definitiva existir */
.placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-4);
  min-height: 340px;
  padding: var(--esp-6);
  background-color: var(--color-white);
  border: var(--border-width-frame) solid var(--color-plum);
  text-align: center;
}

.placeholder__rotulo {
  padding: 4px 14px;
  background-color: var(--color-plum);
  color: var(--color-tan);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-eyebrow);
}

.placeholder__texto {
  max-width: 34ch;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
}

/* Galerias de múltiplas imagens dentro de uma seção -----------------------
   Substituem o placeholder único quando a seção pede mais de uma foto.
   `--empilhada` acrescenta uma imagem principal acima da grade (seções 3 e 7);
   sem o modificador, a grade ocupa sozinha o espaço da figura (seções 2, 5,
   6 e 12). Em ambos os casos, a altura passa a ser ditada pelo conteúdo — daí
   o align-self: start, que cancela o stretch herdado do grid de duas colunas
   (ver breakpoint 900px), evitando sobra de espaço vazio abaixo das fotos. */
/* Entre linhas de imagens o espaço é maior que entre colunas: a legenda de
   cada foto fica logo abaixo dela e precisa respirar antes da linha seguinte. */
.secao-projeto__figura--galeria {
  gap: var(--esp-5);
}

.secao-projeto__figura--empilhada {
  flex-direction: column;
}

.secao-projeto__figura--empilhada .placeholder {
  flex: none;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.secao-projeto__galeria {
  display: grid;
  /* Colunas encostadas, como no restante do sistema; linhas afastadas para
     a legenda de uma linha não colar na imagem da linha de baixo. */
  column-gap: var(--border-width-frame);
  row-gap: var(--esp-5);
  width: 100%;
  min-width: 0;
}

.secao-projeto__galeria > * {
  min-width: 0;
}

.secao-projeto__galeria--2 { grid-template-columns: repeat(2, 1fr); }
.secao-projeto__galeria--3 { grid-template-columns: repeat(3, 1fr); }
.secao-projeto__galeria--4 { grid-template-columns: repeat(2, 1fr); }

.secao-projeto__galeria .placeholder {
  min-height: 0;
  aspect-ratio: 4 / 3;
  padding: var(--esp-3);
  gap: var(--esp-2);
}

/* Quadro com foto definitiva — mesma grade dos placeholders, mas com a
   imagem real, ampliável ao clique, e uma legenda curta embaixo. */
.secao-projeto__quadro {
  display: flex;
  flex-direction: column;
}

.secao-projeto__quadro-link {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--border-width-frame) solid var(--color-plum);
  cursor: zoom-in;
}

.secao-projeto__quadro-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A moldura é do link; sem isto a imagem herda a borda da regra genérica
     .secao-projeto__figura img e o quadro fica com filete duplo. */
  border: none;
  transition: opacity 0.15s ease;
}

.secao-projeto__quadro-link:hover img {
  opacity: 0.85;
}

/* Foto sozinha na seção: mantém a proporção original em vez de ser recortada
   pela moldura 4:3 — necessário para retratos e outras imagens verticais. */
.secao-projeto__quadro--natural .secao-projeto__quadro-link {
  aspect-ratio: auto;
}

.secao-projeto__quadro--natural .secao-projeto__quadro-link img {
  height: auto;
  object-fit: contain;
}

/* A galeria fica sobre o fundo tan da seção, não dentro do painel escuro —
   por isso a legenda usa plum, e não a cor de texto do painel. */
.secao-projeto__legenda {
  margin-top: var(--esp-2);
  color: var(--color-plum);
  font-size: var(--text-body-xs);
  line-height: var(--leading-snug);
  text-align: center;
}

.secao-projeto__galeria .placeholder__texto {
  max-width: none;
  font-size: var(--text-body-sm);
}

/* Retratos (seção 3): quadros quadrados com o nome da pessoa embaixo */
.secao-projeto__galeria--pessoas .placeholder,
.secao-projeto__galeria--pessoas .secao-projeto__quadro-link {
  aspect-ratio: 1;
}

.secao-projeto__retrato {
  display: flex;
  flex-direction: column;
}

/* Mesmo corpo da legenda: os dois convivem na seção 3 e precisam bater */
.secao-projeto__retrato-nome {
  margin-top: var(--esp-2);
  color: var(--color-plum);
  font-size: var(--text-body-xs);
  text-align: center;
  letter-spacing: var(--tracking-eyebrow);
}

/* Seção com imagem larga abaixo do texto (seção 8) -------------------------
   Quebra o padrão de duas colunas: o painel de texto ocupa a largura toda e
   a reprodução, panorâmica, fica encostada logo abaixo. */
.secao-projeto--larga .secao-projeto__figura {
  width: 100%;
}

.secao-projeto--larga .secao-projeto__figura .placeholder {
  min-height: 0;
  aspect-ratio: 21 / 6;
}

/* Audiodescrição ---------------------------------------------------------
   Fica num bloco tan dentro do painel escuro: o player nativo do navegador
   é claro e ficaria deslocado sobre plum/terracota. */
.audiodescricao {
  margin-top: var(--esp-6);
  padding: var(--esp-4);
  background-color: var(--color-tan);
}

.audiodescricao__rotulo {
  margin-bottom: var(--esp-3);
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-eyebrow);
}

.audiodescricao__player {
  display: block;
  width: 100%;
}

/* =========================================================================
   EQUIPE DO PROJETO
   Créditos em pares papel/nome. Fica fora da numeração das seções de
   conteúdo: é uma ficha técnica, não mais um capítulo da exposição.
   ========================================================================= */
.equipe {
  padding-block: var(--esp-8);
  background-color: var(--color-tan);
  border-top: 2px solid var(--color-plum);
}

.equipe__titulo {
  margin-bottom: var(--esp-6);
  color: var(--color-plum);
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  line-height: var(--leading-tight);
}

.equipe__lista {
  display: grid;
  gap: var(--esp-5);
}

.equipe__item {
  padding-top: var(--esp-4);
  border-top: 1px solid var(--color-plum);
}

.equipe__papel {
  margin-bottom: var(--esp-2);
  color: var(--color-terracotta);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-eyebrow);
}

.equipe__nome {
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-snug);
}

/* A formação acompanha o nome, um degrau abaixo na hierarquia */
.equipe__formacao {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}

@media (min-width: 700px) {
  .equipe__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-5) var(--esp-7);
  }
}

@media (min-width: 1000px) {
  .equipe__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================================
   PATROCÍNIO E REALIZAÇÃO
   A barra de logos é um PNG com painel branco de cantos arredondados sobre
   fundo transparente. Sentada numa faixa branca de largura total, o painel
   se funde ao fundo e o arredondamento some — mantendo as bordas retas do
   sistema sem alterar o arquivo original.
   ========================================================================= */
.apoiadores {
  padding-block: var(--esp-7);
  background-color: var(--color-white);
}

/* A barra aparece inteira: sem recorte, apenas escalada à largura */
.apoiadores__barra {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-inline: auto;
}

/* =========================================================================
   5. RESPONSIVO
   ========================================================================= */

/* A partir de 900px — composição em duas colunas ------------------------- */
@media (min-width: 900px) {
  .projeto-abertura__interno {
    grid-template-columns: 340px 1fr;
    gap: var(--esp-8);
  }

  .secao-projeto__interno {
    grid-template-columns: 1fr 1fr;
  }

  /* A partir daqui a imagem volta a ficar lado a lado com o texto —
     zera a ordem mobile antes de reaplicar a alternância par/ímpar */
  .secao-projeto__figura {
    order: 0;
  }

  /* Nas seções pares a reprodução vai para a direita */
  .secao-projeto:nth-child(even) .secao-projeto__figura {
    order: 2;
  }

  .secao-projeto__texto {
    padding: var(--esp-8) var(--esp-7);
  }

  /* Galerias: altura ditada pelo conteúdo, sem o stretch do grid acima */
  .secao-projeto__figura--galeria {
    align-self: start;
  }

  /* Seção 8: cancela as duas colunas — texto em cima, imagem larga embaixo */
  .secao-projeto--larga .secao-projeto__interno {
    grid-template-columns: 1fr;
  }
}

/* Telas estreitas -------------------------------------------------------- */
@media (max-width: 500px) {
  .secao-projeto__titulo {
    font-size: var(--text-title-sm);
  }

  .placeholder {
    min-height: 260px;
  }
}