/*
 * Service grid: shared by the home page teaser (sections/home-services.php,
 * which also renders the title, the consultation offer and the "all
 * services" link) and the full list (sections/services-list.php, grid
 * only) - same dual-use pattern as .courses in 05-courses-grid.css.
 *
 * The card is deliberately identical to .course-card: the same .lift-card
 * skin, the same rounded photo frame, the same circular red arrow link and
 * type scale - "courses" and "services" read as one family. The home
 * teaser no longer shrinks it (the old .services--compact squeezed four
 * cards into a row at 0.94vw titles, which fell out of the site's scale);
 * three services fill the row at full size.
 *
 * The consultation offer is a full-width panel under the grid, built from
 * the same pieces as the rest of the page: white shadow surface plus the
 * hero's red primary CTA button.
 */

.services {
    padding: 3vw 0 4.5vw;
}

.services__title {
    font-size: 1.88vw;
    margin: 0 0 2.08vw;
}

.services-grid {
    --bs-gutter-x: 1.67vw;
    --bs-gutter-y: 1.67vw;
    margin: 0 0 2.08vw;
}

.services__all-link {
    display: inline-block;
    font-weight: 700;
    color: var(--color-accent);
}

.service-card {
    height: 100%;
    background: var(--color-surface);
}

.service-card__image-frame {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
}

.service-card__image {
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.service-card__body {
    padding: 1.25vw;
}

.service-card__title {
    font-size: 1.15vw;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.63vw;
}

.service-card__description {
    color: var(--color-text-muted);
    margin: 0 0 0.83vw;
}

.service-card__footer {
    padding-top: 0.83vw;
}

.service-card__link {
    width: 2.19vw;
    height: 2.19vw;
    background: var(--color-cta);
    color: #fff;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.service-card__link:hover,
.service-card__link:focus-visible {
    background: var(--color-cta-dark);
    color: #fff;
}

.service-card__link-icon {
    width: 1.04vw;
    height: 1.04vw;
    transition: transform 0.2s ease;
}

.service-card:hover .service-card__link-icon {
    transform: translateX(0.21vw);
}

.services__offer {
    gap: 2.08vw;
    padding: 1.67vw 2.08vw;
    margin: 0 0 2.08vw;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.services__offer-content {
    min-width: 0;
}

.services__offer-title {
    font-size: 1.25vw;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.42vw;
}

.services__offer-text {
    color: var(--color-text-muted);
    margin: 0;
}

.services__offer-cta {
    flex: 0 0 auto;
    padding: 1.04vw 2.19vw;
    background: var(--color-cta);
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0.63vw 1.25vw rgba(230, 57, 70, 0.28);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.services__offer-cta:hover,
.services__offer-cta:focus-visible {
    background: var(--color-cta-dark);
    transform: translateY(-0.1vw);
    box-shadow: 0 0.83vw 1.46vw rgba(230, 57, 70, 0.34);
}

@media (prefers-reduced-motion: reduce) {
    .service-card__image,
    .service-card__link-icon,
    .services__offer-cta {
        transition: none;
    }

    .service-card:hover .service-card__image,
    .service-card:hover .service-card__link-icon,
    .services__offer-cta:hover {
        transform: none;
    }
}

@media only screen and (max-width: 767.98px) {
    .services__title {
        font-size: 6.4vw;
        margin: 0 0 5.33vw;
    }

    .services {
        padding: 6vw 0 9vw;
    }

    .services-grid {
        --bs-gutter-x: 5.33vw;
        --bs-gutter-y: 5.33vw;
        margin: 0 0 5.33vw;
    }

    .service-card__body {
        padding: 5.33vw;
    }

    .service-card__title {
        font-size: 5.33vw;
    }

    .service-card__footer {
        padding-top: 3.2vw;
    }

    .service-card__link {
        width: 8.53vw;
        height: 8.53vw;
    }

    .service-card__link-icon {
        width: 4vw;
        height: 4vw;
    }

    .services__offer {
        flex-direction: column;
        align-items: stretch;
        gap: 5.33vw;
        padding: 5.33vw;
        margin: 0 0 5.33vw;
    }

    .services__offer-title {
        font-size: 5.33vw;
        margin: 0 0 2.13vw;
    }

    .services__offer-cta {
        padding: 4vw 0;
        font-size: 3.73vw;
    }
}