/* ==========================================================================
   Pattern: Content V4
   Centred podcast intro with a "Listen" button, above a full-width video.
   The video sits on a two-tone band: white for its top half, background-alt
   from its midpoint down to 54px below it, where the section ends. A gradient
   spine runs behind the band and peeks out either side of the video.
   ========================================================================== */

/* --- Listen button: 44px tall, play badge on the left --------------------- */

.forge-content-v4-buttons .wp-block-button__link {
    gap: 8px;
    padding: 6px 24px 6px 7px;
}

/* The badge artwork (30px circle, black 11% fill, F2F7F5 32% ring, white
   triangle) is the supplied SVG. 30px badge + 6px padding + 1px border
   top and bottom = 44px. */
.forge-content-v4-buttons .wp-block-button__link::before {
    content: "";
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: url("../../decorations/button-play-icon.svg") no-repeat center / contain;
}

/* --- Band behind the video ------------------------------------------------ */

/* The wrapper is full width with 54px of bottom padding and no top padding,
   so its height is the video plus 54px and the video's midpoint sits at
   (100% - 54px) / 2. The spine SVG is drawn on top of the two-tone fill. */
.forge-content-v4-video-wrapper {
    background-image:
        url("../../decorations/content-v4-spine.svg"),
        linear-gradient(
            to bottom,
            var(--wp--preset--color--background) calc((100% - 54px) / 2),
            var(--wp--preset--color--background-alt) calc((100% - 54px) / 2)
        );
    background-repeat: no-repeat;
    background-position: center top, center;
    background-size: cover, 100% 100%;
}

/* --- Video ---------------------------------------------------------------- */

/* The radius is on the video itself; overflow on the figure keeps the native
   controls clipped inside the rounded corners, which Safari needs. Position
   anchors the play badge below. */
.forge-content-v4-video {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}

.forge-content-v4-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1332 / 749;
    object-fit: cover;
    border-radius: 30px;
}

/* With native controls off the whole frame toggles playback (see
   assets/scripts/patterns/content-v4.js), so it reads as clickable. */
.forge-content-v4-video.is-clickable video {
    cursor: pointer;
}

.forge-content-v4-video.is-clickable video:focus-visible {
    outline: 2px solid var(--wp--preset--color--secondary);
    outline-offset: 2px;
}

/* Play badge: a 56px frosted disc (::before) with a 24px play glyph (::after)
   centred over the frame. Decorative only, so pointer events pass through to
   the native controls underneath. */
.forge-content-v4-video::before,
.forge-content-v4-video::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.forge-content-v4-video::before {
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #F2F7F51F;
    border: 1px solid #F2F7F53D;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
}

.forge-content-v4-video::after {
    width: 24px;
    height: 24px;
    /* Nudged right a touch: a triangle reads as centred when its visual
       weight, not its box, sits in the middle of the disc. */
    transform: translate(-50%, -50%);
    background-color: var(--wp--preset--color--background);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Hidden while the clip runs. The is-playing class is set by
   assets/scripts/patterns/content-v4.js, since CSS cannot see playback state. */
.forge-content-v4-video.is-playing::before,
.forge-content-v4-video.is-playing::after {
    opacity: 0;
}