/* Monica Rizzolli — layout do site
   Cabeçalho + três colunas: a árvore de pastas (esquerda, recolhível), a
   ficha (meio, recolhível, só quando uma obra está aberta) e o visualizador.
   Estrutura inspirada no Forma e Fórmula. Cores, fonte e botões vêm do
   base.css — aqui só entra layout. */

:root {
  --pastas-w: 320px;           /* coluna das pastas aberta (a de Configurações do Forma e Fórmula) */
  --ficha-w: 300px;            /* coluna da ficha aberta (a de Nova Forma do Forma e Fórmula) */
  --recolhida-w: 30px;         /* coluna recolhida: só o botão */
}

/* A página ocupa exatamente a tela; cada coluna rola por conta própria. */
html, body { height: 100%; }
body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;   /* no celular, desconta as barras do navegador */
  overflow: hidden;
}

/* ====== Cabeçalho ====== */
.cabecalho {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.nome {
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  white-space: nowrap;
}

/* Seletor de idioma, no lugar da versão do Forma e Fórmula. O idioma ativo
   fica em magenta; o outro tem o pontilhado que o anuncia como clicável. */
.idiomas { display: flex; gap: 10px; }
.idioma {
  position: relative;
  background: none;
  border: none;
  border-bottom: 1px dotted var(--text);
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text);
}
/* Área de toque maior que a letra, sem mudar o desenho. */
.idioma::after { content: ""; position: absolute; inset: -10px -6px; }
.idioma:hover { background: none; color: var(--magenta); border-bottom-color: var(--magenta); }
.idioma[aria-pressed="true"] {
  color: var(--magenta);
  font-weight: 700;
  border-bottom-color: transparent;
  cursor: default;
}

/* ====== Layout ====== */
/* A largura de cada coluna vem de duas variáveis, que as classes trocam:
   .pastas-recolhida, .com-ficha e .ficha-recolhida. Sem ficha, a coluna do
   meio tem 0px e o elemento some. */
.layout {
  --col-pastas: var(--pastas-w);
  --col-ficha: 0px;
  position: relative;
  display: grid;
  grid-template-columns: var(--col-pastas) var(--col-ficha) 1fr;
  min-height: 0;
}
.layout.pastas-recolhida { --col-pastas: var(--recolhida-w); }
.layout.com-ficha { --col-ficha: var(--ficha-w); }
.layout.com-ficha.ficha-recolhida { --col-ficha: var(--recolhida-w); }

.pastas { grid-column: 1; }
.ficha { grid-column: 2; }
.conteudo { grid-column: 3; }
.layout:not(.com-ficha) .ficha { display: none; }

/* ====== Colunas recolhíveis (pastas e ficha) ====== */
.coluna {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
}
.coluna-conteudo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
}
.layout.pastas-recolhida .pastas .coluna-conteudo,
.layout.ficha-recolhida .ficha .coluna-conteudo { display: none; }

.coluna-recolher {
  position: absolute;
  top: 8px;
  right: 24px;   /* 8px + a barra de rolagem (16px), para não ficar em cima dela */
  z-index: 5;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
}
.layout.pastas-recolhida .pastas .coluna-recolher,
.layout.ficha-recolhida .ficha .coluna-recolher { right: 4px; }

/* Títulos de coluna, como «Configurações» e «Catálogo» no Forma e Fórmula. */
.titulo {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}

/* ====== Árvore ====== */
.arvore ul { list-style: none; }
.arvore ul ul { padding-left: 16px; }

.item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  background: none;
  text-align: left;
  font-size: 13px;
}
.item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .seta { flex-shrink: 0; width: 10px; font-size: 10px; }
/* Hover: inversão brutalista, sem cinzas. */
.item:hover { background: var(--text); color: var(--bg2); }
/* Item aberto: magenta (ativo). Vem depois do hover para ganhar dele. */
.item[aria-current="true"] { background: var(--magenta); color: var(--bg2); }

/* ====== Ficha ====== */
.ficha-obra {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
}
.ficha-campos dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ficha-campos dd {
  font-size: 13px;
  line-height: 1.4;
  margin: 2px 0 12px 0;
}
.ficha-campos dd ul { list-style: none; }
.ficha-campos dd li + li { margin-top: 4px; }
.ficha-campos dd p + p { margin-top: 8px; }
/* Item com título (sumário): título em negrito numa linha, texto embaixo. */
.ficha-item-titulo { display: block; font-weight: 700; }
.ficha-campos dd li:has(> .ficha-item-titulo) + li { margin-top: 10px; }

/* ====== Visualizador ====== */
/* O título no alto e o corpo embaixo; quando não cabe, rola na vertical. */
.conteudo {
  position: relative;   /* o zoom se posiciona aqui dentro */
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}
.conteudo-corpo {
  font-size: 14px;
  line-height: 1.5;
}

/* Barras de rolagem verticais — visualizador, ficha e pastas — sempre à
   vista e evidentes: no Mac elas somem sozinhas, e quem visita não percebe
   que há mais embaixo. Trilho branco com fio preto, como as bordas das
   colunas; a barra que desliza em preto. Chrome e Safari pelo
   ::-webkit-scrollbar; Firefox, que não o tem, pelo scrollbar-color.
   (As faixas das galerias rolam para o lado pelas setas e não têm barra.) */
.conteudo::-webkit-scrollbar,
.coluna-conteudo::-webkit-scrollbar { width: 16px; }
.conteudo::-webkit-scrollbar-track,
.coluna-conteudo::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: 1px solid var(--border);
}
.conteudo::-webkit-scrollbar-thumb,
.coluna-conteudo::-webkit-scrollbar-thumb {
  background: var(--text);
  border: 3px solid var(--bg);
  border-radius: 4px;
}
@supports not selector(::-webkit-scrollbar) {
  .conteudo,
  .coluna-conteudo { scrollbar-color: var(--text) var(--bg); }
}

/* ====== Galerias ====== */
/* Faixas empilhadas, quantas a obra tiver. A altura das imagens acompanha a
   altura da tela entre um mínimo e um máximo (clamp), conforme o tamanho da
   galeria: as grandes com o dobro das pequenas. Cada galeria tem a altura
   do seu cartão mais alto; se não couberem todas, o visualizador rola na
   vertical. */
:root {
  --legenda-h: 30px;   /* legenda de uma linha (7 + 16 + 7) */
  --cartao-borda: 2px;
  --faixa-folga: 3px;  /* espaço em volta dos cartões, para o anel de foco não ser cortado */
}
.galerias {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.galeria { position: relative; }
/* Mudou um destes números? Mude também em ALTURA_FAIXA, no site.js — é por
   eles que o navegador escolhe o tamanho de arquivo a baixar. */
.galeria-grande { --img-h: clamp(400px, 50vh, 720px); }
.galeria-media { --img-h: clamp(260px, 33vh, 470px); }   /* ~30% maior que a pequena */
.galeria-pequena { --img-h: clamp(200px, 25vh, 360px); }

.faixa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--faixa-folga);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;            /* rola pelas setas, rodinha e arraste */
}
.faixa::-webkit-scrollbar { display: none; }

/* Cartão: como os do Forma e Fórmula — borda de 2px, imagem e legenda
   dentro —, com canto de 4px. */
.cartao {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: var(--cartao-borda) solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg2);
  text-align: left;
}
button.cartao { cursor: zoom-in; }   /* só a galeria com zoom */
/* Mesma altura para todas; a largura segue a proporção da imagem. */
.cartao img {
  display: block;
  height: var(--img-h);
  width: calc(var(--img-h) * var(--proporcao));
}
/* A legenda não alarga o cartão (ele tem a largura da imagem) e quebra em
   quantas linhas precisar: o cartão cresce para baixo. */
.legenda {
  display: block;
  width: 0;
  min-width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 16px;
}

/* Setas nas pontas da faixa, centradas na altura das imagens. */
.faixa-seta {
  position: absolute;
  top: calc(50% - var(--legenda-h) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}
.faixa-seta[hidden] { display: none; }
.galeria.sem-legenda .faixa-seta { top: 50%; }
.faixa-anterior { left: 8px; }
.faixa-proxima { right: 8px; }

/* ====== Zoom ====== */
/* Cobre só o visualizador; as colunas continuam à vista. Sem legenda. */
.zoom {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;        /* top e height vêm do JS: a parte do visualizador que está à vista */
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 56px;
  background: var(--bg);
}
.zoom[hidden] { display: none; }
.conteudo.com-zoom { overflow: hidden; }
.zoom img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-out;
}
.zoom-botao {
  position: absolute;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}
.zoom-botao[hidden] { display: none; }
.zoom-fechar { top: 8px; right: 8px; }
.zoom-anterior,
.zoom-proxima { top: 50%; transform: translateY(-50%); }
.zoom-anterior { left: 12px; }
.zoom-proxima { right: 12px; }

/* ====== Toque ====== */
/* Em tela de toque o hover fica preso depois do toque: desliga a inversão. */
@media (hover: none) {
  button:hover { background: var(--bg2); color: var(--text); }
  .item:hover { background: none; color: var(--text); }
  .item[aria-current="true"] { background: var(--magenta); color: var(--bg2); }
}
/* Alvos de toque com pelo menos 44px. */
@media (pointer: coarse) {
  :root { --recolhida-w: 40px; }
  .item { min-height: 44px; }
  .coluna-recolher { width: 32px; height: 32px; font-size: 13px; }
}

/* ====== Telas estreitas: celular e tablet ====== */
/* Abaixo de 1024px as três colunas não cabem. As colunas ficam só com o
   botão, e a aberta passa POR CIMA do visualizador, em vez de empurrá-lo.
   Uma de cada vez (o JS garante). */
@media (max-width: 1023px) {
  .layout,
  .layout.pastas-recolhida { --col-pastas: var(--recolhida-w); }
  .layout.com-ficha,
  .layout.com-ficha.ficha-recolhida { --col-ficha: var(--recolhida-w); }

  .layout:not(.pastas-recolhida) .pastas,
  .layout.com-ficha:not(.ficha-recolhida) .ficha {
    grid-column: 1 / -1;   /* posiciona em relação ao layout inteiro, não à faixa */
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .layout:not(.pastas-recolhida) .pastas {
    left: 0;
    width: min(var(--pastas-w), 100%);
    z-index: 60;
  }
  .layout.com-ficha:not(.ficha-recolhida) .ficha {
    left: var(--col-pastas);
    width: min(var(--ficha-w), calc(100% - var(--col-pastas)));
    z-index: 50;
  }
}

@media (max-width: 767px) {
  .cabecalho { padding: 10px 16px; }
  .nome { font-size: clamp(22px, 7vw, 36px); }
  .conteudo { padding: 16px; }
  /* No celular as setas do zoom ficam por cima da imagem, para ela usar a
     largura toda. */
  .zoom { padding: 48px 0; }
  .zoom-anterior { left: 8px; }
  .zoom-proxima { right: 8px; }

  /* No celular a faixa vira coluna: um cartão por linha, na largura toda,
     com a legenda embaixo. Sem setas — a página rola na vertical. */
  .galerias { gap: 16px; }
  .faixa {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    overflow: visible;
  }
  .cartao { width: 100%; }
  .cartao img { width: 100%; height: auto; }
  .faixa-seta,
  .faixa-seta[hidden] { display: none; }
}