/* =========================================================
   RESPONSIVE — мобильный макет (10.5 / 11.8)
   Извлечено из reference.html. Отдельный макет, не «схлопнутый десктоп».
   ========================================================= */

@media (max-width: 780px) {

    :root {
        --header-height: 56px;
    }

    /* ---- Шапка: гамбургер слева, лого по центру, профиль справа ---- */

    .header-inner {
        padding: 0 14px;
        gap: 12px;
    }

    .logo {
        min-width: 0;
        margin: 0 auto;
    }

    .logo-mark {
        width: 44px;
        height: 44px;
    }

    .top-nav,
    .search,
    .login-btn {
        display: none;
    }

    .menu-toggle,
    .profile-toggle {
        display: grid;
    }

    .header-actions {
        margin-left: 0;
    }

    /* ---- Layout: сайдбар становится off-canvas ---- */

    .layout {
        display: block;
        padding-bottom: calc(var(--tabbar-height) + 14px);
    }

    .sidebar {
        position: fixed;
        z-index: 110;
        top: 0;
        left: 0;
        bottom: 0;

        width: 270px;

        padding-top: 14px;

        background: var(--surface);
        border-right: 1px solid var(--border);

        transform: translateX(-100%);
        transition: transform .25s ease;

        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop.open {
        display: block;

        position: fixed;
        inset: 0;
        z-index: 105;

        background: rgba(0,0,0,.5);
    }

    .main {
        padding: 12px;
    }

    /* ---- Hero + карусель-точки ---- */

    .hero {
        min-height: 210px;
    }

    .hero-content {
        padding: 24px 18px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-dots {
        display: flex;
    }

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

    /* ---- Карточки разделов: одна колонка, без описания, с шевроном ---- */

    .forum-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 12px;
        min-height: auto;
        padding: 13px 14px;
    }

    .forum-description,
    .forum-count,
    .forum-last {
        display: none;
    }

    .forum-mobile-meta {
        display: block;
        margin-top: 2px;
    }

    .forum-chevron {
        display: grid;
        place-items: center;
        color: var(--text-muted);
    }

    .forum-chevron svg {
        width: 18px;
        height: 18px;
    }

    /* ---- Список последних тем: компактно, с бейджем вместо колонок ---- */

    .topic-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 11px 14px;
    }

    .topic-section-col,
    .topic-author-col,
    .topic-num-col,
    .topic-time-col {
        display: none;
    }

    .topic-row-title {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .topic-row-sub {
        display: block;
        margin-top: 3px;
    }

    .topic-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topic-row.is-premium .topic-badge {
        background: var(--premium);
    }

    /* ---- Нижний таб-бар ---- */

    .tabbar {
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;

        height: var(--tabbar-height);

        display: flex;
        align-items: stretch;

        background: color-mix(in srgb, var(--header-bg) 96%, transparent);
        border-top: 1px solid var(--border);

        backdrop-filter: blur(14px);
    }

    .tabbar-item {
        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        color: var(--text-muted);

        font-size: 10px;
        font-weight: 600;
    }

    .tabbar-item svg {
        width: 19px;
        height: 19px;
    }

    .tabbar-item.active {
        color: var(--accent);
    }
}

@media (max-width: 400px) {

    .hero-title {
        font-size: 28px;
    }

    .logo-text {
        font-size: 14px;
    }
}