/*
 * Computer homepage hero slider styles.
 * Extracted from module/computer/layout/slider.phtml during audit Step 6a.
 *
 * Background image referenced with relative URL from this CSS file location.
 * No PHP-interpolated brand tokens needed.
 */

/*
 * ===== BS4 carousel core (Phase 1B — typography migration plan) =====
 *
 * Duplicates the .carousel-item rules from Bootstrap 4.6.2's _carousel.scss
 * so the slider markup (migrated from BS3 `.item` to BS4 `.carousel-item`)
 * has the display-none/active-block behaviour even though the computer head
 * currently loads only bootstrap-grid.min.css (BS4) — not the full BS4 CSS.
 *
 * Without these rules, .carousel-item elements would default to display:block
 * and stack vertically (the failure mode that triggered the Phase 1B
 * rollback on 2026-05-18).
 *
 * Source: https://raw.githubusercontent.com/twbs/bootstrap/v4.6.2/scss/_carousel.scss
 * Values are the resolved $carousel-transition default (transform .6s ease-in-out).
 *
 * Omitted from BS4 source (not needed by our slider):
 *   - .carousel-control-prev/next — we have no arrow nav
 *   - .carousel-fade variant       — not used
 *   - .carousel-caption            — not used
 *   - .carousel-indicators rules   — BS3 still loaded, BS3 .carousel-indicators
 *                                    rules apply; our own .carousel-indicators
 *                                    overrides further down this file
 *
 * When Phase 2 retires BS3 + brings BS4 full, these rules will be duplicated
 * by BS4's own — same values, no conflict. They can be removed in Phase 2
 * docs commit OR left as defensive (cost: ~25 lines of dead-but-safe CSS).
 */
.carousel-inner::after {
    display: block;
    clear: both;
    content: "";
}
.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none;
    }
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
    transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
    transform: translateX(-100%);
}
/* ===== end BS4 carousel core ===== */

.carousel-indicators{
    bottom: 10px !important;
}

.carousel-indicators li{
    margin: 0 10px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 4px !important;
    border: 0 !important;
    background-color: #ccc;
    transition: all .2s ease-in-out;
}

.carousel-indicators li.active{
    background-color: #31313f;
    width: 40px !important;
    transition: all .2s ease-in-out;
}

#topSliderWrapper{
    background: url('../../../img/slider/slider-bg-min.png');
    background-size: cover;
}

#topSliderWrapper img{
    background-color: transparent !important;
}