/*
==========================================================
NIHH HOMEPAGE SLIDER — MOBILE RESPONSIVE FIX
==========================================================
Desktop:
  Keeps the original full-height hero design.

Tablet / Mobile:
  Uses the banner's natural aspect ratio.
  Images are NOT stretched and are NOT cropped.
  The slider height follows the actual image ratio.
==========================================================
*/

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .hero {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: #111;
    }

    .heroSwiper,
    .heroSwiper .swiper-wrapper,
    .heroSwiper .swiper-slide {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-slide {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .hero-image {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        margin: 0 !important;
    }

    .hero .swiper-pagination {
        left: 0 !important;
        right: 0 !important;
        bottom: 10px !important;
        z-index: 20 !important;
    }

    .hero .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        opacity: .8;
    }

    .hero .swiper-pagination-bullet-active {
        width: 22px;
        border-radius: 10px;
    }
}

/* ---------- Small Mobile ---------- */
@media (max-width: 575px) {
    .hero {
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-slide,
    .heroSwiper,
    .heroSwiper .swiper-wrapper {
        height: auto !important;
        min-height: 0 !important;
    }

    .hero-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }

    .hero .swiper-pagination {
        bottom: 7px !important;
    }

    .hero .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
    }

    .hero .swiper-pagination-bullet-active {
        width: 18px;
    }
}