/* ==========================================
   BLENTREE HERO CAROUSEL — FLUID RESPONSIVE
   Uses clamp() for smooth scaling at ALL sizes
   ========================================== */

/* ===========================================
   ROOT VARIABLES + CONSTANTS
   =========================================== */
.bln-hero-carousel {
    --bln-primary: #E63946;
    --bln-primary-dark: #C42E3A;
    --bln-text-dark: #1A1A1A;
    --bln-text-body: #666666;
    --bln-white: #FFFFFF;

    /* FLUID values — scale automatically with viewport */
    --bln-title-size: clamp(18px, 3vw, 48px);          /* Tighter for small screens */
    --bln-subtitle-size: clamp(12px, 1vw, 16px);
    --bln-button-size: clamp(10px, 0.9vw, 14px);
    --bln-button-padding-y: clamp(8px, 1vw, 14px);
    --bln-button-padding-x: clamp(14px, 1.8vw, 28px);

    --bln-pad-x: clamp(16px, 4vw, 70px);                /* Smaller padding on mobile */
    --bln-pad-y: clamp(20px, 4vw, 60px);
    --bln-pagination-w: clamp(36px, 3vw, 50px);
    --bln-pagination-pad: clamp(45px, 5vw, 100px);
    --bln-text-max: clamp(180px, 35vw, 520px);          /* Smaller min for small screens */

    --bln-dot-size: clamp(28px, 2.5vw, 38px);
    --bln-dot-font: clamp(10px, 0.85vw, 13px);

    position: relative;
    width: 100%;
    background: var(--bln-white);
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

.bln-hero-carousel * { box-sizing: border-box; }

/* ===========================================
   FALLBACK — Hide non-first slides BEFORE Swiper inits
   Uses high-specificity selectors (no inline style needed)
   =========================================== */
.bln-hero-carousel:not(.bln-swiper-ready) .swiper-wrapper {
    display: block !important;
    transform: none !important;
    width: 100% !important;
}

/* Hide ALL slides except the first one (only when NOT ready) */
.bln-hero-carousel:not(.bln-swiper-ready) > .bln-hero-swiper > .swiper-wrapper > .swiper-slide[data-slide-index]:not([data-slide-index="0"]) {
    display: none !important;
}

/* Show first slide (only when NOT ready) */
.bln-hero-carousel:not(.bln-swiper-ready) > .bln-hero-swiper > .swiper-wrapper > .swiper-slide[data-slide-index="0"] {
    display: block !important;
    width: 100% !important;
}

/* Swiper-cloned slides (for loop mode) — hide before ready */
.bln-hero-carousel:not(.bln-swiper-ready) .swiper-slide.swiper-slide-duplicate {
    display: none !important;
}

/* ===========================================
   ELEMENTOR EDITOR — Clean preview
   =========================================== */
body.elementor-editor-active .bln-hero-carousel,
.elementor-preview-mode .bln-hero-carousel {
    overflow: hidden !important;
}

body.elementor-editor-active .bln-hero-carousel .swiper-wrapper,
.elementor-preview-mode .bln-hero-carousel .swiper-wrapper {
    transform: none !important;
    display: block !important;
}

body.elementor-editor-active .bln-hero-carousel .swiper-slide,
.elementor-preview-mode .bln-hero-carousel .swiper-slide {
    width: 100% !important;
}

/* ===========================================
   SWIPER CONTAINER
   =========================================== */
.bln-hero-carousel .bln-hero-swiper {
    position: relative;
    width: 100%;
    height: auto;          /* ← Was 100% which forced height */
    min-height: 0;
    overflow: hidden;
}

.bln-hero-carousel .swiper-wrapper {
    display: flex;
    width: 100%;
}

.bln-hero-carousel .swiper-slide {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

/* ===========================================
   LAYOUT 1: OVERLAY (DEFAULT — Figma)
   Container height = Image natural height
   FORCE override widget min-height setting
   =========================================== */
.elementor-widget-blentree-hero-carousel .bln-hero-carousel.bln-layout-overlay,
body .bln-hero-carousel.bln-layout-overlay {
    min-height: 0 !important;
    height: auto !important;
}

.elementor-widget-blentree-hero-carousel .bln-hero-carousel.bln-layout-overlay .bln-hero-swiper,
.bln-hero-carousel.bln-layout-overlay .bln-hero-swiper {
    min-height: 0 !important;
    height: auto !important;
}

.elementor-widget-blentree-hero-carousel .bln-hero-carousel.bln-layout-overlay .swiper-slide,
.bln-hero-carousel.bln-layout-overlay .swiper-slide {
    padding: 0 !important;
    background: var(--bln-white);
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Also override Elementor widget container */
.elementor-widget-blentree-hero-carousel,
.elementor-widget-blentree-hero-carousel .elementor-widget-container {
    line-height: 0;
}

.bln-hero-carousel.bln-layout-overlay .bln-slide-fullwidth-img {
    display: block;
    width: 100%;
    height: auto;          /* ← Natural height of image (no min/max) */
    object-fit: cover;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.bln-hero-carousel.bln-layout-overlay .bln-slide-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: var(--bln-pad-y) var(--bln-pad-x);
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.bln-hero-carousel.bln-layout-overlay .bln-slide-text-overlay .bln-slide-text {
    max-width: var(--bln-text-max);
    width: 100%;
    pointer-events: auto;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bln-hero-carousel.bln-layout-overlay .bln-slide-text-overlay .bln-slide-button {
    pointer-events: auto;
}

/* Image LEFT / Text RIGHT */
.bln-hero-carousel.bln-layout-overlay.bln-image-left .bln-slide-text-overlay {
    justify-content: flex-end;
}

/* Pagination LEFT — add padding inside overlay */
.bln-hero-carousel.bln-layout-overlay.bln-pagination-left .bln-slide-text-overlay {
    padding-left: var(--bln-pagination-pad);
}

.bln-hero-carousel.bln-layout-overlay.bln-pagination-right .bln-slide-text-overlay {
    padding-right: var(--bln-pagination-pad);
}

/* ===========================================
   LAYOUT 2: SIDE-BY-SIDE
   =========================================== */
.bln-hero-carousel.bln-layout-side-by-side {
    min-height: clamp(380px, 50vw, 700px);
}

.bln-hero-carousel.bln-layout-side-by-side .swiper-slide {
    padding: var(--bln-pad-y) var(--bln-pad-x);
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: clamp(380px, 50vw, 700px);
}

.bln-hero-carousel.bln-layout-side-by-side .bln-slide-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: clamp(20px, 3vw, 50px);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.bln-hero-carousel.bln-layout-side-by-side.bln-image-left .bln-slide-grid {
    grid-template-columns: 55% 45%;
}

.bln-hero-carousel.bln-layout-side-by-side.bln-image-left .bln-slide-image { order: -1; }

.bln-hero-carousel.bln-layout-side-by-side .bln-slide-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bln-hero-carousel.bln-layout-side-by-side .bln-slide-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 8px;
}

.bln-hero-carousel.bln-layout-side-by-side.bln-pagination-left .bln-hero-swiper { padding-left: var(--bln-pagination-pad); }
.bln-hero-carousel.bln-layout-side-by-side.bln-pagination-right .bln-hero-swiper { padding-right: var(--bln-pagination-pad); }

/* ===========================================
   TEXT — High specificity to override Elementor
   =========================================== */
.bln-hero-carousel .bln-slide-text {
    width: 100%;
}

.bln-hero-carousel .bln-slide-text .bln-hero-title,
.bln-hero-carousel h1.bln-hero-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: var(--bln-title-size) !important;
    font-weight: 800 !important;
    color: var(--bln-text-dark) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 clamp(12px, 1.5vw, 24px) !important;
    padding: 0 !important;
    text-transform: none !important;
}

.bln-hero-carousel .bln-hero-title .hl {
    color: var(--bln-primary) !important;
}

.bln-hero-carousel .bln-slide-text p {
    margin: 0 0 clamp(10px, 1.2vw, 18px);
}

.bln-hero-carousel .bln-slide-text p:last-child {
    margin-bottom: 0;
}

.bln-hero-carousel .bln-hero-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: var(--bln-subtitle-size) !important;
    color: var(--bln-text-body) !important;
    line-height: 1.6 !important;
    margin: 0 0 clamp(16px, 2vw, 28px) !important;
}

.bln-hero-carousel .bln-slide-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--bln-button-padding-y) var(--bln-button-padding-x) !important;
    background: var(--bln-primary) !important;
    color: var(--bln-white) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: var(--bln-button-size) !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: 2px solid var(--bln-primary) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.bln-hero-carousel .bln-slide-button:hover {
    background: var(--bln-primary-dark) !important;
    border-color: var(--bln-primary-dark) !important;
    color: var(--bln-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.3) !important;
}

/* ===========================================
   PAGINATION — CLEAN, RELIABLE POSITIONING
   =========================================== */
.bln-hero-carousel .bln-hero-pagination {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.6vw, 10px);
    background: var(--bln-primary);
    box-sizing: border-box;
}

/* LEFT VERTICAL — properly centered with top/bottom auto-margin */
.bln-hero-carousel.bln-pagination-left .bln-hero-pagination {
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: max-content;
    width: var(--bln-pagination-w);
    flex-direction: column;
    padding: clamp(14px, 1.6vw, 22px) 0;
    border-radius: 0 12px 12px 0;
}

/* RIGHT VERTICAL */
.bln-hero-carousel.bln-pagination-right .bln-hero-pagination {
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: max-content;
    width: var(--bln-pagination-w);
    flex-direction: column;
    padding: clamp(14px, 1.6vw, 22px) 0;
    border-radius: 12px 0 0 12px;
}

/* BOTTOM HORIZONTAL */
.bln-hero-carousel.bln-pagination-bottom .bln-hero-pagination {
    left: 0;
    right: 0;
    bottom: clamp(20px, 3vw, 40px);
    margin: 0 auto;
    width: max-content;
    flex-direction: row;
    padding: clamp(6px, 0.8vw, 12px) clamp(12px, 1.5vw, 20px);
    border-radius: 28px;
}

/* Dots */
.bln-hero-carousel .bln-dot {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: none;
    width: var(--bln-dot-size);
    height: var(--bln-dot-size);
    border-radius: 50%;
    font-size: var(--bln-dot-font);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    padding: 0;
    line-height: 1;
}

.bln-hero-carousel .bln-dot:hover {
    color: var(--bln-white);
    background: rgba(255, 255, 255, 0.15);
}

.bln-hero-carousel .bln-dot.active {
    background: var(--bln-white);
    color: var(--bln-primary);
    font-weight: 700;
    transform: scale(1.05);
}

.bln-hero-carousel.bln-pagination-dots .bln-dot {
    width: clamp(8px, 0.8vw, 14px);
    height: clamp(8px, 0.8vw, 14px);
    background: rgba(255, 255, 255, 0.5);
}

.bln-hero-carousel.bln-pagination-dots .bln-dot.active {
    background: var(--bln-white);
    transform: scale(1.3);
}

.bln-hero-carousel .bln-pagination-dots .dot-inner { display: none; }

/* ===========================================
   NAVIGATION ARROWS
   =========================================== */
.bln-hero-carousel .bln-nav-prev,
.bln-hero-carousel .bln-nav-next {
    width: clamp(36px, 3vw, 50px) !important;
    height: clamp(36px, 3vw, 50px) !important;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: var(--bln-primary) !important;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 5;
    margin-top: 0 !important;
}

.bln-hero-carousel .bln-nav-prev::after,
.bln-hero-carousel .bln-nav-next::after {
    font-size: clamp(13px, 1vw, 18px) !important;
    font-weight: 700 !important;
}

.bln-hero-carousel:hover .bln-nav-prev,
.bln-hero-carousel:hover .bln-nav-next { opacity: 1; }

.bln-hero-carousel .bln-nav-prev:hover,
.bln-hero-carousel .bln-nav-next:hover {
    background: var(--bln-primary);
    color: var(--bln-white) !important;
    transform: scale(1.1);
}

/* ===========================================
   ANIMATIONS (when Swiper ready)
   =========================================== */
.bln-hero-carousel.bln-swiper-ready .swiper-slide-active .bln-hero-title {
    animation: blnSlideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bln-hero-carousel.bln-swiper-ready .swiper-slide-active .bln-hero-subtitle {
    animation: blnSlideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    animation-fill-mode: both;
}

.bln-hero-carousel.bln-swiper-ready .swiper-slide-active .bln-slide-button {
    animation: blnSlideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    animation-fill-mode: both;
}

@keyframes blnSlideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ===========================================
   MOBILE (<768px) — STACK LAYOUT
   Image fully visible on top, text below as banner
   No overlay — better mobile UX
   =========================================== */
@media (max-width: 767px) {
    /* === Carousel base === */
    .bln-hero-carousel {
        background: var(--bln-white);
    }

    /* === FALLBACK: when Swiper NOT ready, hide non-first slides === */
    .bln-hero-carousel:not(.bln-swiper-ready) .swiper-slide:not(:first-child) {
        display: none !important;
    }

    /* === Each slide becomes vertical stack (only when Swiper ready) === */
    .bln-hero-carousel.bln-swiper-ready.bln-layout-overlay .swiper-slide {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        background: var(--bln-white);
        padding: 0 !important;
    }

    /* === First slide always visible (Swiper or no Swiper) === */
    .bln-hero-carousel:not(.bln-swiper-ready).bln-layout-overlay .swiper-slide:first-child {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        background: var(--bln-white);
        padding: 0 !important;
    }

    /* === Image — fully visible (object-fit: cover but with proper aspect) === */
    .bln-hero-carousel.bln-layout-overlay .bln-slide-fullwidth-img {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 220px;
        max-height: 340px;
        object-fit: cover;
        object-position: center center;
        display: block;
        margin: 0;
    }

    /* === Text overlay BECOMES regular block below image === */
    .bln-hero-carousel.bln-layout-overlay .bln-slide-text-overlay,
    .bln-hero-carousel.bln-layout-overlay.bln-image-left .bln-slide-text-overlay,
    .bln-hero-carousel.bln-layout-overlay.bln-pagination-left .bln-slide-text-overlay,
    .bln-hero-carousel.bln-layout-overlay.bln-pagination-right .bln-slide-text-overlay {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        padding: 32px 24px 40px !important;
        background: var(--bln-white) !important;
        justify-content: center !important;
        text-align: center !important;
        z-index: auto;
        pointer-events: auto;
        overflow: visible;
    }

    .bln-hero-carousel.bln-layout-overlay .bln-slide-text-overlay .bln-slide-text {
        max-width: 100% !important;
        text-align: center;
    }

    /* === Text sizing on mobile === */
    .bln-hero-carousel .bln-hero-title,
    .bln-hero-carousel h1.bln-hero-title {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.25 !important;
        margin: 0 0 14px !important;
        text-align: center !important;
    }

    .bln-hero-carousel .bln-hero-subtitle {
        font-size: clamp(13px, 3.5vw, 15px) !important;
        margin: 0 0 18px !important;
        text-align: center !important;
    }

    .bln-hero-carousel .bln-slide-button {
        padding: 11px 22px !important;
        font-size: 12px !important;
    }

    /* === Pagination — top center horizontal pill === */
    .bln-hero-carousel.bln-pagination-left .bln-hero-pagination,
    .bln-hero-carousel.bln-pagination-right .bln-hero-pagination,
    .bln-hero-carousel.bln-pagination-bottom .bln-hero-pagination {
        position: absolute !important;
        flex-direction: row !important;
        left: 50% !important;
        right: auto !important;
        top: 14px !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        height: auto !important;
        padding: 6px 14px !important;
        border-radius: 24px !important;
        gap: 6px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .bln-hero-carousel .bln-dot {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .bln-hero-carousel.bln-pagination-dots .bln-dot {
        width: 10px !important;
        height: 10px !important;
    }

    /* === Side-by-side layout also stacks === */
    .bln-hero-carousel.bln-layout-side-by-side .bln-slide-grid,
    .bln-hero-carousel.bln-layout-side-by-side.bln-image-left .bln-slide-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }

    .bln-hero-carousel.bln-layout-side-by-side .bln-slide-image { order: -1; }
    .bln-hero-carousel.bln-layout-side-by-side .bln-slide-image img { max-height: 280px; }

    .bln-hero-carousel.bln-layout-side-by-side .swiper-slide {
        padding-top: 70px !important;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 32px;
        min-height: auto;
    }

    .bln-hero-carousel.bln-layout-side-by-side.bln-pagination-left .bln-hero-swiper,
    .bln-hero-carousel.bln-layout-side-by-side.bln-pagination-right .bln-hero-swiper {
        padding-left: 0;
        padding-right: 0;
    }

    /* === Hide nav arrows on mobile === */
    .bln-hero-carousel .bln-nav-prev,
    .bln-hero-carousel .bln-nav-next {
        display: none !important;
    }

    /* === Reduce animation distance on mobile === */
    .bln-hero-carousel.bln-swiper-ready .swiper-slide-active .bln-hero-title,
    .bln-hero-carousel.bln-swiper-ready .swiper-slide-active .bln-hero-subtitle,
    .bln-hero-carousel.bln-swiper-ready .swiper-slide-active .bln-slide-button {
        animation: blnFadeUpMobile 0.6s ease forwards;
    }
}

@keyframes blnFadeUpMobile {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   SMALL MOBILE (<480px) — Tighter spacing
   =========================================== */
@media (max-width: 479px) {
    .bln-hero-carousel.bln-layout-overlay .bln-slide-fullwidth-img {
        min-height: 200px;
        max-height: 280px;
    }

    .bln-hero-carousel.bln-layout-overlay .bln-slide-text-overlay {
        padding: 24px 20px 30px !important;
    }

    .bln-hero-carousel .bln-hero-title,
    .bln-hero-carousel h1.bln-hero-title {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .bln-hero-carousel .bln-dot {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .bln-hero-carousel.bln-pagination-left .bln-hero-pagination,
    .bln-hero-carousel.bln-pagination-right .bln-hero-pagination {
        top: 10px !important;
        padding: 5px 12px !important;
        gap: 4px !important;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .bln-hero-carousel *,
    .bln-hero-carousel *::before,
    .bln-hero-carousel *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .bln-hero-carousel { display: none !important; }
}