/* ============================================================
   Rule15s UI polish (2026)
   Типографика, читабельность статей, карточки ленты, мобильные
   правки. Подключается ПОСЛЕ css-бандла (см. main.php), поэтому
   переопределяет site.css / site2.css / responsive2.css.
   ============================================================ */

/* === 1. Шрифт: Inter (self-hosted, вариативный 100–900) === */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/font/inter/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/font/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2d3338;
}

input, textarea, select, button {
    font-family: inherit;
}

/* === 2. Иерархия заголовков в контенте === */
.wrap-container h1 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
}

.wrap-container h2 {
    font-size: 23px;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .wrap-container h1 { font-size: 23px; }
    .wrap-container h2 { font-size: 20px; }
}

/* === 3. Читабельность статей: длина строки 60–80 символов === */
.knowledge-view .body-text,
.diapit-view .body-text,
.practice-view > div,
.optimism-view .optimism-content,
.diablog-post-content,
.school-view .item .body {
    max-width: 760px;
}

.knowledge-view .body-text,
.diapit-view .body-text,
.optimism-view .optimism-content {
    font-size: 17px;
    line-height: 1.65;
}

/* === 4. Мета-информация статей === */
.view-counter {
    font-size: 13px;
    color: #93989c;
    margin: 2px 0 12px;
}

.breadcrumbs {
    font-size: 13px;
    color: #93989c;
    margin-bottom: 6px;
}

.breadcrumbs a {
    color: #6f7a82;
}

.knowledge-view .author {
    font-size: 14px;
    color: #5f6a72;
}

/* Кнопки «предыдущая/следующая» */
.nxpr a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #dfe5e9;
    border-radius: 8px;
    color: #2fa3bb;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.nxpr a:hover {
    background: #f2f8fa;
    text-decoration: none;
}

/* === 5. Карточки ленты === */
.tail-item {
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.tail-item:hover {
    box-shadow: 0 8px 24px rgba(20, 40, 60, 0.10);
}

.tail-item .desc h3 {
    font-size: 17px;
    line-height: 1.4;
}

/* Обрезаем текстовые простыни в карточках до 4 строк */
.tail-item .desc > div:not(.view-counter):not(.video) {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tail-item .desc .view-counter {
    margin: 2px 0 8px;
}

/* === 6. Сайдбар: группировка пунктов === */
.sidebar .main-menu li.main-menu-knowledge,
.sidebar .main-menu li.main-menu-calc {
    border-top: 1px solid #edf1f4;
    margin-top: 8px;
    padding-top: 8px;
}

.sidebar .main-menu li.main-menu-how-help span {
    color: #2fa3bb;
    font-weight: 600;
}

/* === 7. Мобильные правки === */
@media (max-width: 768px) {
    /* Табы разделов: горизонтальный скролл + градиент-подсказка справа */
    .header-tabs-row {
        position: relative;
    }

    .header-tabs-row::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 36px;
        background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
        pointer-events: none;
    }

    .header-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .header-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Вводный SEO-текст на главной: компактнее, не съедает первый экран */
    .section-info h1 {
        font-size: 20px;
    }

    .section-info-content {
        overflow: hidden;
        max-height: 76px;
        position: relative;
    }

    .section-info-content .info-more {
        display: inline;
    }
}

/* Компактная cookie-плашка на мобильных (перекрывает cookie-banner.css) */
@media (max-width: 560px) {
    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.4;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .cookie-banner__accept {
        width: auto;
        padding: 8px 14px;
        font-size: 13px;
    }
}