/* ============================================================
   campus-scroll.css — pinning skeleton + fluid scale for the
   pinned scroll sections (Yo'nalishlar zones, O'quvchilar wall)
   on the public home page. Pairs with static/js/campus-scroll.js.
   Colour/type come from broadsheet.css's --bw-* tokens — never
   hard-coded here. Scoped under body.marketing-site so it never
   touches the logged-in app.
   ============================================================ */

/* ---------- 1. THE STICKY TRAP ----------
   overflow-x: hidden on ANY ancestor of a sticky element computes to
   overflow-y: auto, which makes that ancestor the sticky containing
   block instead of the viewport — every stage silently stops pinning.
   overflow-x: clip clips without creating a scroll container. */
html { overflow-x: clip; }
body.marketing-site {
    overflow-x: clip;
    overscroll-behavior-y: none;
}
.marketing-site [data-sec] { position: relative; overflow: visible; }

/* ---------- 2. THE STAGE ----------
   Height is set in JS from the live viewport (sizeSections) — never
   set a height on [data-sec] here. dvh keeps the stage honest when a
   mobile browser's toolbar hides mid-scroll. */
.marketing-site [data-stage] {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    align-content: center;
    padding: var(--stage-pad-y) var(--stage-pad-r) var(--stage-pad-b) var(--stage-pad-l);
}
.marketing-site [data-fx] { will-change: transform, opacity; }

/* ---------- 3. FLUID SCALE ---------- */
body.marketing-site {
    --stage-pad-y: clamp(5.5rem, 11vh, 8rem);
    --stage-pad-b: clamp(5rem, 10vh, 7rem);
    --stage-pad-l: clamp(1.2rem, 5vw, 5rem);
    --stage-pad-r: clamp(2.5rem, 8vw, 6rem);
    --t-zone: clamp(1.6rem, 4.4vw, 3.6rem);
    --t-plate: clamp(3.4rem, 9vw, 8rem);
    --col-a: 55fr;
    --col-b: 45fr;
    --col-gap: clamp(1.5rem, 4vw, 4rem);
    --media-h: min(62vh, 560px);
    --portrait-h: min(38vh, 340px);
}

/* ---------- 4. THE TWO-COLUMN JOURNEY ---------- */
.marketing-site .campus-split {
    display: grid;
    grid-template-columns: minmax(0, var(--col-a)) minmax(0, var(--col-b));
    gap: var(--col-gap);
    align-items: center;
    width: 100%;
}
.marketing-site .campus-media { position: relative; height: var(--media-h); }
.marketing-site .campus-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 5. MEDIA GEOMETRY RULE ----------
   Never size a pinned image with aspect-ratio on a %-width column —
   height then derives from width, outgrows the stage on short
   viewports, and pushes content below the fold with no warning. */
.marketing-site .campus-portrait { height: var(--portrait-h); }
.marketing-site .campus-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 6. ZONE RAIL ---------- */
.marketing-site .campus-rail {
    position: absolute; right: -1.4rem; top: 50%; transform: translateY(-50%);
    display: grid; gap: 4px;
}
.marketing-site .campus-rail button {
    display: block; width: 18px; height: 5px; padding: 0; border: 0; cursor: pointer;
    background: var(--bw-neutral-300); transition: background 0.2s, width 0.2s;
}
.marketing-site .campus-rail button:hover { background: var(--bw-accent); }
.marketing-site .campus-rail button[aria-current="true"] { background: var(--bw-accent); width: 30px; }
.marketing-site .campus-rail button:focus-visible { outline: 2px solid var(--bw-accent); outline-offset: 2px; }

/* ---------- 7. THE PLATE NUMERAL ----------
   Four misregistered copies of the same digits — the catalogue's
   cover grammar, reused for each room's number. aria-hidden on the
   three coloured plates so a screen reader hears "07" once. */
.marketing-site .cmyk-num { position: relative; display: inline-block; line-height: 0.86; }
.marketing-site .cmyk-num .paper { position: relative; z-index: 4; }
.marketing-site .cmyk-num .plate { position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; }
.marketing-site .cmyk-num .plate-c { color: var(--bw-accent); transform: translate(-0.055em, 0.03em); }
.marketing-site .cmyk-num .plate-m { color: var(--bw-accent-2); transform: translate(0.045em, -0.025em); }
.marketing-site .cmyk-num .plate-y { color: #e8c400; transform: translate(0.02em, 0.05em); }

/* ---------- 8. THE ONE BEHAVIOURAL BREAKPOINT ----------
   Below 860px the layout changes KIND: stages stop pinning content
   vertically-centred and flow from the top; columns collapse; the
   rail is dropped. Content is never dropped, only simplified. */
@media (max-width: 860px) {
    body.marketing-site {
        --stage-pad-y: 5.5rem;
        --stage-pad-b: 6.5rem;
        --stage-pad-l: 1.4rem;
        --stage-pad-r: 1.4rem;
        --media-h: 34vh;
        --portrait-h: 30vh;
    }
    .marketing-site [data-stage] { align-content: start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .marketing-site .campus-split { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.6rem); }
    .marketing-site .campus-rail { display: none; }
    .marketing-site .campus-wall > * {
        position: relative !important; left: auto !important; top: auto !important;
        width: 100% !important; transform: none !important; margin-bottom: 1.2rem;
    }
}

/* short-and-wide (landscape phones, split screens) */
@media (max-height: 560px) {
    body.marketing-site { --stage-pad-y: 4rem; --stage-pad-b: 3.5rem; --media-h: 42vh; --portrait-h: 34vh; }
    .marketing-site [data-stage] { align-content: start; overflow-y: auto; }
}

/* very large screens: stop growing, start centring */
@media (min-width: 1800px) {
    .marketing-site [data-stage] { max-width: 1720px; margin: 0 auto; }
}

@media (pointer: coarse) {
    .marketing-site .campus-rail button { min-height: 44px; min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-site .campus-wall > * { filter: none !important; }
}

@media print {
    .marketing-site [data-stage] { position: static; height: auto; overflow: visible; }
    .marketing-site [data-sec] { height: auto !important; }
    .marketing-site [data-fx] { opacity: 1 !important; transform: none !important; }
}