/* Het fotogrid, aanvullend op het palet van de pagina zelf.
   Twee dingen: de staande scan van De Fietsenstalling past niet in een
   liggende tegel, en elke foto is te klein om iets op te kunnen lezen.
   Dus: bovenkant tonen in het grid, en klikken voor de hele foto. */

/* De staande scan wordt vanaf de bovenrand bijgesneden, zodat de kop
   van de nieuwsbrief in beeld blijft in plaats van een strook midden. */
.grid figure img.staand { object-position: center top; }

/* ---------- Klikbare tegel ---------- */

/* De knop wordt door fotos.js om de foto heen gezet. Zonder JavaScript
   staat hij er niet en blijft de foto een gewone foto. */
.grid figure .vergroot {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: none; cursor: zoom-in;
}
.grid figure .vergroot img { display: block; }
.grid figure .vergroot:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* ---------- Vergroting ---------- */

dialog.vergroting {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
}
dialog.vergroting::backdrop { background: rgba(6, 22, 34, 0.9); }

dialog.vergroting figure {
  margin: 0; height: 100%; padding: 4rem 1rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
}
dialog.vergroting img {
  width: auto; height: auto; aspect-ratio: auto;
  max-width: min(100%, 1400px); max-height: calc(100vh - 9rem);
  object-fit: contain; background: #fff;
  filter: none;
  border: 0; border-radius: 4px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
dialog.vergroting figcaption {
  margin: 0; padding: 0; max-width: 44rem; text-align: center;
  font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88);
}

dialog.vergroting button {
  position: fixed; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  font-family: inherit; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%;
  cursor: pointer;
}
dialog.vergroting button:hover { background: rgba(255, 255, 255, 0.24); }
dialog.vergroting button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.vergroting__sluit { top: 1rem; right: 1rem; font-size: 1.75rem; }
.vergroting__vorige, .vergroting__volgende { top: 50%; margin-top: -1.5rem; font-size: 2rem; }
.vergroting__vorige { left: 1rem; }
.vergroting__volgende { right: 1rem; }

@media (max-width: 40rem) {
  dialog.vergroting figure { padding: 4rem 0.5rem 1rem; }
  .vergroting__vorige, .vergroting__volgende { top: auto; bottom: 1rem; margin-top: 0; }
}