/* =========================================================
   Full-width home slider for 1920x700 banners.
   The whole image is always visible: no cropping at any width.
   Scoped to #hero_slider, so other .slider elements are untouched.
   ========================================================= */

#hero_slider .hero_slider {
    position: relative;
    width: 100%;
    background: #2a1306;   /* shows only for a split second while images load */
}

/* Each slide keeps the banner's exact shape: 1920 / 700 = 2.743 */
#hero_slider .slider {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 700;
    max-height: 700px;          /* wider than 1920px: stop growing taller */
    overflow: hidden;
    background: none;           /* cancel the old background-size: cover rule */
}

/* Only visible on screens wider than 1920px: a blurred copy of the banner
   fills the sides instead of plain bars. */
#hero_slider .slider::before {
    content: '';
    position: absolute;
    inset: -20px;
    background-image: var(--slide-bg);
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.75);
}

/* The real banner: contain = never cropped, never stretched */
#hero_slider .slider picture {
    display: block;
    width: 100%;
    height: 100%;
}

#hero_slider .slider img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

/* Fallback for very old browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    #hero_slider .slider { height: 0; padding-top: 36.4583%; }   /* 700 / 1920 */
    #hero_slider .slider img { position: absolute; top: 0; left: 0; }
}

/* Arrows and dots sit on top of the image, so they never add height */
#hero_slider .slick-dotted.slick-slider { margin-bottom: 0; }

#hero_slider .slick-prev { left: 15px; }
#hero_slider .slick-next { right: 15px; }
#hero_slider .slick-prev:before,
#hero_slider .slick-next:before {
    opacity: .85;
    text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
}

#hero_slider .slick-dots { bottom: 10px; }
#hero_slider .slick-dots li button:before { color: #fff; opacity: .6; font-size: 9px; }
#hero_slider .slick-dots li.slick-active button:before { color: #e69a05; opacity: 1; }

/* Phones: slides WITH a mobile image switch to a taller 4:3 box.
   Slides without one keep the 1920x700 shape and show the main banner.
   Every slide still uses object-fit: contain, so nothing is ever cropped,
   even if a mobile image is uploaded at a different shape. */
@media (max-width: 600px) {
    #hero_slider .slider.has_mobile {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    #hero_slider .slider::before {
        background-image: var(--slide-bg-mobile, var(--slide-bg));
    }
}

@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 600px) {
        #hero_slider .slider.has_mobile { padding-top: 75%; }   /* 3 / 4 */
    }
}

/* Phones: keep the controls small */
@media (max-width: 600px) {
    #hero_slider .slick-prev:before,
    #hero_slider .slick-next:before { font-size: 20px; }
    #hero_slider .slick-prev { left: 5px; }
    #hero_slider .slick-next { right: 5px; }
    #hero_slider .slick-dots { bottom: 2px; }
    #hero_slider .slick-dots li { margin: 0 2px; }
}

/* OPTIONAL: the round logo hangs about 100px below the orange menu bar and
   sits over the top-left of the banner. If your banners have important
   content in that corner, uncomment this to push the slider down instead.
#hero_slider { padding-top: 100px !important; }
@media (max-width: 1275px) { #hero_slider { padding-top: 60px !important; } }
@media (max-width: 600px)  { #hero_slider { padding-top: 40px !important; } }
*/