/**
 * Weergave van de blog (article) op de front-end.
 *
 * Banner (field_image) BOXED binnen de contentbreedte (zoals de header-afbeelding
 * op basic pages), als (Splide-)slider bij meerdere foto's. De Splide/Blazy-
 * formatter rendert de banner als container `.splide--field-image` (NIET de
 * standaard veld-wrapper field--name-field-image); daarop begrenzen we de hoogte.
 */
/* NB: de LB-kolom-gutters (12px, uitgelijnd op hero/breadcrumb, ook mobiel) worden
   centraal in het thema geregeld (custom.css: .layout-builder__layout.row > col
   first/last-child + @media <768px). Geen blog-eigen override meer nodig. */

/* Boxed: banner binnen de contentbreedte (zoals de header op basic pages),
   dus GEEN full-bleed 100vw. */
.node--type-article .splide--field-image {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

/* Bannerhoogte begrenzen. Blazy wrapt de foto in een aspect-ratio-container,
   dus we cappen de SLIDE + media-container en forceren object-fit op de foto
   (en undo-en Blazy's absolute positionering / padding-hack). */
.node--type-article .splide--field-image .splide__slide {
  height: clamp(160px, 30vh, 320px);
  overflow: hidden;
}
.node--type-article .splide--field-image .media,
.node--type-article .splide--field-image .media--blazy,
.node--type-article .splide--field-image .splide__slide > * {
  height: 100% !important;
  padding-bottom: 0 !important;
}
.node--type-article .splide--field-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: static !important;
}

/**
 * Flybox-lightbox (klik op een extra foto) als GECENTREERDE modal van ~80% van
 * het scherm, i.p.v. de standaard onderin-dockende slide-in. De flybox hangt
 * body-level (buiten de node), dus deze selectors zijn bewust NIET gescoped.
 */
.b-flybox {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 80vw !important;
  height: 80vh !important;
  min-height: 0 !important;
  max-width: 80vw !important;
  max-height: 80vh !important;
  transform: translate(-50%, -50%) !important;
}
.is-flybox--open .b-flybox {
  transform: translate(-50%, -50%) !important;
}
.is-flybox--closing .b-flybox {
  transform: translate(-50%, -46%) !important;
  opacity: 0;
}
.b-flybox .blazybox__media,
.b-flybox .blazybox__content,
.b-flybox .media,
.b-flybox img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 80vh !important;
  object-fit: contain !important;
}