/* =========================================================
   Общие компоненты страниц раздела «Обучение» (SITE-45).
   Подключается на двух шаблонах: template-intensiv-mgt.php
   (Интенсив) и template-perimenopauza.php (мастер-класс).

   Правила перенесены из assets/intensiv.css без изменения деклараций.
   Каждое правило пока носит два имени: нейтральное .kb-edu-* (его
   использует мастер-класс) и прежнее .kb-int-* — псевдоним, на котором
   держится неизменённая разметка Интенсива. Когда разметка Интенсива
   перейдёт на .kb-edu-*, псевдонимы удаляются.

   Исключение — секция «Автор»: её разметку для обеих страниц выводит
   kb_edu_render_author() (inc/edu-helpers.php), и она уже на .kb-edu-*;
   псевдонимы .kb-int-author* / .kb-int-stat* остаются до той же чистки.

   Порядок подключения: global.css → edu.css → intensiv.css. В intensiv.css
   остаётся только то, что есть у одного Интенсива (программа-аккордеон,
   «Не подойдёт», «Выпускники», неактивные кнопки закрытого набора).

   Собственные правила мастер-класса (без псевдонимов) помечены в тексте;
   их три: кегль кнопки hero, плашка под карточками, абзацы программы.
   ========================================================= */

.kb-edu-page,
.kb-intensiv {
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 40px var(--page-px) 60px;
    box-sizing: border-box;
    font-family: var(--font-body);
}

/* ── Hero ───────────────────────────────────────────── */

.kb-edu-hero,
.kb-int-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 64px;
}

.kb-edu-hero-label,
.kb-int-hero-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0 0 12px;
}

.kb-edu-hero-title,
.kb-int-hero-title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    color: var(--text-heading);
    line-height: var(--leading-tight);
    margin: 0 0 12px;
}

.kb-edu-hero-sub,
.kb-int-hero-sub {
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0 0 16px;
}

.kb-edu-price-label,
.kb-int-price-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 4px;
}

.kb-edu-price,
.kb-int-price {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 16px;
}

.kb-edu-hero-img,
.kb-int-hero-img {
    min-width: 0;
    max-width: 85%;
    margin-left: auto;
}

.kb-edu-hero-img img,
.kb-int-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Кнопки ─────────────────────────────────────────── */

/* Ширина 100% — форма из исходника: в hero кнопки идут колонкой
   под текстом. ROADMAP держит отдельной задачей унификацию кнопочной
   системы сайта; до неё эти классы живут своей геометрией. */
.kb-edu-btn,
.kb-int-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--accent);
    color: var(--color-neutral-0);
    font-size: var(--text-md);
    font-weight: 600;
    text-align: center;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
}

.kb-edu-btn:hover,
.kb-edu-btn:focus,
.kb-int-btn:hover,
.kb-int-btn:focus {
    background: var(--color-blue-400);
    color: var(--color-neutral-0);
}

/* Первичная кнопка hero — кегль 18px, как у «Принять участие» Интенсива.
   У Интенсива это правило остаётся в intensiv.css со своим :not(): там
   рядом стоит вторичная кнопка «Отзывы выпускников», здесь её нет. */
.kb-edu-hero-text .kb-edu-btn {
    font-size: 18px;
}

/* Выделенная голубая плашка. У Интенсива стоит в hero над кнопкой
   (фазовое примечание), у мастер-класса — под карточками «Для кого /
   что даст» (пометка для участников Интенсива, см. правило ниже). */
.kb-edu-plate,
.kb-int-hero-plate {
    font-size: var(--text-md);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin: 0 0 14px;
    padding: 12px 16px;
    background: var(--bg-tinted);
    border-left: 3px solid var(--border-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Приглушённая строка под кнопками — вспомогательная строка hero:
   строка старта у Интенсива, дата и время у мастер-класса. Уточняет
   предложение, но не спорит с кнопкой за внимание. */
.kb-edu-hero-subline,
.kb-int-hero-subline {
    font-size: var(--text-md);
    color: var(--text-subtle);
    line-height: var(--leading-relaxed);
    margin: 10px 0 0;
}

/* ── «Для кого / что даст» ─────────────────────────── */

.kb-edu-split,
.kb-int-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: var(--container-max);
    margin: 0 auto 64px;
}

.kb-edu-split-card,
.kb-int-split-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: 28px var(--card-padding);
}

.kb-edu-split-card h2,
.kb-int-split-card h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 16px;
}

.kb-edu-split-card ul,
.kb-int-split-card ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.kb-edu-split-card li,
.kb-int-split-card li {
    font-size: var(--text-base);
    color: var(--text-body);
    line-height: var(--leading-loose);
    margin-bottom: 6px;
}

/* Плашка под карточками «Для кого / что даст» (мастер-класс): стоит
   внутри сетки и занимает обе колонки, поэтому отступ до карточек —
   это зазор сетки (24px, на мобильном 16px), а ширина — ширина сетки.
   Собственный нижний отступ плашки из hero здесь не нужен. */
.kb-edu-split .kb-edu-plate {
    grid-column: 1 / -1;
    margin: 0;
}

/* ── Программа ──────────────────────────────────────── */

.kb-edu-program,
.kb-int-program {
    max-width: var(--container-max);
    margin: 0 auto 64px;
}

.kb-edu-program-heading,
.kb-int-program-heading {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 8px;
}

/* Программа мастер-класса — текст абзацами, а не блоки-аккордеон.
   Типографика — как у тезисов лекций Интенсива. Верхний отступ
   схлопывается с нижним у заголовка, между абзацами те же 12px. */
.kb-edu-program p {
    font-size: var(--text-base);
    color: var(--text-body);
    line-height: var(--leading-loose);
    margin: 12px 0 0;
}

/* ── Формат и расписание ────────────────────────────── */

/* Ширина — как у программы (--container-max), а не узкая колонка:
   секция читается в одном ритме с блоками лекций над ней.
   Кегль внутри секции поднят на 25% от базовой шкалы — решение admin
   по dev-превью. Через calc от токенов, а не числами: если базовая
   шкала поедет, пропорция сохранится. */
.kb-edu-format,
.kb-int-format {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: 32px;
    max-width: var(--container-max);
    margin: 0 auto 64px;
}

.kb-edu-format h2,
.kb-int-format h2 {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 20px;
}

.kb-edu-format-grid,
.kb-int-format-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.kb-edu-format-col h3,
.kb-int-format-col h3 {
    font-size: calc(var(--text-sm) * 1.25);
    font-weight: 600;
    color: var(--text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 12px;
}

.kb-edu-format-col ul,
.kb-int-format-col ul {
    margin: 0;
    padding: 0 0 0 20px;
}

.kb-edu-format-col li,
.kb-int-format-col li {
    font-size: calc(var(--text-base) * 1.25);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    margin-bottom: 8px;
}

.kb-edu-format-col li strong,
.kb-int-format-col li strong {
    color: var(--accent);
}

/* Строка-примечание в колонке: пункт, целиком обёрнутый в <em>, читается
   не как элемент перечисления, а как сноска к нему — поэтому теряет маркер
   и уходит в приглушённый цвет.

   Оговорка про :only-child — псевдокласс считает только элементы-соседи,
   текстовые узлы для него не существуют. Поэтому правило поймает и строку
   вида «текст <em>курсив</em>», где <em> — единственный вложенный тег.
   Средствами CSS «внутри li нет ничего, кроме этого <em>» не выражается.
   Сейчас это ни на что не влияет: выделение внутри строк в списках
   делается через <strong>. Если понадобится частичный курсив в этих
   колонках — строку придётся разводить классом, а не структурой. */
.kb-edu-format-col li:has(em:only-child),
.kb-int-format-col li:has(em:only-child) {
    list-style: none;
}

.kb-edu-format-col li:has(em:only-child) em,
.kb-int-format-col li:has(em:only-child) em {
    color: var(--text-subtle);
}

/* ── Автор ──────────────────────────────────────────── */

.kb-edu-author,
.kb-int-author {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: start;
    max-width: var(--container-text);
    margin: 0 auto 80px;
}

.kb-edu-author-photo,
.kb-int-author-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.kb-edu-author-photo img,
.kb-int-author-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.kb-edu-author-label,
.kb-int-author-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0 0 8px;
}

.kb-edu-author-name,
.kb-int-author-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 16px;
}

.kb-edu-author-stats,
.kb-int-author-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.kb-edu-stat,
.kb-int-stat {
    border-left: 2px solid var(--border-default);
    padding-left: 12px;
}

.kb-edu-stat-num,
.kb-int-stat-num {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--text-heading);
    line-height: 1;
}

.kb-edu-stat-label,
.kb-int-stat-label {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 2px;
}

.kb-edu-author-bio p,
.kb-int-author-bio p {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: var(--leading-loose);
    margin: 0 0 6px;
}

.kb-edu-author-bio p:last-child,
.kb-int-author-bio p:last-child {
    margin-bottom: 0;
}

.kb-edu-author-bio-lead,
.kb-int-author-bio-lead {
    font-size: var(--text-md);
    color: var(--text-heading);
}

/* ── Финальный CTA ──────────────────────────────────── */

.kb-edu-cta,
.kb-int-cta {
    background: var(--color-blue-900);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    max-width: var(--container-text);
    margin: 0 auto 48px;
}

.kb-edu-cta-title,
.kb-int-cta-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--color-neutral-0);
    margin: 0 0 8px;
}

.kb-edu-cta-price,
.kb-int-cta-price {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    color: var(--color-neutral-0);
    margin: 0 0 8px;
}

/* Первичная CTA тёмной зоны — тот же кегль 18px, что у кнопки в hero. */
.kb-edu-cta-btn,
.kb-int-cta-btn {
    display: inline-block;
    background: var(--accent);
    color: var(--color-neutral-0);
    font-size: 18px;
    font-weight: 600;
    padding: 14px 40px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
}

.kb-edu-cta-btn:hover,
.kb-edu-cta-btn:focus,
.kb-int-cta-btn:hover,
.kb-int-cta-btn:focus {
    background: var(--color-blue-400);
    color: var(--color-neutral-0);
}

/* Примечание стоит между ценой и кнопкой — поясняет цифру над собой.
   У Интенсива это фазовое примечание, у мастер-класса — строка даты;
   в обоих случаях то же поле, что в hero, и кегль общий — 15px.
   Приглушённый текст на тёмной плашке: токена под эту прозрачность нет,
   --text-on-dark задаёт 0.85, здесь нужен более тихий уровень. */
.kb-edu-cta-note,
.kb-int-cta-note {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--leading-relaxed);
    margin: 0 0 20px;
}

/* ── Мобильная раскладка ───────────────────────────── */

@media (max-width: 767px) {
    .kb-edu-page,
    .kb-intensiv {
        padding-top: 24px;
    }

    .kb-edu-hero,
    .kb-int-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }

    .kb-edu-hero-img,
    .kb-int-hero-img {
        order: -1;
        max-width: 100%;
        margin-left: 0;
    }

    .kb-edu-hero-title,
    .kb-int-hero-title {
        font-size: 24px;
    }

    .kb-edu-split,
    .kb-int-split {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 40px;
    }

    .kb-edu-program-heading,
    .kb-int-program-heading {
        font-size: 20px;
    }

    .kb-edu-format,
    .kb-int-format {
        padding: 24px 20px;
    }

    .kb-edu-format-grid,
    .kb-int-format-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kb-edu-author,
    .kb-int-author {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }

    .kb-edu-cta,
    .kb-int-cta {
        padding: 28px 20px;
    }

    .kb-edu-cta-title,
    .kb-int-cta-title {
        font-size: 20px;
    }

    .kb-edu-cta-price,
    .kb-int-cta-price {
        font-size: 26px;
    }
}