/* Section: service cards.
   The section is exactly one viewport tall, so every inner size is budgeted
   against svh: the header and CTA take what they need, the card grid absorbs
   whatever is left, and the cards clip instead of pushing past the viewport. */

.home-services {
    --services-cols: 4;
    /* The nav pill floats over every section, so the top pad has to clear it. */
    --services-nav: clamp(4rem, 13svh, 6.75rem);
    --services-pad: clamp(1rem, 4svh, 4rem);
    --services-gap: clamp(0.75rem, 2.6svh, 3.5rem);
    --services-card-pad: clamp(0.85rem, 3.4svh, 3.5rem);
    --services-icon: clamp(26px, 4.6svh, 48px);
    --services-grid-max: 26rem;
    --services-desc-lines: 6;

    display: flex;
    align-items: center;
    padding: var(--services-nav) 0 var(--services-pad);
    background: var(--color-primary);
    color: var(--color-white);
    height: 100vh;
    height: 100svh;
}

.home-services > .container {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.home-services__header {
    text-align: center;
    max-width: 962px;
    min-width: 0;
    margin: 0 auto var(--services-gap);
}

.home-services__title {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, min(4vw, 5.2svh), var(--text-h2));
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: 0;
    margin: 0 0 clamp(0.25rem, 0.8svh, 0.5rem);
}

.home-services__title em {
    font-style: italic;
}

.home-services__desc {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: clamp(0.85rem, min(1.6vw, 2.2svh), var(--text-title5));
    line-height: var(--lh-title5);
    letter-spacing: 0;
    margin: 0 auto;
    max-width: 949px;
}

.home-services__grid {
    display: grid;
    grid-template-columns: repeat(var(--services-cols), minmax(0, 1fr));
    /* Rows split the space they're given instead of sizing to their content —
       without this the cards keep their natural height and spill out. */
    grid-auto-rows: minmax(0, 1fr);
    align-self: center;
    gap: var(--grid-gap);
    width: 100%;
    min-height: 0;
    /* Cards stretch into the leftover row, but only so far — on a tall screen
       an uncapped grid would blow the cards up to half the viewport. */
    max-height: min(100%, var(--services-grid-max));
    margin-bottom: var(--services-gap);
}

.service-card {
    position: relative;
    height: 100%;
    min-height: 0;
    background: var(--color-primary);
    border: 1px solid var(--color-soft-purple);
    border-radius: 12px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 2.2svh, 2rem);
    overflow: hidden;
    padding: var(--services-card-pad) clamp(0.75rem, 1.6vw, 1.5rem) calc(var(--services-card-pad) * 1.4);
    color: var(--color-white);
    text-align: center;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
    border-color: var(--color-secondary);
    box-shadow: inset 0 -96px 88px -72px rgba(255, 216, 97, 0.78);
}

.service-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--services-icon);
    height: var(--services-icon);
    flex-shrink: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-accent-01);
}

.service-card__icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.3rem, 1.4svh, 1rem);
    width: 100%;
    min-height: 0;
}

.service-card__title {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(0.95rem, min(1.7vw, 2.4svh), var(--text-title4));
    font-weight: var(--fw-bold);
    line-height: var(--lh-title4);
    letter-spacing: 0;
    margin: 0;
}

.service-card__desc {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: clamp(0.7rem, min(1.15vw, 1.8svh), var(--text-copy));
    line-height: var(--lh-copy);
    margin: 0;
    min-height: 0;
    max-width: 274px;
    /* A card that runs out of room truncates on a line boundary rather than
       showing half a line of text through the clip. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--services-desc-lines);
    line-clamp: var(--services-desc-lines);
    overflow: hidden;
}

.home-services__cta {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    min-height: 0;
}

.home-services__cta-pattern {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    /* Sized so the section's bottom edge falls where the mask has already
       faded out — any bigger and the halo gets a hard horizontal cut. The
       room below its centre is half the button plus the section's bottom pad. */
    width: min(522px, 92vw, calc(10svh + 56px));
    height: min(522px, 92vw, calc(10svh + 56px));
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.65;
    object-fit: contain;
    mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0 48%, transparent 76%);
}

.home-services__button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(2.75rem, 6.4svh, 3.5rem);
    min-width: min(277px, 100%);
    padding: 0.5rem clamp(1rem, 2vw, 1.5rem);
    border-radius: 999px;
    border: 1px solid var(--color-accent-01);
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: clamp(0.9rem, min(1.3vw, 1.9svh), var(--text-title6));
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
}

@media (max-width: 1024px) {
    .home-services {
        --services-cols: 2;
        --services-grid-max: 46rem;
        --services-desc-lines: 5;
    }
}

@media (max-width: 680px) {
    /* Four stacked cards can't fit a phone viewport as boxes, so the card
       turns on its side — icon beside the copy — and all four still show. */
    .home-services {
        --services-cols: 1;
        --services-grid-max: 100%;
        --services-card-pad: clamp(0.5rem, 1.5svh, 1rem);
        --services-icon: clamp(24px, 4svh, 40px);
        --services-desc-lines: 3;
    }

    /* On a phone the width-based step of the desktop clamp bottoms out, so the
       title lands on its 1.5rem floor and reads small against the cards. Drive
       it from vw here instead, capped so it still costs the grid only a line. */
    .home-services__title {
        font-size: clamp(1.75rem, 7.4vw, 2.5rem);
    }

    .home-services__grid {
        gap: clamp(0.35rem, 1.1svh, 0.75rem);
    }

    .service-card {
        flex-direction: row;
        align-items: center;
        gap: clamp(0.6rem, 3vw, 1rem);
        padding: var(--services-card-pad) clamp(0.75rem, 3vw, 1rem);
        text-align: left;
    }

    .service-card__content {
        align-items: flex-start;
    }

    .service-card__desc {
        max-width: none;
    }

    .home-services__cta {
        flex-direction: column;
        gap: 1rem;
    }

    .home-services__button {
        width: 100%;
    }
}

/* A phone with little height to spare gives up the section's own spacing
   before it takes anything away from the cards. */
@media (max-width: 680px) and (max-height: 720px) {
    .home-services {
        --services-nav: clamp(3.5rem, 12svh, 6.75rem);
        --services-gap: clamp(0.5rem, 1.6svh, 3.5rem);
        --services-card-pad: clamp(0.45rem, 1.3svh, 1rem);
    }

    .home-services__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

/* Below this there is no room left for a third line of card copy. */
@media (max-width: 680px) and (max-height: 660px) {
    .home-services {
        --services-desc-lines: 2;
    }
}

/* Short and wide — a landscape phone or a squat desktop window. Width is the
   plentiful axis there, so the cards go back to a single row of four. */
@media (max-height: 640px) and (min-width: 700px) {
    .home-services {
        --services-cols: 4;
        --services-grid-max: 100%;
        --services-desc-lines: 3;
    }
}

.home-services.is-grid-migrated > .container.grid > .home-services__header,
.home-services.is-grid-migrated > .container.grid > .home-services__cta {
    grid-column: 2 / 12;
}

/* Three rows, all sized to their content and centred as a block: on a tall
   screen the spare height sits above and below the group rather than opening
   up between the header, the cards and the CTA. The card row's max-content cap
   is what it grows *up to* — on a short screen there is less free space than
   that and the row simply takes what is left, so the cards clip on a line
   boundary instead of pushing the section past the viewport. */
.home-services.is-grid-migrated > .container.grid {
    grid-template-rows: auto minmax(0, max-content) auto;
    align-content: center;
    row-gap: var(--space-xl);
    height: 100%;
    min-height: 0;
}

.home-services.is-grid-migrated .home-services__header,
.home-services.is-grid-migrated .home-services__grid {
    margin-bottom: 0;
}

.home-services.is-grid-migrated .home-services__cta {
    min-height: 0;
}

.home-services.is-grid-migrated > .container.grid > .home-services__header {
    grid-row: 1;
}

.home-services.is-grid-migrated > .container.grid > .home-services__grid {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: stretch;
}

.home-services.is-grid-migrated > .container.grid > .home-services__cta {
    grid-row: 3;
}

@media (max-width: 1024px) {
    .home-services.is-grid-migrated > .container.grid > .home-services__header,
    .home-services.is-grid-migrated > .container.grid > .home-services__cta {
        grid-column: 1 / -1;
    }
}

.section-service-cards {
    overflow: hidden;
}