/* ===========================================
   СЕТКА И СЕКЦИИ
   Фиксированная сетка из DESIGN.md: контейнер 1200px, поля 64px на десктопе
   и 16px на мобиле. Контент «дышит» — не растягиваем на всю ширину экрана.
   =========================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--margin-page);
}

/* Hero шире основной сетки — так в макете */
.container-wide {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--margin-page);
}

.section {
    margin-bottom: 128px;
}

.section-sm {
    margin-bottom: 96px;
}

@media (max-width: 767px) {
    .section {
        margin-bottom: 72px;
    }

    .section-sm {
        margin-bottom: 56px;
    }
}

/* Шапка секции: заголовок слева, ссылка/стрелки справа, тонкая линия снизу */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--gutter);
    padding-bottom: 16px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--frame-border);
}

@media (max-width: 599px) {
    .section-head {
        margin-bottom: 32px;
    }
}

/* Тонкая рамка — главный инструмент разделения по DESIGN.md.
   В макете Stitch класс .inner-frame использовался, но нигде не был определён. */
.frame {
    border: 1px solid var(--frame-border);
}

.frame-soft {
    border: 1px solid var(--frame-border-soft);
}

.surface-card {
    background: var(--color-surface-lowest);
    border: 1px solid var(--frame-border);
    border-radius: var(--radius);
}

/* Горизонтальная лента (события, меню). Скролл живёт ВНУТРИ контейнера —
   страница по горизонтали не едет. */
.scroller {
    display: flex;
    gap: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
    scrollbar-width: none;
}

.scroller::-webkit-scrollbar {
    display: none;
}

.scroller > * {
    scroll-snap-align: start;
    flex: none;
}

.grid {
    display: grid;
    gap: var(--gutter);
}