/* Slider using flex + translateX (final) */

/* Variables */
/*:root {
    --brand: #c8102e;
    --accent: #2563eb;
    --muted: #6b7280;
    --bg: #f6f9fb;
    --radius: 12px;
    --shadow: 0 18px 40px rgba(2,6,23,0.08);
    --slide-h-desktop: 65vh;
    --slide-h-tablet: 48vh;
    --slide-h-mobile: 36vh;
    --anim: 600ms;
}*/

/* Reset */
/** {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Inter,Segoe UI,Roboto,Arial;
    background: var(--bg);
    color: #0f172a
}

.home-hero-wrap {
    max-width: 1200px;
    margin: 18px auto;
    padding: 0 12px
}*/

/* viewport */
/*.slider-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #000
}

.slides {
    display: flex;
    width: 100%;
    transform: translateX(0);
    will-change: transform;
    transition: transform var(--anim) cubic-bezier(.2,.9,.3,1)
}

.slide {
    flex: 0 0 auto;
    display: block
}*/
/* << changed: flex-basis controlled by JS */

/*.slide-img {
    width: 100%;
    height: var(--slide-h-desktop);
    object-fit: cover;
    object-position: center;
    display: block
}*/

/* responsive heights */
/*@media (max-width:991px) {
    .slide-img {
        height: var(--slide-h-tablet)
    }
}

@media (max-width:767px) {
    .slide-img {
        height: var(--slide-h-mobile)
    }
}*/

/* controls */
/*.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.36);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.slider-prev {
    left: 12px
}

.slider-next {
    right: 12px
}

    .slider-prev:hover, .slider-next:hover {
        background: rgba(0,0,0,0.6)
    }*/

/* indicators */
/*.slider-indicators {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    display: flex;
    gap: 8px;
    z-index: 40
}

    .slider-indicators .indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.6);
        border: none;
        cursor: pointer
    }

        .slider-indicators .indicator.active {
            background: #fff;
            box-shadow: 0 6px 18px rgba(2,6,23,0.12);
            transform: scale(1.05)
        }*/

/* focus */
/*.slider-viewport:focus {
    outline: none;
    box-shadow: 0 12px 36px rgba(37,99,235,0.08)
}*/

/* print */
/*@media print {
    .slider-prev, .slider-next, .slider-indicators {
        display: none
    }

    .slides {
        transform: none
    }
}*/


/* Home.css — Modified responsive hero slider (centered, scalable heights) */

/* Theme & responsive height variables (Option A: centered hero) */
:root {
    --brand: #c8102e;
    --accent: #2563eb;
    --muted: #6b7280;
    --bg: #f6f9fb;
    --radius: 12px;
    --shadow: 0 18px 40px rgba(2,6,23,0.08);
    /* height will scale with viewport, clamped between min and max */
    --slide-h-desktop: clamp(360px, 48vh, 900px);
    --slide-h-tablet: clamp(320px, 42vh, 640px);
    --slide-h-mobile: clamp(220px, 36vh, 420px);
    --anim: 600ms;
}

/* Basic reset */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: #0f172a;
}

/* Centered page wrapper */
.home-hero-wrap {
    max-width: 1200px;
    margin: 22px auto;
    padding: 0 12px;
    box-sizing: border-box;
}

/* Slider viewport */
.slider-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: #000;
}

/* Slides row (flex) */
.slides {
    display: flex;
    width: 100%;
    transform: translateX(0);
    will-change: transform;
    transition: transform var(--anim) cubic-bezier(.2,.9,.3,1);
}

/* Each slide: width is controlled by JS; keep flex auto for robustness */
.slide {
    flex: 0 0 auto;
    display: block;
}

/* Image sizing using the responsive variables */
.slide-img {
    width: 100%;
    height: var(--slide-h-desktop);
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Responsive height adjustments */
@media (max-width: 991px) {
    .slide-img {
        height: var(--slide-h-tablet);
    }
}

@media (max-width: 767px) {
    .slide-img {
        height: var(--slide-h-mobile);
    }
}

/* Controls (prev/next) */
.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.36);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}

.slider-prev {
    left: 14px;
}

.slider-next {
    right: 14px;
}

    .slider-prev:hover,
    .slider-next:hover {
        background: rgba(0,0,0,0.62);
        transform: translateY(-50%) scale(1.04);
    }

/* Indicators */
.slider-indicators {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    display: flex;
    gap: 10px;
    z-index: 40;
}

    .slider-indicators .indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.62);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: transform .12s ease, background .12s ease;
    }

        .slider-indicators .indicator:hover {
            background: rgba(255,255,255,0.9);
            transform: scale(1.08);
        }

        .slider-indicators .indicator.active {
            width: 12px;
            height: 12px;
            background: #fff;
            box-shadow: 0 6px 18px rgba(2,6,23,0.12);
        }

/* Ensure the slides row transition is smooth for resizes */
.slides {
    transition: transform var(--anim) cubic-bezier(.2,.9,.3,1);
}

/* Focus styles for accessibility */
.slider-viewport:focus {
    outline: none;
    box-shadow: 0 12px 36px rgba(37,99,235,0.08);
}

/* Small utilities */
.hero-static img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

/* Print fallback */
@media print {
    .slider-prev, .slider-next, .slider-indicators {
        display: none;
    }

    .slides {
        transform: none !important;
    }
}