/* ============================================================
   page.css — стили ЭТОЙ страницы. Здесь живёт только специфика
   контента страницы; всё остальное уже дают:
     - css компонентов кита (src/components/{id}/{id}.css),
     - tokens.css (дизайн-токены),
     - page-foundation.css (база, холст, шапка, листы, оси,
       FAQ, футер, кнопки, карусели, плейсхолдеры).

   Правила (см. rshu-page-build.md):
   - значения — только токенами из tokens.css (var(--...));
     хардкод цвета допустим только как rgba-надслойка на брендовой
     подложке и требует комментария «снято с боя»;
   - не перебивать foundation «своими» осями/паддингами листов —
     оси держит контейнерная модель (.course-info-section > *);
   - новый секционный паттерн, повторяющийся на 2+ страницах, —
     кандидат на перенос в page-foundation.css через PR.
   ============================================================ */

/* ═══ Страница «Корпоративное обучение» — специфика. Только токены кита; сетка, листы, оси — foundation. ═══ */

/* Шаблон 2026 ограничивает универсальные карточки высотой 300px. На этой
   странице карточки форматов содержат описание, список и CTA, поэтому высота
   должна определяться содержимым. */
.course-info-section .advantages-card--license,
.course-info-section .advantages-card,
.course-info-section .advantages-card--diploma {
    max-height: none;
}

.section-container_m--why {
    margin-top: 32px;
}

.course-info-section .section-title__head {
    margin-left: 0;
}

/* Блок 1 (P19): две пилюли-надзаголовка и три выгоды с галочками под кнопками */
.hero-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.hero-pills .section-course-hero__label {
    margin-bottom: 0;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-text-inverse) 16%, transparent);
}
.hero-benefits { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; color: var(--color-text-inverse); }
.hero-benefits li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-medium); }
.hero-benefits .icon { flex-shrink: 0; width: 20px; height: 20px; padding: 3px; border-radius: var(--radius-full); background: var(--color-secondary); color: var(--color-text-inverse); box-sizing: border-box; }
@media (max-width: 669px) { .hero-benefits { flex-direction: column; margin-top: var(--space-5); } }

/* Блок 2 (P26 md): карточка рекомендации — решение, описание, три параметра, кнопка */
.md--tasks .md__panel { align-items: flex-start; gap: var(--space-4); }
.md--tasks .md__panel-title { display: block; }
.task-params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; margin: 0; }
.task-params__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-m); background: var(--color-bg-primary); }
.task-params dt { font-size: var(--type-body-s13-size); line-height: var(--type-body-s13-lh); color: var(--color-text-muted); }
.task-params dd { margin: 0; font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.md--tasks .md__foot { width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.task-note { font-size: var(--type-body-s14-size); line-height: var(--type-body-s14-lh); color: var(--color-text-muted); }
/* по ТЗ на ≤1024 список остаётся над карточкой и переключает её (в паттерне — все панели стопкой) */
@media (max-width: 1024px) {
    .md--tasks .md__list { display: flex; }
    .md--tasks .md__panels { display: block; }
    .md--tasks .md__panel:not(.is-active) { display: none; }
    .md--tasks .md__panel .md__foot { display: flex; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
}
@media (max-width: 669px) { .task-params { grid-template-columns: 1fr; } .md--tasks .md__foot .btn { width: 100%; } }

/* Блок 3: три карточки варианта (advantages-card кита) */
.format-card .advantages-card__body { width: 100%; height: 100%; align-items: flex-start; }
.format-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.format-card__tag { font-size: var(--type-body-s14-size); line-height: var(--type-body-s14-lh); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.format-card__price { margin: var(--space-4) 0 0; font-size: var(--type-h5-size); line-height: var(--type-h5-lh); font-weight: var(--font-weight-bold); color: var(--color-primary); }
.format-card__cta { margin-top: auto; padding-top: var(--space-5); }
.course-info-section .format-card--accent { background: var(--color-bg-accent); box-shadow: inset 0 0 0 2px var(--color-primary); }
.format-card--accent .format-row__time { background: var(--color-primary); color: var(--color-text-inverse); }
@media (max-width: 669px) { .format-card__cta .btn { width: 100%; } }
.summary-panel--wide { grid-template-columns: 1fr; }
.summary-panel__facts strong { display: flex; align-items: flex-start; gap: var(--space-2); }
.summary-panel__facts .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.note-panel--also { margin-top: var(--space-6); }
.note-panel--also .note-panel__label { display: inline; margin: 0; }

/* Блок 4 (P27): пять шагов, последний — акцентная широкая карточка */
.stage-card .format-row__time { align-self: flex-start; }
.stage-card__out strong { font-weight: var(--font-weight-bold); }
.stage-card--accent { grid-column: span 2; background: var(--color-primary); color: var(--color-text-inverse); }
.course-info-section .stage-card--accent { background: var(--color-primary); }
.stage-card--accent .stage-card__title, .stage-card--accent .stage-card__text { color: var(--color-text-inverse); }
.stage-card--accent .stage-card__num { color: color-mix(in srgb, var(--color-text-inverse) 22%, transparent); }
.stage-card--accent .format-row__time { background: var(--color-bg-primary); color: var(--color-primary); }
.stage-cards--process .stage-card__title { font-size: var(--type-h5-size); }
@media (max-width: 1024px) { .stage-card--accent { grid-column: auto; } }

/* Блок 5 (P9 + P15): карточка кейса и плейсхолдеры логотипов */
.case-card__main { display: flex; flex-direction: column; gap: var(--space-3); }
.case-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.case-card__quote { color: var(--color-text-muted); }
.review-card-section + .companies-ticker { margin-top: var(--space-8); }
.companies-ticker__logo.ph-inline { display: flex; align-items: center; height: 46px; padding: 0 var(--space-6); white-space: nowrap; opacity: 1; filter: none; }

/* Блок 6 (новый компонент expert-mosaic): мозаика из 18 фото без имён */
.experts-top { display: grid; grid-template-columns: minmax(528px, 5fr) minmax(0, 7fr); gap: var(--space-10); align-items: center; margin-bottom: var(--space-10); }
.experts-top__text .section-title { margin-bottom: var(--space-6); }
.experts-top__lead { margin: 0 0 var(--space-6); font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); }
.experts-top__actions { display: flex; flex-wrap: nowrap; gap: var(--space-3); }
.expert-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.expert-mosaic__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); background: var(--color-bg-accent); }
.experts-steps { margin-bottom: var(--space-10); }
.experts-cloud__title { margin: 0 0 var(--space-5); font-size: var(--type-h5-size); line-height: var(--type-h5-lh); font-weight: var(--font-weight-bold); }
.experts-cloud .direction-bubble { cursor: default; }
@media (max-width: 1024px) { .experts-top { grid-template-columns: 1fr; gap: var(--space-6); } }
@media (max-width: 669px) {
    .expert-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .experts-top__actions .btn { width: 100%; }
    .experts-cloud .direction-bubble__label { white-space: normal; }
}

/* Блок 7: пилюля в карточке, кнопка справа от подзаголовка */
.advantages-card__body > .format-row__time { margin-bottom: var(--space-2); }
.section-title-row > .btn { flex-shrink: 0; align-self: flex-end; }
@media (max-width: 669px) { .section-title-row > .btn { align-self: stretch; } }

/* Блок 10 (P10): подписи полей, список, контактное лицо */
.lead-field__label { display: block; margin-bottom: var(--space-1); font-size: var(--type-body-s14-size); line-height: var(--type-body-s14-lh); font-weight: var(--font-weight-medium); }
.input-field--area { height: auto; align-items: flex-start; }
.input-field--area .input-field__input { min-height: 72px; resize: vertical; }
.lead-select .select, .lead-select .select__trigger { width: 100%; min-width: 0; }
.lead-select .select__trigger { min-height: 51px; padding: var(--space-3) var(--space-5); border-radius: var(--radius-m); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); }
.lead-select .select__dropdown { z-index: 5; }
.cta-form__note { margin: 0; font-size: var(--type-body-s13-size); line-height: var(--type-body-s13-lh); opacity: .85; }
.cta-form--brand .cta-form__note a { color: inherit; text-decoration: underline; }
.cta-contact { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.cta-contact__info p { margin: 0; }
.cta-contact__name { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); font-weight: var(--font-weight-bold); }
.cta-form--brand .cta-contact a { color: inherit; }

/* правки по первому рендеру */
.section-title-row > .section-title__link-btn { align-self: center; flex-shrink: 0; }
.section-title__link-btn .icon { width: 20px; height: 20px; flex-shrink: 0; }
.summary-panel__facts .icon { padding: 3px; box-sizing: border-box; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-text-inverse) 22%, transparent); }
.section-title__sub a { color: var(--color-primary); }
.expert-mosaic__photo { height: auto; }

/* ═══ Чистовая: правки ревью ═══ */
/* пилюли кита на 375 уходят в конец (order:3 у format-row__time) — на этой странице пилюля стоит в начале карточки */
.format-row__time { order: 0; }
/* 1440: карточка рекомендации по высоте содержимого, без пустого поля под списком */
.md--tasks { align-items: start; }
.md--tasks .md__panels, .md--tasks .md__panel { height: auto; }
/* цена и всё содержимое карточек варианта — слева на любой ширине */
.format-card, .format-card .advantages-card__body { text-align: left; align-items: flex-start; }
.format-card__price { align-self: flex-start; text-align: left; }
/* поле «Задача»: минимум 4 строки, подсказка видна целиком */
.input-field--area { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.input-field--area .input-field__input { height: auto; min-height: calc(4 * var(--type-body-m-lh)); line-height: var(--type-body-m-lh); font-size: var(--type-body-m-size); resize: vertical; overflow: auto; }
.cta-form .input-field.input-field--m.input-field--area { height: auto; min-height: 0; align-items: flex-start; }
.cta-form__pair > .lead-field { flex: 1 1 0; min-width: 0; }
/* список задач компактнее: высота списка ≈ высоте карточки рекомендации, без провала под карточкой */
.md--tasks .md__list { gap: var(--space-2); }
.md--tasks .md__item { padding: var(--space-3) var(--space-5); align-items: center; }
.md--tasks .md__badge { margin-top: 0; }
.md--tasks .md__name { font-size: var(--type-h6-size); line-height: var(--type-h6-lh); }
/* карточка и список одной высоты (разница ≤ 62px уходит в промежуток перед футером карточки, внизу пустоты нет) */
@media (min-width: 1025px) {
    .md--tasks { align-items: stretch; }
    .md--tasks .md__panels { display: flex; }
    .md--tasks .md__panel { height: auto; flex: 1; }
}
@media (max-width: 669px) { .section-title-row > .btn { width: 100%; align-self: stretch; } }

/* ═══ К выкатке: фото, ритм «лист / синяя панель», крупные цифры (только токены кита) ═══ */
/* первый экран: крупное фото */
.hero-photo .hero-landing__image { border-radius: var(--radius-xl); aspect-ratio: 4 / 3; box-shadow: var(--elevation-lg); }
/* полоса фактов: крупные цифры */
.ratings--big .rating-card__place { padding: 0; background: none; color: var(--color-primary); white-space: normal; font-size: var(--type-h3-size); line-height: var(--type-h3-lh); }
.ratings--big .rating-card { gap: var(--space-2); }
/* подбор: фото в карточке рекомендации */
.task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); width: 100%; }
.task-head__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.task-photo { flex-shrink: 0; width: 34%; max-width: 260px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); }
@media (max-width: 669px) { .task-head { flex-direction: column; } .task-photo { width: 100%; max-width: none; order: 2; } }
/* три варианта: фото сверху карточки */
.format-card__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); margin-bottom: var(--space-4); }
/* процесс на синей панели */
.panel-brand { padding: var(--space-10); border-radius: var(--radius-xl); background-color: var(--color-primary); background-image: linear-gradient(100deg, var(--color-primary-hover) 0%, var(--color-primary) 100%); color: var(--color-text-inverse); }
.panel-brand .section-title { margin-bottom: var(--space-10); }
.panel-brand .section-title__title, .panel-brand .section-title__sub { color: var(--color-text-inverse); }
.panel-brand .stage-card { background: var(--color-bg-primary); }
.panel-brand .stage-card--accent { background: var(--color-secondary); }
.panel-brand .stage-card--accent .format-row__time { background: var(--color-bg-primary); color: var(--color-secondary); }
.panel-brand .stage-card--accent .stage-card__num { color: color-mix(in srgb, var(--color-text-inverse) 35%, transparent); }
@media (max-width: 669px) { .panel-brand { padding: var(--space-5); } .panel-brand .section-title { margin-bottom: var(--space-6); } }
/* кейсы и логотипы с боевой /corporate/ */
.case-card__photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); }
.case-card__logo { display: block; height: 44px; width: auto; max-width: 60%; }
.companies-ticker__logo--card { height: 56px; width: auto; opacity: 1; filter: none; }
/* преподаватели: фото под кнопками */
.experts-top__photo { display: block; width: 100%; margin-top: var(--space-6); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-l); }
/* почему РШУ: большое фото рядом с карточками */
.why-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: stretch; }
.why-layout__photo { position: relative; min-height: 320px; border-radius: var(--radius-xl); overflow: hidden; }
.why-layout__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .why-layout { grid-template-columns: 1fr; } .why-layout__photo { min-height: 0; aspect-ratio: 16 / 9; } }
/* контакт в форме: знак вместо фото */
.cta-contact__mark { flex-shrink: 0; }
.panel-brand .section-title__title { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
@media (min-width: 768px) { .panel-brand .section-title__title { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); } }
@media (min-width: 1224px) { .panel-brand .section-title__title { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); } }
@media (max-width: 669px) { .section-container > .section-title .section-title__title { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); } }
.experts-top__media { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.experts-top__photo { margin-top: 0; aspect-ratio: 3 / 1; border-radius: var(--radius-m); }
.stage-cards--process .stage-card { min-height: 0; }
@media (max-width: 669px) { .ratings--big .rating-card__place { font-size: var(--type-h5-size); line-height: var(--type-h5-lh); } }

/* 02.10 правки Боровской: пять фактов (5 → 3 → 2, последняя на всю ширину) и четыре пункта «В любом варианте» (2×2, на телефоне столбиком) */
.ratings--grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1249px) { .ratings--grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 669px)  { .ratings--grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ratings--grid--5 > :last-child { grid-column: 1 / -1; } }
.summary-panel__facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8, 40px); }
@media (max-width: 669px)  { .summary-panel__facts--4 { grid-template-columns: 1fr; } }
/* кнопки карточек — во всю ширину и одной линией на всех экранах, длинный текст переносится по центру */
.format-card__cta .btn { width: 100%; white-space: normal; height: auto; min-height: var(--btn-height, 48px); text-align: center; justify-content: center; }
/* факты на средних ширинах: 3 + 2 без пустого места — сетка на 6 долей */
@media (min-width: 670px) and (max-width: 1249px) {
    .ratings--grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ratings--grid--5 > * { grid-column: span 2; }
    .ratings--grid--5 > :nth-child(n+4) { grid-column: span 3; }
}
/* планшет: третья карточка вариантов одна в ряду — растягиваем на ширину, фото слева */
@media (min-width: 670px) and (max-width: 1024px) {
    #formats .format-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
    #formats .format-card:last-child .format-card__photo { width: 100%; height: 100%; min-height: 260px; margin: 0; aspect-ratio: auto; object-fit: cover; }
}

/* 02.10, Катя: факты «интереснее» — одна панель вместо пяти плиток: разделители, крупные цифры, оранжевый штрих кита над цифрой */
.ratings--strip { column-gap: var(--space-6); padding: var(--space-8, 40px); background: var(--color-white, #fff); border-radius: var(--radius-2xl); box-shadow: var(--shadow-soft); }
.ratings--strip.ratings--big .rating-card { padding: 0 0 0 var(--space-6, 24px); background: none; box-shadow: none; border-radius: 0; border-left: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent); }
.ratings--strip.ratings--big .rating-card:first-child { border-left: 0; padding-left: 0; }
.ratings--strip.ratings--big .rating-card__place { white-space: nowrap; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.ratings--strip.ratings--big .rating-card::before { content: ""; display: block; flex-shrink: 0; width: 32px; height: 4px; margin-bottom: var(--space-2, 8px); border-radius: var(--radius-full); background: var(--color-secondary); }
@media (min-width: 670px) and (max-width: 1249px) {
    .ratings--strip { row-gap: var(--space-8, 40px); }
    .ratings--strip.ratings--big .rating-card:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 669px) {
    .ratings--strip { row-gap: var(--space-6, 24px); padding: var(--space-6, 24px) var(--space-5, 20px); border-radius: var(--radius-xl); }
    .ratings--strip.ratings--big .rating-card { padding: 0 0 0 var(--space-4, 16px); }
    .ratings--strip.ratings--big .rating-card:nth-child(odd) { border-left: 0; padding-left: 0; }
    .ratings--strip.ratings--big .rating-card__place { font-size: 24px; }
}