/* ── SECTIE 2: FOTO'S ──
   Gepagineerde grid van 8 foto's per pagina, met pijltjes/swipe en een lightbox om te vergroten. */
#fotos { background: var(--warm-white); padding: 3rem 0; }
.fotos-intro { font-size: 1rem; color: #555; max-width: 560px; margin-top: 1rem; line-height: 1.8; }
.fotos-nav-row { display: flex; align-items: center; gap: 1.4rem; margin: 2.5rem 0 2rem; }
.fotos-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--off-white); color: var(--charcoal); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.fotos-arrow:hover:not(:disabled) { background: var(--gold-light); border-color: var(--gold); }
.fotos-arrow:disabled { opacity: 0.35; cursor: default; }
.fotos-counter { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: var(--mid-gray); min-width: 90px; text-align: center; }
.fotos-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; touch-action: pan-y; }
.foto-thumb { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 4/3; background: #e5ded2; }
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(6%) brightness(0.97); transition: transform 0.5s ease, filter 0.4s; }
.foto-thumb:hover img { transform: scale(1.05); filter: brightness(1.02); }
.foto-thumb::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }