/* Galeria — estilos isolados para não depender do styles.css */
/* Objetivo: recuperar layout da página Fotografia sem mexer no resto do site */

:root{
  --gal-gap: 18px;
  --gal-radius: 18px;
  --gal-tile-h: clamp(180px, 22vw, 300px);
  --gal-hero-h: clamp(260px, 40vw, 560px);
}

/* Container da galeria */
.gallery{
  margin-top: 18px;
}

/* Grelha base */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gal-gap);
  grid-auto-flow: row dense; /* evita buracos quando há spans */
  align-items: stretch;
}

/* Tiles (o JS normalmente mete background-image inline) */
.gallery-grid > *{
  position: relative;
  width: 100%;
  height: var(--gal-tile-h);
  border-radius: var(--gal-radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Se for button/a/div, mantém comportamento consistente */
.gallery-grid > button,
.gallery-grid > a{
  border: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  background-color: transparent;
}

/* Foto 1 (não mexer no conteúdo — só layout): full width */
.gallery-grid > :first-child{
  grid-column: 1 / -1;
  height: var(--gal-hero-h);
}

/* --- Padrão: depois da hero, intercalar 3 + (2+1), alternando o "2" --- */
/* O "2 colunas" é o 5º item de cada bloco de 5 (considerando a hero como 1º). */
/* Bloco 1: itens 2-6  (5 é 2-colunas, 6 é 1-coluna)
   Bloco 2: itens 7-11 (10 é 2-colunas, 11 é 1-coluna) */

/* 2-colunas à esquerda (itens 5, 15, 25, ...) */
.gallery-grid > :nth-child(10n + 5){
  grid-column: 1 / span 2;
}

/* 1-coluna ao lado (itens 6, 16, 26, ...) */
.gallery-grid > :nth-child(10n + 6){
  grid-column: 3 / span 1;
}

/* 2-colunas à direita (itens 10, 20, 30, ...) */
.gallery-grid > :nth-child(10n + 10){
  grid-column: 2 / span 2;
}

/* 1-coluna ao lado (itens 11, 21, 31, ...) */
.gallery-grid > :nth-child(10n + 11){
  grid-column: 1 / span 1;
}

/* Acessibilidade: foco visível */
.gallery-grid > *:focus-visible{
  outline: 2px solid #025b61;
  outline-offset: 3px;
}

/* Barra sólida inferior (se o JS já estiver a criar a estrutura) */
.tile__bar{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(105%);
  transition: transform 220ms ease;
  background: #f4cac9;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.gallery-grid > *:hover .tile__bar,
.gallery-grid > *:focus-visible .tile__bar{
  transform: translateY(0);
}

.tile__year{
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 0.85rem;
  line-height: 1.1;
  color: #037f8b;
  white-space: nowrap;
}

.tile__title{
  font-family: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #025b61;
  text-align: right;
}

/* Tablet */
@media (max-width: 980px){
  .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid > :first-child{
    grid-column: 1 / -1;
  }

  /* Em 2 colunas não vale a pena o 2+1 */
  .gallery-grid > :nth-child(10n + 5),
  .gallery-grid > :nth-child(10n + 10){
    grid-column: auto;
  }
  .gallery-grid > :nth-child(10n + 6),
  .gallery-grid > :nth-child(10n + 11){
    grid-column: auto;
  }
}

/* Mobile */
@media (max-width: 560px){
  :root{
    --gal-gap: 14px;
    --gal-radius: 16px;
    --gal-tile-h: clamp(160px, 52vw, 240px);
    --gal-hero-h: clamp(240px, 70vw, 420px);
  }
}