/* Стили для главной страницы */
.home-page {
    /* Оставляем в home-page визуальные стили страницы блога, потому что limiter/centering теперь идут из общего global layout block. */
    background-color: var(--color-background);
    color: var(--color-foreground);
    text-align: center;
    padding: 20px;
}

.home-page h1 {
    font-size: 2.5rem;
    color: var(--color-primary);
}

/* Описываем адаптивную сетку карточек рубрик без inline-стилей, чтобы структура была управляемой из CSS. */
.categories-grid {
    display: grid;
    /* Переводим desktop-геометрию на двухколоночный ритм, чтобы при 4 карточках получать аккуратную матрицу 2x2 вместо «3+1 хвоста». */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Создаём двухзонную карточку рубрики: intro-блок и отдельный блок последних материалов. */
.category-tile {
    display: flex;
    flex-direction: column;
    /* Убираем принудительный space-between, чтобы высота карточек не раздувалась при разной длине списков постов. */
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
    padding: 20px;
    /* Переводим границу карточки на уже существующий DST border-token без добавления новых глобальных переменных. */
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    /* Используем существующий DST surface-token для shell карточки, чтобы Home работал в ранее принятом token-языке. */
    background: var(--surface-2);
    /* Фиксируем плавный hover-переход всей карточки, чтобы вернуть потерянный motion-паттерн в каталоге рубрик. */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Возвращаем hover-поведение всей карточки, чтобы карточка читалась как единый интерактивный объект при наведении мыши. */
.category-tile:hover,
.category-tile:focus-within,
/* Поддерживаем JS-псевдо-hover для touch-устройств, чтобы карточка могла периодически подсвечиваться без курсора. */
.category-tile.is-random-hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-accent-1);
    border-color: var(--border-accent-soft);
}

/* Делаем intro самостоятельной ссылкой-блоком, чтобы верхняя зона карточки была явной интерактивной hit-area. */
.category-tile__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    margin: -4px;
    border-radius: 12px;
    /* Rest-state интерактивной зоны переводим на существующий surface-token из текущего DST-стандарта. */
    background: var(--surface-1);
    text-decoration: none;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Добавляем hover/focus/active-состояния для intro-ссылки, чтобы пользователь видел, что верхняя зона карточки кликабельна. */
.category-tile__intro:hover,
.category-tile__intro:focus-visible {
    /* Hover/focus состояние также держим на существующих DST tokens, не вводя home-специфичный teal-слой в global.css. */
    background: var(--surface-2);
    box-shadow: 0 0 0 2px var(--border-soft);
}

/* Сохраняем лёгкий tactile feedback на active без потери контраста и читаемости текста. */
.category-tile__intro:active {
    transform: translateY(1px);
}

/* Нормализуем отступы заголовка внутри карточки, чтобы сетка выглядела равномерно. */
.category-tile__title {
    margin: 0;
    font-size: 1.25rem;
}

/* Фиксируем цвет заголовка в интро-ссылке, чтобы он оставался контрастным в интерактивных состояниях. */
.category-tile__title {
    color: var(--color-primary);
}

/* На hover/focus intro усиливаем акцент заголовка, чтобы состояние считывалось даже при быстром сканировании карточек. */
.category-tile__intro:hover .category-tile__title,
.category-tile__intro:focus-visible .category-tile__title {
    color: var(--color-accent);
}

/* Ограничиваем описание двумя строками через line-clamp для одинаковой высоты intro-блока. */
.category-tile__description {
    margin: 0;
    /* Вторичный текст держим в рамках существующего foreground-token и локально снижаем непрозрачность без новых глобальных токенов. */
    color: var(--color-foreground);
    opacity: 0.75;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Используем глобальный cta-button shell и дополняем его локальными параметрами, чтобы CTA выглядел как кнопка внутри intro. */
.category-tile__cta {
    align-self: flex-start;
    padding: 8px 14px;
    font-size: 0.92rem;
    line-height: 1.2;
}

/* Оставляем CTA интерактивным элементом внутри ссылки-контейнера, чтобы он получал нативный hover-стейт из global .cta-button. */
.category-tile__cta {
    pointer-events: auto;
}

/* Синхронизируем CTA в карточке с состоянием hover/focus всей интро-зоны, чтобы кнопка вела себя так же, как глобальный .cta-button:hover. */
.category-tile__intro:hover .category-tile__cta,
.category-tile__intro:focus-visible .category-tile__cta,
/* Дублируем тот же визуальный CTA-эффект для режима JS-псевдо-hover на мобильных и touch-устройствах. */
.category-tile.is-random-hover .category-tile__cta {
    background-color: var(--color-accent);
    color: var(--color-background);
    transform: translateY(calc(-1 * var(--cta-hover-lift))) scale(var(--cta-hover-scale));
}

/* Усиливаем focus-visible именно для интро-ссылки, чтобы клавиатурная навигация оставалась очевидной и контрастной. */
.category-tile__intro:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Отделяем список последних материалов верхней границей, чтобы блоки intro/posts читались как разные сущности. */
.category-tile__posts {
    /* Прижимаем блок последних постов к нижней части карточки только после контентного intro, сохраняя равномерную геометрию сетки. */
    margin-top: auto;
    padding-top: 12px;
    /* Разделитель блока постов унифицируем через существующий border-token из принятого DST-набора. */
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 1024px) {
    /* На ширинах <=1024 переключаемся на одну колонку, чтобы карточки визуально были ближе к геометрии контентных карточек внутри категории. */
    .categories-grid {
        grid-template-columns: 1fr;
    }

    /* Перенесли из responsive.css поведение CTA на 1024 для home.php, чтобы перенос текста кнопки контролировался владельцем home.css. */
    .category-tile__cta {
        white-space: normal;
        max-width: 100%;
    }
}

.category-tile__posts-list {
    margin: 0;
    padding-left: 18px;
}

.category-link {
    color: var(--color-primary);
}

.category-link:hover,
.category-link:focus-visible {
    color: var(--color-accent);
}

.category-tile__empty {
    margin: 0;
}

@media (max-width: 768px) {
    /* Перенесли из responsive.css mobile padding для home.php, чтобы боковые поля страницы управлялись page-specific файлом. */
    .home-page {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Перенесли из responsive.css mobile-геометрию сетки категорий для home.php, чтобы ритм карточек не зависел от глобального reset. */
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Перенесли из responsive.css mobile padding карточек в home.css, чтобы сохранить прежнюю плотность контента в home template. */
    .category-tile {
        padding: 16px;
    }

    /* Перенесли из responsive.css mobile min-height intro-блока в home.css, чтобы tap-area оставалась стабильной на home.php. */
    .category-tile__intro {
        min-height: 160px;
    }
}

@media (max-width: 480px) {
    /* Перенесли из responsive.css узкие боковые поля home.php в профильный файл, чтобы 480-профиль жил рядом с home-компонентами. */
    .home-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Перенесли из responsive.css размер заголовка карточки на 480 в home.css, чтобы избежать побочного эффекта в других шаблонах. */
    .category-tile__title {
        font-size: 1.1rem;
    }

    /* Перенесли из responsive.css мобильные размеры CTA-плашки на 480 в home.css, чтобы сохранить текущий визуальный ритм карточек. */
    .category-tile__cta {
        padding: 8px 12px;
        font-size: 0.88rem;
    }
}

@media (max-width: 412px) {
    /* Перенесли из responsive.css line-height CTA для 412/390/360 в home.css, чтобы переносы текста оставались читабельными в home template. */
    .category-tile__cta {
        line-height: 1.3;
    }
}

@media (max-width: 390px) {
    /* Перенесли из responsive.css compact-высоту intro в home.css, чтобы компенсировать переносы заголовка/CTA на узком home viewport. */
    .category-tile__intro {
        min-height: 174px;
    }
}

@media (max-width: 360px) {
    /* Перенесли из responsive.css compact padding intro в home.css, чтобы hit-area карточки сохранялась на контрольной ширине 360. */
    .category-tile__intro {
        padding: 12px;
    }
}