/* MediaBlock — block-level styles for editor overrides and video controls */

/* Video iframe: full-coverage inside .bg-accent--video */
.wrapper-media .bg-accent--video {
    position: relative;
    overflow: clip;
}

.wrapper-media .bg-accent--video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 177.78vh;
    height: 56.25vw;
    pointer-events: none;
    border: none;
}

/* Show toggle buttons only when block has an iframe (chopsite auto-shows via
   :has(video) for native video; that rule is .wrapper-hero-scoped, so gate our
   iframe case the same way through the chop's own custom property) */
.wrapper-media:has(iframe[id^="vid-player-"]) .btn-video-toggle {
    --btn-video-toggle-display: inline-flex;
}

/* Video toggle buttons (dormant — markup commented out in media-block.twig).
   The chopsite styles .btn-video-toggle only inside .wrapper-hero, so replicate
   its base declarations for .wrapper-media verbatim; no styling of our own. */
.wrapper-media .btn-video-toggle {
    --btn-video-toggle-display: none;
    display: var(--btn-video-toggle-display);
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    color: #fff;
    cursor: pointer;
    background-color: transparent;
    border: 0;
}

.wrapper-media .btn-video-toggle .text {
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.3s;
    color: #fff;
}

.wrapper-media .btn-video-toggle span {
    color: inherit;
}

.wrapper-media .btn-video-toggle:is(:hover, :focus-visible) .text {
    color: #fff;
    border-bottom: 1px solid #fff;
}

/* Mute-state icon swap: FE-team icomoon glyphs only (same pattern as HeroBlock).
   Markup ships szicon-volume-mute; swap to szicon-volume-on when unmuted.
   Codepoint from the chopsite's main.min.css icomoon set. */
.wrapper-media .btn-video-toggle.is-unmuted .szicon-volume-mute::before {
    content: "\e928"; /* szicon-volume-on */
}