/* ==========================================================================
   Block: Services Section — Figma node 4484:18092
   Background: #e6dfd7 (White Coffee)
   Desktop: 2-col — LEFT: section header (label+heading) above primary portrait card
                     RIGHT: two landscape cards stacked
   Mobile (5224:19193): stacked header + horizontal scroll track
   ========================================================================== */

.services-section {
    background-color: var(--color-sand);   /* #e6dfd7 — Figma White Coffee */
    padding: 89px 60px;
}

/* ── Outer wrapper — CSS grid on desktop so header sits in left col ──────── */
/*    Left col (5fr): header row 1 + primary card row 2                      */
/*    Right col (7fr): secondary cards spanning rows 1–2                      */
.services-section__outer {
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 10vw, 170px);
    row-gap: 40px;
    max-width: var(--max-width);
    margin-inline: auto;
}

/* ── Section header — left col, row 1 — label + heading + nav ────────────── */
.services-section__header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: start;
}

.services-section__header-text {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Nav arrows — desktop: hidden; mobile: shown below heading */
.services-section__nav {
    display: none;
    gap: 6px;
    align-items: center;
}

.services-section .arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid var(--color-dark);
    border-radius: 1000px;
    background-color: transparent;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.services-section .arrow-btn:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

.services-section .arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.services-section .arrow-btn svg {
    display: block;
    flex-shrink: 0;
}

.services-section__label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;                      /* Geist Medium */
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-dark);
}

.services-section__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.5rem); /* 40px at desktop */
    font-weight: 400;                      /* Freight Neo Book */
    line-height: 1.15;
    color: var(--color-dark);
}

/* ── Card container — flattened into outer grid on desktop ───────────────── */
/*    display:contents makes col--primary / col--secondary direct grid items */
.services-section__cards {
    display: contents;
}

/* Left column: primary portrait card — col 1, row 2 */
.services-section__col--primary {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-self: start;
}

/* Right column: secondary cards stacked — col 2, spans both rows */
.services-section__col--secondary {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 70px;                             /* space between right cards */
    align-self: start;
}

/* ── Service Card ─────────────────────────────────────────────────────────── */
.service-card {
    display: flex;
    flex-direction: column;
    gap: 32px;                             /* Figma: gap-[32px] image → body */
}

/* Image: portrait 4:5 for primary (left column) card */
.services-section__col--primary .service-card__image-wrap {
    aspect-ratio: 4 / 5;
}

/* Image: landscape 3:2 for secondary (right column) cards */
.services-section__col--secondary .service-card__image-wrap {
    aspect-ratio: 3 / 2;
}

.service-card__image-wrap {
    overflow: hidden;
    width: 100%;
}

.service-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.service-card:hover .service-card__image {
    transform: scale(1.03);
}

/* Card body */
.service-card__body {
    display: flex;
    flex-direction: column;
    gap: 30px;         
    max-width:100%;                    /* Figma: gap-[30px] text → buttons */
}

.service-card__text {
    display: flex;
    flex-direction: column;
    gap: 12px;                             /* Figma: gap-[12px] title → desc */
}

.service-card__title {
    font-family: var(--font-body);
    font-size: 24px;                       /* Figma: text-[24px] Geist Medium */
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-dark);
}

.service-card__description {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;                      /* Geist Light */
    line-height: 1.39;
    color: var(--color-dark);
}

/* ── CTA buttons ──────────────────────────────────────────────────────────── */
.service-card__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.service-card__ctas .btn {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
    font-size: 16px;
    font-weight: 300;
    padding: 16px 25px;
    letter-spacing: 0.16px;
}

.service-card__ctas .btn:hover {
    background-color: transparent;
    color: var(--color-dark);
}

/* ── Responsive — 1100px ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .services-section {
        padding: 60px 40px;
    }

    /* Tighten outer grid columns and gap */
    .services-section__outer {
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }

    .services-section__col--secondary {
        gap: 40px;
    }
}

/* ── Responsive — 768px mobile: horizontal scroll carousel ───────────────── */
@media (max-width: 768px) {
    /* Section: py-80, no inline padding (cards bleed to edges) */
    .services-section {
        padding: 80px 0;
    }

    /* Outer: revert desktop grid → flex-col; add inline padding for header */
    .services-section__outer {
        display: flex;
        flex-direction: column;
        gap: 32px;
        max-width: none;
        padding-inline: 16px;
    }

    /* Header: back to normal block flow — stacked column label → H2 → arrows */
    .services-section__header {
        grid-column: unset;
        grid-row: unset;
        gap: 24px;
    }

    .services-section__heading {
        font-size: 32px;
        line-height: 1;
    }

    /* Show nav arrows below heading on mobile */
    .services-section__nav {
        display: flex;
    }

    /* Card container: restore as horizontal scroll track */
    .services-section__cards {
        display: flex;                     /* override desktop display:contents */
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 30px;                         /* Figma: gap-[30px] between cards */
        /* Bleed past the 16px outer padding so cards reach screen edges */
        /* margin-inline: -16px;
        padding-inline: 16px; */
        padding-bottom: 4px;              /* prevent scrollbar clipping */
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .services-section__cards::-webkit-scrollbar {
        display: none;
    }

    /* Flatten column wrappers — their children become flex items of the track */
    .services-section__col--primary,
    .services-section__col--secondary {
        display: contents;
        grid-column: unset;
        grid-row: unset;
    }

    /* Each card: full track width — one slide per view, no adjacent peek */
    .service-card {
        box-sizing: border-box;
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        gap: 20px;
    }

    /*
     * Track uses negative margin + full-width slides so images can bleed edge-to-edge.
     * flex-basis 100% does not add text gutter — pad the body so title/copy/CTAs align
     * with the section header (16px) instead of sitting flush to the viewport.
     */
    .service-card__body {
        padding-inline: 0px;
    }

    /* All cards use 3:2 image on mobile */
    .service-card .service-card__image-wrap {
        aspect-ratio: 3 / 2;
    }

    /* CTAs: two equal columns (gap handled by grid, not 50%+50% overflow) */
    .service-card__ctas {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   12px;
        align-items:           stretch;
    }

    .service-card__ctas .btn {
        width:           100%;
        justify-content: center;
        text-align:      center;
    }

    /* Single button: full width */
    .service-card__ctas:has(> .btn:only-child) {
        grid-template-columns: 1fr;
    }
}