/* ============================================================
   ECO - Client logo carousel
   Hand-built: no page builder, no jQuery, no carousel library.

   Source of truth: Figma node 202:803
   The Figma file carries NO variables, so these tokens were read
   off the frame by inspection, not exported. Check the frame
   before changing one.
     strip background  #EEF1EC @ 26%
     tile              #FFFFFF, 427 x 130
     gap between tiles 12px
     tiles per row     5
   ============================================================ */

.eco-carousel {
    --eco-strip-bg:   rgba(238, 241, 236, .26);
    --eco-tile-bg:    #FFFFFF;
    --eco-tile-h:     130px;
    --eco-tile-gap:   12px;
    --eco-logo-max-h: 105px;
    --eco-per-view:   5;

    --eco-arrow-fg:   #4F4B4A;
    --eco-max-w:      1440px;
    --eco-dur:        .5s;
    --eco-ease:       cubic-bezier(.4, 0, .2, 1);

    position: relative;
    background: var(--eco-strip-bg);
    padding-block: 60px;
}

.eco-carousel__viewport {
    overflow: hidden;
    max-width: var(--eco-max-w);
    margin-inline: auto;
    padding-inline: 20px;
}

.eco-carousel__track {
    display: flex;
    gap: var(--eco-tile-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    /* transform is composited; animating left/margin is not */
    transition: transform var(--eco-dur) var(--eco-ease);
    will-change: transform;
}

/* Exact share of the viewport minus the gaps, so any per-view count
   divides cleanly and the last tile never half-shows. */
.eco-carousel__item {
    flex: 0 0 calc(
        (100% - (var(--eco-per-view) - 1) * var(--eco-tile-gap))
        / var(--eco-per-view)
    );
    min-width: 0;
}

.eco-carousel__tile {
    background: var(--eco-tile-bg);
    height: var(--eco-tile-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dimensions are set on the img in markup to stop layout shift.
   contain keeps a wide logo and a tall logo optically equal. */
.eco-carousel__tile img {
    max-height: var(--eco-logo-max-h);
    max-width: 78%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---- arrows ---- */
.eco-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--eco-arrow-fg);
    cursor: pointer;
    z-index: 2;
}
.eco-carousel__btn svg { width: 22px; height: 22px; fill: currentColor; }
.eco-carousel__btn:disabled { opacity: .3; cursor: default; }
.eco-carousel__btn:focus-visible { outline: 2px solid var(--eco-arrow-fg); outline-offset: 2px; }

/* Logical properties, so the arrows sit correctly in both RTL and LTR */
.eco-carousel__btn--prev { inset-inline-start: 8px; }
.eco-carousel__btn--next { inset-inline-end: 8px; }
.eco-carousel__btn--prev svg { transform: scaleX(-1); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
    .eco-carousel { --eco-per-view: 3; --eco-tile-h: 115px; --eco-logo-max-h: 92px; }
}
@media (max-width: 767px) {
    .eco-carousel { --eco-per-view: 2; --eco-tile-h: 100px; --eco-logo-max-h: 80px; padding-block: 40px; }
}
@media (max-width: 480px) {
    .eco-carousel { --eco-per-view: 1; }
}

/* Motion can cause real nausea for some people; the OS setting says so. */
@media (prefers-reduced-motion: reduce) {
    .eco-carousel__track { transition: none; }
}