/**
 * CAROUSEL CONTROLS
 * ---------------------------------------------------------------------------
 * Adds visible prev/next arrow buttons to the "Our Products", "How We
 * Operate" and "Our Gallery" horizontally-scrolling sections on the home
 * page, at every breakpoint. The buttons themselves are injected by
 * carousel-controls.js (which also wraps each section in a
 * `.rf-carousel-wrapper` at runtime); this file only styles that wrapper
 * and the buttons. No existing markup, template, or JS logic is edited.
 */

.rf-carousel-wrapper {
    position: relative;
}

/* Several legacy mobile stylesheets set scroll-snap-type: x mandatory on
   these three strips (one of them, FORCE-MOBILE.css, uses an inflated
   "html body div.foo[class]" selector specifically to outrank ordinary
   overrides). Mandatory snapping rejects an arbitrary scroll target and
   bounces back to the nearest snap point, which fights a button-triggered
   "scroll to the next card" step. Snapping mainly matters for touch-swipe
   momentum, which these arrows don't need, so it's turned off here - at
   matching specificity - in favour of predictable prev/next behaviour. */
html body div.service-solutions-autoplay[class],
html body div.how-it-works-grid-container[class],
html body div.projects-slider[class] {
    scroll-snap-type: none !important;
    /* Deliberately not "smooth": this page runs several setInterval/
       setTimeout loops elsewhere that restyle the DOM on a timer, and a
       native/compositor-driven smooth-scroll animation is prone to being
       interrupted mid-flight by one of them and snapping back to the
       start. An instant jump (set in carousel-controls.js) is immune to
       that race and lands correctly every time. */
    scroll-behavior: auto !important;
    /* home-consolidated.css sets justify-content: center here unconditionally.
       On an overflowing flex row that pushes the first child(ren) to a
       negative offsetLeft and makes 0 an invalid/unreachable scroll
       position (the browser silently clamps it back), which breaks a
       "scroll to this child's offsetLeft" step. flex-start makes 0 the
       true, reachable start of the strip. */
    justify-content: flex-start !important;
    /* This page has several scripts that periodically mutate/restyle the
       DOM on timers, and many images are missing (404), both of which
       trigger layout shifts. The browser's CSS Scroll Anchoring feature
       then "helpfully" readjusts scrollLeft back toward 0 to compensate,
       fighting the button-triggered scroll. Not needed for a simple
       horizontal card strip. */
    overflow-anchor: none !important;
}
html body div.service-solutions-autoplay[class] > *,
html body div.how-it-works-grid-container[class] > *,
html body div.projects-slider[class] > * {
    scroll-snap-align: none !important;
}

.rf-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #34530a;
    color: #34530a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.rf-carousel-arrow:hover {
    background: #34530a;
    color: #ffffff;
}

.rf-carousel-arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.rf-carousel-arrow svg {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.rf-carousel-prev {
    left: 6px;
}

.rf-carousel-next {
    right: 6px;
}

.rf-carousel-arrow.rf-hidden {
    display: none;
}

@media screen and (max-width: 767px) {
    .rf-carousel-arrow {
        width: 36px;
        height: 36px;
    }
    .rf-carousel-arrow svg {
        width: 16px;
        height: 16px;
    }
    .rf-carousel-prev {
        left: 2px;
    }
    .rf-carousel-next {
        right: 2px;
    }
}

/* "How We Operate" only scrolled horizontally below 768px before; extend
   the same horizontal-scroll behaviour through tablet widths so the new
   prev/next arrows have something to control there too. Desktop keeps its
   existing 4-column grid untouched. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .how-it-works-grid-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .how-it-works-grid-container::-webkit-scrollbar {
        display: none !important;
    }
    .how-it-works-grid-container .how-it-works-grid-box {
        flex: 0 0 46% !important;
        min-width: 260px !important;
    }
}