/*
 * AGRIDO Slider: all content and controls belong to HTML, not to images.
 * Desktop preserves the editorial reference's two opposing text areas.
 * Compact layouts deliberately move secondary copy into the clear upper area
 * to keep photography, CTA and benefits from overlapping.
 */
.acs-slider,
.acs-slider * { box-sizing: border-box; }

.acs-slider {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--acs-h, 610px);
    min-height: 380px;
    overflow: hidden;
    border-radius: var(--acs-radius, 42px);
    background: #203645;
    color: #fff;
    font-family: inherit;
    outline-offset: 4px;
}

.acs-slides,
.acs-slide,
.acs-slide-picture,
.acs-slide-photo,
.acs-tint,
.acs-empty-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.acs-slides { z-index: 0; }
.acs-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .65s ease, visibility .65s ease;
}
.acs-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}
.acs-slide-picture { display: block; }
.acs-slide-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.acs-empty-bg { background: linear-gradient(135deg, #507a87, #a5bfb8); }
/* A semantic full-image link sits over the picture, but behind text/controls.
   Text deliberately passes clicks through to the link; buttons/lines remain interactive. */
.acs-slide-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: pointer;
}
.acs-slide-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -6px;
    border-radius: inherit;
}
.acs-slide.has-link .acs-copy-top,
.acs-slide.has-link .acs-copy-bottom { pointer-events: none; }
.acs-tint {
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 52%, rgba(0, 0, 0, .12)), rgba(0, 0, 0, var(--acs-overlay, 0));
}

.acs-copy-top,
.acs-copy-bottom,
.acs-slide-button { position: absolute; z-index: 2; }
.acs-slide-button { z-index: 3; }
.acs-copy-top,
.acs-copy-bottom { text-shadow: 0 2px 9px rgba(0, 0, 0, .46); }
.acs-copy-top { top: 10%; left: 5.5%; max-width: 45%; }
.acs-copy-top-title {
    margin: 0 0 10px;
    padding: 0;
    color: var(--acs-topc, #fff);
    font-size: clamp(32px, 6vw, var(--acs-top-size, 76px));
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.04;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.acs-copy-top-text {
    max-width: 36ch;
    margin: 0;
    color: var(--acs-topdesc, #fff);
    font-size: var(--acs-text-size, 16px);
    line-height: 1.5;
    overflow-wrap: break-word;
}
.acs-copy-bottom {
    right: 5.2%;
    bottom: 20%;
    max-width: min(30%, 380px);
    text-align: right;
}
.acs-copy-bottom-title {
    margin: 0 0 10px;
    padding: 0;
    color: var(--acs-bottomc, #fff);
    font-size: var(--acs-bottom-size, 34px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.027em;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.acs-copy-bottom-text {
    margin: 0 0 2px auto;
    color: var(--acs-bottomdesc, #fff);
    font-size: var(--acs-text-size, 16px);
    line-height: 1.48;
    overflow-wrap: break-word;
}

/* CTA on the right; progress lines reclaim the lower-left corner. */
.acs-slide-button {
    bottom: 0;
    right: 0;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 23%;
    min-height: 70px;
    padding: 20px 30px;
    border-radius: 28px 0 0 0;
    background: var(--acs-btnbg, #edf0e9);
    color: var(--acs-btnc, #161d19) !important;
    font-size: var(--acs-button-size, 18px);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    text-align: center;
    overflow-wrap: break-word;
    transition: filter .2s, transform .2s;
}
.acs-slide-button:hover,
.acs-slide-button:focus-visible { filter: brightness(.95); transform: translateY(-2px); }
.acs-slide-button span { font-size: 1.35em; line-height: .8; }

.acs-navigation {
    position: absolute;
    z-index: 10;
    bottom: 18px;
    left: 4%;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 19%;
}
.acs-progress-button {
    width: 44px;
    min-width: 12px;
    flex: 1 1 44px;
    height: 32px;
    padding: 12px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: .95;
}
.acs-progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(255, 255, 255, .55);
}
.acs-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
.acs-progress-button:hover .acs-progress-track,
.acs-progress-button:focus-visible .acs-progress-track { height: 5px; background: rgba(255, 255, 255, .8); }
.acs-progress-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The white benefit bar grows gently out of the image, as in the reference.
   Curved wings live behind the text viewport, without covering footer controls. */
.acs-info-bar {
    --acs-wing: clamp(64px, 6.7vw, 120px);
    --acs-marquee-gap: 30px;
    position: absolute;
    z-index: 6;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: min(52%, 850px);
    min-height: 72px;
    padding: 18px clamp(14px, 1.5vw, 26px);
    transform: translateX(-50%);
    background: #fff;
    color: #111c19;
    font-size: clamp(11px, .92vw, var(--acs-info-size, 15px));
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}
.acs-info-bar::before,
.acs-info-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: var(--acs-wing);
    height: 100%;
    background: #fff;
    pointer-events: none;
}
.acs-info-bar::before {
    right: 100%;
    /* Quarter-circle makes a soft rising slope from the image's lower edge. */
    border-radius: 100% 0 0 0;
}
.acs-info-bar::after {
    left: 100%;
    border-radius: 0 100% 0 0;
}
.acs-info-viewport { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; width: 100%; overflow: hidden; }
.acs-info-track { display: flex; align-items: center; width: max-content; gap: var(--acs-marquee-gap); }
.acs-info-group { display: flex; align-items: center; flex: 0 0 auto; gap: clamp(14px, 1.4vw, 25px); }
.acs-info-item { white-space: nowrap; flex: 0 0 auto; }
.acs-info-item:not(:last-child)::after {
    content: '✦';
    display: inline-block;
    margin-left: clamp(12px, 1.2vw, 22px);
    font-size: .65em;
    opacity: .45;
}
.acs-info-bar--marquee { width: min(52%, 850px); }
.acs-info-bar--marquee .acs-info-viewport {
    /* Fade only the moving lettering, never the white curved surface. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.acs-info-bar--marquee .acs-info-track {
    animation: acs-info-scroll var(--acs-marquee-duration, 28s) linear infinite;
    will-change: transform;
}
.acs-info-bar--marquee:hover .acs-info-track,
.acs-info-bar--marquee:focus-within .acs-info-track { animation-play-state: paused; }
@keyframes acs-info-scroll {
    /* Two equal groups, separated by one gap, produce a seamless repeat. */
    to { transform: translateX(calc(-50% - var(--acs-marquee-gap) / 2)); }
}
.acs-slider:focus-visible { outline: 3px solid #608b83; }

/* The desktop two-corner layout becomes a stacked dock before content collides. */
@media (max-width: 1199px) {
    .acs-copy-top { max-width: 52%; }
    .acs-copy-bottom { bottom: 26%; max-width: 38%; }
    .acs-copy-bottom-title { font-size: clamp(24px, 3.3vw, var(--acs-bottom-size, 34px)); }
    .acs-info-bar {
        left: 0;
        width: 100%;
        max-width: 100%;
        min-height: 64px;
        transform: none;
        border-radius: 26px 26px 0 0;
        font-size: clamp(11px, 1.3vw, var(--acs-info-size, 15px));
    }
    .acs-info-bar::before,
    .acs-info-bar::after { display: none; }
    .acs-info-bar--marquee { width: 100%; }
    .acs-info-bar:not(.acs-info-bar--marquee) .acs-info-viewport { overflow-x: auto; }
    .acs-slide-button {
        bottom: 64px;
        right: 0;
        left: auto;
        max-width: 46%;
        min-height: 59px;
        padding: 16px 22px;
    }
    .acs-navigation { bottom: 76px; left: 4%; max-width: 36%; }
}

/* Mobile is intentionally redesigned, not just a cropped desktop image. */
@media (max-width: 700px) {
    .acs-slider {
        height: max(540px, var(--acs-mh, 570px));
        min-height: 540px;
        border-radius: min(var(--acs-radius, 42px), 25px);
    }
    .acs-slide { display: block; padding: 0; }
    .acs-tint {
        background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 65%, rgba(0, 0, 0, .14)), rgba(0, 0, 0, var(--acs-overlay, 0));
    }
    .acs-copy-top {
        position: absolute;
        inset: 7% 6% auto 6%;
        max-width: 88%;
    }
    .acs-copy-top-title {
        font-size: clamp(30px, 9vw, calc(var(--acs-top-size, 76px) * .64));
        line-height: 1.03;
    }
    .acs-copy-top-text {
        font-size: clamp(12px, 3.5vw, var(--acs-text-size, 16px));
        max-width: 34ch;
        line-height: 1.43;
    }
    .acs-copy-bottom {
        position: absolute;
        top: 36%;
        bottom: auto;
        left: 6%;
        right: auto;
        width: 84%;
        max-width: 84%;
        margin: 0;
        transform: translateY(-50%);
        text-align: left;
    }
    .acs-copy-bottom-title {
        margin-bottom: 6px;
        font-size: clamp(20px, 5vw, calc(var(--acs-bottom-size, 34px) * .8));
    }
    .acs-copy-bottom-text {
        margin: 0;
        font-size: clamp(12px, 3.2vw, var(--acs-text-size, 16px));
        line-height: 1.35;
    }
    .acs-slide-button {
        bottom: 86px;
        right: 0;
        left: auto;
        max-width: 62%;
        min-height: 55px;
        padding: 14px 20px;
        border-radius: 20px 0 0 0;
        font-size: clamp(14px, 3.7vw, var(--acs-button-size, 18px));
        text-align: center;
    }
    .acs-navigation {
        bottom: 97px;
        left: 5%;
        gap: 5px;
        max-width: 29%;
    }
    .acs-progress-button { width: 30px; min-width: 7px; flex: 1 1 30px; }
    .acs-info-bar {
        bottom: 0;
        left: 0;
        display: flex;
        width: 100%;
        max-width: 100%;
        min-height: 74px;
        padding: 14px 12px;
        border-radius: 24px 24px 0 0;
        transform: none;
        background: #fff;
        font-size: clamp(11px, 3vw, 13px);
    }
    .acs-info-bar--marquee { width: 100%; }
    .acs-info-bar--marquee .acs-info-viewport {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    }
    .acs-info-bar:not(.acs-info-bar--marquee) .acs-info-viewport {
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .acs-info-item { text-align: left; overflow-wrap: normal; }

}

@media (max-width: 380px) {
    .acs-copy-bottom { top: 36%; max-width: 84%; }
    .acs-copy-top-title { font-size: clamp(27px, 8vw, 34px); }
    .acs-copy-bottom-title { font-size: clamp(19px, 5vw, 24px); }
    .acs-slide-button { max-width: 63%; }
}

@media (prefers-reduced-motion: reduce) {
    .acs-slide, .acs-slide-button { transition: none; }
    .acs-progress-fill { will-change: auto; }
    .acs-info-bar--marquee .acs-info-track { animation: none; transform: none; will-change: auto; }
    .acs-info-bar--marquee .acs-info-group[aria-hidden="true"] { display: none; }
    .acs-info-bar--marquee .acs-info-viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* Elementor's centered flex columns can collapse an absolutely-filled slider to 0px. */
.elementor-widget-shortcode:has(.acs-slider) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
}
.elementor-widget-shortcode:has(.acs-slider) > .elementor-widget-container,
.elementor-widget-shortcode:has(.acs-slider) .elementor-shortcode {
    width: 100%;
    min-width: 0;
}