/* =====================================================================
   Video Section
   Full-container-width rounded tile holding a native <video>. Two
   behaviour modes driven by the editor's "Has Sound" toggle:
     • Silent: autoplay + muted + loop, no controls (background ambience)
     • With sound: poster + play button, native controls, user-initiated
   Aspect ratio is inline-styled from the editor's dropdown (16:9 / 21:9 /
   4:3 / 1:1) — no per-ratio modifier classes needed.
   ===================================================================== */

/* Compact mode — same pattern as Content Grid Section. Lets editors chain
   two sections together without double-padding the boundary. */
.video-section--compact-top {
    padding-top: 24px;
}
.video-section--compact-bottom {
    padding-bottom: 24px;
}
.video-section--compact-top .section-header {
    margin-bottom: 16px;
}

/* The rounded tile that hosts the video. Width fills the section's
   .container; height is driven by the inline `aspect-ratio` style the
   partial emits from the editor's dropdown choice. Black background so
   the rounded corners read clean while the video is still loading and
   before the first frame paints (avoids a brief flash of section bg
   through the corner clip). */
.video-section__tile {
    position: relative;
    width: 100%;
    border-radius: var(--radius, 16px);
    overflow: hidden;
    background: #000;
    /* Soft lift so the tile sits forward of the section background — same
       weight as .featured-case__tile uses. */
    box-shadow: var(--shadow-lg, 0 30px 80px rgba(0, 0, 0, 0.18));
}

.video-section__video {
    /* Absolute fill so the video lays out independently of its own
       intrinsic dimensions (which the browser computes from metadata).
       object-fit: cover crops to fill the editor's chosen aspect — same
       crop behaviour the case-study hero image uses. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark green section variant — the black tile bg would look like a
   black hole against the dark green. Drop to the section's primary
   green so the empty pre-load state blends with the surroundings. */
.section--deep.video-section .video-section__tile {
    background: var(--primary-dark);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* Mobile: tighten the tile shadow so it doesn't overflow the viewport
   edges and look too heavy. */
@media (max-width: 768px) {
    .video-section__tile {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    }
}

/* Reduced size variant — editor toggles `reducedSize` on the section to
   shrink the tile to ~2/3 width on tablet+ (for less-dominant clips like
   testimonials). Margin: 0 auto centres it horizontally within the
   container; the section-header above keeps its natural full container
   width so the title/intro still read on the left as normal.
   max-width is set on the tile, NOT the section, so the section header
   stays at full container width. */
@media (min-width: 769px) {
    .video-section--reduced .video-section__tile {
        max-width: 66.6667%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =====================================================================
   YouTube embeds — gated by Marketing consent
   ---------------------------------------------------------------------
   When the editor pastes a YouTube URL into the videoUrl field, the
   partial renders an <iframe> with src="about:blank" and the real embed
   URL stashed on data-cc-src, plus a click-to-consent overlay button.
   cookie-consent-init.js promotes data-cc-src → src on Marketing
   acceptance (and reverses it on withdrawal). While src is blank we
   show the overlay; once a real URL is assigned we hide it.
   ===================================================================== */

.video-section__video--youtube {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Click-to-consent overlay — sits ON TOP of the blank iframe, looks
   like a normal video poster with a centred play button + explainer.
   Background image (poster) injected inline if the editor provided one;
   otherwise the brand dark-green fill below shows through. */
.video-section__yt-consent {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: #03584e;          /* brand dark green fallback */
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Render above the blank iframe; rely on .tile being position:relative
       (already the case — it has `aspect-ratio` + box-shadow). */
    z-index: 2;
    transition: background-color 0.2s ease;
}
.video-section__tile { position: relative; }   /* defensive — ensure abs overlay anchors */

/* Once the iframe is loaded (src has been swapped to the real URL by
   the consent JS) we hide the overlay. :has() selector keeps the rule
   purely CSS-driven — no extra class toggling needed in JS. */
.video-section__tile:has(.video-section__video--youtube:not([src="about:blank"])) .video-section__yt-consent {
    display: none;
}

.video-section__yt-consent-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    max-width: 460px;
    /* Dark scrim behind the text so it stays readable on a bright
       poster image. Only the inner pill gets the scrim — the outer
       button keeps the poster fully visible around the edges. */
    background: rgba(0, 0, 0, 0.55);
    border-radius: 16px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.video-section__yt-consent svg { color: var(--coral, #f6ab93); }

.video-section__yt-consent-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}
.video-section__yt-consent-text strong {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
}

.video-section__yt-consent:hover { background-color: #02483f; }
.video-section__yt-consent:focus-visible {
    outline: 3px solid var(--coral, #f6ab93);
    outline-offset: -3px;
}