/*
 * Marden Property 2026 — страница «Услуги» (верхний уровень).
 *
 * Макета на страницу нет: структура и тексты взяты из брифа (страница 2),
 * компоненты — общие (.m-card, .m-icon-box, .m-field, .m-btn), здесь только
 * специфика этой страницы. Цвета и размеры — исключительно из токенов core.css.
 * Gold допущен двумя мелкими акцентами: overline шапки и overline финального CTA.
 */

/* ================= Блок 1 — Заголовок и вступление ================= */

.m-svcs-head {
    display: flex;
    align-items: center;
    /* По брифу ~40vh, но с границами: на высоких экранах шапка не должна
       выталкивать сетку услуг за первый экран. */
    min-height: clamp(300px, 40vh, 440px);
    border-bottom: 1px solid var(--color-border);
}

.m-svcs-head__inner {
    max-width: 860px;
}

.m-svcs-head__overline {
    margin-bottom: var(--space-200);
}

.m-svcs-head__title {
    color: var(--color-ui-primary);
}

.m-svcs-head__lead {
    max-width: 720px;
    margin-top: var(--space-300);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}

@media (max-width: 767px) {
    .m-svcs-head {
        /* На мобильном высота — по контенту: фиксированные vh здесь только мешают. */
        min-height: 0;
        padding: var(--space-600) 0;
    }
}

/* ================= Блок 2 — Сетка из пяти услуг ================= */

/*
 * Сетка 3+2: шесть колонок, первые три карточки по две колонки,
 * последние две — по три. Так нижний ряд заполнен целиком, а не висит
 * пустым «хвостом» справа.
 */
.m-svcs-grid__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gutter);
}

.m-svcs-grid__card {
    grid-column: span 2;
}

.m-svcs-grid__card:nth-child(4),
.m-svcs-grid__card:nth-child(5) {
    grid-column: span 3;
}

.m-svcs-grid__media {
    /* Соотношение карточки услуги по дизайн-системе — 16:10. */
    aspect-ratio: 16 / 10;
}

/* У широких карточек нижнего ряда та же высота фото, что и у верхнего:
   при ширине в полтора раза больше 16:10 давало бы полосу заметно выше,
   и ряды выглядели бы как два разных блока. Кадр обрезается по центру. */
@media (min-width: 1024px) {
    .m-svcs-grid__card:nth-child(4) .m-svcs-grid__media,
    .m-svcs-grid__card:nth-child(5) .m-svcs-grid__media {
        aspect-ratio: 24 / 10;
    }
}

.m-svcs-grid__icon {
    position: absolute;
    top: var(--space-200);
    left: var(--space-200);
    z-index: 2;
}

.m-svcs-grid__body {
    gap: var(--space-100);
    padding: var(--space-300);
}

.m-svcs-grid__title {
    color: var(--color-ui-primary);
    font-weight: 700;
}

.m-svcs-grid__text {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}

/* Прижимаем ссылку-стрелку к низу: карточки в ряду одной высоты
   независимо от длины описания. */
.m-svcs-grid__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-50);
    margin-top: auto;
    padding-top: var(--space-200);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: var(--color-text-link);
}

.m-svcs-grid__arrow {
    transition: transform var(--t-hover);
}

.m-svcs-grid__card:hover .m-svcs-grid__arrow {
    transform: translateX(4px);
}

@media (max-width: 1023px) {
    .m-svcs-grid__list {
        grid-template-columns: 1fr 1fr;
    }

    .m-svcs-grid__card,
    .m-svcs-grid__card:nth-child(4),
    .m-svcs-grid__card:nth-child(5) {
        grid-column: span 1;
    }
}

@media (max-width: 767px) {
    .m-svcs-grid__list {
        grid-template-columns: 1fr;
        gap: var(--space-250);
    }

    .m-svcs-grid__body {
        padding: var(--space-250);
    }
}

/* ================= Блок 3 — Финальный CTA с формой ================= */

.m-svcs-cta {
    border-top: 1px solid var(--color-border);
}

.m-svcs-cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-800);
    align-items: start;
}

.m-svcs-cta__overline {
    margin-bottom: var(--space-200);
}

.m-svcs-cta__text {
    max-width: 420px;
    margin-top: 18px;
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}

.m-svcs-cta__card {
    padding: var(--space-400);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    box-shadow: var(--shadow-sm);
}

.m-svcs-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

/* Поле задачи: те же обводка, радиус и фокус, что у .m-input, но высота
   растёт под текст, а не фиксирована в 48px. */
.m-svcs-form__textarea {
    height: auto;
    min-height: 120px;
    padding: var(--space-150) var(--space-200);
    line-height: var(--lh-body);
    resize: vertical;
}

.m-svcs-form__submit {
    margin-top: var(--space-100);
    width: 100%;
    /* Длинная подпись кнопки на узком экране переносится, а не рвёт вёрстку. */
    height: auto;
    min-height: var(--control-h-cta);
    padding: var(--space-150) var(--space-250);
    white-space: normal;
    line-height: var(--lh-snug);
}

.m-svcs-form__message,
.m-svcs-form__note {
    margin-top: calc(var(--space-100) * -1);
}

.m-svcs-form__check {
    stroke: var(--c-success);
}

.m-svcs-form__success-title {
    margin-bottom: 10px;
    color: var(--color-ui-primary);
}

.m-svcs-form__success-text {
    font-size: 15px;
    line-height: var(--lh-body);
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {
    .m-svcs-form__submit {
        width: auto;
        min-width: 200px;
        align-self: flex-start;
    }
}

@media (max-width: 1023px) {
    .m-svcs-cta__grid {
        grid-template-columns: 1fr;
        gap: var(--space-400);
    }

    .m-svcs-cta__text {
        max-width: 640px;
    }
}

@media (max-width: 767px) {
    .m-svcs-cta__card {
        padding: var(--space-250);
    }
}