/* ========================================
   INFO OVERVIEW PAGE STYLES
   Prefix: io-
   ======================================== */

/* Hero */
/* Высота, кегли и отступы — те же, что у «Турниров» и категорий:
   один сайт, шапки разделов должны читаться одинаково */
.io-hero {
    /* ОБЛОЖКА РАЗДЕЛА — ОБЩИЕ КРУТИЛКИ, А НЕ СВОИ ЧИСЛА. Решение Кости
       04.10: «обложка раздела — одна крутилка на все разделы». Здесь стояли
       свои 460 и свой воздух `--section-y`, и замер 09.10 показал, во что
       это обходится: 33% · 118% · 27% · 60% · 51% экрана по пяти видам —
       на телефоне лёжа обложка была ВЫШЕ экрана. У восьми соседних
       разделов в это время 360 и 275. */
    position: relative;
    padding: var(--oblozhka-vozduh) var(--pad-x) var(--oblozhka-vozduh-niz);
    text-align: center;
    min-height: var(--oblozhka-pol);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.io-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.io-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.io-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--alpha-black-50) 0%,
        var(--alpha-black-85) 100%
    );
    z-index: 1;
}

.io-hero-content {
    position: relative;
    z-index: 2;
}

.io-hero h1 {
    /* Кегль заголовка обложки — крутилка `--fs-hero` (40 · 32 · 26). Свой
       `clamp` давал 22.62 · 37.14 · 27.2 · 45.06 · 49.6 — ни одного числа
       со шкалы, и на всех пяти видах мимо соседних разделов. */
    font-size: var(--fs-hero);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.io-hero h1 span {
    color: var(--accent);
}

.io-hero p {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Content container */
.io-content {
    padding: var(--section-y) var(--pad-x);
}

/* Featured card (big, photo background) */
.io-featured {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: var(--bw-hair) solid var(--border-subtle);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--space-xl);
}

.io-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--alpha-black-30);
}

.io-featured-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.io-featured-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.io-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--alpha-black-85) 0%, var(--alpha-black-50) 50%, var(--alpha-black-20) 100%);
    z-index: 1;
}

.io-featured-content {
    position: relative;
    z-index: 2;
    padding: var(--space-lg);
}

.io-featured-content h2 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.io-featured-content p {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-md);
    max-width: 600px;
}

.io-featured-link {
    /* ЦЕЛЬ НАЖАТИЯ — СТУПЕНЬ, А НЕ СУММА ПОЛЕЙ. Замер 09.10: 152 × 41 —
       высоту давали поля 10 + строка, и до 44 не хватало трёх пикселей. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-8);
    background: var(--accent);
    color: var(--neutral-black);
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.io-featured-link:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

/* Grid 2x2 for compact cards */
.io-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

/* Compact card */
.io-card {
    display: flex;
    flex-direction: column;
    /* ПОЛЯ ИЗ КОМПОНЕНТА, А НЕ НА ГЛАЗ. `Card 29:65` знает две плотности:
       Compact 16 и Regular 24. Стояло `--space-lg` — это 40, числа такого у
       карточки нет ни в компоненте, ни на соседних страницах. */
    padding: var(--space-md);
    background: var(--bg-card);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    color: inherit;
}

.io-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--alpha-black-30);
    border-color: var(--accent);
}

.io-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--alpha-lime-12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: var(--space-md);
}

.io-card h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.io-card p {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.io-card-arrow {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--accent);
    margin-top: auto;
    transition: gap 0.2s;
}

.io-card:hover .io-card-arrow {
    gap: 8px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 992px) {
    

        .io-content {
        padding: var(--section-y-sm) var(--pad-x);
    }

    .io-featured {
        min-height: 260px;
    }

    .io-featured-content h2 {
        /* Ступень 21, а не `clamp`: он давал 19.5 на телефоне и 21.12 на
           планшете — оба мимо шкалы, и заголовок карточки не вставал ни на
           одну ступень ни на одном виде. */
        font-size: var(--fs-lg);
        line-height: 1.3;
    }

    .io-featured-content p {
        font-size: var(--fs-sm);
        line-height: 1.5;
    }

    /* Карточки раздела — компактнее: одна занимала 165 пикселей, и до
       документов приходилось прокручивать пол-экрана. Значок мельче,
       поля уже, подписи по общей шкале */
    .io-card {
        /* Вторая плотность того же компонента: `Card 29:65` Compact — 16.
           Стояло 14 — число не со шкалы отступов (8 · 12 · 16 · 24 · 32 · 40). */
        padding: var(--space-4);
    }


    .io-card p {
        font-size: var(--fs-2xs);
        line-height: 1.3;
        margin-bottom: var(--space-2);
    }

    .io-card-arrow {
        font-size: var(--fs-xs);
    }

    .io-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .io-hero p {
        font-size: var(--fs-sm);
    }

        .io-featured {
        min-height: 240px;
    }

    .io-featured-content {
        padding: var(--space-md);
    }


    .io-card {
        padding: var(--space-md);
    }

    .io-card h3 {
        font-size: var(--fs-base);
    }
}

/* ГРАНИЦ ДВЕ, А НЕ ЧЕТЫРЕ. Здесь жили 768 · 480 · 375 · 640 — четыре
   точки останова при двух разрешённых. Правило для 375 было пятой ступенью
   кнопки и снято целиком: кнопка стоит на ступени 44 и в уменьшении не
   нуждается. */

/* Полное название под аббревиатурой.
   Три буквы ничего не говорят человеку, попавшему на сайт впервые, — а
   «Инфо» это первая страница, куда он заходит за объяснениями. */
.io-hero-full {
    margin: var(--space-2) 0 0;
    /* Подзаголовок обложки — та же крутилка, что у восьми соседних
       разделов: 21 · 18 · 16. Стояло 26 на широких и 21 на узких, то есть
       на телефоне название КСЛТ шло вровень с заголовком страницы. */
    font-size: var(--fs-hero-sub);
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-white);
    letter-spacing: 0.2px;
    /* Общее правило сайта поднимает заголовки в капслок. Название
       организации так читается хуже и выглядит как крик */
    text-transform: none;
}

/* Пояснение, что это такое, принадлежит названию — прижимаем к нему и
   делаем заметно мельче. Иначе две курсивные серые строки подряд почти
   одного размера слипались в один нечитаемый блок */
.io-hero-sub {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    font-style: italic;
    letter-spacing: 0.2px;
    /* Серым эта строка сливалась с подписью раздела ниже: обе курсивные и
       почти одного размера, разница в яркости их не разводила. Цветом
       разводит сразу — и видно, что пояснение относится к названию.
       Лайм здесь не кричит: строка короткая и читается как ярлык.
       Только английская версия — у русской и киргизской такой строки нет */
    color: var(--accent);
    opacity: 0.85;
}

/* Подпись раздела — курсивом: она поясняет, а не называет. Отделяем её
   воздухом: она про страницу, а строки выше — про организацию.
   text-wrap: balance делит строки поровну при переносе: без него последнее
   слово падало вниз одно, и подпись выглядела оборванной */
.io-hero-content > p {
    font-style: italic;
    font-size: var(--fs-base);
    max-width: 62ch;
    margin: var(--space-4) auto 0;
    text-wrap: balance;
}

/* Это правило стоит ниже мобильного блока и перебивало его: на телефоне
   подпись держала 20 пикселей отступа, и обложка была выше остальных
   страниц раздела */
@media (max-width: 992px) {
    .io-hero-content > p {
        font-size: var(--fs-sm);
        margin-top: var(--space-2);
    }
}

/* ========================================
   ГРУППЫ И ДОКУМЕНТЫ
   ========================================
   Раньше все четыре карточки стояли вровень, и публичная оферта — документ,
   который открывают раз в жизни, — выглядела так же важно, как FAQ, который
   читает каждый новичок. Справка стоит карточками, юридические документы —
   отдельным списком ниже.
   ======================================== */

/* Отбивка между группами — ступень 40. Стояло 56: числа такого на шкале
   отступов нет. */
.io-group + .io-group { margin-top: var(--space-10); }

.io-group-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin: 0 0 var(--space-4);
}

/* Крупная иконка водяным знаком: у каждой карточки свой силуэт, и они
   перестают быть одинаковыми тёмными прямоугольниками */
.io-card { position: relative; overflow: hidden; }

.io-card .io-card-icon {
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 116px;
    height: 116px;
    border-radius: 0;
    background: none;
    color: var(--alpha-lime-06);
    margin: 0;
    transition: color 0.3s, transform 0.3s;
}

.io-card .io-card-icon svg { width: 100%; height: 100%; stroke-width: 1; }

.io-card:hover .io-card-icon {
    color: var(--alpha-lime-12);
    transform: translate(-6px, -6px) rotate(-6deg);
}

.io-card h3,
.io-card p,
.io-card .io-card-arrow { position: relative; z-index: 1; }

.io-card h3 { margin-top: 4px; }

/* Документы списком: у каждого строка о том, что внутри */
.io-doclist {
    background: var(--bg-card);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.io-docrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    /* Поля строки — ступени шкалы (8 · 12 · 16 · 24 · 32 · 40). Стояло
       20 × 24: вертикаль мимо шкалы. */
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--bw-hair) solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.io-docrow:last-child { border-bottom: none; }
.io-docrow:hover { background: var(--alpha-white-04); }

.io-docrow-left { display: flex; align-items: center; gap: var(--space-3); }

.io-doc-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--alpha-lime-12);
    color: var(--accent);
}

.io-docrow-name { font-weight: 600; color: var(--text-primary); font-size: var(--fs-base); }
.io-docrow-sub {
    display: block;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 400;
    margin-top: var(--space-1);
    line-height: 1.5;
}

.io-docrow-arrow { color: var(--text-muted); flex-shrink: 0; display: flex; transition: color 0.2s; }
.io-docrow:hover .io-docrow-arrow { color: var(--accent); }

@media (max-width: 640px) {
    .io-docrow { padding: var(--space-4); }
    .io-docrow-arrow { display: none; }
}

/* ========================================
   Телефон: размеры карточек и списка документов

   Правила ниже стоят в конце файла не случайно: карточки, метки групп и
   список документов объявлены после мобильного блока, и при равном весе
   побеждало бы объявление, а не наша правка
   ======================================== */

@media (max-width: 992px) {
    /* Название карточки шло 16-м кеглем, как основной текст на странице */
    .io-card h3 {
        font-size: var(--fs-sm);
        margin-top: var(--space-1);
        margin-bottom: var(--space-1);
    }

    /* ЛЕСТНИЦА НЕ ПЕРЕВОРАЧИВАЕТСЯ НА УЗКОМ ВИДЕ. Здесь метка группы
       поднималась до 14 при 12 на десктопе — уровень становился КРУПНЕЕ на
       телефоне, чего на сайте не бывает нигде. Беда, которую чинили, была
       не в метке: подпись внутри карточки шла вровень с ней. Метка остаётся
       одной ступенью на всех видах (12, капс, разрядка), а подпись карточки
       уходит на ступень ниже — ниже метки, как ей и положено. */
    .io-group-title {
        margin: 0 0 var(--space-3);
    }

    .io-group + .io-group {
        margin-top: 32px;
    }

    /* Строка документа занимала 20 на 24 пикселя полей — три документа
       не помещались на экран */
    .io-docrow {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }

    .io-docrow-name {
        font-size: var(--fs-sm);
    }

    .io-docrow-sub {
        font-size: var(--fs-xs);
        line-height: 1.3;
        margin-top: var(--space-1);
    }

    .io-docrow-left {
        gap: var(--space-2);
    }

    .io-doc-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ФОКУС С КЛАВИАТУРЫ

   Замер 09.10: во всём файле было 55 правил и НИ ОДНОГО `:focus-visible`.
   Карточки, документы и кнопка — это ссылки: человек, который ходит по
   странице с клавиатуры, не видел, где он находится. Обводка берётся
   общая, как на остальных разделах.
   ════════════════════════════════════════════════════════════════════════ */

.io-featured:focus-visible,
.io-card:focus-visible,
.io-docrow:focus-visible,
.io-featured-link:focus-visible {
    outline: var(--bw-thick) solid var(--accent);
    outline-offset: 2px;
}


/* ════════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН ЛЁЖА: ПОЛА НЕТ ВОВСЕ

   Замер 09.10 на 844 × 390: обложка занимала 118% экрана — она была ВЫШЕ
   окна, и страницы за ней не было видно совсем. Правило взято с обзорной
   турниров (css/tournaments-overview.css:1900): пол снимается, воздух
   уходит на ступень вниз, КЕГЛИ НЕ ТРОГАЮТСЯ — лестница одна на все виды,
   меняется только воздух.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
    .io-hero {
        min-height: 0;
        --oblozhka-vozduh:     var(--section-y-sm);
        --oblozhka-vozduh-niz: var(--space-2);
    }
}