/* M253_IMAGE_FIT_CSS_START
 * Alleen beeldpassing en witte transparantie-ondergrond.
 * Bestaande breedtes, hoogtes, rasters, marges en kaartvormen blijven intact.
 */
:root{
  --m253-photo-focus-x:50%;
  --m253-photo-focus-y:34%;
}

/* Witte drager: echte transparantie levert nooit een groen/grijs vlak op. */
.hero-img,
.hero-image,
.page-hero-photo,
.news-card,
.news-card img,
.news-detail-image,
.news-detail-image img,
.news-v50-media,
.news-v50-media img,
.news-v50-list-img,
.news-v50-list-img img,
.news-v50-dialog,
.news-v50-dialog-img{
  background-color:#fff !important;
}

/* Klassieke PHP-nieuwskaarten en detailweergave. De bestaande venstermaat blijft leidend. */
.news-card img.m253-fit-cover,
.news-detail-image img.m253-fit-cover,
.news-v50-media img.m253-fit-cover,
.news-v50-list-img img.m253-fit-cover,
.news-v50-dialog-img.m253-fit-cover{
  object-fit:cover !important;
  object-position:var(--m253-object-position,var(--m253-photo-focus-x) var(--m253-photo-focus-y)) !important;
}

.news-card img.m253-fit-contain,
.news-detail-image img.m253-fit-contain,
.news-v50-media img.m253-fit-contain,
.news-v50-list-img img.m253-fit-contain,
.news-v50-dialog-img.m253-fit-contain{
  object-fit:contain !important;
  object-position:var(--m253-object-position,50% 50%) !important;
}

/* Ook zonder JavaScript blijft het huidige cover-gedrag bestaan, maar met beter standaardfocuspunt. */
.news-card img,
.news-detail-image img,
.news-v50-media img,
.news-v50-list-img img,
.news-v50-dialog-img{
  max-width:100%;
  object-position:var(--m253-object-position,var(--m253-photo-focus-x) var(--m253-photo-focus-y)) !important;
}

/* Homehero en alternatieve background-image-hero. */
.hero-img.m253-fit-cover,
.hero-image.m253-fit-cover{
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:var(--m253-background-position,var(--m253-photo-focus-x) var(--m253-photo-focus-y)) !important;
}
.hero-img.m253-fit-contain,
.hero-image.m253-fit-contain{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:var(--m253-background-position,50% 50%) !important;
}

/* Paginahero heeft twee lagen: de bestaande gradient plus de afbeelding. */
.page-hero-photo.m253-fit-cover{
  background-size:cover,cover !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center center,var(--m253-background-position,var(--m253-photo-focus-x) var(--m253-photo-focus-y)) !important;
}
.page-hero-photo.m253-fit-contain{
  background-size:cover,contain !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center center,var(--m253-background-position,50% 50%) !important;
}

/* Eventuele echte <img>-hero's in latere versies. */
.hero img.m253-fit-cover,
.page-hero img.m253-fit-cover{
  object-fit:cover !important;
  object-position:var(--m253-object-position,var(--m253-photo-focus-x) var(--m253-photo-focus-y)) !important;
  background:#fff !important;
}
.hero img.m253-fit-contain,
.page-hero img.m253-fit-contain{
  object-fit:contain !important;
  object-position:var(--m253-object-position,50% 50%) !important;
  background:#fff !important;
}
/* M253_IMAGE_FIT_CSS_END */