/* ==========================================================================
   RentOS — Customers
   --------------------------------------------------------------------------
   Desktop 123:6776 (2059x859 at 0,3680) · mobile 123:9962 (390x638).

   The section box is 2059 wide inside a 1920 frame: the card track starts at
   the container's left edge and runs off the right, so the last card is only
   partly visible at rest. That is the carousel's resting state, not an error —
   the track is full-bleed and clipped, with the first card aligned to the
   container.
   ========================================================================== */

.customers {
    position: relative;                 /* desktop nav anchors to this */
    background-color: #edefec;          /* continues the band */
    overflow: hidden;
    /* Figma mobile: Ask ends 3529, this section starts 3609 -> 80. */
    padding-top: 80px;
}

/* ------------------------------------------------------------------ Mobile */
.customers__head {
    padding: 0 20px;
}

.customers__title {
    max-width: 351px;                   /* @ 123:7629 */
    font-size: 38px;
    line-height: 44px;
    font-weight: var(--fw-semibold);
    color: var(--brand-dark-green);
}

/* NOT .customers.swiper — the carousel div would then also match the section's
   own .customers rules, and the section padding-top pushed the cards down. */
.customers__carousel {
    /* Figma puts the track 173 below the title's top. Its title box is 95,
       but this copy genuinely needs 3 lines at 38/44 and renders 132 — so the
       gap is 173 - 132 = 41. Anchoring to the track's position rather than to
       Figma's under-sized text box also keeps it consistent with desktop,
       where the same calculation gives 39. */
    margin-top: 41px;
    overflow: hidden;                   /* inset via slidesOffsetBefore/After */
}

/* flex-start, not stretch: the offset cards carry margin-top: 80px, so
   stretching hands them 80px MORE height than the rest instead of equalising.
   Even heights come from the per-card bottom inset below. */
.customers__track {
    align-items: flex-start;
}

/* Cards — 267 x 380 at x16/311/606.72/902.27 => 28px gaps @ 123:7909 etc */
/* Measured @ 123:7909-7914. Laid out as a flex column with the attribution
   pushed to the bottom, so the card keeps its shape when the placeholder
   quotes are swapped for the real ones (which will be a different length). */
.customer-card {
    display: flex;
    flex-direction: column;
    width: 267px;
    max-width: calc(100vw - 60px);
    height: auto;
    min-height: 380px;
    padding: 43px 20px var(--mpb, 19px);/* logo top 43, sides 19.95, by ends 361 */
    background-color: var(--brand-dark-green);
    border-radius: 12.314px;            /* @ 123:7910 */
    margin: 0;
    color: #e2f6d5;                     /* pale green, not white @ 123:6781 */
}

/* Cards 2 and 4 are the light colourway @ 123:6798 / 123:6817 */
.customer-card--alt {
    background-color: #e3efe3;
    color: var(--brand-dark-green);
}

/* The 0/80 vertical stagger is a desktop composition; on mobile the cards
   sit on one line (Figma mobile has all four at top 0). */
.customer-card--low {
    margin-top: 0;
}

.customer-card__logobox {
    flex: none;
    height: var(--mb, 57.98px);         /* padding-top 43 -> quote 100.978 */
}

.customer-card__logo {
    display: block;
    flex: none;
    width: var(--mw);
    height: var(--mh);
    margin-top: var(--mt, 0);
    object-fit: contain;
    object-position: left center;
}

.customer-card__quote {
    margin: 0;                          /* the logo band above sets the offset */
    flex: 0 1 auto;
    font-size: 14px;                    /* @ 123:7911 */
    line-height: 20px;
    font-weight: var(--fw-semibold);
}

.customer-card__by {
    margin-top: auto;                   /* pinned to the card foot */
    padding-top: 20px;
}

/* Figma sets 10px between the two paragraphs of a quote @ 123:6781 */
.customer-card__quote p + p {
    margin-top: 10px;
}

.customer-card__name {
    display: block;
    font-size: 13px;                    /* @ 123:7912 */
    line-height: 16px;
    font-weight: var(--fw-semibold);
}

.customer-card__meta {
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--fw-regular);
    opacity: .8;
}

/* Mobile arrows — the block is 100x45 @ 123:7630, i.e. two 45px circles with
   a 10px gap, NOT the desktop 111.111x50. Sits below the track (573 -> 593)
   and right-aligned (270 + 100 = 370 in a 390 frame). */
.customers__nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 20px;
    /* Figma's track BOX is 406 tall (173..579) though its cards are only 380,
       so there is 26px of slack under them. Measured from where the cards
       actually end, the nav sits 40 below to land at 593. */
    margin-top: 40px;
}

.customers__arrow {
    width: 45px;
    height: 45px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .2s ease;
}

.customers__arrow img {
    display: block;
    width: 100%;
    height: 100%;
}

.customers__arrow:hover:not(.swiper-button-disabled) {
    opacity: .85;
}

/* Figma draws the inactive arrow grey (#9F9F9F) — that is Swiper's disabled
   state, so the artwork already carries it and we only need the cursor. */
.customers__arrow.swiper-button-disabled {
    cursor: default;
}

/* ----------------------------------------------------------------- Desktop */
@media screen and (min-width: 992px) {
    /* Figma: Ask ends 3560, Customers starts 3680 -> 120. */
    .customers {
        padding-top: 120px;
    }

    .customers__head {
        width: min(var(--content-width), calc(100% - 80px));
        padding: 0;
        margin: 0 auto;
    }

    .customers__title {
        max-width: 991px;               /* @ 123:6777 */
        font-size: 68px;
        line-height: 80px;
    }

    /* Track starts at the container's left edge and bleeds right. Figma has
       the first card at x236 in a 2059 box whose left edge is the page's,
       which resolves to the 240 container gutter. */
    .customers__carousel {
        width: 100%;
        /* Figma cards at 199; title box 149 but 2 lines at lh80 render 160,
           so the real gap is 39, not 50. */
        margin-top: 39px;
    }

    /* 435 x 580, 45px gaps, alternating 80px vertical offset @ 123:6779 */
    .customer-card {
        width: 435px;
        max-width: none;
        min-height: 580px;
        /* The bottom inset is per-card: Figma keeps every card at 580 and
           tightens the space under the attribution when the quote runs long,
           rather than letting the card grow. */
        padding: 70px 33px var(--dpb, 60px);
        border-radius: 20px;            /* @ 123:6780 */
    }

    .customer-card--low {
        margin-top: 80px;               /* cards 2 and 4 sit 80 lower */
    }

    .customer-card__logo {
        width: var(--dw);
        height: var(--dh);
        margin-top: var(--dt, 0);
    }

    .customer-card__logobox {
        height: var(--db, 94px);        /* padding-top 70 -> quote 164 */
    }

    .customer-card__quote {
        font-size: 22px;                /* @ 123:6781 */
        line-height: 30px;
    }

    .customer-card__by {
        padding-top: 36px;              /* by sits at 464, 60 above the foot */
    }

    .customer-card__name {
        font-size: 18px;                /* @ 123:6782 */
        line-height: 28px;
    }

    .customer-card__meta {
        font-size: 17px;
        line-height: 28px;
    }

    /* Desktop pagination is at top 0 of the section — level with the heading,
       right-aligned to the container (1568 + 111.111 = 1679 vs the 1680 edge)
       — not below the cards. 111.111 = two 50px circles + an 11.111 gap. */
    .customers__nav {
        position: absolute;
        top: 120px;                     /* = the section's padding-top */
        left: 50%;
        width: min(var(--content-width), calc(100% - 80px));
        padding: 0;
        margin: 0;
        gap: 11.111px;
        transform: translateX(-50%);
    }

    .customers__arrow {
        width: 50px;
        height: 50px;
    }
}