/*
 * Galeria (espec. 5.7): grade de fotos com proporções variadas e o
 * visualizador <dialog> (DESIGN.md: única camada sobreposta do site, fundo
 * noite polar quase opaco). A miniatura base (.galeria__link, 4:3 e 8:3)
 * vem do site.css. A primeira foto abre a grade em 2 x 2; as paisagens
 * largas (item-galeria.php, proporção de 1,6 ou mais) ocupam duas colunas.
 * Estados do JS: .carregando na foto grande enquanto ela baixa.
 */

@layer componentes {
  .galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: clamp(1.25rem, 2.2vw, 2rem) clamp(0.75rem, 1.6vw, 1.25rem);
    align-items: start;
  }
  @media (min-width: 48em) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 72em) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .galeria__item { min-width: 0; }
  .galeria__item:first-child,
  .galeria__item--larga { grid-column: span 2; }
  /* No celular a paisagem larga continua larga (o site.css a estreita) */
  @media (max-width: 40em) {
    .galeria__item--larga { grid-column: span 2; }
    .galeria__item--larga .galeria__link img { aspect-ratio: 8 / 3; }
  }

  /* Fecho da grade: a última foto (se não for larga) cobre a sobra da última
     linha. gallery.php calcula a sobra em data-sobra-<colunas>. */
  @media (max-width: 47.99em) {
    .galeria[data-sobra-2="1"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) { grid-column: span 2; }
    .galeria[data-sobra-2="1"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) img { aspect-ratio: 8 / 3; }
  }
  @media (min-width: 48em) and (max-width: 71.99em) {
    .galeria[data-sobra-3="1"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) { grid-column: span 2; }
    .galeria[data-sobra-3="1"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) img { aspect-ratio: 8 / 3; }
    .galeria[data-sobra-3="2"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) { grid-column: span 3; }
    .galeria[data-sobra-3="2"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) img { aspect-ratio: 4 / 1; }
  }
  @media (min-width: 72em) {
    .galeria[data-sobra-4="1"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) { grid-column: span 2; }
    .galeria[data-sobra-4="1"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) img { aspect-ratio: 8 / 3; }
    .galeria[data-sobra-4="2"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) { grid-column: span 3; }
    .galeria[data-sobra-4="2"] .galeria__item:last-child:not(:first-child, .galeria__item--larga) img { aspect-ratio: 4 / 1; }
  }

  .galeria__link {
    display: grid;
    grid-template-rows: auto auto;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
  }
  /* Moldura da foto: a imagem aproxima dentro dela no hover */
  .galeria__link > :first-child { display: block; overflow: hidden; border-radius: var(--raio); background: var(--nevoa); }
  .galeria__link img { display: block; border-radius: 0; }
  .galeria__titulo {
    margin-top: 0.5rem;
    color: var(--basalto-suave);
    font-family: var(--fonte-dados);
    font-size: var(--tam-dados);
    line-height: 1.4;
  }
  .galeria__link:hover .galeria__titulo { color: var(--marinho); }

  /* Primeira foto em 2 x 2: a foto preenche a altura das duas linhas */
  @media (min-width: 48em) {
    .galeria__item:first-child { grid-row: span 2; align-self: stretch; }
    .galeria__item:first-child .galeria__link { grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
    .galeria__item:first-child .galeria__link > :first-child { position: relative; min-height: 14rem; }
    .galeria__item:first-child .galeria__link img { position: absolute; inset: 0; aspect-ratio: auto; }
    .galeria__item:first-child .galeria__titulo { font-size: 0.875rem; }
  }

  /* Visualizador */
  html:has(.visualizador[open]) { overflow: hidden; }
  .visualizador {
    --superficie: var(--noite-polar);
    --cor-foco: var(--gelo-claro);
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(10 22 40 / 0.97);
    color: var(--marfim);
    overflow: hidden;
  }
  .visualizador::backdrop { background: var(--noite-polar); }
  .visualizador__quadro {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(0.75rem, 2vh, 1.25rem);
    max-width: 1600px;
    height: 100%;
    margin-inline: auto;
    padding: clamp(0.75rem, 2vh, 1.5rem) var(--margem);
  }
  .visualizador__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .visualizador__contador {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--gelo);
    letter-spacing: 0.02em;
  }
  /* A mesma linha de chamada laranja da coordenada dos cabeçalhos */
  .visualizador__contador::before { content: ""; width: 2rem; height: 1px; background: var(--horizonte); }

  /* A foto ocupa a área toda e se ajusta dentro dela (contain): funciona com
     qualquer proporção sem depender da altura do texto embaixo. */
  .visualizador__foto { position: relative; min-height: 0; }
  .visualizador__foto picture { display: contents; }
  .visualizador__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    touch-action: pan-y;
    user-select: none;
  }

  .visualizador__base {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    padding-top: clamp(0.75rem, 2vh, 1.25rem);
    border-top: 1px solid rgb(176 217 250 / 0.25);
  }
  .visualizador__texto { display: grid; gap: 0.375rem; flex: 1 1 28rem; max-width: 64ch; min-width: 0; }
  .visualizador__titulo { color: var(--marfim); font-size: var(--tam-h3); }
  .visualizador__descricao { color: var(--gelo); font-family: var(--fonte-texto); font-size: 1.0625rem; line-height: 1.5; }
  .visualizador__navegacao { display: flex; gap: 0.5rem; }

  .visualizador__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(176 217 250 / 0.5);
    border-radius: var(--raio);
    background: transparent;
    color: var(--marfim);
    font-family: var(--fonte-corpo);
    font-size: 0.9375rem;
    font-weight: var(--peso-forte);
    line-height: 1.2;
    cursor: pointer;
  }
  .visualizador__botao:hover { border-color: var(--gelo); background: rgb(255 255 255 / 0.08); }

  @media (max-width: 40em) {
    .visualizador__navegacao { flex: 1 1 100%; }
    .visualizador__navegacao .visualizador__botao { flex: 1; }
    .visualizador__titulo { font-size: 1.25rem; }
    .visualizador__descricao { font-size: 0.9375rem; }
  }
  /* Tela baixa (celular deitado): a descrição cede espaço à foto */
  @media (max-height: 30em) {
    .visualizador__descricao { display: none; }
  }
}

@layer movimento {
  @media (prefers-reduced-motion: no-preference) {
    .galeria__link img { transition: transform var(--dur-padrao) var(--ease-assentamento); }
    .galeria__link:hover img { transform: scale(1.03); }
    .galeria__titulo { transition: color var(--dur-rapida) var(--ease-assentamento); }

    /* Abre em 320 ms (a foto sobe 12 px); fecha em 200 ms acelerando */
    .visualizador,
    .visualizador::backdrop {
      transition:
        opacity var(--dur-padrao) var(--ease-assentamento),
        overlay var(--dur-padrao) allow-discrete,
        display var(--dur-padrao) allow-discrete;
    }
    .visualizador:not([open]),
    .visualizador:not([open])::backdrop {
      opacity: 0;
      transition-duration: 200ms;
      transition-timing-function: var(--ease-saida);
    }
    .visualizador__foto img {
      transition:
        opacity var(--dur-padrao) var(--ease-assentamento),
        transform var(--dur-padrao) var(--ease-assentamento);
    }
    .visualizador__foto img.carregando { opacity: 0; transform: translateY(12px); }
    @starting-style {
      .visualizador[open],
      .visualizador[open]::backdrop { opacity: 0; }
      .visualizador[open] .visualizador__foto img { opacity: 0; transform: translateY(12px); }
    }
  }
}