/* Carousel compatibility for old Android WebView (Chrome 37–83 / Android 5–10).
   Flexbox horizontal-scroll fallback when CSS Grid or flex gap is unavailable. */

.carousel-shell,
.carousel-shell.home-legacy-carousel,
.home-main.home-legacy .carousel-shell.home-legacy-carousel {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.carousel-shell > [data-carousel-track],
.carousel-shell > .home-carousel-grid,
.home-carousel-grid,
.home-main .row.home-carousel-grid,
.home-main .list-carousel.home-carousel-grid,
.list-carousel {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap .row negative margins and .col-md-3 flex widths break carousels. */
.row.home-carousel-grid,
.row.home-carousel-grid[data-carousel-track] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.row.home-carousel-grid::before,
.row.home-carousel-grid::after {
    display: none !important;
}

.row.home-carousel-grid > .col-md-3,
.row.home-carousel-grid > .carousel-card,
.home-carousel-grid > .col-md-3,
.home-carousel-grid > .carousel-card {
    float: none !important;
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Flex gap fallback (flex gap needs Chrome 84+). */
@supports not (gap: 1px) {
    .list-carousel > .carousel-card:not(:last-child),
    .list-carousel > .list-card:not(:last-child) {
        margin-right: 0.8rem;
    }

    .carousel-shell > .carousel-control.prev {
        margin-right: 0.45rem;
    }

    .carousel-shell > .carousel-control.next {
        margin-left: 0.45rem;
    }

    .home-main.home-legacy .carousel-shell.home-legacy-carousel > .carousel-control.prev {
        margin-right: 0.35rem;
    }

    .home-main.home-legacy .carousel-shell.home-legacy-carousel > .carousel-control.next {
        margin-left: 0.35rem;
    }
}

/* CSS Grid fallback (Android 5–6 WebView, some embedded browsers). */
@supports not (display: grid) {
    .carousel-shell,
    .carousel-shell.home-legacy-carousel,
    .home-main.home-legacy .carousel-shell.home-legacy-carousel {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .carousel-shell > .carousel-control {
        -webkit-flex-shrink: 0;
        flex-shrink: 0;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    .carousel-shell > [data-carousel-track],
    .carousel-shell > .home-carousel-grid,
    .home-main .row.home-carousel-grid,
    .home-main .list-carousel.home-carousel-grid,
    .list-carousel {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 100%;
        white-space: nowrap;
        grid-template-columns: none !important;
    }

    .row.home-carousel-grid > .carousel-card,
    .row.home-carousel-grid > .col-md-3,
    .home-carousel-grid > .carousel-card,
    .home-carousel-grid > .col-md-3,
    .list-carousel > .carousel-card {
        display: inline-block;
        vertical-align: top;
        white-space: normal;
        -webkit-flex: 0 0 85%;
        flex: 0 0 85%;
        max-width: 85% !important;
        min-width: 0 !important;
        width: 85% !important;
        scroll-snap-align: start;
        -webkit-scroll-snap-align: start;
    }

    .vacancy-search-results .list-carousel,
    .vacancy-search-results .row.home-carousel-grid,
    .product-search-results .row.home-carousel-grid,
    .salesmen-search-results .row.home-carousel-grid {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        grid-template-columns: none !important;
    }

    .vacancy-search-results .list-carousel > .carousel-card,
    .product-search-results .row.home-carousel-grid > .carousel-card,
    .salesmen-search-results .row.home-carousel-grid > .carousel-card {
        -webkit-flex: 0 0 88%;
        flex: 0 0 88%;
        max-width: 88% !important;
        width: 88% !important;
    }
}

/* Grid supported but minmax(0,1fr) overflows on older WebViews — cap track width. */
@supports (display: grid) {
    .carousel-shell > [data-carousel-track],
    .carousel-shell > .home-carousel-grid,
    .home-main .row.home-carousel-grid {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile: single row, one card visible, horizontal scroll only. */
@media (max-width: 720px) {
    .carousel-shell > [data-carousel-track],
    .carousel-shell > .home-carousel-grid,
    .home-carousel-grid,
    .home-main .row.home-carousel-grid,
    .home-main .list-carousel.home-carousel-grid,
    .list-carousel,
    .vacancy-search-results .list-carousel,
    .vacancy-search-results .row.home-carousel-grid,
    .product-search-results .row.home-carousel-grid,
    .salesmen-search-results .row.home-carousel-grid {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
        grid-template-columns: none !important;
        gap: 0.75rem;
        white-space: nowrap;
        padding-bottom: 0.35rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row.home-carousel-grid > .carousel-card,
    .row.home-carousel-grid > .col-md-3,
    .home-carousel-grid > .carousel-card,
    .home-carousel-grid > .col-md-3,
    .list-carousel > .carousel-card,
    .list-carousel > .list-card,
    .carousel-card {
        -webkit-flex: 0 0 88% !important;
        flex: 0 0 88% !important;
        max-width: 88% !important;
        min-width: 0 !important;
        width: 88% !important;
        scroll-snap-align: start;
        -webkit-scroll-snap-align: start;
        white-space: normal;
        float: none !important;
    }
}