/* «5 шагов к вашему дому» — общий компонент web.partials.steps (главная, «О компании»). */

/* =====================================================================
   5 шагов
   ===================================================================== */

.w-steps__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * «5 шагов» (26.10, Анастасия, вариант b с иконками): пять одинаковых белых
 * карточек — 3D-иконка, маленький номер «01», заголовок, текст. Отступы —
 * роли (.ai/rules/spacing.md), цвет — фирменный зелёный.
 */
.w-steps__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 20px;
    background: #fff;
    color: var(--w-ink);
}

.w-steps__icon { display: block; width: 72px; height: 72px; object-fit: contain; }
.w-steps__num { margin-top: var(--space-m); color: #1D6047; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.w-steps__item-title { margin: var(--space-2xs) 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.w-steps__item-text { margin: var(--space-xs) 0 0; color: #5f6b65; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.w-steps__dots { display: none; }

@media (max-width: 1279px) {
    .w-steps__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .w-steps__item { grid-column: span 2; }
    .w-steps__item:nth-child(4),
    .w-steps__item:nth-child(5) { grid-column: span 3; }
}

@media (max-width: 767px) {
    .w-steps__list {
        display: flex;
        margin: 0 calc(-1 * var(--w-gutter));
        padding: 0 var(--w-gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--w-gutter);
        scrollbar-width: none;
    }
    .w-steps__list::-webkit-scrollbar { display: none; }
    .w-steps__item { flex: 0 0 78%; scroll-snap-align: start; }
    .w-steps__icon { width: 64px; height: 64px; }
    .w-steps__item-title { font-size: 18px; }
    .w-steps__item-text { font-size: 15px; }
    .w-steps__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-m); }
    .w-steps__dots i { width: 7px; height: 7px; border-radius: 4px; background: #cfd8d3; transition: width .25s, background-color .25s; }
    .w-steps__dots i.is-on { width: 18px; background: #1D6047; }
}

@media (prefers-reduced-motion: reduce) { .w-steps__dots i { transition: none; } }