/*
 * Marden Property 2026 — страница услуги (шаблон для всех пяти услуг).
 * Значения взяты из макета design/Facility Management Marden/Facility Management.dc.html,
 * цвета и размеры — только из токенов core.css.
 * Gold на странице допущен единственным мелким акцентом — overline (hero и финальный CTA).
 * Параллакс не применяется: на странице есть форма.
 */

/* ================= Блок 1 — Hero ================= */

.m-svc-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* 60vh по брифу, но с границами: на очень высоких экранах hero не должен
       растягиваться на весь экран и уводить контент за первый экран. */
    min-height: clamp(420px, 60vh, 620px);
    overflow: hidden;
    background: var(--color-ui-primary);
    border-bottom: 1px solid var(--color-ui-secondary);
}

/* Фирменная текстура — она же фолбэк, если фото не загрузилось или его нет. */
.m-svc-hero__texture {
    position: absolute;
    inset: 0;
    background: var(--color-ui-primary) repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .035) 0 2px,
            transparent 2px 14px);
}

.m-svc-hero__media {
    position: absolute;
    inset: 0;
}

.m-svc-hero__media picture,
.m-svc-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.m-svc-hero__img {
    object-fit: cover;
    object-position: right center;
    filter: contrast(.9) brightness(1.04) saturate(.95);
}

.m-svc-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(16, 25, 42, .7) 0%,
            rgba(16, 25, 42, .5) 42%,
            rgba(16, 25, 42, .18) 100%);
}

.m-svc-hero__inner {
    position: relative;
    z-index: 1;
    padding-top: var(--space-800);
    padding-bottom: var(--space-800);
}

.m-svc-hero__content {
    max-width: 680px;
}

.m-svc-hero__overline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-200);
    font-size: var(--fs-overline);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-shadow: 0 1px 3px rgba(16, 25, 42, .4);
}

.m-svc-hero__dash {
    display: block;
    width: 24px;
    height: 1.5px;
    flex: none;
    background: var(--color-accent);
}

.m-svc-hero__title {
    margin-bottom: var(--space-300);
    color: var(--color-on-dark);
}

.m-svc-hero__lead {
    max-width: 520px;
    margin-bottom: var(--space-400);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, .8);
}

.m-svc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-200);
}

/* Hero без фото: чуть ниже, текстура держит настроение блока. */
.m-svc-hero--plain {
    min-height: 46vh;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .m-svc-hero {
        min-height: 50vh;
    }

    .m-svc-hero__img {
        object-position: 70% center;
    }
}

@media (max-width: 767px) {
    .m-svc-hero {
        min-height: 40vh;
    }

    .m-svc-hero--plain {
        min-height: 34vh;
    }

    .m-svc-hero__img {
        object-position: center;
    }

    .m-svc-hero__shade {
        background: rgba(16, 25, 42, .65);
    }

    .m-svc-hero__inner {
        padding-top: var(--space-500);
        padding-bottom: var(--space-500);
    }

    .m-svc-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-150);
    }

    /* Длинные подписи кнопок переносим: на 320px строка в одну линию не влезает. */
    .m-svc-hero__actions .m-btn {
        width: 100%;
        height: auto;
        min-height: var(--control-h-hero);
        padding: var(--space-150) var(--space-250);
        white-space: normal;
        line-height: var(--lh-snug);
    }
}

/* ================= Блок 2 — Для кого ================= */

.m-svc-audience__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.m-svc-card {
    display: flex;
    flex-direction: column;
    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);
    transition: transform var(--t-slide), box-shadow var(--t-slide), border-color var(--t-slide);
}

.m-svc-card:hover {
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.m-svc-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-250);
    border-radius: var(--radius-sm);
}

.m-svc-card__title {
    margin-bottom: var(--space-100);
    color: var(--color-ui-primary);
    font-weight: 700;
}

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

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

@media (max-width: 767px) {
    .m-svc-audience__grid {
        grid-template-columns: 1fr;
    }

    .m-svc-card {
        padding: var(--space-250);
    }
}

/* ================= Блок 3 — Что мы делаем ================= */

.m-svc-what__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-250) var(--space-500);
}

.m-svc-what__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: var(--space-300);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    transition: transform var(--t-slide), box-shadow var(--t-slide);
}

.m-svc-what__item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.m-svc-what__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
}

.m-svc-what__title {
    margin-bottom: var(--space-50);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    font-weight: 700;
    color: var(--color-ui-primary);
}

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

@media (max-width: 767px) {
    .m-svc-what__grid {
        grid-template-columns: 1fr;
    }

    .m-svc-what__item {
        padding: var(--space-250);
        gap: var(--space-200);
    }
}

/* ================= Блок 4 — Этапы ================= */

.m-svc-steps {
    --svc-step-size: 56px;
    --svc-step-gap: var(--gutter);
    --svc-step-line: 27px;
}

.m-svc-steps__track {
    position: relative;
}

/* Заполняемая полоса: позицию и ширину считает service.js по центрам кружков. */
.m-svc-steps__fill {
    position: absolute;
    top: var(--svc-step-line);
    left: 0;
    /* Выше серых отрезков между шагами, но ниже кружков. */
    z-index: 1;
    width: 0;
    height: 2px;
    background: var(--color-brand-primary);
    transition: width 900ms ease-out;
}

.m-svc-steps__list {
    display: flex;
    gap: var(--svc-step-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.m-svc-steps__item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Серая линия между шагами — от центра кружка к центру следующего. */
.m-svc-steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: var(--svc-step-line);
    left: 50%;
    z-index: 0;
    width: calc(100% + var(--svc-step-gap));
    height: 2px;
    background: var(--color-border);
}

.m-svc-steps__num {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--svc-step-size);
    height: var(--svc-step-size);
    flex: none;
    margin-bottom: var(--space-250);
    border: 2px solid var(--color-brand-primary);
    border-radius: 50%;
    background: var(--color-ui-surface);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-brand-primary);
}

.m-svc-steps__num--solid {
    border-color: var(--color-ui-primary);
    background: var(--color-ui-primary);
    color: var(--color-on-dark);
}

.m-svc-steps__title {
    margin-bottom: var(--space-50);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-snug);
    font-weight: 700;
    color: var(--color-ui-primary);
}

.m-svc-steps__text {
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* Мобильный: таймлайн вертикальный, кружок слева от текста. */
@media (max-width: 767px) {
    .m-svc-steps {
        --svc-step-gap: 28px;
    }

    .m-svc-steps__fill {
        display: none;
    }

    .m-svc-steps__list {
        flex-direction: column;
    }

    .m-svc-steps__item {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-200);
        text-align: left;
    }

    .m-svc-steps__item:not(:last-child)::after {
        top: var(--svc-step-size);
        left: var(--svc-step-line);
        width: 2px;
        height: calc(100% - var(--svc-step-size) + var(--svc-step-gap));
    }

    .m-svc-steps__num {
        margin-bottom: 0;
    }
}

/* ================= Блок 5 — Почему это надёжно ================= */

.m-svc-proof {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.m-svc-proof__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
}

.m-svc-proof__item {
    padding-top: var(--space-300);
    border-top: 2px solid var(--color-brand-primary);
}

.m-svc-proof__value {
    margin-bottom: 14px;
    font-size: clamp(40px, 5vw, 54px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--color-ui-primary);
}

.m-svc-proof__text {
    max-width: 260px;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

@media (max-width: 767px) {
    .m-svc-proof__grid {
        grid-template-columns: 1fr;
        gap: var(--space-400);
    }
}

/* ============ Переключатель сценариев (Facility Management, Cleaning) ============ */

.m-svc-branch__box {
    max-width: 860px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.m-svc-branch__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-ui-background);
}

.m-svc-branch__tab {
    min-height: var(--control-h-cta);
    padding: var(--space-200);
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: var(--fs-body-sm);
    font-weight: 700;
    line-height: var(--lh-snug);
    text-align: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--t-hover), background var(--t-hover), border-color var(--t-hover);
}

.m-svc-branch__tab:hover {
    color: var(--color-text-primary);
}

.m-svc-branch__tab[aria-selected="true"] {
    border-bottom-color: var(--color-brand-primary);
    background: var(--color-ui-surface);
    color: var(--color-brand-primary);
}

.m-svc-branch__panel {
    padding: var(--space-400);
}

.m-svc-branch__panel[hidden] {
    display: none;
}

.m-svc-branch__panel:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 3px var(--color-focus-ring);
}

.m-svc-branch__title {
    margin-bottom: var(--space-100);
    color: var(--color-ui-primary);
    font-weight: 700;
}

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

.m-svc-branch__list {
    margin: var(--space-250) 0 var(--space-300);
    padding: 0;
    list-style: none;
}

.m-svc-branch__point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-150);
    padding: var(--space-100) 0;
    font-size: var(--fs-body-sm);
    line-height: var(--lh-body);
    color: var(--color-text-primary);
}

.m-svc-branch__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-300);
}

.m-svc-branch__link {
    min-height: var(--control-hit);
    font-size: var(--fs-body-sm);
}

.m-svc-branch__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--color-brand-tint);
    color: var(--color-brand-primary);
}

@media (max-width: 767px) {
    .m-svc-branch__tabs {
        grid-template-columns: 1fr;
    }

    .m-svc-branch__tab {
        border-bottom: 1px solid var(--color-border);
    }

    .m-svc-branch__tab:last-child {
        border-bottom: none;
    }

    .m-svc-branch__tab[aria-selected="true"] {
        border-bottom-color: var(--color-brand-primary);
    }

    .m-svc-branch__panel {
        padding: var(--space-250);
    }

    .m-svc-branch__actions {
        align-items: flex-start;
        gap: var(--space-200);
    }

    /* Длинная подпись кнопки переносится: на 320px в одну строку не влезает. */
    .m-svc-branch__btn {
        width: 100%;
        height: auto;
        min-height: var(--control-h);
        padding: var(--space-150) var(--space-250);
        white-space: normal;
        line-height: var(--lh-snug);
    }

    .m-svc-branch__link {
        white-space: normal;
        text-align: left;
    }
}

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

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

.m-svc-cta__overline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-250);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.m-svc-cta__dash {
    display: block;
    width: 28px;
    height: 1.5px;
    flex: none;
    background: var(--color-accent);
}

.m-svc-cta__title {
    margin-bottom: 18px;
    color: var(--color-on-dark);
}

.m-svc-cta__text {
    max-width: 440px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-on-dark-muted);
}

.m-svc-cta__card {
    padding: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-ui-surface);
    box-shadow: 0 18px 48px rgba(16, 25, 42, .32);
    color: var(--color-text-primary);
}

.m-svc-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-200);
}

.m-svc-form__field--wide {
    grid-column: 1 / -1;
}

.m-svc-form__submit {
    margin-top: var(--space-300);
    width: 100%;
}

.m-svc-form__note {
    margin-top: 14px;
}

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

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

.m-form-success h3 {
    margin-bottom: 10px;
    color: var(--color-ui-primary);
}

@media (min-width: 768px) {
    /* Кнопка отправки: на десктопе не уже 200px, на мобильном — во всю ширину. */
    .m-svc-form__submit {
        width: auto;
        min-width: 200px;
    }
}

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

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

    .m-svc-form__grid {
        grid-template-columns: 1fr;
    }

    .m-svc-form__submit {
        padding: 0 var(--space-250);
    }
}