/* Главная сайта (/) в стиле Журнала. Основа — journal.css (шапка издания, первая полоса, полки, карточки
   статей); здесь только своё для главной: полки по три статьи и блоки «Игры» и «Инструменты» (префикс h-). */

/* Пункты «Игры» и «Инструменты» в ленте отделены от разделов журнала тонкой чертой. */
.lv-home .j-mast-nav a.h-nav-extra { color: var(--muted) !important; }
.lv-home .j-mast-nav a.h-nav-extra:first-of-type { position: relative; margin-left: 14px; }
.lv-home .j-mast-nav a.h-nav-extra:first-of-type::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -8px;
    background: #c5bdae;
}
.lv-home .j-mast-nav a.h-nav-extra:hover { color: var(--ink) !important; }

.h-all { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--accent) !important; }
.h-all:hover { text-decoration: underline; }

.h-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- игры и инструменты: две колонки после журнала --- */

.h-extra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    margin-top: 72px;
    padding-top: 8px;
    border-top: 1px solid var(--hair);
}
.h-block { min-width: 0; }
.h-block-head { margin-top: 40px; }
.h-note { margin: 16px 0 0; font-family: var(--serif); font-size: 15px; color: var(--muted); }

.h-games { display: flex; flex-direction: column; gap: 14px; }
.h-game {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px;
    background: #ffffff;
    border-top: 4px solid var(--accent);
    box-shadow: 0 1px 0 var(--hair);
    color: var(--ink) !important;
}
.h-game:hover .h-game-title { color: var(--accent); }
.h-game-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: var(--accent);
    color: #ffffff;
}
.h-game-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h-game-title { font-family: var(--serif-display); font-size: 24px; font-weight: 800; line-height: 1.15; }
.h-game-desc { font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.h-game-meta { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.h-tools { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.h-tools li { border-bottom: 1px solid var(--hair); }
.h-tool {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    color: var(--ink) !important;
}
.h-tool-title { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.h-tool:hover .h-tool-title { color: #1d4e89; }
.h-tool-badge { flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: right; }

@media (max-width: 1080px) {
    .h-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .h-extra { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 48px; }
    .h-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .lv-home .j-mast-nav a.h-nav-extra:first-of-type { margin-left: 8px; }
    .lv-home .j-mast-nav a.h-nav-extra:first-of-type::before { left: -15px; }
}

@media (max-width: 520px) {
    .h-tool { flex-direction: column; gap: 2px; }
    .h-tool-badge { text-align: left; }
}