/*
 * Block: simple-img-video
 * Originally by egloo. Modified by Greta Eline Poclen.
 * Changes: aspect-ratio replaces padding-bottom hack, facade styles,
 *          cinematic full-width layout, autoplay overlay controls, caption.
 */

/* ─── Container ─────────────────────────────────────────────────────────── */

.egloo-block .container {
    width: 100%;
    margin: auto;
}

.egloo-block.simple-img-video {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

/* Cinematic mode bleeds edge-to-edge with no vertical margin. */
.egloo-block.simple-img-video.cinematic {
    margin-top: 0;
    margin-bottom: 0;
}

.egloo-block.simple-img-video .container {
    max-width: calc(var(--site-width) + 4rem);
}

/* ─── Image ──────────────────────────────────────────────────────────────── */

.egloo-block.simple-img-video img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─── Video wrapper — shared ─────────────────────────────────────────────── */

.egloo-block.simple-img-video .video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* No background colour: avoids visible letterbox bands around the iframe. */
}

.egloo-block.simple-img-video .video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /*
     * Scale slightly above 1 to cover the subpixel gap Vimeo introduces
     * between the video frame and the iframe edge.
     */
    transform: scale(1.003);
}

/* ─── Cinematic full-width layout ────────────────────────────────────────── */

/*
 * Cinematic is layout-only — it works with both autoplay on and off.
 * The wrapper fills the full viewport height; the iframe is scaled
 * to cover the container without letterboxing (like object-fit: cover).
 */
.egloo-block.simple-img-video.cinematic .video-wrap {
    aspect-ratio: unset;
    height: 100vh;
}

.egloo-block.simple-img-video.cinematic .video-wrap iframe {
    /*
     * A 16:9 iframe made 177.78vh wide (100vh × 16/9) is always wider
     * than the viewport; centred via translate, clipped by overflow: hidden.
     */
    width: 177.78vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.003);
}

/* ─── Autoplay overlay controls ──────────────────────────────────────────── */

/*
 * Play button: centred over the video, hidden by default.
 * Shown by JS when the user clicks the video to pause it.
 */
.egloo-block.simple-img-video .video-autoplay__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    /* Hidden via the `hidden` HTML attribute set in PHP.
       This rule handles the visible state. */
}

.egloo-block.simple-img-video .video-autoplay__play svg {
    width: clamp(3rem, 8vw, 5rem);
    height: clamp(3rem, 8vw, 5rem);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}

.egloo-block.simple-img-video .video-autoplay__play:hover svg {
    transform: scale(1.08);
}

/*
 * Mute/unmute button: fixed size, bottom right corner, always visible.
 */
.egloo-block.simple-img-video .video-autoplay__mute {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    padding: 0.35rem;
    cursor: pointer;
    color: white;
    transition: background 0.2s ease;
    /* Sits above the iframe. */
    z-index: 2;
}

.egloo-block.simple-img-video .video-autoplay__mute:hover {
    background: rgba(0, 0, 0, 0.75);
}

.egloo-block.simple-img-video .video-autoplay__mute svg {
    width: 100%;
    height: 100%;
    display: block;
}

/*
 * Toggle muted/unmuted icon via JS-set class on the wrapper.
 * Default state: video is muted → show muted icon, hide unmuted.
 */
.egloo-block.simple-img-video .video-autoplay__mute .icon-unmuted {
    display: none;
}

.egloo-block.simple-img-video .video-autoplay.is-unmuted .video-autoplay__mute .icon-muted {
    display: none;
}

.egloo-block.simple-img-video .video-autoplay.is-unmuted .video-autoplay__mute .icon-unmuted {
    display: block;
}

/* ─── Facade (autoplay off) ──────────────────────────────────────────────── */

.egloo-block.simple-img-video .video-facade {
    cursor: pointer;
}

/* Thumbnail fills the wrapper exactly. */
.egloo-block.simple-img-video .video-facade__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.egloo-block.simple-img-video .video-facade:hover .video-facade__thumb {
    transform: scale(1.02);
}

/* Play button — centred over the thumbnail. */
.egloo-block.simple-img-video .video-facade__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.egloo-block.simple-img-video .video-facade__play svg {
    width: clamp(3rem, 8vw, 5rem);
    height: clamp(3rem, 8vw, 5rem);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}

.egloo-block.simple-img-video .video-facade:hover .video-facade__play svg {
    transform: scale(1.08);
}

/* Hide facade layer once the iframe has been injected. */
.egloo-block.simple-img-video .video-facade.is-playing .video-facade__thumb,
.egloo-block.simple-img-video .video-facade.is-playing .video-facade__play {
    display: none;
}

/* ─── Caption ────────────────────────────────────────────────────────────── */

.egloo-block.simple-img-video .block-caption {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--grey, #9f9f9f);
    text-align: left;
}

/* Caption is hidden in cinematic mode — it would overlap the video. */
.egloo-block.simple-img-video.cinematic .block-caption {
    display: none;
}