/**
 * Video: a click-to-play video (YouTube, Vimeo or an mp4/webm file) behind a
 * poster image. No iframe loads before the visitor clicks, so the page stays
 * fast and no third-party cookies are set up front.
 *
 * globalClass: video   (the wrapper; the player inside is .video-player)
 *
 * Variants:
 *   (none)             16:9 player, max 960px, centered
 *   video--wide        full inner width
 *   video--portrait    9:16 player, max 420px (shorts, reels)
 *   video--lightbox    the play button opens the video in the gallery
 *                      lightbox instead of playing in place
 *
 * Structure:
 *   .video.gb-container [.video--wide|--portrait|--lightbox]
 *     .video-player.gb-container
 *       figure.gb-block-image > img            poster (GB image block)
 *       a.gb-button.video-play[href=video url] play button (GB button with
 *                                              icon); the href is the video
 *     (p.video-caption)                        optional caption
 *   The video URL lives in the play button's link, so editors change it like
 *   any link. js/blocks/video.js swaps the poster for the player on click
 *   (the whole poster is clickable). Without JS the link opens the video.
 *
 * Tuning: --video-ratio (16 / 9), --video-max-width (960px),
 *   --video-radius (0), --video-bg
 *
 * Chain animations: the .video wrapper animates as one element; order it
 * after the heading and text in the section.
 */

.video {
    --video-ratio: 16 / 9;
    --video-max-width: 960px;
    --video-radius: 0;
    /* Letterbox behind the player: always black, whatever the palette. */
    --video-bg: black;
}

/* .video prefix: base.css unsets nested container backgrounds inside the
   palette wrappers (.wrapper-extra-color .gb-container), same specificity. */
.video .video-player {
    position: relative;
    aspect-ratio: var(--video-ratio);
    width: 100%;
    max-width: var(--video-max-width);
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--video-radius);
    background-color: var(--video-bg);
}

.video-player--ready {
    cursor: pointer;
}

/* Poster: the figure fills the player, the image covers it (see CLAUDE.md,
   image rule). Editor wrappers between the player and the figure are static,
   so the absolute positioning still resolves to the player. */
.video-player figure.gb-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
}

.video-player figure.gb-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) var(--transition-timing-function);
}

.video-player--ready:hover figure.gb-block-image img {
    transform: scale(1.03);
}

/* Play button, centered over the poster */
.video-player .video-play,
.video-player a.gb-button.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 14px 24px 14px 20px;
    border-radius: 999px;
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background-color var(--transition-speed) var(--transition-timing-function),
                color var(--transition-speed) var(--transition-timing-function);
}

.video-player .video-play:hover,
.video-player .video-play:focus-visible,
.video-player--ready:hover .video-play {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

.video-player .video-play .gb-icon {
    display: inline-flex;
    line-height: 0;
}

.video-player .video-play .gb-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* The player once loaded */
.video-player .video-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--video-bg);
}

.video-player.is-playing figure.gb-block-image,
.video-player.is-playing .video-play {
    display: none;
}

.video-caption {
    margin: 12px auto 0;
    max-width: var(--video-max-width);
    font-size: 0.875rem;
    text-align: center;
}

/* Variants */
.video--wide {
    --video-max-width: none;
}

.video--portrait {
    --video-ratio: 9 / 16;
    --video-max-width: 420px;
}

.video--portrait .video-play .gb-button-text {
    display: none;
}

.video--portrait .video-play {
    padding: 18px;
    font-size: 1.25rem;
}