/* =============================================================
   HERO — global component (cloned by every page via ACF).
   Base style: orange brand background + centered white heading,
   matching /services-and-device-settings/. Per-page CSS overrides
   handle complex banners (home slider, careers right-aligned text,
   product page hero images, etc.).

   Height priority:
     - Slide with image → image's natural aspect drives height.
     - Slide without image → falls back to color + min-height.

   With 2+ slides, .hero--slider gets the Slick.js init via
   assets/js/hero-slider.js. Slick wraps each .hero__slide in a
   .slick-slide and handles RTL direction + mobile swipe + arrows.
   ============================================================= */

.hero {
    position: relative;
    background: var(--color-primary);
    overflow: hidden;
    color: var(--color-white);
}

.hero__slides {
    position: relative;
    display: flex;
    width: 100%;
}

/* Pre-init FOUC guard: before Slick wraps the track, hide all but the
   first slide so the page paints a single-slide hero instead of a
   horizontal strip of all slides. */
.hero--slider .hero__slides:not(.slick-initialized) .hero__slide:nth-child(n + 2) {
    display: none;
}

.hero__slide {
    max-width: 100%;
    width: 100%;
    width: 100%;
    min-width: 0;
    position: relative;
    display: block;
}

/* Image-mode: <picture> sits in normal flow so its intrinsic ratio
   drives slide height. With width:100% the img scales fluidly. */
.hero__bg {
    display: block;
    width: 100%;
    line-height: 0;
}

.hero__bg img {
    display: block;
    width: 100%;
    height: auto;
}

/* Color-only / overlay mode: slide gets a min-height so it's visible
   without an image. Image, when present, overrides via natural height. */
.hero__slide:not(:has(.hero__bg)) {
    min-height: 280px;
}

/* Text overlay — absolute on top of the image; centered. */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.hero__heading {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-white);
    max-width: 1120px;
}

.hero__subtitle {
    margin: 12px 0 0;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-white);
}

/* Full-slide click target when slide has a click-through link */
.hero__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Slick arrows — markup is injected by Slick (prevArrow/nextArrow options).
   We carry both .slick-prev/.slick-next AND .hero__arrow--prev/--next so
   Slick's internals work AND our visual styling holds.

   Rules below use the .hero ancestor for higher specificity so they beat
   slick.min.css (which loads later in the cascade). We also kill Slick's
   default :before glyphs (the link font's ←/→ chars) since our SVGs
   replace them. */

.hero .hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-white);
    opacity: 0.8;
    cursor: pointer;
    z-index: 3;
    font-size: 0;
    transition: opacity 0.2s;
}

.hero .hero__arrow:hover,
.hero .hero__arrow:focus {
    opacity: 1;
    color: var(--color-white);
    background: transparent;
    outline: none;
}

.hero .hero__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Suppress Slick's built-in arrow glyphs — our SVGs replace them. */
.hero .hero__arrow::before,
.hero .hero__arrow::after {
    content: none;
}

/* Positioning — explicit physical sides for both LTR and RTL. The .hero
   ancestor specificity beats Slick's default `.slick-prev {
       left: -25px;
   }

   `
   rules that otherwise push the buttons off-canvas. */
.hero .hero__arrow--prev {
    left: 15px;
    right: auto;
}

.hero .hero__arrow--next {
    left: auto;
    right: 15px;
}

[dir="rtl"] .hero .hero__arrow--prev {
    left: auto;
    right: 15px;
}

[dir="rtl"] .hero .hero__arrow--next {
    left: 15px;
    right: auto;
}

/* In RTL, mirror the chevron SVGs so the prev arrow (now on visual right)
   points right and the next arrow (now on visual left) points left. */
[dir="rtl"] .hero .hero__arrow svg {
    transform: scaleX(-1);
}

@media (max-width: 1024px) {

    .hero .hero__bg {
        max-height: 110vw;
    }

    .hero__arrow {
        width: 16px;
        height: 16px;
    }

    .hero__heading {
        font-size: 28px;
    }

    .hero__subtitle {
        font-size: 16px;
    }

    .hero__slide:not(:has(.hero__bg)) {
        min-height: 200px;
    }
}