/* =========================================================================
   Aanvulling op theme.css (het originele stylesheet van de live site).
   Alleen wat fullPage.js / de WordPress-plugins normaal via JS regelen:
   scroll-snap in plaats van de jQuery scroll-hijack, de positionering van
   de hero-slider en het statische Instagram-grid.
   ========================================================================= */

/* fullPage.js-emulatie: één scroll = één volledige view */
html.fp-enabled {
  scroll-snap-type: y mandatory;
}
@media (prefers-reduced-motion: no-preference) {
  html.fp-enabled { scroll-behavior: smooth; }
}
html.fp-enabled .fp-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Mobiel: het origineel schakelde fullPage uit onder 890px, maar de
   opdrachtgever wil ook op mobiel per swipe één volledige view. */
body.fp-responsive .fp-section { min-height: 100dvh; }

/* Hero-slider: gestapelde full-bleed foto's achter de blend-helften
   (op de live site regelt jQuery/fullPage dit met inline styles) */
section.video #slider { position: absolute; inset: 0; overflow: hidden; }
section.video #slider .images {
  display: block;
  position: absolute; inset: 0;
  margin: 0; padding: 0; list-style: none;
}
section.video #slider .images li { position: absolute; inset: 0; margin: 0; }
section.video #slider .images li img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
section.video #slider .triggers { display: none; }

/* Taalkiezer: hover werkt via custom.css; op touch ook via klik */
header .lang.open .dropdown { display: inline-block; }

/* Statisch Instagram-grid (de plugin doet dit normaal met JS) */
#sbi_images { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#sbi_images .sbi_item { width: auto !important; float: none !important; }
.sbi_photo_wrap a.sbi_photo { display: block; height: auto !important; aspect-ratio: 1 / 1; overflow: hidden; }
.sbi_photo_wrap a.sbi_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 890px) {
  #sbi_images { grid-template-columns: repeat(3, 1fr); }
}