/**
 * 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.
 *   cover--inset   cover inside the content width, see the section at the end
 *   cover--mobile-stack   with cover--inset: below 768px the photo sits on top
 *                  as a 4:3 picture and the text moves under it on the neutral
 *                  palette background, so text never fights a bright photo
 *   cover--mobile-shade   with cover--inset: below 768px the left-to-right
 *                  darkening turns into a top-to-bottom one (30 % to 78 %), the
 *                  text stays on the photo. Pick one of the two per project.
 *
 * 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()
 *   --cover-inset-radius   cover--inset corner radius, default 12px (set in base.css)
 *   --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;
    }
}

/* ---- Inset cover (cover--inset): a cover inside the content width instead
   of alignfull, with rounded corners and a left-to-right darkening so text
   on the left stays readable over a bright photo.
   Place the .cover container inside a section's inner container without a
   palette wrapper: the variant sets the on-media text color itself; the
   content container does not need useGlobalMaxWidth. ---- */
.cover--inset {
    min-height: 560px;
    /* no :root default: a project sets --cover-inset-radius in base.css (block CSS loads after base.css) */
    border-radius: var(--cover-inset-radius, 12px);
    /* no palette wrapper here: the text sits on the photo in the on-media color,
       and so do text links (btn-no-bg) and inline links */
    color: var(--on-media-clr);
    --no-bg-btn-clr: var(--on-media-clr);
    --no-bg-btn-hover-clr: var(--on-media-clr);
    --link-clr: var(--on-media-clr);
    --link-hover-clr: var(--on-media-clr);
}

.cover--inset :is(h1, h2, h3, p) {
    color: inherit;
}

.cover--inset figure:has(> img.cover-media)::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--media-bg-clr) 55%, transparent) 0%, color-mix(in srgb, var(--media-bg-clr) 25%, transparent) 50%, transparent 80%);
}

.cover--inset .cover-content {
    margin: 0;
    padding: clamp(28px, 6%, 96px);
    max-width: 820px;
    text-align: left;
}

.cover--inset .cover-text {
    max-width: 520px;
    font-weight: 600;
}

@media only screen and (min-width: 990px) {
    .cover--inset {
        aspect-ratio: 2 / 1;
        min-height: 0;
    }
}

/* ---- Inset cover on phones. Below 768px the inset cover is tall and narrow
   and the left-to-right darkening no longer covers the text. Two variants,
   added next to cover--inset; a project picks one. ---- */
@media only screen and (max-width: 767px) {
    /* The photo becomes a 4:3 picture on top and the text moves under it on
       the neutral palette background, in the palette's own text colors. */
    .cover--inset.cover--mobile-stack {
        display: flex;
        flex-direction: column;
        min-height: 0;
        color: var(--font-clr);
        --on-media-clr: var(--font-clr);
        --no-bg-btn-clr: var(--font-clr);
        --no-bg-btn-hover-clr: var(--link-clr);
        --link-clr: var(--link-hover-clr);
    }

    .cover--inset.cover--mobile-stack figure:has(> img.cover-media),
    .cover--inset.cover--mobile-stack [data-type="generateblocks/image"]:has(img.cover-media) {
        position: relative;
        inset: auto;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .cover--inset.cover--mobile-stack figure:has(> img.cover-media)::after {
        background: none;
    }

    .cover--inset.cover--mobile-stack .cover-content {
        background: var(--neutral-clr);
        padding: 24px 20px 28px;
    }

    /* The darkening runs top to bottom so the text at the bottom stays readable. */
    .cover--inset.cover--mobile-shade figure:has(> img.cover-media)::after {
        background: linear-gradient(180deg, color-mix(in srgb, var(--media-bg-clr) 30%, transparent) 0%,
                                    color-mix(in srgb, var(--media-bg-clr) 45%, transparent) 40%,
                                    color-mix(in srgb, var(--media-bg-clr) 78%, transparent) 100%);
    }
}