/* ==========================================================================
   cb-services-grid.css — Custom Build: Services / What We Do
   Figma: 4547:17644 — 1440×1468, bg:#e6dfd7
   padV:80/80, padH:60/60

   2-column mosaic layout:
     LEFT  (490px): header (eyebrow + heading, 315px) → portrait card (4:5)
     RIGHT (660px): landscape card 1 (3:2) + landscape card 2 (3:2)
     Column gap: 170px
   ========================================================================== */

.cb-services-grid {
    background-color: var(--color-sand, #e6dfd7); /* Figma: #E6DFD7 */
    padding-block: 80px;
    padding-inline: var(--gutter); /* 60px at ≥1200px */
}

/* ── 2-column mosaic grid ──────────────────────────────────────────────────── */
.cb-services-grid__inner {
    max-width: var(--max-width); /* 1320px */
    margin-inline: auto;
    display: grid;
    grid-template-columns: 490px 1fr; /* left: 490px, right: fills to 660px */
    column-gap: 170px;               /* Figma: 1320 - 490 - 660 = 170px */
    align-items: start;
}

/* LEFT column: header stacked above portrait card */
.cb-services-grid__left {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Figma: ~84px between header bottom and portrait card top */
}

/* RIGHT column: two landscape cards stacked */
.cb-services-grid__right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Header: eyebrow + heading ────────────────────────────────────────────── */
.cb-services-grid__header {
    display: flex;
    flex-direction: column;
    gap: 28px; /* Figma: Section Container gap:28 */
    max-width: 315px; /* Figma: Section Container width:315px */
}

/* Eyebrow — Geist 500, 14px, uppercase, lh:76.9% */
.cb-services-grid__eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;  /* 14px */
    font-weight: 500;
    line-height: 0.769;   /* Figma: 76.9% */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Heading — Freight Neo 400, 40px, lh:91.6% */
.cb-services-grid__heading {
    font-family: var(--font-heading);
    font-size: 2.5rem;    /* 40px */
    font-weight: 400;
    line-height: 0.916;   /* Figma: 91.6% */
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* ── Card shared styles ───────────────────────────────────────────────────── */
.cb-services-grid__card {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Figma: card gap:32 between image and content */
}

/* Image wrapper */
.cb-services-grid__image-wrap {
    margin: 0;
    overflow: hidden;
    width: 100%;
}

/* Portrait card (3rd) — 4:5 ratio, Figma: 490×613 */
.cb-services-grid__card--portrait .cb-services-grid__image-wrap {
    aspect-ratio: 4 / 5;
}

/* Landscape cards (1st + 2nd) — 3:2 ratio, Figma: 660×440 */
.cb-services-grid__card--landscape .cb-services-grid__image-wrap {
    aspect-ratio: 3 / 2;
}

.cb-services-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.cb-services-grid__card:hover .cb-services-grid__image {
    transform: scale(1.03);
}

/* ── Card body — Content Container gap:30 ─────────────────────────────────── */
.cb-services-grid__card-body {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Figma: Content Container gap:30 between text group and link */
}

/* Text group — Text Container gap:12 */
.cb-services-grid__card-text {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Figma: Text Container gap:12 */
}

/* Card title — Geist 500, 24px, lh:84.6% */
.cb-services-grid__card-title {
    font-family: var(--font-body);
    font-size: 1.5rem;    /* 24px */
    font-weight: 500;
    line-height: 0.846;   /* Figma: 84.6% */
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Card description — Geist 300, 16px, lh:106.9% */
.cb-services-grid__card-description {
    font-family: var(--font-body);
    font-size: 1rem;      /* 16px */
    font-weight: 300;
    line-height: 1.069;   /* Figma: 106.9% */
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* CTA link — underline style */
.cb-services-grid__card-link {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-dark, #1c1c1c);
    text-decoration: none;
    border-bottom: 1px solid var(--color-dark, #1c1c1c);
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}

.cb-services-grid__card-link:hover {
    opacity: 0.65;
}

/* ── Tablet (≤1100px) — collapse to single column ─────────────────────────── */
@media (max-width: 1100px) {
    .cb-services-grid {
        padding-inline: 40px;
    }

    .cb-services-grid__inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 60px;
    }

    .cb-services-grid__left {
        gap: 40px;
    }

    .cb-services-grid__header {
        max-width: 100%;
    }

    .cb-services-grid__right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ── Mobile (≤639px) — horizontal scroll track ─────────────────────────────── */
@media (max-width: 639px) {
    .cb-services-grid {
        padding-block: 80px;
        padding-inline: 0;
    }

    .cb-services-grid__inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 40px;
    }

    .cb-services-grid__left {
        gap: 40px;
        padding-inline: 16px;
    }

    .cb-services-grid__header {
        max-width: 100%;
    }

    .cb-services-grid__heading {
        font-size: 2rem;
        line-height: 1;
    }

    /* Portrait card stays in left panel */
    .cb-services-grid__card--portrait .cb-services-grid__image-wrap {
        aspect-ratio: 4 / 5;
    }

    /* Right column: horizontal scroll track */
    .cb-services-grid__right {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 20px;
        padding-inline: 16px;
        padding-bottom: 4px;
    }

    .cb-services-grid__right::-webkit-scrollbar {
        display: none;
    }

    /* Landscape cards: fixed 300px width, snap on scroll */
    .cb-services-grid__card--landscape {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }

    .cb-services-grid__card--landscape .cb-services-grid__image-wrap {
        aspect-ratio: 3 / 2;
    }
}