/* CÜNAM v238 — stable fullscreen mobile hero and device-specific imagery. */
.hero-slide-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .hero-slider,
    .hero-slider-track,
    .hero-slide,
    .hero-slide.is-active,
    .hero-slide-inner,
    .hero-slide-fallback {
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: none !important;
    }

    @supports (height: 100svh) {
        .hero-slider,
        .hero-slider-track,
        .hero-slide,
        .hero-slide.is-active,
        .hero-slide-inner,
        .hero-slide-fallback {
            height: 100svh !important;
            min-height: 100svh !important;
        }
    }

    .hero-slider,
    .hero-slider-track,
    .hero-slide {
        overflow: hidden !important;
        touch-action: pan-y !important;
    }

    .hero-slide-media,
    .hero-slide-media picture,
    .hero-slide-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    .hero-slide-image {
        object-fit: cover !important;
    }

    /* Quick Access remains desktop-only; keep the mobile hero visually clean. */
    .hero-slider .hero-service-panel,
    .hero-slider .hero-bottom-panel,
    .hero-slider .hero-service-links {
        display: none !important;
    }

    /* Auto-play stays active while arrows and dots provide manual control. */
    .hero-slider-controls {
        position: absolute !important;
        z-index: 90 !important;
        right: 18px !important;
        bottom: max(18px, env(safe-area-inset-bottom)) !important;
        left: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: auto !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .hero-slider-controls .hero-slider-arrow {
        position: static !important;
        display: grid !important;
        place-items: center !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        border-radius: 999px !important;
        background: rgba(5,20,31,.56) !important;
        color: #fff !important;
        transform: none !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        pointer-events: auto !important;
    }

    .hero-slider-controls .hero-slider-arrow svg {
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .hero-slider-controls .hero-slider-dots {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        gap: 7px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 999px !important;
        background: rgba(5,20,31,.48) !important;
        transform: none !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        pointer-events: auto !important;
    }

    .hero-slider-controls .hero-slider-dots button,
    .hero-slider-controls .hero-slider-dots button.is-active {
        width: 22px !important;
        height: 5px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.48) !important;
    }

    .hero-slider-controls .hero-slider-dots button.is-active {
        width: 34px !important;
        background: #4da599 !important;
    }
}

/* Keep the content usable on short landscape-style phone viewports. */
@media (max-width: 768px) and (max-height: 620px) {
    .hero-slide-inner {
        padding-top: 84px !important;
        padding-bottom: 60px !important;
    }

    .hero-slide-content h1 {
        margin-bottom: 10px !important;
        font-size: clamp(27px, 8vw, 35px) !important;
    }

    .hero-slide-content p {
        margin-bottom: 14px !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }

    .hero-slider-controls {
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}