/**
 * Cover: full-width section with media behind vertically centered content.
 * A hero is a cover at the top of a page, usually under a merged (transparent)
 * header; the same block works anywhere on the page.
 *
 * globalClass: cover   (normally together with wrapper-alternate-color)
 *
 * Variants (add to the same container):
 *   cover--image   media is a figure > img.cover-media as the first child
 *   cover--video   GB background image URL is a video URL. An mp4/webm file is
 *                  rendered server side (includes/blocks/cover.php) with
 *                  autoplay and starts at once; YouTube and Vimeo embeds are
 *                  built by js/blocks/cover.js and take 1-3 s. The layer is
 *                  shown only once playing. Optional poster: figure >
 *                  img.cover-media as the first child, like cover--image.
 *                  Prefer a file: 1080p, no audio, 10-20 s loop, < 5 MB,
 *                  faststart (see blocks.json cover.notes for the ffmpeg line).
 *   cover--plain   no media, palette background only
 *   cover--center  center the content on every screen size (default: centered
 *                  on mobile, left aligned from 768px)
 *   cover--full    fills the screen: 100vh minus the header height on pages
 *                  with a normal header, the full 100vh under a merged
 *                  (transparent) header. Leave GB min-height empty with it.
 *
 * Structure:
 *   .cover.gb-container.alignfull.wrapper-alternate-color    GB min-height sets the height
 *     figure > img.cover-media                                (cover--image)
 *     .cover-content.gb-container  (useGlobalMaxWidth, width 100%)
 *       p.cover-label  h1.cover-title  p.cover-text  a.gb-button …
 *
 * Tuning per block with GB "Additional CSS" or a variant class:
 *   --cover-overlay        dark layer over the media, default rgba(0,0,0,.25)
 *   --cover-title-size     title size, default a fluid clamp()
 *   --header-height        set on <html> by cover.js from the visible header's
 *                          real height (fallback --cover-header-offset, 90px);
 *                          used by cover--full and by the first cover under a
 *                          merged header (GP Premium .header-wrap)
 *
 * Chain animations: the chain groups under .cover-content; animate the label,
 * title, text and buttons in order (ca-1, ca-2 …). Never animate the .cover
 * container itself, the media must be visible from the first paint.
 */

:root {
    --cover-overlay: rgba(0, 0, 0, 0.25);
    --cover-title-size: clamp(2rem, 1.4rem + 2.5vw, 3.6rem);
    --cover-header-offset: 90px;
}

.cover {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Media layer. Layers: poster/image figure (0), video (1), content (2).
   The media figure is found through img.cover-media, not as a direct child:
   in the editor the blocks sit inside editor wrapper elements, and the image
   block's own wrapper is positioned the same way so the preview matches the
   front end. */
.cover figure:has(> img.cover-media),
.cover [data-type="generateblocks/image"]:has(img.cover-media),
.cover--video > .video-background-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    z-index: 0;
}

.cover img.cover-media {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.cover figure:has(> img.cover-media)::after,
.cover--video > .video-background-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cover-overlay);
}

/* Editor: the inner-blocks wrapper must span the container so the content
   centers like on the front end. */
.cover > .block-editor-inner-blocks {
    width: 100%;
}

/* The video layer fades in only once playback has started (cover.js adds
   .is-playing). Until then the poster figure, or the palette background, is
   what the visitor sees, never a grey player. */
.cover--video > .video-background-wrapper {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.cover--video > .video-background-wrapper.is-playing {
    opacity: 1;
}

.cover--video .video-background-wrapper iframe,
.cover--video .video-background-wrapper video,
.cover--video .video-background-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    pointer-events: none;
    max-width: none;
    z-index: 0;
}

/* A <video> file fills the box with object-fit; iframes are sized by script. */
.cover--video .video-background-wrapper video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* Editor preview: the script inserts a poster div instead of an iframe. */
.cover--video .video-background-wrapper > div {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content layer */
.cover-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 100px 0;
    text-align: center;
}

.cover-label {
    font-size: 1.1em;
    margin-bottom: 0;
}

.cover-title {
    font-size: var(--cover-title-size);
    line-height: 1.1;
    margin-bottom: 10px;
}

.cover-text {
    margin-bottom: 20px;
}

/* Full-screen cover: the header is subtracted so the cover ends exactly at
   the bottom of the first screen. */
.cover--full {
    min-height: calc(100vh - var(--header-height, 0px));
}

/* First cover under a merged header: GP Premium positions .header-wrap
   absolutely over the content, so shift the centering area down and let a
   full cover use the whole screen. */
.header-wrap ~ .site .cover:first-child {
    padding-top: var(--header-height, var(--cover-header-offset));
}

.header-wrap ~ .site .cover--full {
    min-height: 100vh;
}

@media only screen and (min-width: 768px) {
    .cover-content {
        text-align: left;
    }

    .cover--center .cover-content {
        text-align: center;
    }
}