/* style.css — стили ТОЛЬКО главной страницы */

/* --- Hero: первый блок под меню -------------------------------------------
   Фон — img/hero-silk.webp (2752×912): светлый шёлк, модель стоит справа.
   Фон вынесен в отдельный слой .hero::before, который шире секции на 28%:
   лишнее обрезается по краям секции, поэтому фигура модели уезжает правее
   и освобождает место под текст — заголовок встаёт в две строки.
   Внутри слоя background-size: cover, значит фон гарантированно закрывает
   секцию целиком при любой ширине окна; позиция 55% top подобрана по замеру
   (фигура не заезжает под текст и не обрезается ни на одной ширине от 961px).
   Шрифт общий (Montserrat): и заголовок, и текст — --font-ui / --font-display. */
.hero {
    --hero-h1: clamp(32px, 4vw, 52px);   /* кегль h1 — от него считается столбец */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 128%;
    height: 100%;
    background: #F3EDE3 url("/img/hero-silk.webp") no-repeat 55% top / cover;
}
.hero__inner {
    position: relative;   /* текст всегда поверх слоя с фоном */
    display: flex;
    align-items: center;
    min-height: 560px;
    padding-top: 64px;
    padding-bottom: 64px;
}
/* Столбец текста задан в кеглях заголовка (16em = 832px при кегле 52px):
   при любой ширине окна заголовок читается ровно в две строки. Множитель
   подобран замером под Montserrat — он шире Roboto примерно на 8%, и прежние
   14.85em (772px) давали три строки. */
.hero__text { max-width: calc(var(--hero-h1) * 16); }
.hero__kicker {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #B08F4E;
}
.hero h1 {
    margin-bottom: 20px;
    font-size: var(--hero-h1);
    line-height: 1.08;
}
.hero__lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--color-text-soft); }

/* Плашки-преимущества: белые «пилюли» с золотой галочкой (SVG в index.php).
   Кегль и отступы подобраны по замеру: три плашки встают в одну строку внутри
   текстового столбца (832px при кегле h1 52px). */
.hero__badges { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 26px 0 0; padding: 0; }
.hero__badges li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px 8px 11px;
    background: rgba(255, 255, 255, .82);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-graphite);
}
.hero__badges svg { flex: none; width: 20px; height: 20px; }

/* Кнопки героя: золотая «пилюля» и светлая с золотой рамкой.
   Правки только внутри .hero — кнопки на остальных страницах не меняются. */
.hero__actions { margin-top: 28px; gap: 14px; }
.hero .btn { gap: 10px; padding: 15px 24px; border-radius: 999px; font-size: 15px; }
.hero .btn__icon { flex: none; width: 26px; height: 26px; }
.hero .btn__arrow { flex: none; width: 20px; height: 20px; margin-left: 2px; }
.hero .btn--primary {
    background: linear-gradient(120deg, #B08F4E 0%, #C6A969 55%, #D6C08C 100%);
    color: #FFF;
}
.hero .btn--primary:hover { background: linear-gradient(120deg, #9E7E42 0%, #B8975A 55%, #C6A969 100%); color: #FFF; }
.hero .btn--ghost { background: rgba(255, 255, 255, .65); border-color: #DCC79A; color: var(--color-graphite); }
.hero .btn--ghost:hover { background: #FFF; border-color: var(--color-gold); color: var(--color-gold); }

/* --- Сетка карточек (услуги, программы, статьи) --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.card {
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--color-gold); }
.card__title { margin-bottom: 10px; font-size: 24px; }
.card__title a:hover { color: var(--color-gold); }
.card__text { flex: 1 1 auto; color: var(--color-text-soft); font-size: 15px; }
.card__price { margin: 0 0 14px; font-weight: 600; font-size: 18px; color: var(--color-graphite); }
.card__meta { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-gold); }
.card__link { font-weight: 600; font-size: 15px; color: var(--color-graphite); border-bottom: 2px solid var(--color-gold-light); align-self: flex-start; }
.card__link:hover { color: var(--color-gold); }

.cards__more { margin: 28px 0 0; }

/* --- «Программы центра»: карточки с обложкой программы ---------------------
   Блок собран по макету: у заголовка золотая черта слева, карточки — с фото
   сверху, короткой золотой линией под названием, строкой условий, ценой и
   пилюлей «Подробнее»; ниже по центру кнопка «Все программы». Обложки — уже
   готовые, из папок самих программ
   (programmy/<slug>/img/), те же, что и на странице /programmy/.
   Классы .card__media / .card__meta / .card__price повторяют уже принятую
   на главной и на /programmy/ разметку карточек. */
/* Шапка блока — та же, что у «Реальных результатов»: короткая золотая черта
   слева от заголовка (в левом отступе, на текст не влияет), сам заголовок
   обычного тёмного цвета. Разделительной линии под текстом нет (в макете её
   нет), поэтому отбивку от карточек даёт только отступ .cards (28px). */
.programs__head { position: relative; padding-left: 54px; padding-bottom: 0; margin-bottom: 0; }
.programs__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
.programs__head .section__title { margin-bottom: 16px; }
/* Вводный абзац шире общего 75ch: после принудительного переноса после первого
   предложения второе («Все программы подбираются…») должно встать в одну строку. */
.programs__head .section__lead { margin-bottom: 0; max-width: 95ch; }

/* Промежуток между карточками — как в макете (≈11% ширины карточки) */
.programs .cards { gap: clamp(22px, 3.4vw, 40px); }

/* Обложка программы: полный кадр 1080×1080, не обрезаем — как на странице программы */
.card--program .card__media {
    display: block;
    margin: -26px -26px 22px;
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
    overflow: hidden;
}
.card--program .card__media img { width: 100%; height: auto; }
.card--program .card__title { margin-bottom: 0; font-size: 26px; }
.card--program .card__title::after {   /* короткая золотая линия под названием */
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin: 12px 0 14px;
    background: var(--color-gold);
}
.card--program .card__text { margin-bottom: 14px; }
.card--program .card__meta { margin-bottom: 6px; letter-spacing: .08em; }
.card--program .card__price { margin-bottom: 18px; font-size: 26px; }
.card--program .card__price-from { margin-right: 4px; font-size: .6em; font-weight: 500; }

/* «Подробнее» — пилюля на всю ширину карточки, стрелка слева от текста */
.card--program .card__btn {
    width: 100%;
    margin-top: auto;
    padding: 14px 20px;
    gap: 12px;
    border-color: #DCC79A;
    border-radius: 999px;
    font-weight: 500;
}
.card--program .card__btn:hover { border-color: var(--color-gold); color: var(--color-gold); }
.card--program .card__arrow { flex: none; width: 20px; height: 20px; color: #B08F4E; }

/* Низ блока: кнопка «Все программы» слева, стрелки ленты справа — одной строкой
   (тот же приём, что в «Реальных результатах») */
.programs__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 40px; }
.programs__more { margin: 0; }
.programs__more .btn { padding: 15px 34px; border-radius: 999px; background: #F5EEE1; color: #B08F4E; font-weight: 500; }
.programs__more .btn:hover { background: var(--color-surface); border-color: var(--color-gold); color: var(--color-gold); }
.programs__more .btn svg { flex: none; width: 20px; height: 20px; margin-left: 12px; }

/* Стрелки ленты программ. На десктопе карточки стоят сеткой в два ряда —
   листать нечего, поэтому кнопки скрыты (кнопка остаётся одна слева);
   показываются они в медиа-запросе, где карточки выстраиваются в одну линию. */
.programs__nav { display: none; }

/* --- «Реальные результаты»: лента карточек «до и после» --------------------
   Макет: слева от заголовка короткая золотая черта, под заголовком золотой
   подзаголовок «до и после», ниже — карточки (фото-коллаж + иконка с описанием),
   внизу справа круглые стрелки и пилюля «Смотреть все результаты».
   Картинки img/N-result.webp (1296×1213) — уже готовые коллажи: пара кадров
   «до/после» с плашками, поэтому в карточке один <img>.
   Лента прокручивается горизонтально: стрелки (инлайн-скрипт в конце index.php),
   свайп, колесо мыши и тачпад. Без JS она тоже листается — стрелки это надстройка.
   Заголовок и подзаголовок стоят на одной вертикали (padding-left у .results__head),
   золотая черта вынесена в левый отступ и на текст не влияет. */
.results {
    background: url("/img/bg-res.webp") no-repeat center center / cover;
}
.results__head { position: relative; padding-left: 54px; margin-bottom: 28px; }
.results__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
.results__head .section__title { margin-bottom: 8px; }
.results__kicker {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--color-gold);
}

/* Лента: три карточки в ряд, лишние — за правым краем, полосу прокрутки прячем */
.results__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.results__track::-webkit-scrollbar { display: none; }
.results__track > li { flex: 0 0 calc((100% - 40px) / 3); margin: 0; scroll-snap-align: start; }

/* Карточка: фото-коллаж сверху, строка «иконка + описание» под ним */
.result {
    display: flex;
    flex-direction: column;
    padding: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.result__media { display: block; border-radius: 10px; overflow: hidden; }
.result__media img { width: 100%; height: auto; }
.result__note { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
/* Иконка — галочка из плашек героя: золотой круг с белой птичкой, поэтому
   своей подложки-круга с рамкой у неё нет, только размер */
.result__icon { flex: none; width: 24px; height: 24px; }
.result__icon svg { width: 100%; height: 100%; }
/* Тонкая вертикаль между иконкой и текстом — как в макете */
.result__note p {
    margin: 0;
    padding-left: 14px;
    border-left: 1px solid var(--color-border);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-soft);
}

/* Низ блока: кнопка «Смотреть все результаты» слева, стрелки ленты справа */
.results__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.results__nav { display: flex; gap: 12px; }
/* Вид круглых стрелок общий для всех четырёх лент главной: если менять — то
   здесь, у «Программ центра», «Последних статей» и «Отзывов» своего оформления
   кнопок нет (ленты программ и статей включаются только на узких экранах,
   см. медиа-запросы ниже). */
.results__arrow,
.programs__arrow,
.posts__arrow,
.reviews__arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 1px solid #DCC79A;
    border-radius: 50%;
    color: var(--color-gold);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.results__arrow:hover,
.programs__arrow:hover,
.posts__arrow:hover,
.reviews__arrow:hover { background: #F5EEE1; border-color: var(--color-gold); }
.results__arrow:disabled,
.programs__arrow:disabled,
.posts__arrow:disabled,
.reviews__arrow:disabled { opacity: .4; cursor: default; }
.results__arrow:disabled:hover,
.programs__arrow:disabled:hover,
.posts__arrow:disabled:hover,
.reviews__arrow:disabled:hover { background: transparent; border-color: #DCC79A; }
.results__arrow svg,
.programs__arrow svg,
.posts__arrow svg,
.reviews__arrow svg { width: 22px; height: 22px; }
.results__all,
.posts__all,
.reviews__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border: 1px solid #DCC79A;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: #B08F4E;
    transition: background .18s ease, border-color .18s ease;
}
.results__all:hover,
.posts__all:hover,
.reviews__link:hover { background: #F5EEE1; border-color: var(--color-gold); }
.results__all svg,
.posts__all svg,
.reviews__link svg { flex: none; width: 18px; height: 18px; }

/* --- «Отзывы наших клиентов»: лента карточек на белом фоне -----------------
   Шапка блока сделана как у «Реальных результатов»: короткая золотая черта
   слева от тёмного заголовка (в левом отступе, на текст не влияет), сам
   заголовок — обычный .section__title, разделительной линии под ним нет.
   Ниже карточки отзыва, а внизу слева пилюли-ссылки на отзывы ВК и Яндекса,
   справа — круглые стрелки ленты. Секция белая (section--surface), поэтому
   карточки держат себя рамкой и мягкой тенью — как .card на других страницах.
   Аватарок в карточках нет (по заданию их убрали), кавычка-виньетка набрана
   текстом и стоит в правом верхнем углу, звёзды — инлайновые SVG.
   Лента листается стрелками (инлайн-скрипт в конце index.php), свайпом,
   колесом и тачпадом — тот же приём, что у «Реальных результатов». */
.reviews__head { position: relative; padding-left: 54px; margin-bottom: 28px; }
.reviews__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
/* В шапке одна строка (черты и вводного абзаца нет), поэтому отбивку от ленты
   даёт только margin-bottom самого .reviews__head */
.reviews__head .section__title { margin-bottom: 0; }

/* Лента: три карточки в ряд, лишние — за правым краем, полосу прокрутки прячем */
.reviews__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track > li { flex: 0 0 calc((100% - 40px) / 3); margin: 0; scroll-snap-align: start; }

/* Карточка: имя со звёздами и кавычка в первой строке, текст отзыва под ними */
.review {
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.review__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.review__name { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-graphite); }
.review__stars { display: flex; gap: 3px; color: var(--color-gold); }
.review__star { flex: none; width: 15px; height: 15px; }
.review__quote { flex: none; margin-left: auto; font-family: var(--font-display); font-size: 56px; line-height: .55; color: #EBDCBB; }
.review__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-soft); }

/* Низ блока: пилюли со ссылками на отзывы слева, стрелки ленты справа */
.reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; }
.reviews__links { display: flex; flex-wrap: wrap; gap: 14px; }
.reviews__nav { display: flex; gap: 12px; }
/* Иконки соцсетей в пилюлях — как иконки мессенджеров в шапке
   (partials/header.php): золотой круг, внутри белая буква */
/* Значок VK — готовый PNG (как в шапке и подвале), значок Яндекса — инлайновый SVG */
.reviews__link-icon { flex: none; display: block; width: 26px; height: 26px; }
img.reviews__link-icon { height: auto; }
.reviews__link-icon svg { width: 100%; height: 100%; }


/* --- «Наши специалисты»: карточки специалистов на фоне страницы ------------
   Шапка — как у соседних блоков: золотая черта слева от заголовка (в левом
   отступе, на текст не влияет), под заголовком вводная строка.
   Лента .experts__track устроена как «Отзывы»: flex + горизонтальная
   прокрутка со снапом и спрятанной полосой. На десктопе три карточки делят
   строку поровну, прокручивать нечего; на узких экранах карточки остаются
   в одну линию и листаются свайпом — стрелок у этой ленты нет.
   Карточка горизонтальная на всех ширинах: фото слева фиксированной колонкой,
   справа — надзаголовок, имя, бежевая плашка с должностью и текст. */
/* Ряд из трёх горизонтальных карточек шире общего контейнера страницы
   (1180px): при нём карточка получалась 366px, и текст рядом с фото вставал
   в узкую колонку. 1440px даёт ширину карточки ~450px — пропорции макета
   (фото 185px + текст ~210px). На экранах уже 1480px контейнер, как и везде,
   просто занимает всю доступную ширину. */
.experts .container { max-width: 1440px; }

.experts__head { position: relative; padding-left: 54px; margin-bottom: 28px; }
.experts__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
.experts__head .section__title { margin-bottom: 8px; }
.experts__head .section__lead { margin: 0; }

.experts__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.experts__track::-webkit-scrollbar { display: none; }
.experts__track > li { flex: 0 0 calc((100% - 40px) / 3); margin: 0; scroll-snap-align: start; }

.expert {
    display: flex;
    align-items: flex-start;   /* фото не тянется на всю высоту карточки */
    gap: 20px;
    min-width: 0;
    padding: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
/* Фото — отдельная колонка в 41% ширины карточки (пропорция макета), но не
   шире исходника. Высоту держит aspect-ratio самого снимка: фото не тянется
   под длину текста, поэтому карточка не вырастает в высокий столбец */
.expert__photo { flex: none; width: 41%; max-width: 185px; border-radius: 12px; overflow: hidden; }
.expert__photo img { width: 100%; height: auto; aspect-ratio: 247 / 467; object-fit: cover; }
/* min-width: 0 обязателен: иначе длинное имя задаёт минимальную ширину
   колонки и распирает карточку шире её доли в ленте */
.expert__body { min-width: 0; padding-top: 6px; }
.expert__kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--color-gold);
}
.expert__name {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 23px;
    line-height: 1.2;
}
/* Плашка с должностью — бежевая «пилюля», как плашки-преимущества в герое */
.expert__role {
    display: inline-block;
    margin: 0;
    padding: 10px 16px;
    background: #F1E7D6;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-soft);
}
/* Золотая черта над описанием */
.expert__text {
    position: relative;
    margin: 20px 0 0;
    padding-top: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-soft);
}
.expert__text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
/* --- «Последние статьи»: карточки статей на белом фоне ---------------------
   Макет: шапка та же, что у «Программ центра» — короткая золотая черта слева
   от заголовка (в левом отступе, на текст не влияет). В карточке — плашка-
   категория, строка «календарь + дата / часы + минуты» (иконки инлайновые,
   цвет задаёт CSS), заголовок, текст и ссылка «Читать» со стрелкой и золотой
   чертой под всей ссылкой. До 960px карточки выстраиваются в ленту в одну
   линию (см. медиа-запросы), как у «Программ центра»: тот же запас сверху под
   тень и та же формула ширины карточки (шаг прокрутки в скрипте = ширина
   карточки + column-gap). Стрелки ленты — общие с двумя другими лентами. */
.posts__head { position: relative; padding-left: 54px; margin-bottom: 28px; }
.posts__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-gold);
}
.posts__head .section__title { margin-bottom: 8px; }
.posts__head .section__lead { margin-bottom: 0; }

/* Плашка-категории: светлая заливка, золотая рамка, капс. Ширину не задаём —
   длинные категории переносятся внутри пилюли, короткие стоят в одну строку */
.card--post .card__tag {
    align-self: flex-start;
    margin: 0 0 16px;
    padding: 7px 16px;
    background: #F7F1E6;
    border: 1px solid #E4D6BB;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-soft);
}

/* Строка «дата / время»: между ними тонкая вертикаль, как в макете */
.card--post .card__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--color-text-soft);
}
.card--post .card__info li { display: flex; align-items: center; gap: 8px; margin: 0; }
.card--post .card__info li + li { padding-left: 14px; border-left: 1px solid var(--color-border); }
.card--post .card__info-icon { flex: none; width: 18px; height: 18px; color: #B08F4E; }

/* Заголовок и текст: кегли уменьшены относительно прежних (было 26/16px) —
   заголовок заметно крупнее строки-меты, но не «кричит» в узкой карточке, а
   описание читается как сноска под ним. Длинные слова
   («Инсулинорезистентность…») в узкой карточке переносятся по слогам
   (hyphens), а если браузер этого не умеет — рвутся по break-word, чтобы
   не вылезти за рамку карточки */
.card--post .card__title {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}
.card--post .card__text { font-size: 14px; line-height: 1.65; }

/* «Читать» — стрелка справа, золотая черта идёт под текстом и стрелкой */
.card--post .card__link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 3px; }
.card--post .card__link-arrow { flex: none; width: 20px; height: 20px; color: #B08F4E; }

/* Низ блока: стрелки ленты (на десктопе скрыты — листать нечего) и пилюля
   «Все статьи блога». Порядок в разметке — стрелки, затем кнопка, поэтому на
   узких экранах стрелки встают вплотную слева от неё */
.posts__foot { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.posts__nav { display: none; }

@media (max-width: 960px) {
    .results__track > li { flex-basis: calc((100% - 20px) / 2); }
    .reviews__track > li { flex-basis: calc((100% - 20px) / 2); }

    /* «Наши специалисты»: карточка остаётся горизонтальной, но занимает почти
       весь кадр — край второй виден как подсказка свайпа */
    .experts__track > li { flex-basis: 72%; }
    .expert__photo { width: 165px; }

    /* «Программы центра»: до 960px сетка превращается в ленту в одну линию со
       стрелками — тот же приём, что у «Реальных результатов». Отбивка от шапки
       сделана верхним padding, а не margin у .cards: при overflow-x прокрутка
       обрезает содержимое по padding-box, и без этого запаса срезалась бы тень
       карточек. Зазор ленты (18px) и ширина карточки считаются одной формулой,
       потому что шаг прокрутки в скрипте = ширина карточки + column-gap. */
    .programs .cards {
        display: flex;
        gap: 18px;
        margin-top: 0;
        padding: 28px 0 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .programs .cards::-webkit-scrollbar { display: none; }
    .programs .cards > .card { flex: 0 0 calc((100% - 18px) / 2); scroll-snap-align: start; }

    /* Стрелки ленты программ — справа в одной строке с кнопкой «Все программы» */
    .programs__nav { display: flex; gap: 12px; }
    .programs__foot { margin-top: 12px; }

    /* «Последние статьи»: та же лента в одну линию, что у «Программ центра»,
       с тем же запасом сверху под тень карточек */
    .posts .cards {
        display: flex;
        gap: 18px;
        margin-top: 0;
        padding: 28px 0 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .posts .cards::-webkit-scrollbar { display: none; }
    /* min-width: 0 обязателен: без него длинное слово в заголовке
       («Инсулинорезистентность») задаёт автоматическую минимальную ширину
       flex-элемента, и карточка распирает ленту до ширины контейнера —
       flex-basis перестаёт работать */
    .posts .cards > .card {
        flex: 0 0 calc((100% - 18px) / 2);
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Стрелки ленты статей — рядом с кнопкой «Все статьи блога» */
    .posts__nav { display: flex; gap: 12px; }
}

@media (max-width: 620px) {
    /* Шапки «Программ», «Результатов» и «Последних статей» ужимаются одинаково */
    .programs__head,
    .results__head,
    .posts__head,
    .reviews__head,
    .experts__head { padding-left: 40px; }
    .programs__head::before,
    .results__head::before,
    .posts__head::before,
    .reviews__head::before,
    .experts__head::before { width: 26px; top: 15px; }
    .results__track > li { flex-basis: 82%; }
    /* «Отзывы» ужимаются так же, как «Результаты»: в кадре одна карточка,
       пилюли на всю ширину, стрелки по центру под ними */
    .reviews__track > li { flex-basis: 82%; }
    .reviews__foot { justify-content: center; }
    .reviews__links { width: 100%; }
    .reviews__link { flex: 1 1 100%; justify-content: center; padding: 12px 20px; font-size: 14px; }
    .reviews__nav { margin: 0 auto; }

    /* «Наши специалисты» на телефоне: карточка перестраивается в столбик —
       фото сверху на всю ширину, текст под ним. Рядом с фото на такой ширине
       текст вставал в колонку в два-три слова, поэтому горизонтальная
       раскладка тут не годится. Сама лента остаётся в одну линию: в кадре
       одна карточка, край второй виден как подсказка свайпа.
       Фото кадрируется в квадрат (object-fit: cover), точка кадра поднята
       к верху снимка — иначе в квадрат не попадает лицо. */
    .experts__track > li { flex-basis: 80%; }
    /* align-items возвращаем к stretch: в колонке это горизонтальная ось, и
       при flex-start фото и текст ужались бы по содержимому */
    .expert { flex-direction: column; align-items: stretch; gap: 18px; padding: 16px; }
    .expert__photo { width: 100%; max-width: none; }
    .expert__photo img { aspect-ratio: 1 / 1; object-position: 50% 18%; }
    .expert__body { padding-top: 0; }
    .expert__name { margin-bottom: 12px; font-size: 22px; }
    .expert__role { padding: 9px 14px; font-size: 13px; }
    .expert__text { margin-top: 18px; padding-top: 14px; font-size: 14px; }
    /* Кнопка и стрелки остаются в одной строке и на узком экране: кнопка слева,
       стрелки справа. Чтобы всё влезло, ужимаем кегль, поля кнопки и сами
       стрелки; min-width: 0 разрешает кнопке сжаться, стрелки не сжимаются. */
    .results__foot,
    .programs__foot { gap: 10px; }
    .results__all,
    .programs__more .btn { min-width: 0; padding: 12px 14px; font-size: 13px; }
    .results__all svg,
    .programs__more .btn svg { width: 16px; height: 16px; margin-left: 8px; }
    .results__nav,
    .programs__nav { flex: none; gap: 10px; }
    .results__arrow,
    .programs__arrow { width: 42px; height: 42px; }
    .results__arrow svg,
    .programs__arrow svg { width: 19px; height: 19px; }

    /* «Последние статьи»: в кадре одна карточка (край следующей виден как
       подсказка свайпа). Подпись кнопки короткая, поэтому стрелки остаются в
       одной строке с ней — вплотную слева, блок по центру, как у «Результатов» */
    .posts .cards > .card { flex-basis: 82%; }
    .posts__foot { justify-content: center; }
    .posts__all { padding: 12px 24px; font-size: 14px; }
}

@media (max-width: 960px) {
    /* До 960px картинка кропится по ширине и фигура оказывается под текстом:
       приглушаем фото заливкой цвета фона, текст занимает всю ширину.
       Слой фона возвращаем к размеру секции — рамка та же, что была. */
    .hero::before {
        width: 100%;
        background-image: linear-gradient(180deg, rgba(246, 241, 232, .35) 0%, rgba(246, 241, 232, .88) 32%, rgba(246, 241, 232, .97) 60%),
                          url("/img/hero-silk.webp");
        background-position: 62% top, 62% top;
    }
    .hero__inner { min-height: 0; padding: 250px 20px 44px; }
    .hero__text { max-width: 100%; }
}

@media (max-width: 760px) {
    .hero__inner { padding: 220px 20px 40px; }
}

@media (max-width: 620px) {
    .hero__actions .btn { width: 100%; }
    .hero .btn--primary { justify-content: flex-start; }

    /* Лента программ на телефоне — как лента результатов: в кадре одна карточка
       (край следующей виден как подсказка свайпа). Кнопка и стрелки стоят одной
       строкой — раскладка задана в медиа-запросе выше. */
    .programs .cards > .card { flex-basis: 82%; }
}