/**
 * CQ Scroll Sequence — Frontend CSS
 *
 * Layout:
 *
 *   .cq-ssq-wrap                    — outer, full-bleed background colour
 *     └─ .cq-ssq-stage              — defines scroll range (height = spacer + 100vh)
 *          ├─ .cq-ssq-sticky        — FULL-BLEED, pinned by GSAP (simple for GSAP)
 *          │     └─ .cq-ssq-canvas-wrap [.container]  — width-constrained canvas zone
 *          │           ├─ canvas.cq-ssq-canvas        — fills the wrap (always 100vh tall)
 *          │           └─ [.ssq-fixed stack relocated here by JS]
 *          └─ .cq-ssq-overlay       — full-width, holds UX Builder content
 *                └─ .cq-ssq-overlay-inner [.container] — width-constrained
 *                       └─ ...UX Builder rows...
 *
 * Canvas is always 100vh tall — never bigger than the viewport. The image
 * is fit-scaled inside the canvas and centered both horizontally and
 * vertically. Overlay content must fit within the viewport on every
 * breakpoint — use UX Builder's responsive controls (font sizes, hidden
 * elements, smaller paddings on mobile) to make it fit.
 *
 * CSS variables set inline by PHP:
 *   --cq-ssq-spacer  → scroll distance for the animation (e.g. 150vh)
 */

/* --- Outer wrap (full-bleed background) --------------------------------- */

.cq-ssq-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: visible; /* GSAP pin requires this */
    position: relative;
}

/* --- Stage (defines scroll range) --------------------------------------- */

.cq-ssq-stage {
    position: relative;
    /* total scroll distance: spacer + the pinned 100vh */
    min-height: calc(var(--cq-ssq-spacer, 150vh) + 100vh);
}

/* --- Sticky (FULL-BLEED, GSAP-pinned) ----------------------------------- */
/*
 * Stays full-bleed so GSAP's pin position calculations are simple. The visible
 * canvas + content live inside .cq-ssq-canvas-wrap which IS width-constrained.
 */

.cq-ssq-sticky {
    position: relative; /* GSAP ScrollTrigger pin takes over at runtime */
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- Canvas wrap (width-constrained inside the pin) --------------------- */
/*
 * This is where the .container class is applied. The canvas fills it, and
 * the .cq-ssq-fixed-stack overlay is positioned absolutely inside it.
 *
 * `position: relative` so absolute children anchor to this wrap rather
 * than the sticky element. `height: 100%` so it fills the sticky parent.
 */

.cq-ssq-canvas-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.cq-ssq-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Overlay (UX Builder content layered on top of the canvas) ---------- */

.cq-ssq-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
    /* pull the content up so it sits on top of the canvas */
    margin-top: -100vh;
}

.cq-ssq-overlay-inner {
    width: 100%;
    box-sizing: border-box;
}

/* --- ssq-fixed: pinned to viewport for entire animation ------------------ */
/*
 * Elements with .ssq-fixed are relocated by JS into a single stacking
 * container (.cq-ssq-fixed-stack) inside .cq-ssq-canvas-wrap. The stack is
 * absolute-positioned so it overlays the canvas; elements inside it flow
 * vertically — first .ssq-fixed Row at the top, second below it, etc.
 */

.cq-ssq-fixed-stack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2; /* above the canvas */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.ssq-fixed {
    width: 100%;
    box-sizing: border-box;
}

/* --- ssq-sticky: per-element pinning inside the overlay ------------------ */
/*
 * Sticks within the parent's box. Most useful when the class is on a
 * top-level Row inside .cq-ssq-overlay-inner, so the parent box is tall enough
 * for the sticking to be meaningful.
 */

.ssq-sticky {
    position: sticky;
    top: 0;
    z-index: 3;
}

.ssq-sticky-0  { position: sticky; top: 0;     z-index: 3; }
.ssq-sticky-5  { position: sticky; top: 5vh;   z-index: 3; }
.ssq-sticky-10 { position: sticky; top: 10vh;  z-index: 3; }
.ssq-sticky-15 { position: sticky; top: 15vh;  z-index: 3; }
.ssq-sticky-20 { position: sticky; top: 20vh;  z-index: 3; }
.ssq-sticky-25 { position: sticky; top: 25vh;  z-index: 3; }
.ssq-sticky-30 { position: sticky; top: 30vh;  z-index: 3; }
.ssq-sticky-40 { position: sticky; top: 40vh;  z-index: 3; }
.ssq-sticky-50 { position: sticky; top: 50vh;  z-index: 3; }

/* --- No-JS fallback ------------------------------------------------------- */

@media (scripting: none) {
    .cq-ssq-wrap        { height: auto !important; }
    .cq-ssq-stage       { min-height: 0 !important; }
    .cq-ssq-sticky      { position: relative; height: auto !important; }
    .cq-ssq-overlay     { margin-top: 0 !important; }
    .cq-ssq-canvas      { display: none; }
    .cq-ssq-fixed-stack { position: static !important; display: block; }
    .ssq-sticky,
    [class*="ssq-sticky-"] { position: static !important; }
}