/* Overlay glyph anchored to the bottom-right corner of any positioned video
   wrapper — kept out of the top row so it doesn't collide with the language
   switcher / hamburger. Sits above the veil, below the copy. */

.video-mute {
    position: absolute;
    inset-block-end: clamp(16px, 2.4vw, 34px);
    /* Design pins the glyph bottom-right in every state — physical placement,
       independent of document direction. */
    right: clamp(16px, 2.4vw, 34px);
    /* Above the gradient veil and the centred content of a slide. */
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    /* Open white strokes on the footage, no plate — a soft ink shadow is all
       that keeps it readable over a pale frame. */
    color: #FFFFFF;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    filter: drop-shadow(0 1px 6px rgba(20, 18, 15, 0.55));
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    opacity: 0.95;
}

.video-mute:hover,
.video-mute:focus-visible {
    outline: none;
    opacity: 1;
    transform: translateY(-1px);
}

.video-mute__icon {
    display: block;
    width: clamp(34px, 4.3vw, 62px);
    height: clamp(34px, 4.3vw, 62px);
}

.video-mute__icon[hidden] {
    display: none;
}

/* Smaller glyph on tight tiles / film-reel clips. */
.landing-film__clip-frame .video-mute,
.gallery-grid__video .video-mute {
    inset-block-end: 10px;
    right: 10px;
}

.landing-film__clip-frame .video-mute__icon,
.gallery-grid__video .video-mute__icon {
    width: 26px;
    height: 26px;
}