/* ───────────────────────────────────────────────────────────────────────────
   hero-banner.css — homepage "Anywhere Slider" carousel, mounted below the header.
   Uses the existing theme tokens (--orange, --navy, --gray-*). Desktop/mobile art
   is switched via <picture>; this file only handles layout, transitions & controls.
   ─────────────────────────────────────────────────────────────────────────── */

.hjc-banner{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--gray-100, #f1f3f5);
    /* Reserve height to match the 1920×600 (3.2:1) desktop art so there's no layout
       shift while images load. Mobile uses the 768×900 (~0.853:1) ratio. */
    aspect-ratio:1920 / 600;
    line-height:0;
}
@media (max-width:767.98px){
    .hjc-banner{ aspect-ratio:768 / 900; }
}

.hjc-banner__track{
    position:relative;
    width:100%;
    height:100%;
}

.hjc-banner__slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .55s ease;
    z-index:1;
}
.hjc-banner__slide.is-active{
    opacity:1;
    visibility:visible;
    z-index:2;
}

.hjc-banner__link{ display:block; width:100%; height:100%; }

.hjc-banner__img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* ── Optional text/button overlay ── */
.hjc-banner__overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    padding:clamp(20px, 6vw, 90px);
    /* Left-anchored scrim so overlay text stays legible on busy artwork without
       darkening the whole image. */
    background:linear-gradient(90deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.25) 45%, rgba(15,23,42,0) 75%);
    line-height:1.4;
    pointer-events:none;          /* clicks fall through to the slide link */
}
.hjc-banner__content{ max-width:min(560px, 70%); color:#fff; }
.hjc-banner__title{
    margin:0 0 .4em;
    font-size:clamp(22px, 3.4vw, 46px);
    font-weight:800;
    line-height:1.12;
    text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.hjc-banner__desc{
    margin:0 0 1em;
    font-size:clamp(14px, 1.4vw, 19px);
    font-weight:500;
    opacity:.95;
    text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.hjc-banner__btn{
    display:inline-block;
    background:var(--orange, #f97316);
    color:#fff;
    font-weight:700;
    font-size:clamp(13px, 1.2vw, 16px);
    padding:.7em 1.6em;
    border-radius:999px;
    pointer-events:none;          /* the parent <a> handles the navigation */
    box-shadow:0 6px 20px rgba(249,115,22,.4);
    transition:transform .2s ease, box-shadow .2s ease;
}
.hjc-banner__link:hover .hjc-banner__btn{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(249,115,22,.5);
}

/* ── Arrows ── */
.hjc-banner__arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border:none; border-radius:50%;
    background:rgba(255,255,255,.85);
    color:var(--navy, #1e293b);
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    transition:background .2s ease, transform .2s ease;
}
.hjc-banner__arrow svg{ width:22px; height:22px; }
.hjc-banner__arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.hjc-banner__arrow--prev{ left:16px; }
.hjc-banner__arrow--next{ right:16px; }
@media (max-width:767.98px){
    .hjc-banner__arrow{ width:36px; height:36px; }
    .hjc-banner__arrow svg{ width:18px; height:18px; }
    .hjc-banner__arrow--prev{ left:8px; }
    .hjc-banner__arrow--next{ right:8px; }
}

/* ── Pagination dots ── */
.hjc-banner__dots{
    position:absolute;
    left:0; right:0; bottom:14px;
    z-index:5;
    display:flex; gap:9px; justify-content:center;
}
.hjc-banner__dot{
    width:10px; height:10px;
    padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.55);
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:background .25s ease, width .25s ease, border-radius .25s ease;
}
.hjc-banner__dot.is-active{
    background:var(--orange, #f97316);
    width:26px;
    border-radius:999px;
}

/* Keyboard focus visibility (quality floor). */
.hjc-banner__arrow:focus-visible,
.hjc-banner__dot:focus-visible{
    outline:3px solid var(--orange, #f97316);
    outline-offset:2px;
}

/* Respect reduced-motion: no cross-fade, instant swap. */
@media (prefers-reduced-motion: reduce){
    .hjc-banner__slide{ transition:none; }
}

/* ── Banner → next-section transition ──────────────────────────────────────────
   Blends the homepage banner into the navy hero directly below it. Two parts:
   (1) a soft transparent→navy gradient over the banner's bottom edge, and
   (2) the next section (.hero) pulled up slightly so it overlaps that gradient.
   The oversized hero top padding — the ACTUAL cause of the big dark void after the
   banner — is reduced here as well (not merely masked). Everything is scoped to the
   homepage banner and the section immediately following it, so no other page,
   the header, footer, CMS/blog/product/category pages are affected.

   Layer order: banner image (z1/2) < gradient (z3) < next section (z4)
                < dots & arrows (z5, always visible + clickable + centered). */
.hjc-banner::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:120px;
    z-index:3;                       /* above the image, below the dots/arrows */
    pointer-events:none;             /* never blocks dot/arrow clicks */
    background:linear-gradient(to bottom,
        rgba(12,35,68,0)   0%,
        rgba(12,35,68,.55) 52%,
        #0c2344            100%);    /* ends in the hero's dark-navy tone */
}

.hjc-app .hjc-banner + .hero{
    margin-top:-44px;                /* desktop: ~44px overlap into the transition */
    padding-top:60px;                /* was clamp(64px,9vw,118px) — removes the large dark strip */
    position:relative;
    z-index:4;                       /* overlaps the gradient; dots/arrows (z5) stay on top */
}

@media (max-width:1024px){
    .hjc-banner::after{ height:82px; }
    .hjc-app .hjc-banner + .hero{ margin-top:-30px; padding-top:48px; }   /* tablet: ~30px overlap */
}
@media (max-width:767.98px){
    .hjc-banner::after{ height:52px; }
    .hjc-app .hjc-banner + .hero{ margin-top:-16px; padding-top:40px; }   /* mobile: ~16px overlap */
}