/* JOBDHA /jobchat HERO VIDEO FACADE (owner 2026-08-23) — lightweight YouTube facade.
 * All classes namespaced under .jc-hero* so there is ZERO global bleed (siblings: jobchat-* / jc-growth-* / jc-mentor-*).
 * aspect-ratio reserves the box so there is NO layout shift; NO YouTube JS/iframe loads until the user clicks play.
 * Own -hvNN cache token (controllers/chat.php); bump on every hero_video.css/.js edit + re-sync source -> served. */

/* DYNAMIC VIEWPORT-FIT SIZING (owner 2026-08-24 refine — FIX a: DESKTOP TALLER + OVERLAY SPACING):
 * --jc-hero-h is a HEIGHT CAP tied to the visible viewport, NOT a fixed px. A 16:9 box sized to that
 * height keeps a clean 16:9 aspect (no distortion). PRIOR build capped it small — min(38vh,320px) — so
 * the box always sat ABOVE the bottom-pinned composer. Owner now ACCEPTS the box sitting a bit BELOW the
 * composer (scroll to mid-screen), so the cap is RAISED to min(60vh, 460px): at 460px height the 16:9
 * width is 818px, and the box is now TALL ENOUGH that YouTube's top title-bar + bottom timeline-controls
 * overlay sit over the letterbox / rounded margin rather than over the video message content. max-width
 * raised to 820px accordingly (still capped by max-width:100% to the stream column, keeping 16:9). The
 * hero is reordered ABOVE #jobchat-resume-card (chat_index.html) so scrollDown's bottom-anchor keeps it
 * in view. The tiny hero_video.js --jc-hero-h refine no longer clamps to fit-above-composer (owner
 * accepts scrolling); it only guards against a degenerate/zero free-space measurement (presentation-only).
 * On mobile (<=640px) the media query below overrides to full-width / min-height 300px. */
.jc-hero-row{ /* stream row wrapper — inherits .jobchat-row spacing; only reveal/hide is JS-owned */ }

.jc-hero{
    position: relative;
    width: clamp(280px, calc(var(--jc-hero-h, min(60vh, 460px)) * 16 / 9), 820px);
    max-width: 100%;             /* never wider than the stream column */
    margin: 16px auto 0;         /* centered; breathing room top only (owner 2026-08-24) */
    aspect-ratio: 16 / 9;        /* reserve the box before image/iframe -> no layout shift; height derives from width; NO distortion */
    border-radius: 14px;
    overflow: hidden;
    background: #0d0f14;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.28), 0 1px 3px rgba(15, 23, 42, 0.18);
}

/* Facade: the whole box is a single accessible <button> (keyboard + screen-reader native). */
.jc-hero-facade{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    display: block;
    cursor: pointer;
    background: #0d0f14;
    border-radius: 14px;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.jc-hero-thumb{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Centered circular play button overlay. The facade <button> owns the click, so this is pointer-transparent. */
.jc-hero-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 24px;
    padding-left: 4px;           /* optically center the play glyph */
    pointer-events: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
    transition: background 0.15s ease, transform 0.15s ease;
}

.jc-hero-facade:hover .jc-hero-play,
.jc-hero-facade:focus-visible .jc-hero-play{
    background: #e11d48;
    transform: translate(-50%, -50%) scale(1.06);
    padding-left: 0;
}

.jc-hero-facade:focus-visible{
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

/* Injected on click — inherits the rounded corners while playing. Fades in (~300ms) once the
 * iframe fires load, mirroring the landing facade's opacity reveal (jobdha-home.css .jd-video-inner iframe). */
.jc-hero iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.jc-hero iframe.jc-hero-in{ opacity: 1; }

/* PLAYING-STATE — NOT STICKY (owner DECISION 2026-08-24 bug-fix): the video must stay in NORMAL FLOW.
 * A prior build pinned the playing row (position:sticky; top:50px; z-index:3). That sticky created a
 * NEW STACKING CONTEXT at z-index:3, and later .jobchat-row messages (position:static, no z-index →
 * z auto/0) painted BELOW it — so a new chat message typed after playing rendered BEHIND the YouTube
 * iframe (owner-reported production bug). FIX: the sticky + elevated z-index are REMOVED. hero_video.js
 * still adds .jc-hero-playing on click, but it no longer changes positioning — the played iframe now
 * scrolls with the stream and every message after it renders normally, above nothing. Kept as an empty
 * rule (no sticky/position/z-index declarations) so the class name stays a valid, harmless no-op hook.
 * The inner .jc-hero box keeps its clamp width + aspect-ratio 16/9 UNTOUCHED. */
.jc-hero-row.jc-hero-playing{
    /* intentionally no positioning — video stays in normal flow (see note above) */
}

/* PRELOADER (owner 2026-08-23 refine — FIX 2): brand-matched spinner shown between the play-click and
 * the YouTube iframe firing load. Reproduces the theme .jd-how-loader / jdHowSpin ring (46px, 3px ring,
 * faint-blue base border + solid blue leading edge, 1.1s linear infinite) — COPIED here (scoped
 * .jc-hero-loader / jcHeroSpin) so we do NOT import the theme file. Centered over the dark hero box;
 * removed once the iframe loads (or a fallback timeout) by hero_video.js. */
.jc-hero-loader{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border: 3px solid rgba(13, 110, 253, 0.16);
    border-left-color: #0e37f1;   /* brand blue leading edge (matches --jd-blue family) */
    border-radius: 50%;
    animation: jcHeroSpin 1.1s linear infinite;
    z-index: 2;
    pointer-events: none;
}
@keyframes jcHeroSpin{
    to{ transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 640px){
    /* MOBILE: hero stays in NORMAL FLOW while playing — same as desktop now (owner 2026-08-24 bug-fix
     * removed the desktop sticky entirely, so there is nothing to override here anymore). The empty
     * no-op below is retained only for symmetry/documentation; it applies no positioning. */
    .jc-hero-row.jc-hero-playing{
        /* no positioning — normal flow on mobile too (desktop sticky removed) */
    }
    .jc-hero{
        width: 100%;             /* mobile: full-width — override the desktop clamp */
        max-width: 100%;
        min-height: 300px;       /* FIX b: full+clean on phones; a 100%-wide 16:9 box stays >=300px tall */
        border-radius: 12px;
        margin: 12px 0 12px;     /* breathing room top+bottom on mobile too */
    }
    .jc-hero-facade,
    .jc-hero iframe{
        border-radius: 12px;
    }
    .jc-hero-play{
        width: 58px;
        height: 58px;
        font-size: 20px;
    }
}

/* ===================================================================================================
 * WATCH-VIDEO MODAL (2026-08-30 owner boot-redesign) — the in-stream hero is suppressed; the intro
 * video now opens in this centered overlay from the greeting's "Watch Video" link (.jc-video-open).
 * Built in hero_video.js (markup created in JS to avoid Smarty brace issues). All .jc-vid-* namespaced.
 * =================================================================================================== */
body.jc-vid-lock{ overflow: hidden; }   /* scroll-lock the page while the modal is open */

.jc-video-open{
    color: #0e37f1;               /* brand blue link inside the greeting bubble */
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.jc-video-open:hover,
.jc-video-open:focus{ color: #0a29b8; }

.jc-vid-modal{
    position: fixed;
    inset: 0;
    z-index: 100000;              /* above the app shell + rail */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 12, 20, 0.72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: jcVidFade 0.18s ease;
}
@keyframes jcVidFade{ from{ opacity: 0; } to{ opacity: 1; } }

.jc-vid-card{
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #0d0f14;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    overflow: visible;           /* let the close button sit just outside the top-right */
}

.jc-vid-frame{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;        /* reserve a clean 16:9 box; no layout shift */
    border-radius: 16px;
    overflow: hidden;
    background: #0d0f14;
}
.jc-vid-frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
    display: block;
    opacity: 0;                  /* .jc-hero-in (reused) fades it in on load */
    transition: opacity 0.3s ease;
}
.jc-vid-frame iframe.jc-hero-in{ opacity: 1; }

.jc-vid-close{
    position: absolute;
    z-index: 2;
    top: -34px;
    right: -34px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #fff;
    color: #111;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background 0.15s ease;
}
.jc-vid-close:hover,
.jc-vid-close:focus-visible{
    background: #e11d48;
    color: #fff;
    transform: scale(1.06);
}
.jc-vid-close:focus-visible{
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

@media (max-width: 640px){
    /* MOBILE: video is full viewport width (16:9). Modal padding removed so the card spans edge-to-edge. */
    .jc-vid-modal{ padding: 0; }
    .jc-vid-card{
        max-width: 100%;
        border-radius: 0;
    }
    .jc-vid-frame{
        width: 100vw;
        /* The iframe (below) is made 52px TALLER than a 16:9 box and shifted up 26px, so YouTube's own
         * top title-bar + bottom timeline/controls chrome render OVER those 26px bands instead of over the
         * picture. The frame reserves exactly that taller height so nothing clips (owner 2026-08-30). */
        height: calc(56.25vw + 52px);
        aspect-ratio: auto;
        border-radius: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .jc-vid-frame iframe{
        border-radius: 0;
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(56.25vw + 52px);   /* iframe is the full taller frame → video area actually grows */
        inset: auto;                     /* clear the desktop inset:0 so top/left/height above apply */
    }
    .jc-vid-close{
        top: -46px;              /* moved up to clear the added top band */
        right: 3px;
    }
}

/* ===================================================================================================
 * BOOT GREETING — TWO LINES (owner 2026-09-03; supersedes the single-line first-word box of 2026-09-03 AM).
 * LINE 1 (.jc-greet-word) = ONLY the cycling word, BIG + BOLD on its own block line. The 8 words are STACKED in one
 * grid cell (templates: <span.jc-greet-w>, Namaste! is-on) so the block is reserved to the WIDEST word in the live
 * font — the box never changes size while hero_video.js cycles .is-on (opacity-only cross-fade, text-align:left).
 * LINE 2 (.jc-greet-rest) = the sentence. A server-rendered hidden GHOST copy of the FINAL rich sentence sits in the
 * same grid cell as #jobchat-greeting (the node jobchat.js typewrites, then swaps to data-rich), so the cell already
 * has the final height/width while typing → the typing→rich swap moves NOTHING below/around the greeting.
 * Reduced motion → NO fade (instant swap); the cycle itself is content, not motion, and keeps running (JS: REDUCE_HOLD).
 * =================================================================================================== */
.jc-greet-word{
    display: grid;
    grid-template-columns: max-content;
    text-align: left;
    white-space: nowrap;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 4px;
}
.jc-greet-word > .jc-greet-w{
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.32s ease;
}
.jc-greet-word > .jc-greet-w.is-on{ opacity: 1; }
.jc-greet-rest{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.jc-greet-rest > .jc-greet-ghost,
.jc-greet-rest > #jobchat-greeting{ grid-area: 1 / 1; min-width: 0; }
.jc-greet-ghost{ visibility: hidden; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce){
    .jc-greet-word > .jc-greet-w{ transition: none; }
}