/* Zegnooitnooit – afgeronde foto's 1.0.2.
   Alleen WAAROM?, WAAR? en afzonderlijke Work-projecten.
   Foto's en animaties behouden hun bestaande dimensies.
*/
body.znn-rounded-waarom,
body.znn-rounded-waar,
body.znn-rounded-work {
  --znn-photo-corner: 14px;
}

/* WAAROM? – bevestigd in journal-stream.css; onafhankelijk scrollen intact. */
body.znn-rounded-waarom .nsn-stream__media {
  border-radius: var(--znn-photo-corner) !important;
  overflow: hidden;
}
body.znn-rounded-waarom .nsn-stream__media > img,
body.znn-rounded-waarom .nsn-stream__img {
  border-radius: inherit;
}

/* WAAR? – MEC tiles / grids / fluents: clip at the outer card.
   In de overige weergaven voegt het kleine script een doelklasse toe. */
body.znn-rounded-waar .mec-event-article,
body.znn-rounded-waar .mec-event-tile-view .mec-event-image,
body.znn-rounded-waar .mec-event-grid-modern .mec-event-image,
body.znn-rounded-waar .mec-event-grid-classic .mec-event-image,
body.znn-rounded-waar .mec-event-grid-clean .mec-event-image,
body.znn-rounded-waar .mec-event-grid-novel .mec-event-image,
body.znn-rounded-waar .mec-event-grid-colorful .mec-event-image,
body.znn-rounded-waar .mec-fluent-wrap .mec-event-image,
body.znn-rounded-waar .znn-corner-event,
body.znn-rounded-waar .znn-corner-photo {
  border-radius: var(--znn-photo-corner) !important;
  overflow: hidden !important;
}

/* WAAR? – exact geverifieerde maatwerk-tegels uit de live HTML:
   <article class="nsn-we-card"><a><span class="nsn-we-media">... enz.
   De omvattende link clippt de foto EN het donkere vlak als een geheel.
   Animaties, links, overlays en de bestaande layout blijven ongewijzigd. */
body.znn-rounded-waar .nsn-we-grid article.nsn-we-card,
body.znn-rounded-waar .nsn-we-grid article.nsn-we-card > a {
  border-radius: var(--znn-photo-corner) !important;
  overflow: hidden !important;
}

/* Work: original gallery + contact/next section and custom PRAKTISCH images.
   The big hero/background remains square. */
body.znn-rounded-work .nsn-grid__figure,
body.znn-rounded-work .nsn-pair__media,
body.znn-rounded-work .nsn-pair__panel,
body.znn-rounded-work .znn-corner-work,
body.znn-rounded-work .znn-corner-photo {
  border-radius: var(--znn-photo-corner) !important;
  overflow: hidden !important;
}
body.znn-rounded-work main img.znn-corner-photo,
body.znn-rounded-waar main img.znn-corner-photo {
  border-radius: var(--znn-photo-corner) !important;
}

@media (max-width: 640px) {
  body.znn-rounded-waarom,
  body.znn-rounded-waar,
  body.znn-rounded-work {
    --znn-photo-corner: 10px;
  }
}


/* Work 1.0.4 – het dubbele wisselbeeld onderaan elke Work-projectpagina.
   Niet de grote openingsfoto of de beelden op WAAROM?/WAAR?.
   JS geeft uitsluitend het tweetal bij de tekst "Hover om beeld te wisselen"
   deze class, zodat andere afbeeldingen ongewijzigd blijven.

   Individual `scale` (niet `transform`) laat de bestaande crossfade-/hover-
   transforms intact. De afbeelding is circa 10% kleiner; rondom verschijnt
   een smalle donkere marge. Deze ruststand geldt voor BEIDE wisselbeelden.
*/
body.znn-rounded-work {
  --znn-swap-photo-scale: 0.90;
}
body.znn-rounded-work img.znn-swap-outzoom-image {
  scale: var(--znn-swap-photo-scale) !important;
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  body.znn-rounded-work img.znn-swap-outzoom-image {
    transition: none !important;
  }
}