/* ══════════════════════════════════════════════════════════════════════════
   Плотность главной страницы
   ──────────────────────────────────────────────────────────────────────────
   Замер на телефоне 390×844: главная была 3923px — почти десять экранов
   прокрутки. Из них 810px занимали четыре секции «здесь пока ничего нет»,
   670px — карточка релиза 2.0.0, развёрнутая целиком, и ещё 299px — список
   обновлений платформы, где каждая строка шла в три-четыре строки текста.

   Ни один раздел не убран и ни одна ссылка не потеряна: пустая секция
   сжимается до заголовка и одной строки, но сохраняет свой вход, а длинный
   текст обрезается до нескольких строк — прочитать целиком по-прежнему можно
   кнопкой «Подробнее», которая и так была на карточке.

   Лист подключён последним намеренно: правила ниже перекрывают
   release-news.css и phase-one.css, а держать плотность главной в одном месте
   проще, чем разносить по трём файлам с разной специфичностью.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Пустые секции ────────────────────────────────────────────────────────
   Класс `is-empty` ставит ui/home.js, а не CSS через `:has(.tp-home-empty)`:
   в секции новостей рядом с лентой живёт карточка релиза, и по одному лишь
   наличию пустого узла секцию посчитали бы пустой целиком. */

.tp-home-section.is-empty {
    padding: 12px 14px;
    gap: 4px;
}

.tp-home-section.is-empty .tp-section-heading {
    margin-bottom: 0;
    align-items: baseline;
}

.tp-home-section.is-empty .tp-section-heading__kicker { display: none; }

.tp-home-section.is-empty .tp-section-heading h2 {
    font-size: 15px;
    line-height: 1.3;
}

/* Кнопка в шапке дублирует ссылку внутри пустого состояния и стоит 44px. */
.tp-home-section.is-empty .tp-section-heading > .tp-button { display: none; }

/* Само пустое состояние перестаёт быть карточкой: рамка вокруг сообщения
   «ничего нет» только подчёркивает пустоту. */
.tp-home-section.is-empty .tp-home-empty {
    min-height: 0;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.tp-home-section.is-empty .tp-home-empty strong {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    color: var(--tp-color-text-secondary, #cbbfae);
}

.tp-home-section.is-empty .tp-home-empty strong::after {
    content: ' — ';
    color: var(--tp-color-text-muted, #a99e90);
}

.tp-home-section.is-empty .tp-home-empty p {
    display: inline;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

/* Вход в раздел остаётся, но выглядит ссылкой: в свёрнутом блоке
   полноразмерная кнопка была самым заметным элементом всей главной.
   Строкой ниже, а не следом за текстом: `inline-flex` приклеивал её к точке
   в конце предложения — «сохранится здесь.Играть против AI». */
.tp-home-section.is-empty .tp-home-empty .tp-button {
    display: flex;
    align-items: center;
    width: fit-content;
    /* Выглядит ссылкой, но остаётся кнопкой под пальцем: 16px высоты, как было
       после сжатия, — это промах через раз. Отступы дают область нажатия, а
       отрицательные поля не дают им растолкать вёрстку. */
    min-height: 32px;
    margin: 2px -6px 0;
    padding: 6px;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
}

.tp-home-section.is-empty .tp-home-empty .tp-button:hover {
    background: none;
    text-decoration: underline;
}

/* Кубок-водяной знак рисовался под карточку в 184px; в сжатой секции он выше
   её самой и вылезал за скругление. */
.tp-home-event.is-empty { min-height: 0; }
.tp-home-event.is-empty::after { font-size: 74px; bottom: -14px; right: 12px; }

@media (min-width: 900px) {
    /* На широком экране секции лежат в сетке и растягиваются на высоту соседа.
       Сжатая карточка от этого превращалась в две строки текста и сто пикселей
       пустоты под ними — хуже, чем была до сжатия. Ей хватает своей высоты;
       у полных карточек в ряду выравнивание остаётся прежним.

       Одного `align-self` мало: у сетки новостей задан пол в 194px на каждую
       секцию (home-redesign.css), и он держал высоту даже без содержимого. */
    #screen-home .tp-home-section.is-empty { align-self: start; }
    #screen-home .tp-home__information-grid .tp-home-section.is-empty { min-height: 0; }
}

/* ── Карточка релиза ──────────────────────────────────────────────────────
   Три абзаца анонса — это ровно то, что открывает существующая кнопка
   «Подробнее о версии 2.0.0»; в свёрнутом виде хватает трёх строк. */

.tp-release-news__card[data-state="compact"] .tp-release-news__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

@media (max-width: 599.98px) {
    /* Круг с роботом — единственный чисто декоративный элемент карточки, и на
       телефоне он забирает целую строку над фактами о модели. */
    .tp-release-news__mark { display: none; }

    .tp-release-news__card { gap: 12px; }
    .tp-release-news__aside { gap: 6px 14px; }
}

/* ── Обновления платформы ─────────────────────────────────────────────────
   Список из трёх релизных заметок занимал 299px: пояснение к каждой строке
   разворачивалось на три-четыре строки. */

.tp-hub-list .tp-hub-row--static .tp-hub-row__copy span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Заголовок заметки обрывался посреди слова: «Профессиональный ана…».
   Две строки читаются, многоточие в середине слова — нет. */
.tp-hub-list .tp-hub-row--static .tp-hub-row__copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

/* ── Плитки «Куда пойти дальше» ───────────────────────────────────────────
   Подпись под названием резалась в одну строку — «Столы и приг…»,
   «Тренировочна…». Две строки помещаются в ту же плитку. */

.tp-home-action small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    line-height: 1.3;
}

/* ── Шапка секции ─────────────────────────────────────────────────────────
   Кнопка справа отжимала заголовок в две строки, а сама ломалась пополам
   («Все / режимы»). Ей хватает своей ширины, если запретить перенос. */

.tp-section-heading > .tp-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tp-section-heading h2 { text-wrap: balance; }

@media (max-width: 599.98px) {
    /* Кнопка в шапке — второстепенный вход, и заголовку она оставляла 187px из
       390. Уменьшенная, она отдаёт ему ещё три десятка пикселей: «Куда пойти
       дальше» встаёт в одну строку. */
    .tp-section-heading > .tp-button {
        min-height: 32px;
        padding: 6px 9px;
        font-size: 12px;
    }
}

/* ── Ритм страницы ────────────────────────────────────────────────────────
   Между блоками было 16, 10, 12, 10 и внизу 28 и 22 пикселя: секции
   «Проводника дебютов» и «Упражнения дня» несли собственный `margin-top`
   поверх зазора своей сетки. Разнобой читается как случайная вёрстка, даже
   когда каждый блок аккуратен. Один шаг — 12px — на всю колонку. */

@media (max-width: 899.98px) {
    #screen-home .tp-home__play-grid,
    #screen-home .tp-home__information-grid,
    #screen-home .tp-home-discovery-grid {
        gap: 12px;
        margin-top: 12px;
    }

    #screen-home .tp-home-discovery-grid > .tp-home-section { margin-top: 0; }
}