/* media.css — base-styles voor `Framework\Media\Renderer`-output.
 *
 * De *toggle*-logica voor multi-variant zit in een scoped <style>-block dat
 * de Renderer per item inline genereert (`[data-id="m-xxxx"]`-selectors).
 * Dit bestand bevat alleen wat in alle items hetzelfde is: aspect-ratio
 * gedrag, object-fit per display-mode, play-button en overlay-images.
 *
 * Single-variant items hebben enkel de outer `.media`-class — geen
 * `.media-stack`-wrapper, geen scoped style.
 */

.media,
.media-stack > .media {
    position: relative;
    overflow: hidden;
}

.media-stack {
    position: relative;
}

/* #23: de viewport is de ENIGE clipper en omsluit alleen de schaalbare foto-lagen
   (basis-img/video/iframe + .media-hover). Decoraties (overlay/play/poster) staan
   op de buitenste .media → niet onderhevig aan zoom/clip. Moderne strakke clipping. */
.media__viewport {
    position: absolute;
    inset: 0;
    overflow: clip;
    overflow-clip-margin: 0;
}

/* Foto-lagen over-dekken de viewport (net 1px groter) zodat subpixel-jitter bij de
   geschaalde hover-laag FYSIEK nooit een naad/gat kan tonen — de echte verzekering. */
.media__viewport > img,
.media__viewport > video,
.media__viewport > iframe {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 0;
}
.media[data-display="cover"] .media__viewport > img,
.media[data-display="cover"] .media__viewport > video {
    object-fit: cover;
}
.media[data-display="fit"] .media__viewport > img,
.media[data-display="fit"] .media__viewport > video {
    object-fit: contain;
}

/* #38: natuurlijke ratio (geen aspect-ratio, geen cover/fit). Zonder dit zijn alle
   viewport-kinderen absoluut → .media hoogte 0 → onzichtbaar. De viewport wordt
   relative en de BASIS-laag (eerste kind: img/video/iframe) bepaalt in-flow de hoogte;
   de .media-hover (geen first-child) blijft absoluut binnen die hoogte → overlap/clip
   blijft werken.

   Twee selectors, bewust defensief:
   - `[data-display="natural"]`: de expliciete marker die de Renderer (≥1.44.8) zet.
   - `:not([data-display]):not([style*="aspect-ratio"])`: dezelfde natuurlijke-ratio-case
     afgeleid uit afwezigheid — vangt een site die nog op een oudere Renderer draait
     (geen marker) zodat een losse media.css-deploy óók daar fixt. Cover/fit hebben
     data-display, vaste ratio heeft inline aspect-ratio → die matchen geen van beide. */
.media[data-display="natural"] > .media__viewport,
.media:not([data-display]):not([style*="aspect-ratio"]) > .media__viewport {
    position: relative;
    inset: auto;
}
.media[data-display="natural"] > .media__viewport > :first-child,
.media:not([data-display]):not([style*="aspect-ratio"]) > .media__viewport > :first-child {
    position: relative;
    inset: 0;
    width: 100%;
    height: auto;
}

/* Play-button overlay — gecentreerd, klikbaar boven poster/video.
   Voor self-hosted video bepaalt `[data-paused]` op de wrapper de visibility:
   media.js togglet die op pause/play. Themakleur via `--color-primary`. */
.media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary, rgba(0, 0, 0, .55));
    color: var(--color-primary-fg, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s, opacity .2s;
    z-index: 2;
}
.media-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    filter: brightness(1.08);
}
.media-play svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

/* Self-hosted video: button volgt de paused-state van de wrapper. */
.media[data-paused="0"] > .media-play {
    opacity: 0;
    pointer-events: none;
}
.media[data-paused] .media__viewport > video {
    cursor: pointer;
}

/* Overlay-image (badge/logo) */
.media-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Met overlay_position (≠ full): badge op natuurlijke grootte in een hoek,
   geplaatst via object-position binnen de full-bleed box. */
.media-overlay[data-position] { object-fit: none; }
.media-overlay[data-position="left_top"]      { object-position: left top;      }
.media-overlay[data-position="center_top"]    { object-position: center top;    }
.media-overlay[data-position="right_top"]     { object-position: right top;     }
.media-overlay[data-position="left_center"]   { object-position: left center;   }
.media-overlay[data-position="center_center"] { object-position: center;        }
.media-overlay[data-position="right_center"]  { object-position: right center;  }
.media-overlay[data-position="left_bottom"]   { object-position: left bottom;   }
.media-overlay[data-position="center_bottom"] { object-position: center bottom; }
.media-overlay[data-position="right_bottom"]  { object-position: right bottom;  }

/* Hover-image (alleen voor image-types) */
.media-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.media:hover .media-hover {
    opacity: 1;
}

/* YouTube/Vimeo poster — getoond als overlay-image boven de iframe maar
   onder de play-button. media.js handelt klik af: poster + play-button
   verbergen + iframe.src herladen met `autoplay=1`. */
.media-iframe-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 1;
}