/* 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 — 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`. */
.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: 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;
}
.mm-media-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    filter: brightness(1.08);
}
.mm-media-play svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

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

/* Overlay-image (badge/logo) */
.mm-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. */
.mm-media-overlay[data-position] { object-fit: none; }
.mm-media-overlay[data-position="left_top"]      { object-position: left top;      }
.mm-media-overlay[data-position="center_top"]    { object-position: center top;    }
.mm-media-overlay[data-position="right_top"]     { object-position: right top;     }
.mm-media-overlay[data-position="left_center"]   { object-position: left center;   }
.mm-media-overlay[data-position="center_center"] { object-position: center;        }
.mm-media-overlay[data-position="right_center"]  { object-position: right center;  }
.mm-media-overlay[data-position="left_bottom"]   { object-position: left bottom;   }
.mm-media-overlay[data-position="center_bottom"] { object-position: center bottom; }
.mm-media-overlay[data-position="right_bottom"]  { object-position: right bottom;  }

/* 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;
}