/* ============================================================
   Home page — page-level CSS (T1)
   Figma: Homepage desktop 1407:99019, tablet 1407:99484, mobile 1407:99273.

   The section classes carry their own look and gutters; this file holds
   the page's vertical rhythm (the neighbouring-background rule: --space-
   section when the neighbour's background matches, --space-section-alt
   when it differs), plus the two sections only this template uses: the
   "How Coplus supports you" cards and the awards strip (moved here from
   classes/card-grid/ at B3, single-template rule).
   ============================================================ */

/* ── Section spacing ──────────────────────────────────────── */
/* Services: white after the white hero (40 above, as the frame), then 80 to the
   persona band. Tablet and mobile are 32 / 48 (the frame's 32 is off the 24 / 48 token). */
.home__section--services {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section-alt);
}
@media (max-width: 1024px) {
    .home__section--services { padding-top: 32px; }
}

.home-services {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.home-services__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Head: centred, 10 apart; 30 before the cards ─────────── */
.home-services__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
    text-align: center;
}
.home-services__head .eyebrow { margin: 0; }

/* H2 is Title Case in the Figma */
.home-services__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
}

/* ── Grid: three 385 x 386 cards, 24 apart ────────────────── */
.home-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-services__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 385 / 386;
    padding: 24px;
    border: 1px solid var(--color-border-card);
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow var(--transition-base);
}
/* No hover is designed (Alex, round 4): a soft lift using the Action effect.
   The transition is cut to nothing under prefers-reduced-motion (global.css). */
.home-services__card:is(:hover, :focus-within) { box-shadow: var(--shadow-action); }

.home-services__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-services__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gradient-card-overlay);
    pointer-events: none;
}

/* ── Label, title and action ──────────────────────────────── */
.home-services__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.home-services__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.home-services__label {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-overline);
    line-height: var(--leading-overline);
    text-transform: uppercase;
    color: var(--color-text-inverse-muted);
}
.home-services__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text-inverse);
}

/* The arrow: the outline button's 60 x 44 pill. Its hit area is the whole
   card, so there is one 386px target and no nested link. */
.home-services__action { position: static; flex-shrink: 0; }
.home-services__action::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}
.home-services__action:focus-visible { outline: none; }
.home-services__action:focus-visible::after {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}
.home-services__card:hover .home-services__action { opacity: 0.9; }   /* no hover is designed: the button's own */

/* ── Tablet (1407:99514): three across, 213 x 228 ─────────── */
@media (max-width: 1024px) {
    .home-services__head { margin-bottom: 10px; }
    .home-services__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        color: var(--color-secondary);   /* tablet and mobile frames: Secondary */
    }
    .home-services__head .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }

    .home-services__grid { gap: 12px; }
    .home-services__card {
        aspect-ratio: 213 / 228;
        padding: 16px;
    }
    .home-services__row { gap: 8px; }
    .home-services__label {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
    .home-services__title {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .home-services__action { width: 41px; height: 30px; }
    .home-services__action .btn__icon { width: 14px; height: 14px; }
}

/* ── Mobile (1407:99297): stacked, 353 x 200 ──────────────── */
@media (max-width: 767px) {
    .home-services__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .home-services__card {
        aspect-ratio: 353 / 200;
        padding: 24px;
    }
    .home-services__row { gap: 16px; }
    .home-services__action { width: 60px; height: 44px; }
    .home-services__action .btn__icon { width: 12.5px; height: 12.5px; }
}


/* Persona cards and "Trusted by" share one Primary Accent band. The gallery class
   already reserves the photos' pop-out space above and below the cards (its box is
   423 tall for a 377 card), so on desktop the frame's 80 above and 20 between come
   to 59 above and nothing below. The strip then takes the colour and pads 80 below.
   Tablet and mobile pad 48 above. */
.home__section--personas {
    padding-top: 59px;
    padding-bottom: 0;
}
.home__section--logos {
    background: var(--color-surface-tint);
    padding-top: 0;
    padding-bottom: var(--space-section-alt);
}
@media (max-width: 1024px) {
    .home__section--personas { padding-top: var(--space-section-alt); }
}

/* Why partners choose Coplus: navy after the tint band; the photo bleeds off the left edge */
.home__section--why {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}

/* Awards: 64 above and below on desktop (the frame's own figure, off the token),
   48 on tablet and mobile */
.home__section--awards {
    padding-top: 64px;
    padding-bottom: 64px;
}
@media (max-width: 1024px) {
    .home__section--awards { padding-top: var(--space-section-alt); padding-bottom: var(--space-section-alt); }
}

/* The AI panel pads itself, and runs full width */
.home__section--ai { padding: 0; }

/* Insights: white after the AI band, white before the navy form band */
.home__section--insights {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}

/* ── Awards ───────────────────────────────────────────────────
   Desktop (1407:99165): four 281 x 264 cards, 24 apart, in the
   1204 column. Tablet (1407:99657) and mobile (1407:99400): the
   same 281-wide cards in a swipe row, the next one peeking in.
   Card fill is Surface Tile (#cee9eb, flagged: not a Figma variable).
   ───────────────────────────────────────────────────────────── */
.home-awards {
    background: var(--color-surface-tint);   /* "Primary Accent" */
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.home-awards__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}
.home-awards__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.home-awards__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    background: var(--color-surface-tile);
    border-radius: 12px;
}
/* The logo box is 127 tall; the supplied image carries its own white or black ground */
.home-awards__logo {
    height: 127px;
    border-radius: 8px;
    overflow: hidden;
}
.home-awards__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.home-awards__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Info, then H4 (the frames keep both at every width) */
.home-awards__award {
    margin: 0;
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
    color: var(--color-text);
}
.home-awards__result {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--color-text);
}

/* Desktop: Swiper isn't running, so its flex wrapper and full-width slides give way to the grid */
.home-awards__scroller { overflow: visible; }
.home-awards__list.swiper-wrapper { display: grid; box-sizing: border-box; }
.home-awards__card.swiper-slide { width: auto; height: auto; flex-shrink: 1; }

@media (max-width: 1024px) {
    /* The row bleeds off the right edge: the carousel runs out to the page edge and
       Swiper's slide offsets put the first card back on the gutter */
    .home-awards { padding-left: 0; padding-right: 0; }
    .home-awards__scroller { overflow: hidden; }
    .home-awards__scroller:focus-visible {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: -2px;
    }
    .home-awards__list.swiper-wrapper {
        display: flex;
        gap: 24px;   /* before Swiper starts; it spaces the cards itself */
    }
    .home-awards__scroller.swiper-initialized .home-awards__list { gap: 0; }
    .home-awards__card.swiper-slide {
        flex: 0 0 281px;
        width: 281px;
        height: auto;
    }
}