/* =========================================================
   camp-tokens.css — ЕДИНЫЙ СЛОЙ ТОКЕНОВ И ОБЩИХ КЛАССОВ
   Подключается ПЕРВЫМ среди camp-*.css.

   Правила страницы (см. REFACTORING.md):
   • цвета / радиусы / тени / отступы секций — только через токены;
   • раскладка (flex, gap, выравнивание) — утилитами Bootstrap 5.3 в разметке;
   • в camp-*.css остаётся только то, чего нет в Bootstrap:
     градиенты, «стекло», свечения, анимации, нестандартная типографика.
   ========================================================= */

:root {
    /* ---- Брендовая палитра ---- */
    --camp-orange:        #ff8c42;
    --camp-orange-dark:   #e67326;
    --camp-orange-light:  #ff9f5a;
    --camp-gold:          #ffd166;

    --camp-blue:          #4080bf;
    --camp-blue-dark:     #2f6a9e;
    --camp-blue-soft:     #e8f4fd;
    --camp-cyan:          #5ab9ea;
    --camp-cyan-dark:     #2b8bc2;

    --camp-purple:        #a29bfe;
    --camp-purple-dark:   #6c5ce7;

    --camp-danger:        #dc3545;
    --camp-muted:         #6c757d;

    /* ---- Текст ---- */
    --camp-heading:       #1a1a2e;
    --camp-body:          #495057;

    /* ---- Радиусы ---- */
    --camp-radius-sm:     10px;   /* чипы, буллиты, плашка времени */
    --camp-radius-md:     16px;   /* иконка-бокс, карточка расписания */
    --camp-radius-card:   24px;   /* все крупные карточки страницы */
    --camp-radius-pill:   50px;

    /* ---- Тени ---- */
    --camp-shadow-card:   0 10px 30px rgba(0, 0, 0, .10);
    --camp-shadow-hover:  0 20px 40px rgba(0, 0, 0, .18);

    /* ---- Отступы секций (единый вертикальный ритм) ---- */
    --camp-section-y:     3rem;
    --camp-section-y-sm:  2rem;

    /* ---- ФИКС SPACING: единые зазоры ВНУТРИ секции ----
       Раньше расстояние «шапка → контент» зависело от того, есть ли в секции
       лид-абзац (у .lead свой margin-bottom 1rem), а расстояние
       «контент → следующая секция» — от случайных mb-4 в разметке.
       Теперь все три зазора заданы токенами и одинаковы во всех блоках. */
    --camp-head-gap:      2rem;   /* шапка секции → первый ряд контента */
    --camp-head-gap-sm:   1.5rem; /* то же на мобильном */
    --camp-block-gap:     1.5rem; /* ряд контента → завершающая плашка-примечание */

    /* ---- Анимация ---- */
    --camp-ease:          cubic-bezier(.4, 0, .2, 1);
    --camp-transition:    .3s var(--camp-ease);
}

/* =========================================================
   1. Вертикальный ритм: у всех секций страницы одинаковые
      внешние отступы (вместо разнобоя my-5 / padding: 1rem 0 3rem)
   ========================================================= */
.camp-section {
    padding-top: var(--camp-section-y);
    padding-bottom: var(--camp-section-y);
    /* ФИКС SPACING: страховка — у секции не должно быть собственного
       внешнего отступа, иначе он складывается с padding соседней секции
       и зазор «уезжает». Bootstrap-утилиты mt-N / mb-N здесь не используем. */
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .camp-section {
        padding-top: var(--camp-section-y-sm);
        padding-bottom: var(--camp-section-y-sm);
    }
}

/* =========================================================
   2. Шапка секции: иконка + h2 + лид. Одинакова во всех блоках.
   ========================================================= */
.camp-section-head {
    /* ФИКС SPACING: было margin-bottom: 3rem. Вместе с margin-bottom у .lead
       (Bootstrap, 1rem) это давало ~4rem до контента в секциях с лидом
       и 3rem — в секциях без лида (faq, map). Теперь нижний отступ шапки
       обнулён, а зазор задаёт последний элемент шапки (см. .camp-section-head > :last-child). */
    margin-bottom: 0;
}

/* Отступ «под шапкой» больше не зависит от состава шапки:
   зазор всегда отсчитывается от ПОСЛЕДНЕГО элемента шапки
   (h2 — если лида нет, .lead / .sport-subtitle-accent — если есть). */
.camp-section-head > :last-child {
    margin-bottom: var(--camp-head-gap);
}

@media (max-width: 767.98px) {
    .camp-section-head > :last-child {
        margin-bottom: var(--camp-head-gap-sm);
    }
}

.camp-section-icon {
    width: 92px;
    height: 92px;
    margin-bottom: 1rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .10));
}

/* Исключение: крупная иллюстрация в блоке стоимости */
.camp-section-icon--xl {
    width: 120px;
    height: 120px;
}

.camp-section-title {
    margin-bottom: .75rem;
}

/* Заголовок — последний элемент шапки в секциях без лида (faq, map):
   у него не должно быть нижнего отступа, иначе он сложится с --camp-head-gap. */
.camp-section-head .camp-section-title:last-child {
    margin-bottom: 0;
}

.camp-section-lead {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: 0;   /* зазор задаёт правило :last-child выше */
}

/* =========================================================
   3. Карточка-подложка (белые блоки: документы, преподаватели)
   ========================================================= */
.camp-card {
    background: #fff;
    border-radius: var(--camp-radius-card);
    box-shadow: var(--camp-shadow-card);
    transition: transform var(--camp-transition), box-shadow var(--camp-transition);
}

.camp-card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--camp-shadow-hover);
}

/* =========================================================
   4. Примечание-плашка (единый вид для всех «Важно:» блоков)
   ========================================================= */
.camp-note {
    border-radius: var(--camp-radius-card);
    box-shadow: var(--camp-shadow-card);
    /* ФИКС SPACING: в block_documents плашка шла сразу за .row (зазор 0),
       а в block_teachers перед ней стоял .row mb-4 (зазор 1.5rem).
       Отступ теперь у самой плашки — в обоих блоках одинаково. */
    margin-bottom: 0;
}

/* Плашка внутри колонки сетки (col-12): разрыв сетки g-4 уже даёт 1.5rem,
   поэтому дополнительный отступ сверху здесь не нужен. */
.camp-note--in-grid {
    margin-top: 0;
}

/* Плашка сразу за рядом карточек вне сетки (блок преподавателей) */
.camp-note--after-row {
    margin-top: var(--camp-block-gap);
}

.camp-note-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--camp-radius-md);
    font-size: 1.4rem;
}

/* =========================================================
   5. Иконка-бокс (общая база для sport / documents / schedule)
   ========================================================= */
.camp-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.camp-icon-box--lg {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    font-size: 1.75rem;
}

.camp-icon-box--md {
    width: 56px;
    height: 56px;
    border-radius: var(--camp-radius-md);
    font-size: 1.4rem;
}

.camp-icon-box--sm {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.3rem;
}

@media (max-width: 767.98px) {
    .camp-icon-box--lg {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .camp-icon-box--md {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .camp-icon-box--sm {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* =========================================================
   6. Доступность: уважаем системную настройку «меньше движения»
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .camp-section *,
    .camp-section *::before,
    .camp-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
