/* Phase 3: full original image (contain), controlled height, one visible slide. */

.hero-slider {
    isolation: isolate;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 78px !important;
    height: 46vh !important;
    min-height: 200px !important;
    max-height: 360px !important;
    overflow: hidden !important;
    background: #f4f7fb;
}

@media (min-width: 768px) {
    .hero-slider {
        height: 50vh !important;
        min-height: 280px !important;
        max-height: 560px !important;
    }
}

html.dark .hero-slider {
    background: #0b1220;
}

.hero-slider__swiper,
.hero-slider .swiper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.hero-slider .swiper-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
}

.hero-slider .swiper-slide,
.hero-slider .hero-slide {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #f4f7fb;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transform: none !important;
}

html.dark .hero-slider .swiper-slide,
html.dark .hero-slider .hero-slide {
    background: #0b1220;
}

.hero-slider .swiper-slide.swiper-slide-active,
.hero-slider .swiper-slide-active.hero-slide {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

.hero-slide__media,
.hero-slide__picture,
.hero-slide__fallback {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    line-height: 0 !important;
    background: transparent;
}

.hero-slide__picture {
    z-index: 1;
    display: block !important;
}

.hero-slide__bleed {
    display: none !important;
}

.hero-slider .hero-slide__image,
.hero-slider .hero-slide__video,
.hero-slider .hero-slide--wide .hero-slide__image,
.hero-slider .hero-slide--wide .hero-slide__video,
.hero-slider .hero-slide--small .hero-slide__image,
.hero-slider .hero-slide--small .hero-slide__video,
.hero-slider .hero-slide--tall .hero-slide__image,
.hero-slider .hero-slide--tall .hero-slide__video,
.hero-slider .hero-slide--match .hero-slide__image,
.hero-slider .hero-slide--match .hero-slide__video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.hero-slide__overlay,
.hero-slide__foreground {
    display: none !important;
}

.hero-slide__fallback {
    background: transparent;
}

.hero-slide__caption {
    display: none !important;
}

.hero-slider .swiper-slide-active .hero-slide__caption {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 3;
    align-items: flex-end;
    overflow: hidden;
    max-height: 42%;
    padding: 1.1rem 1.15rem 3.15rem;
    color: #0b1220;
    background: linear-gradient(
        180deg,
        rgba(244, 247, 251, 0) 0%,
        rgba(244, 247, 251, 0.92) 72%,
        #f4f7fb 100%
    );
    pointer-events: none;
}

html.dark .hero-slider .swiper-slide-active .hero-slide__caption {
    color: #fff;
    background: linear-gradient(
        180deg,
        rgba(11, 18, 32, 0) 0%,
        rgba(11, 18, 32, 0.92) 72%,
        #0b1220 100%
    );
}

.hero-slide__caption a,
.hero-slide__caption button {
    pointer-events: auto;
}

.hero-slide__caption-inner {
    position: relative;
    width: 100%;
}

.hero-slide__content {
    isolation: isolate;
    position: relative;
    z-index: 1;
    max-width: 42rem;
}

.hero-slide__content h1,
.hero-slide__content p,
.hero-slide__content .hero-slide__badge {
    color: #0b1220 !important;
    text-shadow: none !important;
}

html.dark .hero-slide__content h1,
html.dark .hero-slide__content p,
html.dark .hero-slide__content .hero-slide__badge {
    color: #fff !important;
}

.hero-slide__content h1 {
    font-size: clamp(1.05rem, 2.4vw, 1.7rem) !important;
    line-height: 1.12 !important;
    margin-top: 0.15rem !important;
}

.hero-slide__content p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-slide__content p.mt-4,
.hero-slide__badge {
    display: none !important;
}

.hero-slide__content .mt-6 {
    margin-top: 0.5rem !important;
}

.hero-slide__content .btn-primary,
.hero-slide__content .btn-secondary {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.76rem !important;
}

.hero-slide__content::before {
    display: none !important;
}

.hero-slider__controls {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    z-index: 5;
    pointer-events: auto;
    padding: 0 0.85rem 0.2rem;
    background: transparent !important;
}

.hero-slider__controls .container-premium {
    max-width: 100%;
}

.hero-pagination {
    max-width: min(70%, 28rem);
    overflow: hidden;
}

.hero-nav-btn {
    position: static !important;
    margin: 0 !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    background: #fff !important;
    color: #0b1220 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

html.dark .hero-nav-btn {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(10, 20, 40, 0.7) !important;
    color: #fff !important;
}

.hero-pagination .swiper-pagination-bullet {
    background: rgba(15, 23, 42, 0.28);
    opacity: 1;
    width: 0.55rem;
    height: 0.55rem;
}

.hero-pagination .swiper-pagination-bullet-active {
    background: #0a84ff;
    width: 1.5rem;
    border-radius: 9999px;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}