/* ───────────────────────────────────────────────────────────────────────────
   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.
   ─────────────────────────────────────────────────────────────────────────── */

/* Selector is `.theme-site .hjc-banner` (specificity 0-2-0) so it OVERRIDES the global
   `.theme-site section { padding:3.5rem 1.5rem }` rule (0-1-1) that would otherwise add
   white space on all four sides of the banner. The global rule is left untouched, so
   every other section keeps its spacing. */
.theme-site .hjc-banner{
    position:relative;
    width:100%;
    margin:0;
    padding:0;                       /* kills the inherited 3.5rem 1.5rem section padding */
    overflow:hidden;
    border-radius:24px;
    background:var(--gray-100, #f1f3f5);
    /* The container tracks the uploaded banner's ratio (all live artwork is ~2.74:1,
       2076×758 / 2073×758 / 2560×934), so the image fills the full available width
       edge-to-edge with no letterbox and no side/top/bottom gaps at every size. */
    aspect-ratio:2076 / 758;
    line-height:0;
}
@media (max-width:767.98px){
    .hjc-banner{ border-radius:16px; }   /* mobile art is also ~2.74:1 (2073×758) */
}

.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%;
    /* cover fills the container completely — no empty space on any side. The container
       ratio matches the artwork (~2.74:1), so this fills edge-to-edge with negligible
       crop; object-position keeps the composition centred. */
    object-fit:cover;
    object-position:center 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). */
/* The banner is now a self-contained rounded card, so the old full-bleed navy
   fade-into-the-next-section is gone (it was painting a dark strip over the light
   .hero-carousel that follows it on the homepage). The legacy `+ .hero` overlap
   rule stays only for any page that still places a dark `.hero` immediately after
   the banner; on the themed homepage the next sibling is `.hero-carousel`, so it
   simply doesn't match. */
.hjc-app .hjc-banner + .hero{
    padding-top:56px;                /* keeps the old oversized-padding fix; no overlap */
}