/* ==========================================================================
   gallery.css — layout "gallery" (/gallery)
   TODO seletor prefixado com body.page-gallery (sem vazamento).

   Medidas tiradas dos screenshots de referência:
   - Desktop 1440px: grid de 3 colunas de ~427px, gap 40px (eixo X e Y),
     ocupando a largura toda menos 40px de margem por lado (x=40..1400 —
     mais largo que o .container padrão de 1390px).
   - Linhas ~3:2 (427x~287); a linha das tiles 10–12 é 4:3 (427x~320,
     puxada pela foto 1600x1200) e a tile 16, sozinha na última linha,
     segue a própria proporção (1080x832 ≈ 135/104).
   - Phone 390px: 2 colunas de 165px, gap 20px, padding 20px por lado;
     os pares viram linhas, então 11–12 ficam 4:3 e 15–16 ficam 135/104.
   - Tiles com border-radius 22px (--radius-card), sem legenda, flat.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero compacto — só o h1 centrado
   (padding-top menor que o .container padrão: medido no screenshot o h1
   fica ~60px abaixo do header no desktop e ~55px no phone)
   -------------------------------------------------------------------------- */
body.page-gallery .gallery-hero-inner {
  text-align: center;
  padding-top: 59px;
}

@media (max-width: 809.98px) {
  body.page-gallery .gallery-hero-inner {
    padding-top: 55px;
  }
}

/* --------------------------------------------------------------------------
   Grid de fotos
   -------------------------------------------------------------------------- */
/* Container do grid: mais largo que o .container padrão (full-bleed com
   40px de margem por lado no screenshot 1440); teto em 1600px. */
body.page-gallery .gallery-wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 100px 40px;
}

body.page-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

body.page-gallery .gallery-tile {
  aspect-ratio: 3 / 2; /* linha padrão: puxada pelas fotos 1.5 */
  border-radius: var(--radius-card);
  overflow: hidden;
}

body.page-gallery .gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop/tablet (3 colunas): linha 4 (tiles 10–12) guiada pela foto 4:3;
   tile 16 sozinha na última linha com a própria proporção (1080x832). */
@media (min-width: 810px) {
  body.page-gallery .gallery-tile:nth-child(10),
  body.page-gallery .gallery-tile:nth-child(11),
  body.page-gallery .gallery-tile:nth-child(12) {
    aspect-ratio: 4 / 3;
  }
  body.page-gallery .gallery-tile:nth-child(16) {
    aspect-ratio: 135 / 104;
  }
}

/* Phone (<=809.98px): 2 colunas, gap 20px — as linhas viram pares;
   11–12 (foto 4:3) e 15–16 (foto 1080x832) ficam mais altos. */
@media (max-width: 809.98px) {
  body.page-gallery .gallery-wrap {
    padding: 80px 20px;
  }
  body.page-gallery .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  /* O masonry do Framer redistribui os 3 primeiros itens no phone:
     a ordem visual vira 2 (box de vidro), 3 (living room), 1 (cozinha
     escura) e do 4º em diante segue a ordem do DOM. Replicado com
     `order` negativo (os demais ficam no 0 padrão, depois deles).
     As regras de aspect-ratio por nth-child continuam valendo: 11–16
     seguem nos mesmos pares visuais. */
  body.page-gallery .gallery-tile:nth-child(2) {
    order: -3;
  }
  body.page-gallery .gallery-tile:nth-child(3) {
    order: -2;
  }
  body.page-gallery .gallery-tile:nth-child(1) {
    order: -1;
  }
  body.page-gallery .gallery-tile:nth-child(11),
  body.page-gallery .gallery-tile:nth-child(12) {
    aspect-ratio: 4 / 3;
  }
  body.page-gallery .gallery-tile:nth-child(15),
  body.page-gallery .gallery-tile:nth-child(16) {
    aspect-ratio: 135 / 104;
  }
}