/* Video Ajax Overlay — used by the "Post Type - Video Block" (Watch now)
   Slides down from the top on open, slides back up on close.

   The overlay's own content (section/container/row/col, .bg--dark,
   .videoWrapper, headings, etc.) is the exact same markup and classes the
   real single video page uses, so it's styled by the theme's existing CSS —
   nothing content-related is redefined here, only the overlay chrome that
   has no equivalent elsewhere. */

body.video-overlay-open {
    overflow: hidden;
}

.video-ajax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow-y: auto;
    /* section#hero-video-player .container zeroes --bs-gutter-x below
       430px (theme.atmos.css) for a full-bleed look, but Bootstrap's .row
       re-declares that same variable on itself independently, so its
       negative margin doesn't pick up the override — it bleeds ~9.6px
       past the container on each side. That's normally invisible because
       the rest of the site masks it at the body level; the overlay needs
       its own clip since it's a fixed, independently-scrolling element. */
    overflow-x: hidden;
    transform: translateY(-100%);
    transition: transform .45s cubic-bezier(0.65, 0, 0.35, 1);
    visibility: hidden;
    /* Same gradient #hero-video-player normally uses on its own (see the
       override below) — applied here on the overlay itself so it spans the
       whole thing as one continuous backdrop (bar included) instead of
       restarting at the top of the hero section further down. */
    background: linear-gradient(var(--black-100), var(--black-65));
}

.video-ajax-overlay.is-open {
    transform: translateY(0);
    visibility: visible;
}

.video-ajax-overlay__bar {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    z-index: 2;
}

.video-ajax-overlay__share,
.video-ajax-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--black-30);
    background: var(--black-70);
    color: var(--white);
    cursor: pointer;
    transition: background .2s ease-in-out, border-color .2s ease-in-out;
    font-size: 16px;
}

.video-ajax-overlay__share:hover,
.video-ajax-overlay__close:hover {
    background: var(--brandColor);
    border-color: var(--brandColor);
}

.video-ajax-overlay__close i {
    transition: transform .3s ease-in-out;
}

.video-ajax-overlay__close:hover i {
    transform: rotate(90deg);
}

.video-ajax-overlay__share.is-copied {
    background: var(--brandColor);
    border-color: var(--brandColor);
}

.video-ajax-overlay__share-label {
    position: absolute;
    margin-top: 56px;
    font-size: 12px;
    white-space: nowrap;
    background: var(--black-70);
    padding: 4px 10px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-in-out;
}

.video-ajax-overlay__share.is-copied .video-ajax-overlay__share-label {
    opacity: 1;
}

.video-ajax-overlay__content:empty {
    min-height: 60vh;
}

/* #hero-video-player and .article__body normally paint their own
   background (theme.atmos.css' gradient / .bg--dark), which is fine as a
   standalone page but reads as a separate "box" here: the sticky __bar
   above them has no background of its own, so scrolling revealed a seam
   between the bar and wherever the section's own background began. Make
   them transparent so the overlay's own gradient (above) — one continuous
   backdrop behind the bar and all the content — shows through instead. */
.video-ajax-overlay #hero-video-player,
.video-ajax-overlay .article__body {
    background: transparent;
}

/* Center the video player within the visible window on open, rather than
   flush at the top under the bar. .article__body (caption/description)
   still follows normally below it, scrollable like any other content.
   The bar (20px padding + 44px buttons = 84px, see below for the 76px
   mobile figure) sits above this section in normal flow, so a plain
   100vh here would center on 100vh + 84px of total height — visibly
   lower than true center. Subtracting the bar's own height keeps the
   video optically centered in what's actually visible. */
.video-ajax-overlay #hero-video-player {
    min-height: calc(100vh - 84px);
    display: flex;
    align-items: center;
}

/* The YouTube iframe (and Playerjs' target div) render their own chrome
   asynchronously — until that paints, the browser shows the iframe/div's
   own background, which defaults to a plain grey box that doesn't match
   the overlay. Extending the overlay's own dark background underneath
   removes that flash. */
.video-ajax-overlay .videoWrapper,
.video-ajax-overlay .videoWrapper iframe,
.video-ajax-overlay [id^="YTPlayer-"],
.video-ajax-overlay [id^="player-"] {
    background: var(--black-65);
}

.video-ajax-overlay__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    font-size: 18px;
    color: var(--white);
    opacity: .7;
}

@media only screen and (max-width: 768px) {
    .video-ajax-overlay__bar {
        padding: 16px;
    }

    /* 16px padding + 44px buttons = 76px bar height at this breakpoint. */
    .video-ajax-overlay #hero-video-player {
        min-height: calc(100vh - 76px);
    }
}

@media only screen and (max-width: 430px) {
    /* theme.atmos.css zeroes the .container's own gutter here, but
       Bootstrap's .row declares --bs-gutter-x on itself independently, so
       it doesn't inherit that zero and keeps its default negative margin
       — the video bleeds past the container instead of respecting it.
       Zero it here too so the row's width genuinely matches the
       container's, rather than just relying on overflow-x:hidden above
       to clip the excess. */
    .video-ajax-overlay #hero-video-player .row {
        --bs-gutter-x: 0rem;
    }
}