/*
====================================================
KADIM EXPERIENCE ENGINE
File    : kadim.responsive.css
Version : 7.2.0-phase-a (+ Decision 026a Morph Quarantine, 026e Hero Framing)
Role    : Experience-Root–owned responsive layout (Host Boundary Option B)

Desktop remains the visual reference.
Only sizing / placement / type scale / Hero frame scale adapt — not UX timing
or interaction model. Timing constants live in JS (unchanged). Morph / overlay
durations stay in kadim.gallery.transition.css (unchanged). Soft Morph / FS
geometry is NEVER overridden here (026a). Hero cinematic framing token:
--kadim-hero-frame-scale (026e).

====================================================
*/

/* -------------------------------------------------
   Tokens — Experience Root (World 1)
   Fallbacks on :root so lab/WP boot before JS sync.
------------------------------------------------- */

:root,
#kadim-experience-root,
.kadim-experience-root {
    --kadim-app-height: 100vh;
    --kadim-app-height: 100dvh;
    --kadim-app-width: 100vw;
    --kadim-safe-top: env(safe-area-inset-top, 0px);
    --kadim-safe-right: env(safe-area-inset-right, 0px);
    --kadim-safe-bottom: env(safe-area-inset-bottom, 0px);
    --kadim-safe-left: env(safe-area-inset-left, 0px);
    --kadim-exit-rail-h: 64px;
    --kadim-observe-rail-h: 64px;
    --kadim-gallery-inline-max: 1200px;
    --kadim-gallery-inline-pad: 40px;
    --kadim-overlay-pad: 1.5rem;
    --kadim-title-size: clamp(2.5rem, 5vw, 5.5rem);
    --kadim-desc-size: clamp(1.1rem, 2vw, 1.8rem);
    --kadim-icon-size: clamp(70px, 8vw, 100px);
    --kadim-card-padding: clamp(30px, 5vw, 80px) clamp(20px, 4vw, 50px);
    --kadim-card-width: min(90%, 1100px);
    --kadim-rail-font: 11px;
    --kadim-rail-font-sm: 10px;
    /* 026e: Hero cinematic framing (Responsive syncs from presentation profiles) */
    --kadim-hero-frame-scale: 1;
}

/* Sealed root — mount boundary only; must NOT become a scroll trap */
#kadim-experience-root,
.kadim-experience-root {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* isolation without containing sticky ancestors of World 2 */
    isolation: isolate;
    contain: style;
}

/*
  Geometry fix (Decision 026b) — least invasive.
  isolation: isolate traps fullscreen z-index inside the root stacking context,
  so World 2 (sibling, z-index: 1) painted above the gallery.
  While FS Soft Morph / fullscreen is active (ready, not released), elevate the
  entire Experience Root above World 2. isolation stays; document structure stays.
  Inline / released: root returns to auto stacking (normal page flow).

  z-index 50: above World 2 (1), below Soft Exit / Observation rails on body (119–120).
*/
body.kadim-gallery-ready:not(.kadim-gallery-released) #kadim-experience-root,
body.kadim-gallery-ready:not(.kadim-gallery-released) .kadim-experience-root {
    z-index: 50;
}

#kadim-experience-root *,
.kadim-experience-root * {
    box-sizing: border-box;
}

/* -------------------------------------------------
   Viewport surfaces — Decision 026a Morph Quarantine

   Soft Morph / fullscreen gallery geometry stays in
   kadim.gallery.transition.css (v7.1 contract:
   inset:0 + 100vw/100vh). Responsive must NOT override
   ready / entering / exiting / exit-armed wrapper sizes.

   Safe-area + type tokens below remain active.
------------------------------------------------- */

#kadimTransition,
.kadim-transition-overlay {
    padding:
        calc(var(--kadim-overlay-pad) + var(--kadim-safe-top))
        calc(var(--kadim-overlay-pad) + var(--kadim-safe-right))
        calc(var(--kadim-overlay-pad) + var(--kadim-safe-bottom))
        calc(var(--kadim-overlay-pad) + var(--kadim-safe-left));
}

/* Soft Exit / Observation rails — safe-area aware (chrome only) */
.kadim-gallery-observe-cue,
.kadim-gallery-exit-rail {
    height: calc(var(--kadim-exit-rail-h) + var(--kadim-safe-bottom));
    padding-bottom: calc(10px + var(--kadim-safe-bottom));
    padding-left: calc(16px + var(--kadim-safe-left));
    padding-right: calc(16px + var(--kadim-safe-right));
    font-size: var(--kadim-rail-font);
}

.kadim-gallery-observe-cue small,
.kadim-gallery-exit-rail small {
    font-size: var(--kadim-rail-font-sm);
}

/* Inline card only — never fullscreen / morph states */
body.kadim-gallery-released #kadimGaleriWrapper,
body.kadim-gallery-released .kadim-galeri-wrapper {
    max-width: var(--kadim-gallery-inline-max);
}

.kadim-gallery-slot-spacer {
    max-width: var(--kadim-gallery-inline-max);
}

.kadim-rotate-overlay {
    padding:
        calc(20px + var(--kadim-safe-top))
        calc(20px + var(--kadim-safe-right))
        calc(20px + var(--kadim-safe-bottom))
        calc(20px + var(--kadim-safe-left));
}

/* Hero typography tokens ride Experience Root vars */
#kadim-experience-root .title-back,
#kadim-experience-root .title-main,
#kadim-experience-root .title-front,
.kadim-experience-root .title-back,
.kadim-experience-root .title-main,
.kadim-experience-root .title-front {
    font-size: var(--kadim-title-size);
}

#kadim-experience-root .kadim-desc,
.kadim-experience-root .kadim-desc {
    font-size: var(--kadim-desc-size);
}

#kadim-experience-root .scene-icon svg,
.kadim-experience-root .scene-icon svg {
    width: var(--kadim-icon-size);
    height: var(--kadim-icon-size);
}

#kadim-experience-root .glass-panel,
.kadim-experience-root .glass-panel {
    padding: var(--kadim-card-padding);
}

#kadim-experience-root .scene-card,
.kadim-experience-root .scene-card {
    width: var(--kadim-card-width);
}

/* -------------------------------------------------
   Breakpoints (engine-owned — not Elementor)
   Widths align with KadimConstants.Breakpoints
------------------------------------------------- */

/* Ultrawide ≥ 1920 */
@media (min-width: 1920px) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-gallery-inline-max: 1400px;
        --kadim-card-width: min(88%, 1200px);
        --kadim-title-size: clamp(3rem, 4vw, 6rem);
    }
}

/* Laptop / desktop band 1025–1919 — reference density */
@media (min-width: 1025px) and (max-width: 1919px) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-gallery-inline-max: 1200px;
    }
}

/* Tablet landscape 769–1024 + landscape orientation */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-title-size: clamp(2rem, 4.2vw, 3.6rem);
        --kadim-desc-size: clamp(1rem, 1.8vw, 1.4rem);
        --kadim-icon-size: clamp(56px, 7vw, 84px);
        --kadim-card-padding: clamp(22px, 3.5vw, 48px) clamp(16px, 3vw, 36px);
        --kadim-exit-rail-h: 56px;
        --kadim-observe-rail-h: 56px;
        --kadim-gallery-inline-pad: 32px;
        --kadim-overlay-pad: 1.1rem;
    }
}

/* Tablet portrait 769–1024 */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-title-size: clamp(2.1rem, 5.5vw, 3.8rem);
        --kadim-desc-size: clamp(1rem, 2.2vw, 1.45rem);
        --kadim-icon-size: clamp(60px, 9vw, 90px);
        --kadim-card-padding: clamp(24px, 4.5vw, 56px) clamp(18px, 4vw, 40px);
        --kadim-card-width: min(92%, 900px);
        --kadim-exit-rail-h: 60px;
        --kadim-gallery-inline-max: 100%;
        --kadim-gallery-inline-pad: 24px;
    }

    .kadim-transition-video {
        width: min(720px, 72vw);
        max-width: 100%;
    }
}

/* Large phone / small tablet ≤ 768 */
@media (max-width: 768px) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-title-size: clamp(1.75rem, 7vw, 2.75rem);
        --kadim-desc-size: clamp(0.95rem, 3.4vw, 1.25rem);
        --kadim-icon-size: clamp(52px, 12vw, 76px);
        --kadim-card-padding: clamp(18px, 5vw, 36px) clamp(14px, 4vw, 28px);
        --kadim-card-width: min(94%, 640px);
        --kadim-exit-rail-h: 72px;
        --kadim-observe-rail-h: 72px;
        --kadim-rail-font: 10px;
        --kadim-rail-font-sm: 9px;
        --kadim-gallery-inline-max: 100%;
        --kadim-gallery-inline-pad: 20px;
        --kadim-overlay-pad: 1rem;
    }

    .kadim-transition-video {
        width: min(420px, 78vw);
        max-width: 100%;
    }

    .kadim-transition-text {
        font-size: 11px;
        letter-spacing: 0.12em;
        line-height: 1.6;
        margin-top: 20px;
        padding: 0 12px;
    }

    body.kadim-gallery-released #kadimGaleriWrapper,
    body.kadim-gallery-released .kadim-galeri-wrapper,
    .kadim-gallery-slot-spacer {
        width: 100%;
        max-width: 100%;
        margin: 12px auto;
        border-radius: 0;
    }

    .glass-panel {
        border-radius: 18px;
    }
}

/* Small phone ≤ 390 */
@media (max-width: 390px) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-title-size: clamp(1.55rem, 7.5vw, 2.2rem);
        --kadim-desc-size: clamp(0.9rem, 3.6vw, 1.1rem);
        --kadim-icon-size: clamp(44px, 14vw, 64px);
        --kadim-card-padding: 16px 12px;
        --kadim-exit-rail-h: 76px;
        --kadim-observe-rail-h: 76px;
        --kadim-overlay-pad: 0.85rem;
        --kadim-gallery-inline-pad: 16px;
    }

    .kadim-transition-video {
        width: min(320px, 86vw);
    }

    .kadim-gallery-observe-cue,
    .kadim-gallery-exit-rail {
        letter-spacing: 0.1em;
        gap: 2px;
    }
}

/* Phone landscape — keep cinematic frame, shorten rails */
@media (max-width: 900px) and (orientation: landscape) {
    :root,
    #kadim-experience-root,
    .kadim-experience-root {
        --kadim-exit-rail-h: 48px;
        --kadim-observe-rail-h: 48px;
        --kadim-rail-font: 10px;
        --kadim-title-size: clamp(1.4rem, 4vw, 2.2rem);
        --kadim-desc-size: clamp(0.85rem, 2vw, 1.1rem);
        --kadim-card-padding: 14px 18px;
        --kadim-overlay-pad: 0.75rem;
    }

    .kadim-transition-video {
        width: min(520px, 55vw);
    }

    .kadim-transition-text {
        margin-top: 12px;
        font-size: 10px;
    }
}

/*
  Decision 026e — Hero cinematic framing (token fallbacks).
  JS (KadimResponsive.resolveHeroFrameScale) is the source of truth from
  KadimConstants.HeroPresentation. Attribute rules match Applied set so
  portrait phones breathe even before the first sync tick.
*/
[data-kadim-bp="large-phone"][data-kadim-orient="portrait"],
body[data-kadim-bp="large-phone"][data-kadim-orient="portrait"] {
    --kadim-hero-frame-scale: 0.91;
}

[data-kadim-bp="small-phone"][data-kadim-orient="portrait"],
body[data-kadim-bp="small-phone"][data-kadim-orient="portrait"] {
    --kadim-hero-frame-scale: 0.87;
}

/* Reduced motion: preserve durations contract elsewhere; only kill decorative pulse if present */
@media (prefers-reduced-motion: reduce) {
    .kadim-gallery-observe-cue,
    .kadim-gallery-exit-rail {
        animation: none;
    }
}