/* 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-mm-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 `.mm-media`-class — geen
 * `.mm-media-stack`-wrapper, geen scoped style.
 */

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

.mm-media-stack {
    position: relative;
}

/* Wanneer een variant ge-aspect-ratio'd is, vullen img/video/iframe de wrapper */
.mm-media[data-display="cover"] > img,
.mm-media[data-display="cover"] > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mm-media[data-display="fit"] > img,
.mm-media[data-display="fit"] > video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mm-media > iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Play-button overlay — boven de iframe-poster zodat 'ie clickable blijft */
.mm-media-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    z-index: 2;
}
.mm-media-play:hover {
    background: rgba(0, 0, 0, .75);
    transform: translate(-50%, -50%) scale(1.06);
}
.mm-media-play svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

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

/* Hover-image (alleen voor image-types) */
.mm-media-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.mm-media:hover .mm-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`. */
.mm-media-iframe-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 1;
}