/* Solutions */
.solutions {
    height: clamp(800px, 62.5vw, 924px);
    padding-top: 1px;
    background-image: url('/Style%20Library/OLL/img/solution-bkg.png');
    background-size: cover;
    overflow: hidden;
}

.solutions__title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 120px;
    margin-bottom: 60px;
    color: #27201F;
}

.solutions__nav {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 100px;
}

.solutions__nav-scroll-wrapper {
    position: relative;
    overflow: visible;
}

.solutions__tabs {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.solutions__tabs button, .solutions__tabs .solutions__tab {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    font-style: Medium;
    font-size: 16px;
    font-weight: 500;
    color: #27201f;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    line-height: 24px;
    letter-spacing: 0%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

    .solutions__tabs button:hover, .solutions__tabs .solutions__tab:hover {
        color: #000;
    }

    .solutions__tabs button[aria-selected='true'], .solutions__tabs .solutions__tab[aria-selected='true'] {
        color: #DA291C;
        font-weight: 700;
    }

/* Sliding tab indicator (appended to .solutions__nav by JS) */
.solutions__tab-indicator {
    position: absolute;
    bottom: 0;
    height: 4px;
    background: #DA291C;
    transition: left 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: none;
    z-index: 2;
}

.solutions__carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 24px;
}

/* Hide pagination dots by default on large/desktop screens; they'll be enabled via media queries when needed */
.solutions__carousel .swiper-pagination,
.solutions__carousel + .swiper-pagination {
    display: none;
}

/* Card Styles used in Solution Carousel */
.swiper-slide .card {
    width: 360px;
    height: 340px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

.swiper-slide .card:hover {
    border-radius: 12px;
    box-shadow: 0 0 16px 0 rgba(0,0,0,0.15);
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 380px;
    height: auto;
    /* Width and margin handled by Swiper JS */
}

.card__image {
    width: 100%;
    height: 180px;
    background: #fceceb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }   

.card__content {
    padding: 20px 20px 0;
}

.card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.card p {
    font-size: 16px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* Clamp paragraph text in card content and show ellipsis when it overflows */
.card__content p {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3; /* show up to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: normal;
    font-weight: 400;
}

.carousel__arrow {
    background: #f5f5f5;
    border: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    color: #333;
    transition: background 0.2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

    .carousel__arrow.prev {
        left: -26px;
    }

    .carousel__arrow.next {
        right: -26px;
    }

    .carousel__arrow:not([disabled]):hover {
        background: #e0e0e0;
    }

    .carousel__arrow[disabled] {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }

    .carousel__arrow svg {
        width: 24px;
        height: 24px;
    }


/* ===== Solutions tab-switch cross-fade animations ===== */

@keyframes solCarouselExit {
    from { opacity: 1; transform: translateZ(0); }
    to   { opacity: 0; transform: translate3d(-100%, 0, 0); }
}


.solutions.solutions--visible .solutions__carousel.solutions__carousel--exiting .swiper-container {
    animation: solCarouselExit 0.8s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ===== Solutions entrance animations ===== */

@keyframes solFadeDown {
    from { opacity: 0; transform: translate3d(0, -40px, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes solSlideRight {
    from { opacity: 0; transform: translate3d(-60px, 0, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes solSlideLeft {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

/* Hidden before entrance */
.solutions .solutions__title,
.solutions .solutions__nav,
.solutions .solutions__carousel .swiper-container,
.solutions .solutions__carousel + .swiper-pagination,
.solutions .solutions__carousel .carousel__arrow {
    opacity: 0;
}

/* Title: top → bottom */
.solutions.solutions--visible .solutions__title {
    animation: solFadeDown 1.4s cubic-bezier(0.0, 0.0, 0.2, 1) 0.3s both;
}

/* Nav tabs: left → right */
.solutions.solutions--visible .solutions__nav {
    animation: solSlideRight 1.4s cubic-bezier(0.0, 0.0, 0.2, 1) 0.3s both;
}

/* Cards container: swiper-container slides in from right → left */
.solutions.solutions--visible .solutions__carousel .swiper-container {
    animation: solSlideLeft 1.4s cubic-bezier(0.0, 0.0, 0.2, 1) 0.3s both;
}

/* Pagination dots appear after card entrance animation ends */
.solutions.solutions--visible .solutions__carousel + .swiper-pagination,
.solutions.solutions--visible .solutions__carousel .swiper-pagination {
    animation: solSlideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.7s both;
}

/* Carousel arrows: fade in on section entrance */
@keyframes solArrowFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.solutions.solutions--visible .solutions__carousel .carousel__arrow {
    animation: solArrowFadeIn 0.6s cubic-bezier(0.0, 0.0, 0.2, 1) 0.8s both;
}

/* No animation on arrows during tab switch */
.solutions__carousel.solutions__carousel--exiting .carousel__arrow,
.solutions__carousel.solutions__carousel--entering .carousel__arrow {
    animation: none;
    opacity: 1;
}

/* Tab switch: pagination on entering carousel appears after exit animation ends */
.solutions__carousel.solutions__carousel--entering + .swiper-pagination,
.solutions__carousel.solutions__carousel--entering .swiper-pagination {
    animation: solSlideLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
.solutions__carousel.solutions__carousel--exiting + .swiper-pagination,
.solutions__carousel.solutions__carousel--exiting .swiper-pagination {
    visibility: hidden;
}


/* Responsive Styles for Solution */

@media (min-width: 1280px) {
    .solutions__carousel .swiper-container {
        width: 1128px;
        margin: 0 auto;
    }

    .solutions__carousel .swiper-slide {
        width: 360px;
        margin-right: 24px;
    }
}

@media (min-width: 768px) and (max-width: 1897px) {
    .solutions__nav {
        margin-bottom: 64px;
    }
}

@media (min-width:1024px) and (max-width:1279px) {

    .solutions {
        height: 800px;
    }

    /* 3 cards with proportional gaps */
    .solutions__carousel .swiper-container {
        width: 100%;
        margin: 0 auto;
    }

    .solutions__carousel .swiper-slide {
        width: calc((100% - 24px) / 3) !important;
        margin-right: 12px !important;
    }

    .solutions__carousel .swiper-slide .card {
        width: 100%;
    }

    /* For solutions carousel at this breakpoint: hide arrow buttons and show pagination dots */
    .solutions__carousel .carousel__arrow {
        display: none !important;
    }
    /* Match pagination placed inside the carousel or immediately after it */
    .solutions__carousel .swiper-pagination,
    .solutions__carousel + .swiper-pagination,
    #solutions .solutions__pagination {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 18px;
    }
    /* When pagination is placed after the carousel, make sure it behaves like a static full-width footer
     rather than absolute positioned pagination coming from the Swiper defaults. This centers the dots
     and keeps them aligned under the carousel content. */
    .solutions__carousel .swiper-pagination {
        position: static;
        width: 100%;
        justify-content: center;
        padding: 0;
        margin-top: 98px;
        height: 15px;
    }
    /* Stronger override to neutralize Swiper's absolute positioning and ensure bullets are centered
     for every solutions carousel (covers both inner pagination and sibling pagination cases). */
    .solutions__carousel .swiper-pagination,
    .solutions__carousel + .swiper-pagination,
    #solutions .solutions__pagination {
        position: static !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 18px 0 0 0 !important;
        padding: 0 !important;
    }

        .solutions__carousel .swiper-pagination.swiper-pagination-bullets,
        .solutions__carousel + .swiper-pagination.swiper-pagination-bullets,
        #solutions .solutions__pagination.swiper-pagination-bullets {
            gap: 8px !important;
            justify-content: center !important;
            align-items: center !important;
            list-style: none !important;
        }

        .solutions__carousel .swiper-pagination .swiper-pagination-bullet,
        .solutions__carousel + .swiper-pagination .swiper-pagination-bullet,
        #solutions .solutions__pagination .swiper-pagination-bullet {
            width: 10px !important;
            height: 10px !important;
            background: #d0d0d0 !important;
            border-radius: 50% !important;
            opacity: 1 !important;
            transition: background .2s, transform .2s !important;
        }

        .solutions__carousel .swiper-pagination .swiper-pagination-bullet-active,
        .solutions__carousel + .swiper-pagination .swiper-pagination-bullet-active,
        #solutions .solutions__pagination .swiper-pagination-bullet-active {
            background: #000 !important;
            transform: scale(1.25) !important;
        }

    .solutions__carousel + .swiper-pagination {
        position: static; /* allow document flow */
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0;
        margin-top: 98px;
    }

        .solutions__carousel .swiper-pagination .swiper-pagination-bullet,
        #solutions .solutions__pagination .swiper-pagination-bullet,
        .solutions__carousel + .swiper-pagination .swiper-pagination-bullet,
        .solutions__carousel .swiper-pagination .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background: #d0d0d0;
            border-radius: 50%;
            opacity: 1;
            transition: background .2s, transform .2s;
        }

        #solutions .solutions__pagination .swiper-pagination-bullet-active,
        .solutions__carousel .swiper-pagination .swiper-pagination-bullet-active,
        .solutions__carousel + .swiper-pagination .swiper-pagination-bullet-active {
            background: #000;
            transform: scale(1.25);
        }

    /* Add swiper-pagination-bullets styles for solutions carousel */
    .solutions__carousel .swiper-pagination-bullets,
    .solutions__carousel + .swiper-pagination-bullets,
    #solutions .swiper-pagination-bullets,
    #solutions .solutions__pagination .swiper-pagination-bullets {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
        margin-top: 18px;
        padding: 0;
        list-style: none;
    }

        .solutions__carousel .swiper-pagination-bullets .swiper-pagination-bullet,
        .solutions__carousel + .swiper-pagination-bullets .swiper-pagination-bullet,
        #solutions .swiper-pagination-bullets .swiper-pagination-bullet,
        #solutions .solutions__pagination .swiper-pagination-bullets .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            background: #d0d0d0;
            border-radius: 50%;
            opacity: 1;
            transition: background 0.2s, transform 0.2s;
            box-shadow: none;
        }

            .solutions__carousel .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
            .solutions__carousel + .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
            #solutions .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active,
            #solutions .solutions__pagination .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
                background: #000;
                transform: scale(1.25);
            }


    /* Prevent solutions tabs from wrapping on screens >=1024px */
    .solutions__tabs {
        flex-wrap: nowrap;
    }

        .solutions__tabs button, .solutions__tabs .solutions__tab {
            white-space: nowrap;
            padding: 0.75rem 1rem;
        }
}

@media (max-width:1279px) {
    .solutions__carousel .carousel__arrow {
        display: none !important;
    }

    .solutions__carousel .swiper-pagination,
    .solutions__carousel + .swiper-pagination {
        position: static;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 0;
        margin-top: 38px;
        height: 15px;
    }
    .card__content {
        height: 149px;
    }
}

@media (min-width:1024px) {
    /* Active pagination bullet style for Solutions carousel */
    .solutions__carousel .swiper-pagination .swiper-pagination-bullet-active,
    .solutions__carousel + .swiper-pagination .swiper-pagination-bullet-active,
    #solutions .solutions__pagination .swiper-pagination-bullet-active {
        background: #000 !important;
        transform: scale(1.2) !important;
    }
    
    /* Ensure solutions tabs align with cards on desktop */
    .solutions__nav-scroll-wrapper .solutions__tabs {
        width: 100%;
        justify-content: space-between;
    }
}



@media (max-width:1279px) and (min-width:1024px) {
    .solutions__tabs {
        gap: 3.5rem;
        margin: auto;
    }
}


/* For solutions carousel at 1075px - 768px: display 2 slides */
@media (max-width: 1075px) and (min-width: 768px) {
    /* Solutions Tabs - Scrollable with Arrows (Match Mobile Style) */
    .solutions__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 64px;
        padding: 0 10px;
    }
    .swiper-pagination-bullet-active{
        background: #000000;
    }
    /* Increase specificity to override default display:none */
    .solutions__nav .nav-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 4px;
        font-size: 18px;
        color: #666;
        cursor: pointer;
        z-index: 10;
    }

            .solutions__nav .nav-arrow:hover {
                border: none;
                box-shadow: none;
            }

    .solutions__nav-scroll-wrapper {
        position: relative;
        flex: 1;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
        margin: 0 5px;
    }

        .solutions__nav-scroll-wrapper::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

    .solutions__tabs {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        width: max-content;
        border-bottom: none;
        justify-content: flex-start;
        padding: 0 5px;
    }

        .solutions__tabs li {
            flex: 0 0 auto;
        }

        .solutions__tabs button, .solutions__tabs .solutions__tab {
            white-space: nowrap;
            padding: 10px 15px;
            font-size: 16px; /* Adjust font size if needed */
        }

    /* 2 cards with proportional gaps */
    .solutions__carousel .swiper-container {
        width: 90vw;
        margin: 0 auto;
    }

    .solutions__carousel .swiper-slide {
        width: calc((90vw - 3vw) / 2) !important;
        margin-right: 3vw !important;
    }

    .swiper-slide .card {
        width: 100%;
    }
}

/* Scroll wrapper for tabs arrows */
.nav-arrow {
    display: none; /* Hidden by default */
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 10px;
    color: #333;
}

    .nav-arrow[disabled] {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }

.solutions__nav-scroll-wrapper {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    scroll-behavior: smooth;
    width: 100%;
}

    .solutions__nav-scroll-wrapper::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

    /* Ensure tabs don't wrap so they can be scrolled */
    .solutions__nav-scroll-wrapper .solutions__tabs {
        flex-wrap: nowrap;
        width: max-content; /* Ensure it takes necessary width */
        padding: 0 24px; /* Add some padding */
    }


/* Mobile styles for Solutions section (360px - 767px) */
@media (min-width: 360px) and (max-width: 767px) {

    .swiper-pagination-bullet-active {
        background: #000000;
    }
    .solutions {
        height: auto;
        padding-bottom: 40px;
    }

    .solutions__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 24px;
        padding: 0 10px;
    }

    .nav-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: 4px;
        font-size: 18px;
        line-height: 1;
        color: #333;
        z-index: 2;
    }

    .solutions__nav-scroll-wrapper {
        position: relative;
        display: block;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        flex-grow: 1;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
        margin: 0 10px;
    }

        .solutions__nav-scroll-wrapper::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }

    .solutions__tabs {
        flex-wrap: nowrap;
        gap: 1rem;
        overflow-y: hidden;
        justify-content: flex-start;
        padding-bottom: 5px; /* Space for scrollbar if visible */
    }

        .solutions__tabs li {
            flex-shrink: 0;
        }

        .solutions__tabs button, .solutions__tabs .solutions__tab {
            padding: 0.5rem 1rem;
            font-size: 14px;
            white-space: nowrap;
        }

    /* Carousel adjustments */
    .solutions__carousel {
        padding: 0 24px;
        gap: 0;
    }

        .solutions__carousel .carousel__arrow {
            display: none; /* Hide carousel arrows */
        }

    .carousel__track {
        width: 100%;
        gap: 0;
    }

        .carousel__track .card {
            flex: 0 0 100%;
            width: 100%;
            margin-right: 0;
            border-radius: 12px;
        }

    /* 1 card */
    .solutions__carousel .swiper-container {
        width: 85vw;
        margin: 0 auto;
    }

    .swiper-slide {
        width: 100% !important;
        margin-right: 0 !important;
    }

        .swiper-slide .card {
            width: 100% !important;
            height: auto !important;
            margin: 0 auto;
        }

    /* Show pagination dots if they exist */
    .solutions__carousel .swiper-pagination,
    .solutions__carousel + .swiper-pagination {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }
}

/* Also general fix for max-width 767px outside of min-width 360 */
@media (max-width: 767px) {

    .solutions__title {
        margin-top: 60px;
        margin-bottom: 24px;
    }
    .solutions__tabs {
        flex-wrap: nowrap; /* Prevent wrapping */
        gap: 1rem; /* Reduce gap between tabs */
        justify-content: center;
        overflow-x: auto; /* Allow horizontal scrolling if needed */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

        .solutions__tabs button, .solutions__tabs .solutions__tab {
            font-size: 14px; /* Smaller font size */
            padding: 0.75rem 1rem; /* Smaller padding */
            flex-shrink: 0; /* Prevent shrinking */
            white-space: nowrap; /* Prevent text wrapping */
        }

    .solutions__carousel .swiper-slide {
        width: 100% !important;
        margin-right: 0 !important;
    }
}