/* ============================================================
   Why Meadan — Services Mosaic
   Figma: node 4867-31191 | 1440×2028 | bg #E6DFD7
   Left col: 447px, 2 portrait cards, 170px top offset
   Right col: 650px, 3 landscape cards, starts at top
   Col gap: 223px | Card gap: 120px
   ============================================================ */

.wm-services {
    background-color: #E6DFD7;
    padding: 60px;
    box-sizing: border-box;
}

/* Inner: 447 + 223 + 650 = 1320px */
.wm-services__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 447px 650px;
    column-gap: 223px;
    align-items: start;
}

/* ── Columns ── */
.wm-services__col {
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.wm-services__col--left {
    padding-top: 170px;
}

/* ── Cards ── */
.wm-services__card-media {
    overflow: hidden;
    width: 100%;
}

.wm-services__card-img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wm-services__card:hover .wm-services__card-img {
    transform: scale(1.03);
}

/* Portrait: 447×558.75 */
.wm-services__card--portrait .wm-services__card-img {
    aspect-ratio: 447 / 558.75;
}

/* Landscape: 650×433.33 */
.wm-services__card--landscape .wm-services__card-img {
    aspect-ratio: 650 / 433.33;
}

/* Card body: 32px gap below image */
.wm-services__card-body {
    margin-top: 32px;
}

/* Right col text constrained to 490px */
.wm-services__card--landscape .wm-services__card-body {
    max-width: 490px;
}

/* Left col description (same style as right col) */
.wm-services__card--portrait .wm-services__card-desc {
    max-width: 447px;
}

/* ── Typography ── */
.wm-services__card-title {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #1C1C1C;
    margin: 0;
}

.wm-services__card-desc {
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.39;
    letter-spacing: 0;
    color: #1C1C1C;
    margin: 8px 0 0;
}

/* ── Mobile ── */
@media (max-width: 1200px) {
    .wm-services {
        padding: 60px 40px;
    }
    .wm-services__inner {
        grid-template-columns: 1fr 1.2fr;
        column-gap: 40px;
    }
}

/* ── Mobile — 390, padding 80px top/bottom 16px sides, inner 358×2561 ── */
@media (max-width: 768px) {
    .wm-services {
        padding: 80px 16px;
    }

    /* Stack cols vertically: left col (portrait ×2) then right col (landscape ×3) */
    .wm-services__inner {
        display: flex;
        flex-direction: column;
        gap: 40px; /* gap between left col block and right col block */
    }

    .wm-services__col {
        gap: 40px; /* gap between cards within each col */
    }

    .wm-services__col--left {
        padding-top: 0; /* remove desktop offset */
    }

    /* Portrait cards (left col): 358×447.5 → 4:5 */
    .wm-services__card--portrait .wm-services__card-img {
        aspect-ratio: 358 / 447.5;
    }

    /* Landscape cards (right col): 358×238.67 → 3:2 */
    .wm-services__card--landscape .wm-services__card-img {
        aspect-ratio: 3 / 2;
    }

    /* Card body: flex col, 30px gap between title and description */
    .wm-services__card-body {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-top: 32px;
    }

    /* Expand right col body to full card width */
    .wm-services__card--landscape .wm-services__card-body {
        max-width: 100%;
    }

    /* Title stays 24px on mobile */
    .wm-services__card-title {
        font-size: 24px;
        line-height: 1.1;
    }
}