/* ==========================================================================
   Custom pagination for the Bricks home slider (#brxe-oknvzy)
   Core Framework vars: --space-s/-xs/-l, --text-l/-m,
   --primary, --light-30, --dark-10, --dark-30
   ========================================================================== */

#brxe-oknvzy { position: relative; }

/* Hide native dots (kept in DOM for control) */
#brxe-oknvzy .splide__pagination { display: none !important; }

/* Container */
.home-slide-pagination {
    display: flex;
    box-sizing: border-box;
    width: 1330px;
    max-width: calc(100% - 120px);
    height: 105px;
    padding-bottom: var(--space-l);
    align-items: flex-start;
    gap: var(--space-s);
    position: absolute;

    /* Centered horizontally to prevent right-side overflow */
    left: 50%;
    transform: translateX(-50%);
    bottom:40px;
    z-index: 20;
    margin: 0;
}

/* Box - NORMAL. NOTE: no overflow:hidden (it was clipping the timing bar). */
.home-slide-pagination__item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    flex: 1 0 0; /* Ensures items scale perfectly regardless of container width */
    min-height: 65px;
    padding: var(--space-s);
    border: 0;
    border-top: 2px solid var(--light-30);
    background: var(--dark-10);
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease, border-color 0.3s ease;
    appearance: none;
}

/* Active box background (border turns red via the growing bar). */
.home-slide-pagination__item.is-active {
    background: var(--dark-30);
}

/* Hover shows full primary border immediately. */
.home-slide-pagination__item:hover {
    border-top-color: var(--primary);
    background: var(--dark-30);
}

/* number "01" */
.home-slide-pagination__number {
    color: #fff;
    text-align: center;
    font-family: "Barlow", sans-serif;
    font-size: var(--text-l);
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

/* description text */
.home-slide-pagination__text {
    align-self: stretch;
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-size: var(--text-m);
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

/* ---- Timing bar: overlays the top border, fills 0 -> 100% ---- */
.home-slide-pagination__bar {
    position: absolute;
    top: -2px;              /* sits exactly on the top border */
    left: 0;
    height: 2px;
    width: 0;
    background: var(--primary);
    z-index: 2;             /* above the border */
    pointer-events: none;
}

/* Run the fill only on the active box. */
.home-slide-pagination__item.is-active .home-slide-pagination__bar {
    animation: homeSlideProgress var(--slide-duration, 3000ms) linear forwards;
}

/* Pause fill while hovering the slider. */
.home-slide-pagination.is-paused .home-slide-pagination__item.is-active .home-slide-pagination__bar {
    animation-play-state: paused;
}

@keyframes homeSlideProgress {
    from { width: 0; }
    to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-slide-pagination__item.is-active .home-slide-pagination__bar {
        animation: none;
        width: 100%;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop: adjust bounds and breathing room */
@media (max-width: 1400px) {
    .home-slide-pagination {
        /* Centering left/transform properties are now inherited automatically */
        width: 100%;
        max-width: calc(100% - 60px);
        bottom: 60px;
    }
}

/* Tablet: 2 x 2 grid */
@media (max-width: 900px) {
    .home-slide-pagination {
        flex-wrap: wrap;
        height: auto;
        bottom: 40px;
        gap: var(--space-xs);
        padding-bottom: var(--space-s);
    }
    .home-slide-pagination__item {
        flex: 1 1 calc(50% - var(--space-xs));
        min-height: 58px;
    }
}

/* Phone: swipeable, snapping strip that stays readable */
@media (max-width: 600px) {
    .home-slide-pagination {
        /* Lock the strip to the viewport so it can never widen the page.
           left/right define the width; drop the fixed width + centering. */
        flex-wrap: nowrap;
        width: auto;
        max-width: none;
        left: 0;
        right: 0;
        transform: none;                 /* no more translateX centering */
        bottom: 0px;
        height: auto;

        overflow-x: auto;
        overflow-y: hidden;
        /* KEY: keep horizontal swipe inside the strip; stop it from
           dragging the whole page sideways. */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        padding: 0 16px 0;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .home-slide-pagination::-webkit-scrollbar { display: none; }

    .home-slide-pagination__item {
        flex: 0 0 78%;
        min-height: 54px;
        padding: 12px 14px;
        scroll-snap-align: center;
        border-radius: 4px 4px 0 0;

        /* Fade non-active boxes so the current one stands out on small screens */
        opacity: 0.55;
        transition: opacity 0.3s ease, background 0.3s ease;
    }
    .home-slide-pagination__item.is-active { opacity: 1; }
}