/* ============================================
   MC-STEPS
   «Как проходит лечение» — шаги + фото клиники (тёмная секция)
   Mobile-first. Брейкпоинты: 640px, 992px, 1200px
   ============================================ */

/* ===== Раскладка ===== */
.mc-steps__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 48px);
    align-items: center;
}

.mc-steps__content {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
}

/* Шапка секции внутри уже даёт margin-bottom — гасим, чтобы не дублировать gap */
.mc-steps__content .mc-section__header {
    margin-bottom: 0;
}

/* ===== Список шагов =====
   Нумерация через CSS counter — в HTML нет ручных «1.».
   Маркер — круг с золотой цифрой, линия-разделитель между пунктами. */
.mc-steps__list {
    counter-reset: steps;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-steps__item {
    counter-increment: steps;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 16px);
    padding: clamp(14px, 2.2vw, 18px) 0;
    font-size: clamp(15px, 2.2vw, 17px);
    line-height: 1.45;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mc-steps__item:first-child {
    padding-top: 0;
}

.mc-steps__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Кружок с номером */
.mc-steps__item::before {
    content: counter(steps);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 4vw, 32px);
    height: clamp(28px, 4vw, 32px);
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--mc-gold);
    color: var(--mc-gold);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-top: 1px; /* визуальное выравнивание с первой строкой текста */
    transition: background .25s ease, color .25s ease;
}

/* Hover: кружок заливается золотым, текст чуть ярче */
.mc-steps__item:hover::before {
    background: var(--mc-gold);
    color: var(--mc-green-dark);
}

.mc-steps__item:hover {
    color: var(--mc-white);
}

/* ===== Фото ===== */
.mc-steps__photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2vw, 16px);
}

.mc-steps__media {
    margin: 0;
    border-radius: var(--mc-radius);
    overflow: hidden;
    background: var(--mc-green-light);
}

.mc-steps__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: transform .5s ease, opacity .3s ease;
}

.mc-steps__media:hover .mc-steps__photo {
    transform: scale(1.03);
    opacity: .92;
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    .mc-steps__item::before,
    .mc-steps__photo {
        transition: none;
    }
    .mc-steps__media:hover .mc-steps__photo {
        transform: none;
        opacity: 1;
    }
}

/* ============================================
   ПЛАНШЕТ: от 640px
   ============================================ */
@media (min-width: 640px) {
    .mc-steps__photos {
        grid-template-columns: repeat(2, 1fr);
    }

    .mc-steps__photo {
        aspect-ratio: 3 / 2;
    }
}

/* ============================================
   ПЛАНШЕТ+: от 992px
   ============================================ */
@media (min-width: 992px) {
    .mc-steps__inner {
        grid-template-columns: 1.05fr .95fr;
        gap: clamp(28px, 4vw, 48px);
        align-items: center;
    }

    .mc-steps__photo {
    aspect-ratio: 6 / 5;
    }
}

/* ============================================
   ДЕСКТОП: от 1200px
   ============================================ */
@media (min-width: 1200px) {
    .mc-steps__inner {
        grid-template-columns: 1fr 1fr;
    }

    .mc-steps__photo {
         /* вертикальный кроп — колонка фото выше */
    }
}