/* ============================================================
   PAGINA: fotos.html — uitgelijnde galerij + lightbox
   Eigen naam (.fotogrid) om botsing met de homepage-.gallery te vermijden.
   ============================================================ */

.fotogrid { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.fotogrid figure {
  margin: 0; border-radius: 4px; overflow: hidden; cursor: pointer; position: relative;
  background: var(--linen-2); /* lichte placeholder: nooit een donkere flits tijdens laden */
}
.fotogrid img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
  transition: transform .8s var(--e1);
}
.fotogrid figure:hover img { transform: scale(1.045); }
/* focusring: donker goud op de lichte 'Aan tafel'-sectie, lichter goud op de donkere 'Uit onze keuken' */
.fotogrid figure:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.sect--dark .fotogrid figure:focus-visible { outline-color: var(--gold-soft); }

/* "Aan tafel": twee liggende foto's links, de staande bar-foto vult rechts beide rijen */
.fotogrid--interieur {
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows: clamp(200px, 23vw, 320px);
}
.fotogrid--interieur figure:nth-child(1) { grid-column: 1; grid-row: 1; }
.fotogrid--interieur figure:nth-child(2) { grid-column: 1; grid-row: 2; }
.fotogrid--interieur figure:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }

/* "Uit onze keuken": alle bordfoto's zijn 3:4 → strak 4-koloms raster, twee volle rijen */
.fotogrid--dishes { grid-template-columns: repeat(4, 1fr); }
.fotogrid--dishes figure { aspect-ratio: 3 / 4; }

@media (max-width: 900px){
  .fotogrid--dishes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  /* interieur: onder elkaar, volledige (ongecropte) foto's */
  .fotogrid--interieur { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .fotogrid--interieur figure { grid-column: 1 !important; grid-row: auto !important; }
  .fotogrid--interieur img { height: auto; }
  .fotogrid--dishes { grid-template-columns: repeat(2, 1fr); }
}

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(24,21,16,.94);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--e1);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(1100px, 94vw); max-height: 86vh;
  border-radius: 4px; outline: 1px solid rgba(205,176,121,.32); outline-offset: 12px;
  transform: scale(.97); transition: transform .4s var(--e1);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: 18px; right: 26px;
  background: none; border: 0; cursor: pointer;
  color: var(--cream); font-family: var(--serif); font-size: 44px; line-height: 1;
}
body.lb-open { overflow: hidden; }