/*
 * Hero Video Optimizer – Frontend Stylesheet
 *
 * Goals:
 *   CLS = 0  – Space is reserved via aspect-ratio before the video arrives.
 *   LCP      – Video/poster is the LCP element; no layout shift ever occurs.
 *   GPU      – Video decoding stays off the main thread via will-change.
 *
 * Layer order inside .hvo-video-container (bottom → top):
 *   z-index 0  │ .hvo-video    – the video element
 *   z-index 1  │ .hvo-overlay  – optional colour/opacity layer
 *   z-index 10 │ .hvo-text-*   – typography text blocks
 */

/* ── 1. Wrapper ──────────────────────────────────────────────────────────── */

.hvo-hero-wrapper {
    /*
     * ── Full-width strategy ───────────────────────────────────────────────
     * Base state: fills the immediate parent (works correctly if the parent
     * is already full-width, e.g. a page-builder "full-width section").
     *
     * JavaScript (hvo-loader.js → hvoApplyFullWidth) then measures the
     * element's exact offset from the viewport via getBoundingClientRect()
     * and overrides margin-left + width inline to pin it to the true
     * viewport edges — regardless of parent padding, overflow, or container
     * structure.  This is 100% reliable across all themes and page builders.
     * ─────────────────────────────────────────────────────────────────────
     */
    position: relative;
    width: 100%;        /* Fallback before JS runs (avoids CLS). */
    overflow: hidden;
    /* Isolate painting so the rest of the page is not repainted on play. */
    contain: layout style paint;
}

/* ── 2. Video container (aspect-ratio spacer) ────────────────────────────── */

.hvo-video-container {
    position: relative;
    width: 100%;
    /*
     * Mobile-first: 9:16 portrait.
     * Overridden for desktop (≥ 768 px) below.
     */
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background-color: #000; /* No white flash before poster. */
}

/* ── 3. Video element ────────────────────────────────────────────────────── */

.hvo-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    z-index: 0;
    will-change: transform; /* GPU compositor layer. */
    -webkit-media-controls: none;
}

/* ── 4. Desktop override (≥ 768 px) ─────────────────────────────────────── */

@media (min-width: 768px) {
    .hvo-video-container {
        aspect-ratio: 16 / 9;
    }
}

/* ── 5. Overlay layer ────────────────────────────────────────────────────── */

.hvo-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /*
     * background-color is injected as scoped inline CSS per slider instance
     * (e.g. #hvo-slider-42 .hvo-overlay { background-color: rgba(0,0,0,0.4); })
     * so it can differ between sliders on the same page.
     */
}

/* ── 6. Text content layers ──────────────────────────────────────────────── */

/*
 * Architecture note
 * ─────────────────
 * Position (left/top) and typography (color, font-size, font-family,
 * font-weight) are written as style="" attributes directly on each
 * .hvo-text element by HVO_Shortcode::build_text_layers().
 *
 * Inline styles survive ANY filtering (themes, page builders, security
 * plugins) that might strip a separate <style> block.
 *
 * The rules below control ONLY layout/behaviour properties that do not
 * change per-slider.
 */

.hvo-text {
    /* ── Positioning inside .hvo-video-container ──────────────────────── */
    position: absolute;
    /*
     * translate(-50%, -50%) anchors the text block on its own centre point.
     * Combined with left/top from inline styles:
     *   left:50%; top:50% → perfectly centred in the container.
     *   left:50%; top:20% → horizontally centred, near the top.
     */
    transform: translate(-50%, -50%);

    /* ── Stacking order (above overlay at z:1, below nothing) ─────────── */
    z-index: 10;

    /* ── Layout ───────────────────────────────────────────────────────── */
    display: block;          /* Never collapses to inline. */
    max-width: 80%;          /* Wraps gracefully on narrow screens. */
    width: max-content;      /* Shrinks to content; never wider than max-width. */
    text-align: center;
    line-height: 1.3;
    white-space: pre-line;   /* Respects Enter key in admin textarea. */

    /* ── Legibility helpers ───────────────────────────────────────────── */
    /*
     * Default shadow adds contrast on bright frames even without an overlay.
     * Overrideable by child-theme CSS without !important.
     */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.6);

    /* ── GPU compositing ──────────────────────────────────────────────── */
    /*
     * will-change: transform keeps the text on a dedicated compositor
     * layer so video decoding doesn't cause text repaint.
     */
    will-change: transform;
    pointer-events: none;
}

/*
 * Fallback values — used when the shortcode is called in static inline
 * mode (no slider_id) without explicit style attributes.
 * Slider-managed instances override these via style="" attributes.
 */
.hvo-text-1 { left: 50%; top: 40%; color: #ffffff; font-size: 2rem; }
.hvo-text-2 { left: 50%; top: 55%; color: #ffffff; font-size: 1.25rem; }
.hvo-text-3 { left: 50%; top: 68%; color: #ffffff; font-size: 1rem; }

/* ── 7. Image layer ──────────────────────────────────────────────────────── */

/*
 * Architecture note (mirrors .hvo-text)
 * ──────────────────────────────────────
 * Position (left/top), width, and height are written as style="" attributes
 * on each .hvo-img-layer element by HVO_Shortcode::build_image_layer().
 * The rules below control only layout/behaviour properties that are constant.
 *
 * Layer order: above overlay (z:1) but below text (z:10) by default.
 */

.hvo-img-layer {
    position: absolute;
    /*
     * translate(-50%, -50%) anchors the image on its own centre point —
     * the same anchor system used by .hvo-text.
     * left:50%; top:50% → centred in container.
     */
    transform: translate(-50%, -50%);
    z-index: 8;
    display: block;          /* Eliminate inline-baseline gap. */
    max-width: none;         /* Fixed-px width overrides percentage-based max. */
    object-fit: contain;     /* Safety net: no distortion if w/h ratio drifts. */
    pointer-events: none;
    will-change: transform;  /* GPU compositor layer (same as video + text). */
}

/* ── 8. Full-viewport utility class ─────────────────────────────────────── */
/*
 * [hero_video_opt … class="hvo-fullscreen"]
 * Makes the hero fill 100% of the viewport height (safe-area aware).
 */

.hvo-hero-wrapper.hvo-fullscreen { /* § 8 */
    min-height: 100svh;
}

.hvo-hero-wrapper.hvo-fullscreen .hvo-video-container {
    aspect-ratio: unset;
    height: 100svh;
}

/* ── 9. Suppress iOS Safari play overlay ─────────────────────────────────── */

.hvo-video::-webkit-media-controls-start-playback-button,
.hvo-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

/* ── 10. Editor error state ──────────────────────────────────────────────── */
/* Only visible to logged-in editors (guarded in PHP). */

.hvo-error {
    padding: 1em;
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    font-family: monospace;
    font-size: 0.9rem;
    border-radius: 4px;
}