/* ===========================================================================
   layout.css — несущая вёрстка: фон страницы, шапка (герой, плинт, меню),
   полоса контента с двумя колонками, подвал.
   TASKS P4-4, правила фолбэков — DESIGN §10.

   Третий в каскаде, после tokens.css и base.css. Здесь только «где блок и
   какого он размера» плюс хром шапки и подвала. Всё, что «как выглядит
   отдельная плашка» — баннер страницы, риббоны сайдбара, виджет Discord,
   кнопки — в components.css (P4-5).

   ---------------------------------------------------------------------------
   ЧЕТЫРЕ ВЕЩИ, КОТОРЫЕ ЗДЕСЬ СДЕЛАНЫ НЕ КАК В ПРОТОТИПЕ

   1. НИ ОДНОГО `gap`. В прототипе зазоры между колонками, между блоками
      сайдбара и между маскотами сделаны через `gap`, а во Safari 13 (ярус A,
      DESIGN §10 п.1) flex-gap не существует — все три зазора обнулились бы
      разом, и колонки склеились. Здесь зазор всегда живёт на ребёнке
      (`margin`), а контейнер отдаёт ему часть своего padding. Арифметика
      расписана у каждого места; сумма везде даёт цифры хендоффа.

   2. `display:contents` на ссылке вокруг логотипа заменён на обычный блок
      (DESIGN §10 п.8: в старом Safari он ломает и раскладку, и доступность).
      Размер держит сама ссылка, картинка внутри — `width:100%`.

   3. `min(520px, 78%)` и `min(260px, 100%)` из прототипа развёрнуты в пару
      `width` + `max-width` и в `min-width:0`. Причина та же, что у clamp в
      токенах: `min()` внутри значения не откатывается к предыдущей строке,
      а сбрасывает свойство в initial. А `min-width:auto` у flex-элемента —
      это min-content, то есть ровно тот горизонтальный скролл, который
      §10 п.14 запрещает.

   4. Маскоты в подвале уменьшены на узких экранах (mobile-first + один
      `min-width`-запрос). В прототипе их четыре по 96–104 px в абсолютно
      позиционированном блоке `left:0;right:0` — на 320 px они суммарно шире
      вьюпорта и дают горизонтальный скролл всей странице. Клипать нельзя:
      блок нарочно торчит выше подвала.

   ПРО ПАРУ «СТАТИКА + var()» (DESIGN §10 п.11). Дублируется сплошным
   значением всё, где потеря переменной делает текст невидимым или уносит
   цвет: `color`, `background`, `background-color`. Декор — рамки, тени,
   радиусы, `filter` — идёт одним `var()`: браузер без custom properties
   отбросит объявление при разборе и просто не нарисует украшение, а это
   безопасно. Хексы в файле встречаются только в первой строке такой пары —
   ровно так же, как в base.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Оболочка страницы. Подвал прижат к низу на коротких страницах (404),
   иначе он висел бы посередине экрана.
   --------------------------------------------------------------------------- */

.cfa-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Осколки поверх вертикального градиента. background-color отдельным
       longhand-ом ПОСЛЕ шорткода: шорткод сбрасывает цвет в transparent, а
       он нужен как подложка, если svg не доехал. */
    background: linear-gradient(180deg, #1ea7f2 0%, #4dbaf5 420px, #8fd3f8 1100px, #b8e3fa 100%);
    background: var(--tex-shatter), var(--g-page);
    background-color: #1ea7f2;
    background-color: var(--c-page-0);
}

/* ===========================================================================
   Шапка
   =========================================================================== */

.site-head {
    position: relative;

    /* Страховка: без object-fit (ярус B) арт растягивается по коробке, и
       лишнего за её пределы не уезжает. */
    overflow: hidden;

    /* Лучи солнца. Три строки — это лестница из §10 п.5 и п.11: без
       conic-gradient браузер отбрасывает третью строку и остаётся с
       линейным градиентом, без var() — отбрасывает вторую и третью.
       conic-gradient написан литералом, а не токеном: в токене он сделал
       бы фон ПРОЗРАЧНЫМ вместо откатa (см. шапку tokens.css). */
    background: linear-gradient(180deg, #1ea7f2 0%, #56c1f7 70%, #0b72c2 100%);
    background: var(--g-hero);
    background: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255, 255, 255, .2) 0deg 5deg, transparent 5deg 12deg),
                linear-gradient(180deg, #1ea7f2 0%, #56c1f7 70%, #0b72c2 100%);

    /* Небесная линия под меню. В прототипе это `box-shadow:0 4px 0` у самого
       nav — но тень ребёнка обрезается нашим overflow:hidden, поэтому линия
       переехала в border шапки: границы своим overflow не клипаются. */
    border-bottom: 4px solid var(--c-sky);
}

.site-hero {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1180px;
    max-width: var(--w-page);
    margin: 0 auto;
    height: 240px;
    height: clamp(190px, 27vw, 320px);
    text-decoration: none;
}

.site-hero-art {
    position: absolute;
    /* inset:0 развёрнут в четыре longhand — DESIGN §10 п.6 */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* object-position:center top держит лица в кадре при обрезке по бокам */
    object-fit: cover;
    object-position: center top;
}

.site-hero-fade {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    background: linear-gradient(180deg, transparent, rgba(6, 74, 133, .25));
    background: var(--g-hero-fade);
}

/* --- Плинт с логотипом ---------------------------------------------------- */

.site-plinth {
    /* z-index нужен из-за отрицательного margin у логотипа: он наезжает на
       арт, и без слоя арт (он идёт раньше, но позиционирован) перекрыл бы
       логотип. */
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    /* не stretch: ссылка внутри должна остаться по высоте картинки */
    align-items: flex-start;
    padding: 0 20px 12px;

    background: linear-gradient(180deg, #0b72c2 0%, #0a4f94 55%, #083d78 100%);
    background: var(--tex-halftone-lite), var(--g-plinth);
    background-color: #0a4f94;
    background-color: var(--c-navy-mid);

    border-top: 3px solid var(--c-sky-pale);
    box-shadow: var(--sh-plinth);
}

.site-plinth-link {
    display: block;
    /* Размер держит ссылка, а не картинка: в прототипе тут был
       display:contents, и без него `width:78%` у <img> считался бы от
       ширины самой картинки. */
    width: 78%;
    max-width: 520px;
    /* Логотип наезжает на арт снизу вверх. Статика — середина диапазона. */
    margin-top: -30px;
    margin-top: clamp(-44px, -3.2vw, -20px);
    text-decoration: none;
}

.site-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: var(--dr-logo);
}

/* --- Меню ----------------------------------------------------------------- */

.site-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    background: linear-gradient(180deg, #ffffff 0%, #e3ebf3 45%, #b9c8d8 52%, #dfe7ef 100%);
    background: var(--g-chrome);

    border-top: 2px solid var(--c-outline);
    border-bottom: 3px solid var(--c-outline);
}

.nav-item {
    padding: 14px 22px;
    font-family: 'Exo 2', 'Trebuchet MS', Tahoma, sans-serif;
    font-family: var(--f-display);
    font-weight: 900;
    font-style: italic;
    font-size: 17px;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    color: #0a2a55;
    color: var(--c-navy);
    border-right: 1px solid var(--c-rule);
}

/* Разделитель — между пунктами, а не после последнего */
.nav-item:last-child {
    border-right: 0;
}

/* У наведённого и активного пункта текст белый, поэтому фон обязан иметь
   сплошную страховку: без неё браузер без var() нарисовал бы белым по
   светлому хрому — тот самый невидимый текст из §10 п.11. */
.nav-item:hover,
.nav-item:focus {
    color: #ffffff;
    background: linear-gradient(180deg, #8fe1ff 0%, #2cb0f6 48%, #0e8ee0 52%, #0b6fbf 100%);
    background: var(--g-sky);
    text-shadow: 0 1px 0 var(--c-outline);
}

.nav-item.is-active {
    color: #ffffff;
    background: linear-gradient(180deg, #ff5a5f 0%, #e4262c 50%, #c2121a 51%, #9e0d14 100%);
    background: var(--g-red);
    text-shadow: 0 1px 0 var(--c-red-border);
}

/* ===========================================================================
   Полоса контента: шотландка во всю ширину, внутри — центрованная полоса
   с двумя колонками.
   =========================================================================== */

.site-content {
    /* Растягивается на всё свободное место, чтобы подвал был внизу.
       `1 0 auto`, а не `1`: у `flex:1` базис 0%, и в старом Safari колонка
       с длинным контентом получала бы высоту меньше содержимого. */
    flex: 1 0 auto;

    background: linear-gradient(180deg, #8fd3f8, #bfe7fb);
    background: var(--tex-plaid), var(--g-content);
    background-color: #8fd3f8;
    background-color: var(--c-content-0);
}

/* Боковой отступ хендоффа — 20px, зазор между колонками — 24px. Зазор живёт
   на колонках (по 12px с каждой стороны), поэтому полосе остаётся 20-12=8px.
   Нижний отступ 90px точно так же разделён: 66px здесь + 24px margin-bottom
   у колонок. Ни одного отрицательного margin-а. */
.site-wrap {
    max-width: 1180px;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 28px 8px 66px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* ---------------------------------------------------------------------------
   Основная колонка. Базисы взяты из хендоффа как есть (560 и 300).

   Чего это стоит, и почему всё равно так. Flexbox считает margin в
   гипотетическом размере элемента, а у нас в margin живёт зазор, которого
   в прототипе не было (там `gap`). Поэтому две цифры расходятся с
   прототипом: колонки сваливаются в одну на 20px раньше и на самой широкой
   раскладке основная колонка получается на 10px шире, а сайдбар на столько
   же уже — свободное место делится ПОСЛЕ вычета margin-ов, а в прототипе
   делилось после вычета одного gap-а.

   Обе цифры измерены в P4-10 (`./dev.sh viewport`), а не выведены на
   бумаге, и первая из них бумагу поправила:
     порог переноса  904px  против 924px у прототипа
       у нас:      560+24 (margin) + 300+4 = 888 нужно внутри, полоса
                   отдаёт V−16 (padding 8+8)  ->  V = 904, замер: ровно 904
       прототип:   560 + 24 (gap) + 300      = 884 внутри, полоса отдаёт
                   V−40 (padding 20+20)      ->  V = 924
     ширина колонок на 1180px  698 / 438  против 688 / 428 у прототипа

   Подгонять базисы под эти 10px бессмысленно: точного совпадения на всех
   ширинах не даёт ни одна пара чисел (при равном flex-grow система из двух
   уравнений несовместна), а 560/300 — это подсказка «где переносить», а не
   измеренная величина. Что совпадает точно: суммарная ширина обеих колонок,
   все боковые отступы полосы (20px) и зазор между колонками (24px).
   --------------------------------------------------------------------------- */

.page-card {
    flex: 1 1 560px;
    /* Без этого длинный <code> или широкая картинка в контенте растянут
       колонку: min-width у flex-элемента по умолчанию min-content. */
    min-width: 0;
    margin: 0 12px 24px;

    background: #ffffff;
    background: var(--c-surface);

    border: 1px solid var(--c-card-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-card);

    /* Баннер и его арт обрезаются по скруглению карточки */
    overflow: hidden;
}

.page-body {
    padding: 26px;
}

/* ---------------------------------------------------------------------------
   Сайдбар. Сам — тоже flex-wrap контейнер: на планшете блоки встают по два,
   на телефоне — в одну колонку под контентом.

   Арифметика: 2px у колонки + 10px у блока = те же 12px, что у основной
   колонки, поэтому левые края блоков и карточки совпадают. Снизу 20px у
   блока + 4px у колонки = 24px, как у карточки. Зазор между блоками — 20px
   (--sp-box), между колонками — 12+2+10 = 24px (--sp-gutter). Правый край
   полосы: 8px padding + 2px + 10px = 20px (--sp-side).
   --------------------------------------------------------------------------- */

.site-side {
    flex: 1 1 300px;
    min-width: 0;
    margin: 0 2px 4px;

    display: flex;
    flex-wrap: wrap;
    /* Блоки прижаты к верху: иначе при двух колонках разной высоты
       flex-wrap растянул бы строки по всей высоте сайдбара. */
    align-content: flex-start;
}

.side-box {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0 10px 20px;

    border-radius: var(--r-xl);
    /* Риббон-заголовок упирается в скругление, а не торчит углами */
    overflow: hidden;
    box-shadow: var(--sh-box);
}

/* ===========================================================================
   Подвал
   =========================================================================== */

.site-foot {
    /* точка отсчёта для маскотов */
    position: relative;

    background: linear-gradient(180deg, #0b4f8f, #0a2a55 60%, #061a38);
    background: var(--tex-halftone), var(--g-foot);
    background-color: #0a2a55;
    background-color: var(--c-navy);

    border-top: 4px solid var(--c-sky);
    box-shadow: inset 0 3px 0 var(--c-sky-pale);
}

/* --- Маскоты на верхней кромке -------------------------------------------- */

.foot-mascots {
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* блок висит поверх контента — клики должны проходить сквозь него */
    pointer-events: none;
}

.foot-mascot {
    /* Размеры мобильные, выше 720px их перебивает медиа-запрос ниже.
       height задаётся, width считается — атрибуты width/height в разметке
       стоят у каждой картинки (P3-2) и держат пропорцию до загрузки. */
    width: auto;
    margin: 0 6px;
    margin: 0 clamp(6px, 2vw, 30px);
    filter: var(--dr-mascot);
}

.foot-mascot--drum   { height: 48px; }
.foot-mascot--fluffy { height: 36px; }
.foot-mascot--horn   { height: 52px; }
.foot-mascot--jack   { height: 44px; }

/* --- Логотип, меню, копирайт ---------------------------------------------- */

/* Нижние 22px хендоффа разделены: 8px здесь + 14px margin-bottom у детей.
   При переносе те же 14px становятся вертикальным зазором между строками,
   а align-items:center не съезжает — margin у обоих детей одинаковый. */
.foot-main {
    max-width: 1180px;
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 34px 20px 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.foot-logo {
    width: 220px;
    height: auto;
    margin: 0 24px 14px 0;
    filter: var(--dr-foot-logo);
}

.foot-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.foot-link {
    margin-left: 18px;
    color: #8fe1ff;
    color: var(--c-sky-pale);
    text-decoration-color: rgba(143, 225, 255, .45);
    text-decoration-color: var(--c-foot-link-rule);
}

.foot-link:first-child {
    margin-left: 0;
}

/* base.css красит a:hover в красный — на тёмно-синем это плохо читается */
.foot-link:hover,
.foot-link:focus {
    color: #ffffff;
    text-decoration-color: #ffffff;
}

.foot-link--admin {
    font-weight: 600;
    color: #9fb6d1;
    color: var(--c-foot-dim);
}

.foot-legal {
    padding: 12px 20px;
    border-top: 1px solid var(--c-foot-rule);
    text-align: center;
    font-size: 12px;
    font-size: var(--fs-micro);
    color: #9fb6d1;
    color: var(--c-foot-dim);
}

/* ===========================================================================
   Единственный медиа-запрос файла — и только min-width (DESIGN §10 п.12).
   Раскладка колонок адаптивна без запросов, на flex-wrap + flex-basis;
   запрос нужен лишь маскотам, у которых нет механизма «стать меньше».
   720px выбрано с запасом: на нём четыре маскота полного размера вместе с
   отступами занимают ~450px.
   =========================================================================== */

@media (min-width: 720px) {
    .foot-mascots {
        top: -64px;
    }

    .foot-mascot--drum   { height: 96px; }
    .foot-mascot--fluffy { height: 70px; }
    .foot-mascot--horn   { height: 104px; }
    .foot-mascot--jack   { height: 88px; }

    .foot-main {
        padding-top: 56px;
    }
}