/* =========================================================
   marathon-tokens.css — ЕДИНЫЙ СЛОЙ ТОКЕНОВ И ОБЩИХ КЛАССОВ
   страницы марафона «Путешествие Реалкойна».

   Копия camp-tokens.css со страницы осеннего лагеря: те же имена токенов
   (--camp-*), тот же вертикальный ритм и те же общие компоненты
   (.camp-section, .camp-section-head, .camp-card, .camp-note, .camp-icon-box).
   Благодаря этому страница марафона выглядит как часть того же сайта,
   а правила раскладки можно править в одном месте на обеих страницах.

   Добавлены только токены, которых не было у лагеря: зелёная тема
   (третье направление) и синий бренд-градиент марафона.

   Правила страницы (как в REFACTORING.md лагеря):
   • цвета / радиусы / тени / отступы секций — только через токены;
   • раскладка (flex, gap, выравнивание) — утилитами Bootstrap 5.3 в разметке;
   • здесь остаётся только то, чего нет в 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-green:         #48c78e;
    --camp-green-dark:    #1f8a5b;

    /* ---- Текст ---- */
    --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;

    /* ---- Зазоры внутри секции (правило, введённое на странице лагеря) ---- */
    --camp-head-gap:      2rem;   /* шапка секции → первый ряд контента */
    --camp-head-gap-sm:   1.5rem; /* то же на мобильном */
    --camp-block-gap:     1.5rem; /* ряд контента → завершающая плашка-примечание */

    /* ---- Градиент марафона (hero) ---- */
    --mrv-hero-from:      #2f6a9e;
    --mrv-hero-to:        #16324f;

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

/* =========================================================
   1. Вертикальный ритм: у всех секций одинаковые внешние отступы
   ========================================================= */
.camp-section {
    padding-top: var(--camp-section-y);
    padding-bottom: var(--camp-section-y);
    /* страховка: у секции не должно быть собственного внешнего отступа,
       иначе он складывается с padding соседней секции и зазор «уезжает» */
    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 {
    margin-bottom: 0;
}

/* Зазор «под шапкой» не зависит от её состава: отсчёт всегда от
   ПОСЛЕДНЕГО элемента шапки (h2 — если лида нет, .lead — если есть). */
.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;
}

.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);
    margin-bottom: 0;
}

/* Плашка в колонке сетки — разрыв сверху даёт сама сетка g-4 */
.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. Иконка-бокс (общая база для всех блоков)
   ========================================================= */
.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. Появление блоков при скролле (js/marathon-reveal.js)
      Класс .mrv-reveal навешивает СКРИПТ, поэтому без JS ничего
      не скрывается: страница полностью видна и без скриптов.
   ========================================================= */
.mrv-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--camp-ease), transform .6s var(--camp-ease);
}

.mrv-reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

    /* Блоки видны сразу, без появления */
    .mrv-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}