/* =================================================================
   STYLES.CSS - ОПТИМИЗИРОВАННАЯ ВЕРСИЯ ДЛЯ ДОНБРИФ
   ЭТАП 1: CSS ПЕРЕМЕННЫЕ + RESET + ТИПОГРАФИКА
   ================================================================= */

/* =================================================================
   CSS ПЕРЕМЕННЫЕ
   ================================================================= */
:root {
    /* Цвета фона */
    --bg: #fff;
    --bg-lighter: #f8f9fa;
    --bg-darker: #f0f2f5;
    --bg-black: #1a252f;
    
    /* Цвета текста */
    --tt: #2c3e50;
    --tt-colored: #1a252f;
    --tt-lighter: #6c757d;
    --tt-lighter-2: #95a5a6;
    --tt-lightest: #adb5bd;
    --tt-lightest-2: #bdc3c7;
    
    /* Акцентные цвета */
    --accent: #34495e;
    --accent-link: #5278b1;
    
    /* Границы */
    --bdc: #e9ecef;
    --bdc-darker: #dee2e6;
    
    /* Тени */
    --bsh: 0 2px 8px rgba(0,0,0,0.1);
    --bsh-2: 0 4px 16px rgba(0,0,0,0.15);
    
    /* UI элементы */
    --ui-bg: #fff;
    --ui-bg-darker: #f8f9fa;
    
    /* Размеры */
    --max-width: 1480px;
    --indent: 20px;
    --indent-negative: -20px;
}

/* =================================================================
   RESET & BASE
   ================================================================= */
* {margin: 0; padding: 0; box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {font-family: 'Arsenal', 'Roboto', sans-serif; font-size: 15px; line-height: 1.6; color: var(--tt); background: var(--bg);}
article, aside, footer, header, nav, section {display: block;}
img {max-width: 100%; height: auto; border: 0; vertical-align: middle;}
a {color: var(--accent); text-decoration: none; transition: all 0.3s ease;}
a:hover {color: var(--tt);}
button {font-family: inherit; cursor: pointer; border: 0; background: none;}
ul, ol {list-style: none;}
input, textarea, select {font-family: inherit; font-size: inherit;}
table {border-collapse: collapse; border-spacing: 0;}

/* =================================================================
   ТИПОГРАФИКА
   ================================================================= */
h1, h2, h3, h4, h5, h6 {font-weight: 700; line-height: 1.3; color: var(--tt-colored); margin-bottom: 20px;}
h1 {font-size: 32px;}
h2 {font-size: 28px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
p {margin-bottom: 15px;}
strong, b {font-weight: 700;}
em, i {font-style: italic;}

/* =================================================================
   УТИЛИТАРНЫЕ КЛАССЫ
   ================================================================= */
.d-flex {display: flex;}
.d-grid {display: grid;}
.d-block {display: block;}
.d-none {display: none;}
.ai-center {align-items: center;}
.jc-center {justify-content: center;}
.jc-space-between {justify-content: space-between;}
.fd-column {flex-direction: column;}
.flex-grow-1 {flex-grow: 1;}
.clearfix::after {content: ""; display: table; clear: both;}
.ws-nowrap {white-space: nowrap;}
.icon-at-left span {margin-right: 8px;}
.icon-at-right span {margin-left: 8px;}
.vw100 {width: 100vw; margin-left: var(--indent-negative); margin-right: var(--indent-negative);}

/* Обрезка текста */
.line-clamp {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

/* Адаптивные изображения */
.img-fit-cover {position: relative; overflow: hidden;}
.img-fit-cover img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* =================================================================
   КНОПКИ
   ================================================================= */
.btn {display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; 
    background: var(--accent); color: #fff; border-radius: 4px; font-weight: 500; 
    transition: all 0.3s ease; cursor: pointer; border: 0;}
.btn:hover {background: #c71f26; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(228,33,41,0.3);}

/* =================================================================
   ФОРМЫ
   ================================================================= */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    width: 100%; height: 40px; padding: 0 15px; border: 1px solid var(--bdc); 
    border-radius: 4px; background: #fff; color: var(--tt); transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(228,33,41,0.1);}
textarea {min-height: 100px; padding: 10px 15px; resize: vertical;}

/* =================================================================
   СООБЩЕНИЯ
   ================================================================= */
.message-info {padding: 15px 20px; margin-bottom: 20px; border-radius: 4px; 
    background: #e3f2fd; color: #1976d2; border-left: 4px solid #1976d2;}
.message-success {background: #e8f5e9; color: #388e3c; border-left-color: #388e3c;}
.message-warning {background: #fff3e0; color: #f57c00; border-left-color: #f57c00;}
.message-error {background: #ffebee; color: #d32f2f; border-left-color: #d32f2f;}

/* =================================================================
   ВИДИМОСТЬ
   ================================================================= */
.mhide {display: inline-block;}
.thide {display: inline-block;}
@media screen and (max-width: 768px) {
    .mhide {display: none;}
}
@media screen and (max-width: 480px) {
    .thide {display: none;}
}

/* =================================================================
   СКРЫТЫЕ ЭЛЕМЕНТЫ ДЛЯ SEO
   ================================================================= */
.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important; 
    padding: 0 !important; margin: -1px !important; overflow: hidden !important; 
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.category-description {display: none;}

/* =================================================================
   SCROLL TO TOP
   ================================================================= */
#scrolltop {
    position: fixed; width: 50px; height: 50px; line-height: 50px; right: 20px; bottom: 20px;
    z-index: 990; display: none; background: var(--bg-lighter); color: var(--tt-lightest); 
    cursor: pointer; font-size: 20px; border-radius: 50%; text-align: center; 
    box-shadow: var(--bsh); transition: all 0.3s ease;
}
#scrolltop:hover {background: var(--accent); color: #fff; transform: translateY(-3px); box-shadow: var(--bsh-2);}

/* =================================================================
   КОНЕЦ ЭТАПА 1
   ================================================================= */
   
/* =================================================================
   ЭТАП 2: LAYOUT + HEADER + NAVIGATION + TELEGRAM ПРОМО
   ================================================================= */

/* =================================================================
   ОСНОВНОЙ LAYOUT
   ================================================================= */
.wrapper {
    min-width: 320px; position: relative; padding-top: 30px;
    background: url(../images/dbbg.webp) center top / cover no-repeat fixed;
    min-height: 100vh;
}
.wrapper-container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper-main {
    padding: 0 var(--indent); min-height: 100vh; background: var(--bg-lighter); 
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.05);
}
.content {margin: 40px 0 60px 0; min-height: 80vh;}

@media screen and (min-width: 1800px) {
    :root {--max-width: 1480px;}
    .wrapper {background-position: center center; background-size: cover;}
}

@media screen and (min-width: 1400px) and (max-width: 1799px) {
    :root {--max-width: 1380px;}
}

@media screen and (min-width: 1220px) and (max-width: 1399px) {
    :root {--max-width: 1200px;}
}

/* =================================================================
   HEADER - ШАПКА САЙТА
   ================================================================= */
.header {position: relative; z-index: 50;}

/* Верхняя часть шапки */
.header__one {
    position: relative; z-index: 50; display: flex; align-items: center; 
    justify-content: space-between; gap: 8px; flex-wrap: nowrap;
    background: linear-gradient(135deg, #1a1f2e 0%, #2c3e50 50%, #34495e 100%);
    margin: 0 var(--indent-negative); padding: 12px var(--indent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-height: 70px;
}

/* Нижняя часть шапки */
.header__two {
    background: var(--bg-darker); position: relative; z-index: 40; 
    margin: 0 var(--indent-negative); padding: 0 var(--indent);
}
/* Полоса под шапкой: прозрачная, чтобы просвечивал ваш серый градиент */
.header__two{
  background: transparent !important;
  border-bottom: 0; /* разделитель теперь у .mainnav-bar */
}

/* =================================================================
   ЛОГОТИП
   ================================================================= */
.logo {
    display: flex; align-items: center; justify-content: center; height: 70px;
    margin-right: 30px; padding: 10px 0; position: relative; transition: transform 0.3s ease;
}
.logo:hover {transform: scale(1.02);}
.logo img {
    max-height: 100%; width: auto; height: auto; max-width: 200px; 
    object-fit: contain; display: block;
}

/* =================================================================
   НАВИГАЦИЯ
   ================================================================= */
.nav__list {gap: 25px; display: flex; align-items: center;}
.nav__list > li {position: relative;}
.nav__list > li > a {
    height: 70px; display: flex; align-items: center; justify-content: center;
    color: #fff; transition: all 0.3s ease; padding: 0 5px;
}
.nav__list > li > a:hover {color: rgba(255,255,255,0.8);}

/* Подменю */
.nav__list-hidden {
    width: 240px; padding: 25px; border-radius: 0 0 4px 4px; position: absolute; 
    left: 0; top: 100%; background: var(--bg-lighter); box-shadow: var(--bsh-2); 
    display: grid; gap: 10px; visibility: hidden; opacity: 0; transform: translateY(40px);
    transition: all 0.3s ease;
}
.submenu:hover .nav__list-hidden {visibility: visible; opacity: 1; transform: translateY(0);}
.submenu > a::after {
    content: "\f107"; font-weight: 300; font-family: 'Font Awesome 5 Pro'; 
    margin-left: 7px; display: inline-block;
}

/* Стили для верхнего меню */
.header__one .nav__list > li > a {color: #fff;}
.header__two .nav__list > li > a {height: 50px; padding: 0 15px;}

/* =================================================================
   МОБИЛЬНОЕ МЕНЮ
   ================================================================= */
.header__btn-menu {
    display: none; width: 40px; height: 40px; padding: 0; font-size: 24px; 
    color: #fff; background: rgba(255,255,255,0.1); border-radius: 4px;
}
.header__btn-menu:hover {background: rgba(255,255,255,0.2);}

.mobile-menu {
    width: 280px; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 10px 20px;
    z-index: 999; position: fixed; left: -320px; top: 0; transition: left 0.4s;
    background: var(--bg-lighter); color: var(--tt);
}
.mobile-menu.is-active {left: 0;}
.mobile-menu-close {
    cursor: pointer; display: block; left: 280px; top: -40px; position: fixed; z-index: 999;
    width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px;
    background: #e84e36; color: #fff; transition: top 0.4s, opacity 0.4s; opacity: 0;
}
.mobile-menu-close.is-active {top: 0; opacity: 1;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}

.mobile-menu ul {margin: 0; padding: 0; display: block;}
.mobile-menu ul > li {width: 100%; margin: 0; padding: 0; border: 0;}
.mobile-menu ul > li > a {
    height: 40px; line-height: 40px; padding: 0; display: block; 
    color: var(--tt); transition: all 0.3s ease;
}
.mobile-menu ul > li > a:hover {color: var(--accent);}
.mobile-menu .nav__list-hidden {
    width: 100%; height: auto; display: block; position: relative; left: 0; top: 0;
    width: calc(100% + 40px); margin: 15px -20px; padding: 10px 20px; border-radius: 0;
    opacity: 1; visibility: visible; transform: none; background: var(--bg); 
    box-shadow: none; display: none;
}

.overlay {
    position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%;
    opacity: 0.6; background: #000; cursor: pointer; display: none;
}

/* =================================================================
   TELEGRAM ПРОМО-БЛОК В ШАПКЕ
   ================================================================= */
.header-telegram-promo {display: block; margin-left: 20px; margin-right: auto;}

.header-telegram-link {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 12px;
    padding: 10px 16px; text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden;
}
.header-telegram-link::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
}
.header-telegram-link:hover::before {left: 100%;}
.header-telegram-link:hover {
    background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.header-telegram-icon {
    width: 36px; height: 36px; background: linear-gradient(135deg, #2196F3, #1976D2);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0; box-shadow: 0 2px 8px rgba(33,150,243,0.4);
    transition: transform 0.3s ease;
}
.header-telegram-link:hover .header-telegram-icon {
    transform: scale(1.1) rotate(5deg); box-shadow: 0 4px 12px rgba(33,150,243,0.6);
}

.header-telegram-text {display: flex; flex-direction: column; gap: 2px; line-height: 1.2;}
.header-telegram-title {font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;}
.header-telegram-subtitle {font-size: 11px; color: rgba(255,255,255,0.7); white-space: nowrap;}

.header-telegram-arrow {
    color: rgba(255,255,255,0.6); display: flex; align-items: center;
    transition: transform 0.3s ease; margin-left: 4px;
}
.header-telegram-link:hover .header-telegram-arrow {transform: translateX(4px); color: #fff;}

/* =================================================================
   АДАПТИВНОСТЬ HEADER
   ================================================================= */
@media screen and (max-width: 1220px) {
    .header .nav__list {display: none;}
    .header__btn-menu {display: inline-flex;}
    .header__logo {flex: 1 1 0; /*min-width: 120px;*/ max-width: 100%;}
    .header__one {min-height: 70px; padding: 12px var(--indent);}
    .logo {height: 60px; margin-right: 20px;}
    .logo img {max-width: 180px;}
    .header-telegram-promo {margin-left: 15px;}
    .header-telegram-link {padding: 8px 12px; gap: 10px;}
    .header-telegram-icon {width: 32px; height: 32px;}
    .header-telegram-title {font-size: 12px;}
    .header-telegram-subtitle {font-size: 10px;}
}

@media screen and (max-width: 768px) {
    /* Шапка — сетка: логотип | центр (телеграм) | поиск | меню  */
    .header__one {
        min-height: 64px;
        padding: 10px var(--indent);
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: 8px;
    }

    /* ЛОГОТИП — крупнее, без внутреннего паддинга */
    .logo {
        height: 64px;
        margin-right: 8px;
        padding: 0;               /* обнуляем padding */
    }
    .logo img {
        max-width: 180px;         /* было 140px */
        max-height: 100%;
        width: auto;
        height: auto;
    }

    /* Телеграм — в центре, дальше от поиска, текст помещается */
    .header-telegram-promo {
        margin: 0 auto;           /* центрируем между логотипом и правыми кнопками */
        max-width: 260px;         /* даём ширину под полный текст */
    }
    .header-telegram-link {
        padding: 9px 14px;
        gap: 10px;
    }
    .header-telegram-icon {
        width: 32px; height: 32px;
    }
    .header-telegram-title {font-size: 12.5px;}
    .header-telegram-subtitle {font-size: 10.5px; display: block;}
    
    /* Увеличим зазор именно между телеграмом и поиском */
    .search-inline { margin-left: 12px; }
    .header__btn-menu { margin-left: 6px; }
}


@media screen and (max-width: 590px) {
    .header-telegram-promo {margin-left: 8px; max-width: 150px;}
    .header-telegram-link {padding: 6px 8px; gap: 6px;}
    .header-telegram-icon {width: 26px; height: 26px;}
    .header-telegram-text {gap: 1px;}
    .header-telegram-title {font-size: 10px;}
    .header-telegram-subtitle {font-size: 8px;}
}

@media screen and (max-width: 470px) {
    /* Та же сетка, чуть компактнее */
    .header__one {
        min-height: 58px;
        padding: 8px var(--indent);
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: 6px;
    }

    /* ЛОГОТИП — чуть больше, без padding */
    .logo {
        height: 56px;
        margin-right: 6px;
        padding: 0;               /* обнуляем padding */
    }
    .logo img {
        max-width: 150px;         /* было 120px */
        max-height: 100%;
        width: auto;
        height: auto;
    }

    /* Телеграм — реально читаемый, ближе к центру */
    .header-telegram-promo {
        margin: 0 auto;           /* центрируем */
        max-width: 200px;         /* было 130px — теперь текст помещается */
    }
    .header-telegram-link {
        padding: 6px 10px;
        gap: 8px;
    }
    .header-telegram-icon {
        width: 26px; height: 26px;
    }
    .header-telegram-icon svg {width: 16px; height: 16px;}
    .header-telegram-text {line-height: 1.15;}
    .header-telegram-title {font-size: 11px;}
    .header-telegram-subtitle {
        display: block;           /* показываем подзаголовок и на XS */
        font-size: 10px;
    }

    /* Отдаляем поиск от телеграм-кнопки, но без лишнего «дыра» в шапке */
    .search-inline { margin-left: 10px; }
    .header__btn-menu { margin-left: 6px; }
}



/* =================================================================
   CITY DROPDOWN В ШАПКЕ (ПК)
   ================================================================= */
.header-city { margin-left: 15px; }

.city-dropdown__button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, #f2f2f2 0%, #dcdcdc 100%);
  color: #1e2a5a; /* тёмно-синий основной цвет текста */
  cursor: pointer;
  position: relative; user-select: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.city-dropdown__button:hover { filter: brightness(1.05); }
.city-dropdown__button:active { transform: translateY(1px); }
.city-dropdown__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.city-dropdown__icon svg { width: 16px; height: 16px; }
.city-dropdown__text { display: flex; flex-direction: column; line-height: 1.2; }
.city-dropdown__title { font-size: 13px; font-weight: 600; white-space: nowrap; color: #1e2a5a; }
.city-dropdown__subtitle { font-size: 11px; color: #324a9b; white-space: nowrap; }
.city-dropdown__caret { font-size: 14px; opacity: .85; margin-left: 2px; }

.city-dropdown__menu {
  position: absolute; z-index: 1001;
  top: calc(100% + 8px); left: 0;
  min-width: 260px; padding: 8px;
  border-radius: 12px; border: 1px solid var(--bdc);
  background: var(--ui-bg); box-shadow: var(--bsh-2);
  display: none; /* по умолчанию скрыто */
}
.city-dropdown__menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--tt); text-decoration: none; font-size: 14px;
}
.city-dropdown__menu a:hover { background: var(--bg-lighter); color: var(--tt-colored); }
.city-dropdown__menu a.is-active { background: var(--bg-darker); font-weight: 600; }

.header-city.is-open .city-dropdown__menu { display: block; }

/* Выравнивание по высоте с Telegram-кнопкой */
@media screen and (min-width: 1221px) {
  .header-telegram-link, .city-dropdown__button { height: auto; }
}

/* Адаптивы: на мобильных мы и так скрываем блок через .mhide */
@media screen and (max-width: 1220px) {
  .header-city { margin-left: 10px; }
  .city-dropdown__button { padding: 8px 10px; }
}


/* =================================================================
   КОНЕЦ ЭТАПА 2
   ================================================================= */

/* =================================================================
   ЭТАП 3: ПОИСК + КАРТОЧКИ НОВОСТЕЙ + СЕТКИ
   ================================================================= */

/* =================================================================
   ПОИСК В ШАПКЕ (ИНЛАЙН) — v2 (фиксы конфликтов темы)
   ================================================================= */
.search-inline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ====== СБРОС/БЕЗОПАСНОСТЬ ОТ ТЕМЫ ====== */
.search-toggle,
.search-submit {
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.search-toggle svg,
.search-submit svg,
.search-toggle .icn,
.search-submit .icn {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  flex: 0 0 auto !important;
  pointer-events: none !important;
}

/* ====== КНОПКА-КРУЖОК (СПРАВА) ====== */
.search-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: #fff;               /* цвет лупы */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.search-toggle:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.search-toggle:hover .icn { transform: translateX(2px); }
.search-toggle .icn { transition: transform .25s ease; }

/* ====== ВЫЕЗЖАЮЩАЯ ФОРМА ====== */
.search-form {
  position: relative;
  width: 0;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: width .3s ease, opacity .2s ease, transform .3s ease;
  will-change: width, transform;
}
.search-inline.open .search-form {
  width: 240px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.search-input-wrap { position: relative; }

.search-input {
  width: 100%;
  height: 36px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0 38px 0 12px;  /* место под кнопку справа */
  font-size: 15px;
  line-height: 36px;
  color: #1a1f2e;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.search-input::placeholder { color: #98a2ad; }
.search-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); }

/* ====== КНОПКА ОТПРАВКИ ВНУТРИ ПОЛЯ ====== */
.search-submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #6d6aec;               /* ровный круг, без «пилюли» */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(109,106,236,0.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.search-submit:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 4px 12px rgba(109,106,236,0.45); }

/* ====== СВЕТЛАЯ ШАПКА ====== */
.header--light .search-toggle {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: #111; /* цвет лупы */
}
.header--light .search-toggle:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.18); }

/* ====== АДАПТИВ ====== */
@media (max-width: 992px) { .search-inline.open .search-form { width: 200px; } }
@media (max-width: 576px) {
  .search-inline.open .search-form { width: 160px; }
  .search-input { height: 34px; line-height: 34px; }
  .search-toggle { width: 40px; height: 40px; }
}



/* =================================================================
   СЕТКИ И КОЛОНКИ
   ================================================================= */
.cols {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 80px;}
.cols:last-child {margin-bottom: 0;}
.col-main {grid-column: span 3; padding-right: 60px;}
.col-side {margin: 0;}

@media screen and (max-width: 1220px) {
    .cols {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .col-main {padding-right: 0;}
    .col-side {grid-column: 1 / -1; padding-top: 20px;}
}

@media screen and (max-width: 590px) {
    .cols {grid-template-columns: minmax(0, 1fr);}
}

/* =================================================================
   КАРТОЧКИ НОВОСТЕЙ - БАЗОВЫЕ СТИЛИ
   ================================================================= */
.item {position: relative; display: block; color: var(--tt); transition: all 0.3s ease;}
.item:hover {text-decoration: none;}
.item__img {  
  margin-bottom: 20px; position: relative; overflow: hidden; background: #f0f0f0;
  transform: translateZ(0);                  /* устраняет субпиксельные рывки на некоторых GPU */
}
.item__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
  transition: transform .5s cubic-bezier(.22,.61,.36,1); /* мягкая ease-out */
  transform-origin: center;
  backface-visibility: hidden;
}
.item:hover .item__img img { transform: scale(1.05); }   /* плавный zoom */

/* Стеклянный перелив на превью (grid «двойки») */
.item__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 80%);
  mix-blend-mode: screen;
  opacity:0; transform: translateX(-120%) skewX(-20deg);
}
.item:hover .item__img::after{
  opacity:1;
  animation: glassShine 900ms ease-out 1 both;
}

@keyframes glassShine{
  to{ transform: translateX(160%) skewX(-20deg); opacity:0; }
}

/* Пользователям с ограниченным движением – без сильной анимации */
@media (prefers-reduced-motion: reduce) {
  .item__img img { transition: none; }
  .item:hover .item__img img { transform: none; }
}


.item__category {
    width: 40px; height: 40px; font-size: 19px; color: #fff;
    position: absolute; right: 0; top: 0; z-index: 3; background: var(--accent);
    display: flex; align-items: center; justify-content: center;
}
.yellow {background: #ffba00;}

.item__title {margin-bottom: 10px;}
.item__title .line-clamp {line-height: 1.4; font-weight: 700; color: var(--tt-colored);}
.item__title a { color: inherit; transition: color .25s ease, text-underline-offset .2s ease; }
.item__title a:hover {
  color: var(--accent-link);              /* деловой сине-серый вместо красного */
  text-decoration: underline;             /* мягкое подчёркивание на ховере */
  text-underline-offset: 2px;
}

.item__meta {
    color: var(--tt-lighter); gap: 10px; margin-bottom: 10px; 
    position: relative; z-index: 5; display: flex; flex-wrap: wrap;
}
.item__meta a:not(:hover) {color: var(--tt-lighter);}
.item__meta-item {display: flex; align-items: center; gap: 6px; font-size: 12px;}
.item__meta-item.ws-nowrap {display: block;}
.item__meta-item--category {
    color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.bdl {border-left: 1px solid var(--bdc); padding-left: 10px;}

.item__fav .fal {font-size: 17px;}
.item__meta-item .fal.added {color: var(--accent);}

/* =================================================================
   БОЛЬШАЯ ПЛИТКА (TILE)
   ================================================================= */
.tile {grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden; border-radius: 8px;}
.tile__img {height: 100%; min-height: 400px; display: block;}
.tile__img::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); z-index: 2;
}

.tile .item__meta {
    position: absolute; left: 40px; right: 40px; bottom: 55px;
    color: var(--tt-lightest-2); --bdc: rgba(255,255,255,0.3);
}
.tile .item__title .line-clamp {
    color: #fff; font-size: 35px; -webkit-line-clamp: 3;
}
.tile .item__title {
    padding: 40px; padding-bottom: 85px; position: absolute; 
    left: 0; right: 0; bottom: 0; z-index: 3;
}

@media screen and (min-width: 1220px) {
    .cols--first .item__img {padding-top: 50%;}
}

/* =================================================================
   КОРОТКАЯ КАРТОЧКА (SHORT)
   ================================================================= */
.short {
    height: auto; padding-bottom: 20px; border-bottom: 1px solid var(--bdc);
    display: flex; align-items: flex-start; gap: 20px;
}


.short__img {
  position: relative;                 /* нужно для ::after */
  width: 220px; height: 120px; flex-shrink: 0;
  border-radius: 4px; overflow: hidden;
}
/* стеклянный перелив на «тройках» */
.short__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 80%);
  mix-blend-mode: screen;
  opacity:0; transform: translateX(-120%) skewX(-20deg);
}
.item:hover .short__img::after{
  opacity:1;
  animation: glassShine 900ms ease-out 1 both;
}



.short__title {font-size: 21px; line-height: 1.4; margin-bottom: 20px; font-weight: 700;}
.short .item__meta {position: relative; padding: 0;}
.item:not(.short) + .short {padding-top: 20px; border-top: 1px solid var(--bdc); margin-top: 20px;}

/* MAIN-PAGE: тонкая настройка коротких карточек */
.short__title {
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
.short__title .line-clamp { line-height: 1.35; }
.short .item__meta { margin-top: 4px; }


/* =================================================================
   КАРТОЧКА С УВЕЛИЧЕННЫМ ЗАГОЛОВКОМ
   ================================================================= */
.item__title--bigger .line-clamp {font-size: 21px;}

/* =================================================================
   КАРТОЧКИ ВЫБОРА (CHOOSE)
   ================================================================= */
.sect__content--choose {gap: 20px; display: flex; flex-wrap: wrap;}
.choose {
    display: block; flex: 1 0 120px; height: 200px; position: relative; 
    overflow: hidden; border-radius: 8px;
}
.choose::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); z-index: 2;
}
.choose__title {
    color: #fff; z-index: 4; position: absolute; left: 20px; right: 20px; bottom: 20px;
    -webkit-line-clamp: 4; line-height: 1.3; font-weight: 700; font-size: 16px;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* =================================================================
   АДАПТИВНОСТЬ КАРТОЧЕК
   ================================================================= */
@media screen and (max-width: 760px) {
    .item .tile__img, .tile {height: 300px;}
    .item__title .line-clamp, .short__title {font-size: 17px;}
    .tile .item__title .line-clamp {font-size: 19px;}
    .tile .item__title {padding: 20px; bottom: 40px;}
    .tile .item__meta {bottom: 40px; left: 20px;}
    .short__img {width: 160px; margin-right: 20px;}
    .col-main {padding-right: 0;}
}

@media screen and (max-width: 590px) {
    .item .tile__img, .tile {height: 220px;}
    .short__img {width: 100px; height: 100px;}
    .short__title {margin-bottom: 10px;}
    .short__title .line-clamp {-webkit-line-clamp: 3; line-height: 1.3;}
    .tile {grid-column: 1 / -1;}
}

@media screen and (max-width: 470px) {
    .item:not(.short) + .short {margin-top: 0;}
}

/* =================================================================
   КОНЕЦ ЭТАПА 3
   ================================================================= */
   
/* =================================================================
   ЭТАП 4: SECTIONS + SIDEBAR + ВЫБОР РЕДАКЦИИ + ПОПУЛЯРНОЕ
   ================================================================= */

/* =================================================================
   СЕКЦИИ (SECTIONS)
   ================================================================= */
.sect:not(:last-child) {margin-bottom: 80px;}
.sect--bg {
    background: var(--bg-black); padding: 40px var(--indent);
    margin: 0 var(--indent-negative); margin-bottom: 80px; --tt-colored: #fff;
}
.sect--choice {margin-bottom: 60px; margin-top: -10px;}

.sect__header {margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between;}
.sect__title {
  font-size: 28px; gap: 12px; line-height: 1; color: var(--tt-colored);
  display: flex; align-items: center; letter-spacing: -.015em; font-weight: 700;
}
.sect__title .fal { color: var(--tt-lighter); } /* спокойный, «корпоративный» акцент */


.sect__sort {height: 36px;}
.sect__sort ul {
    height: 36px; background: var(--bg-lighter); border-radius: 6px;
    position: relative; z-index: 50; cursor: pointer; text-align: center;
}
.sect__sort ul li {height: 36px; line-height: 36px; visibility: hidden; padding: 0 10px; font-size: 13px;}
.sect__sort ul li[class], .sect__sort ul:hover li {visibility: visible;}
.sect__sort ul:hover {height: auto; box-shadow: var(--bsh);}
.sect__sort ul li[class]::before {content: 'Сортировать по:'; margin-right: 6px;}
.sect__sort li.asc a::after, .sect__sort li.desc a::after {
    content: "\f063"; font-family: "Font Awesome 5 Pro";
    display: inline-block; margin-left: 6px; font-weight: 300; font-size: 10px;
}
.sect__sort li.desc a::after {content: "\f062";}

.speedbar {font-size: 14px; color: var(--tt-lightest); margin-bottom: 20px;}

.descr {
    display: grid; grid-gap: 20px; line-height: 1.7; font-size: 16px; color: #5c5c5c;
    grid-column: 1 / -1; margin-bottom: 60px; padding-top: 40px; border-top: 1px dashed #ccc;
}
.descr h1, .descr h2, .descr h3 {font-size: 20px; color: var(--tt-colored); line-height: 1.3;}
.descr a {text-decoration: underline; color: var(--accent);}
.descr ul li {position: relative; padding-left: 25px; margin-left: 25px;}
.descr ul li::before {
    content: "\f00c"; font-weight: 300; font-family: 'Font Awesome 5 Pro';
    color: var(--accent); position: absolute; left: 0; top: 0;
}

/* =================================================================
   SIDEBAR - БОКОВАЯ КОЛОНКА
   ================================================================= */
.side-block:not(:last-child) {margin-bottom: 40px;}
.side-block__title {font-size: 24px; margin-bottom: 20px; color: var(--tt-colored);}
.side-block__content {
    display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.side-block--sticky {position: sticky; left: 0; top: 25px;}
.side-block--nobg {padding: 0 !important; border: 0 !important; background: none;}

/* Интересное (короткие карточки в сайдбаре) */
.int {position: relative; gap: 20px; height: 60px; display: flex; align-items: center;}
.int__img {width: 60px; height: 60px; flex-shrink: 0; border-radius: 4px; overflow: hidden;}
.int__title div {-webkit-line-clamp: 3; font-size: 15px; line-height: 1.4; font-weight: 600;}

/* Последние комментарии */
.lcomm {height: auto; position: relative; margin-bottom: 20px;}
.ltitle {font-weight: 400; font-size: 15px; line-height: 1.4; margin-bottom: 10px;}
.ltext {
    line-height: 1.5; font-size: 15px; color: #5c5c5c;
    border: 1px solid var(--bdc); padding: 10px; position: relative;
}
.ltext::before, .ltext::after {
    content: ''; border: 10px solid transparent; border-bottom-color: var(--bdc);
    position: absolute; bottom: 100%; left: 30px;
}
.ltext::after {border-bottom-color: #fff; z-index: 1; margin-bottom: -1px;}
.lmeta {font-size: 14px; margin: 10px 0; color: var(--tt-lighter); gap: 6px; display: flex; align-items: center;}
.lav {width: 26px; height: 26px; border-radius: 50%; overflow: hidden;}
.lcomm .comm-letter {line-height: 26px; font-size: 12px;}

/* Свежее */
.fresh {position: relative;}
.fresh__title {margin-bottom: 10px; line-height: 1.4; font-size: 16px; font-weight: 600;}


/* =================================================================
   РЕКОМЕНДАЦИИ (деловой стиль, рандом)
   ================================================================= */
/* =================================================================
   РЕКОМЕНДАЦИИ: 4 колонки на десктопе
   ================================================================= */
.sect--choice .sect__content--choose{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap:24px !important;
  margin-top:24px !important;
}

/* 1200–768px → 3 колонки */
@media (max-width:1200px){
  .sect--choice .sect__content--choose{ grid-template-columns: repeat(3,1fr) !important; }
}
/* 768–590px → 2 колонки */
@media (max-width:768px){
  .sect--choice .sect__content--choose{ grid-template-columns: repeat(2,1fr) !important; }
}
/* <590px → одна колонка */
@media (max-width:590px){
  .sect--choice .sect__content--choose{ grid-template-columns: 1fr !important; }
}

@media (max-width:1200px){ .sect--choice .sect__content--choose{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ .sect--choice .sect__content--choose{ grid-template-columns:1fr;} }

/* Базовая карточка */
.choice-card{
  display:flex; flex-direction:column; background:var(--ui-bg);
  border:1px solid var(--bdc); border-radius:12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.choice-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border-color: var(--bdc-darker);
}
.choice-card__link{ display:flex; flex-direction:column; height:100%; color:inherit; }

/* Медиа */
.choice-card__image{
  position:relative; aspect-ratio:16/9; background:#f1f3f5; overflow:hidden;
}
.choice-card__image img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.001); transition: transform .45s ease;
}
.choice-card:hover .choice-card__image img{ transform:scale(1.05); }

/* Тело */
.choice-card__content{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; }

.choice-card__meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color: var(--tt-lighter); font-size:12px;
}
.choice-card__cat{
  color: var(--accent-link); font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.choice-card__time{ color: var(--tt-lightest); font-variant-numeric: tabular-nums; }

.choice-card__title{
  font-size:17px; line-height:1.35; font-weight:700; color:var(--tt-colored);
}
.choice-card__title:hover{ color: var(--accent-link); text-decoration: underline; text-underline-offset:2px; }

.choice-card__excerpt{
  color:#5c5c5c; font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}


/* =================================================================
   КОНЕЦ ЭТАПА 4
   ================================================================= */

/* =================================================================
   ЭТАП 5: СТРАНИЦА НОВОСТИ (FULLSTORY)
   ================================================================= */
   
   /* ====== FIX: мобильное выравнивание мета-блока статьи ====== */
@media screen and (max-width: 768px) {
  .article-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .article-meta span,
  .article-meta time,
  .article-meta a {
    font-size: 14px;
    line-height: 1.4;
  }
}


/* =================================================================
   LAYOUT СТРАНИЦЫ НОВОСТИ
   ================================================================= */
/* НОВАЯ 2-Х КОЛОНОЧНАЯ СЕТКА */
.page--cols {
    display: grid; 
    gap: 10px; 
    /* Было: 3 колонки. Стало: 2 колонки. 
       Основная занимает всё место (1fr), правая фиксирована 320px (шире чем было, для баланса) */
    grid-template-columns: minmax(0, 1fr) 320px;
    /* Указываем, где находятся зоны: main (центр) и sider (право) */
    grid-template-areas: "main sider";
}

.page__col-main { 
    grid-area: main; 
    /* Добавляем большой отступ справа. 
       Это создаст "дорогой" воздух между текстом и сайдбаром. */
    padding-right: 10px; 
}
/* .page__col-left удален, стиль для него больше не нужен */
.page__col-right { grid-area: sider; }

.page__poster {height: 332px; position: relative; overflow: hidden; margin: 0 var(--indent-negative); margin-bottom: 30px;}
.page__poster::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 5;
    background: linear-gradient(to right, #333 0%, transparent 100%);
}

.page__header {top: 20px; bottom: 20px; position: relative; z-index: 10; color: #fff;}
.page__header h1 {font-size: 28px; line-height: 1.3; color: #fff; margin-bottom: 15px;}
.page__meta {gap: 10px 20px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center;}
.page__meta a {color: var(--tt-lighter-2); transition: color 0.3s ease;}
.page__meta a:hover {color: #fff;}
.page__date {font-size: 14px; color: var(--tt-lighter-2);}

/* =================================================================
   БЛОК МЕТАДАННЫХ СТАТЬИ (СОВРЕМЕННЫЙ)
   ================================================================= */
.article-meta-modern {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 1px solid #dee2e6 !important; border-radius: 12px !important;
    padding: 18px 20px !important; margin: 0 0 25px 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; position: relative !important;
    display: block !important; width: 100% !important; box-sizing: border-box !important;
}

.article-meta-modern__container {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 15px !important; width: 100% !important;
    margin: 0 !important; padding: 0 !important; min-height: 50px !important;
}

.article-meta-modern__left {
    display: flex !important; flex-wrap: wrap !important; gap: 15px !important;
    align-items: center !important; flex: 1 1 auto !important; min-width: 300px !important;
}

.article-meta-modern__right {
    display: flex !important; gap: 8px !important; align-items: center !important; flex-shrink: 0 !important;
}

.article-meta-modern__author {
    display: flex !important; align-items: center !important; gap: 10px !important;
    background: white !important; padding: 8px 16px !important; border-radius: 20px !important;
    border: 1px solid #e3e6ea !important; font-weight: 500 !important; color: #495057 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; text-decoration: none !important;
    white-space: nowrap !important; font-size: 14px !important; line-height: 1.4 !important;
}

.article-meta-modern__author-avatar {
    width: 28px !important; height: 28px !important;
    background: linear-gradient(135deg, #6c757d, #495057) !important;
    border-radius: 50% !important; display: flex !important; align-items: center !important;
    justify-content: center !important; color: white !important; flex-shrink: 0 !important;
}

.article-meta-modern__author-name {
    color: inherit !important; font-size: inherit !important; font-weight: inherit !important;
    margin: 0 !important; padding: 0 !important;
}

.article-meta-modern__views {
    display: flex !important; align-items: center !important; gap: 6px !important;
    background: rgba(40, 167, 69, 0.1) !important; color: #28a745 !important;
    padding: 6px 12px !important; border-radius: 16px !important; font-size: 14px !important;
    font-weight: 500 !important; white-space: nowrap !important; line-height: 1.4 !important;
}

.article-meta-modern__views span {
    color: inherit !important; font-size: inherit !important; font-weight: inherit !important;
    margin: 0 !important; padding: 0 !important;
}

.article-meta-modern__date {
    display: flex !important; align-items: center !important; gap: 6px !important;
    color: #6c757d !important; font-size: 14px !important; padding: 6px 12px !important;
    background: rgba(108, 117, 125, 0.1) !important; border-radius: 16px !important;
    white-space: nowrap !important; line-height: 1.4 !important; text-decoration: none !important;
}

.article-meta-modern__date span {
    color: inherit !important; font-size: inherit !important; margin: 0 !important; padding: 0 !important;
}

.article-meta-modern__action {
    width: 36px !important; height: 36px !important; border-radius: 8px !important;
    border: 1px solid #dee2e6 !important; background: white !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #6c757d !important; text-decoration: none !important; transition: all 0.3s ease !important;
    cursor: pointer !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; position: relative !important;
}

.article-meta-modern__action:hover {
    background: #f8f9fa !important; border-color: #adb5bd !important; color: #495057 !important;
    transform: translateY(-1px) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

.article-meta-modern__action--edit {color: #17a2b8 !important; border-color: rgba(23, 162, 184, 0.3) !important;}
.article-meta-modern__action--edit:hover {background: rgba(23, 162, 184, 0.1) !important; border-color: #17a2b8 !important;}

.article-meta-modern__action--print {color: #6f42c1 !important; border-color: rgba(111, 66, 193, 0.3) !important;}
.article-meta-modern__action--print:hover {background: rgba(111, 66, 193, 0.1) !important; border-color: #6f42c1 !important;}

/* =================================================================
   ИНТРО И ПОДЗАГОЛОВОК
   ================================================================= */
.article-subtitle {font-size: 18px; line-height: 1.5; color: var(--tt-lighter); margin-bottom: 20px; font-style: italic;}

.page__intro {
    line-height: 1.5; font-size: 16px; margin: 0 0 40px 0; padding: 15px 20px 15px 66px;
    position: relative; background: var(--bg-darker); color: var(--tt-lighter);
}
.page__intro::before {
    content: "\f05a"; font-family: 'Font Awesome 5 Pro'; font-weight: 300;
    position: absolute; left: 23px; top: 10px; color: var(--accent); font-size: 24px;
}

/* =================================================================
   ТИПОГРАФИКА ТЕКСТА СТАТЬИ
   ================================================================= */
.full-text {line-height: 1.6; font-size: 17px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: #5278b1;}
.full-text a:hover {color: var(--accent);}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3,
.full-text h4, .full-text h5, .full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin: 0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin: 0 0 10px 10px;}

.full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative; margin-bottom: 10px;}
.full-text > ul li:before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; border: 3px solid var(--accent);
    position: absolute; top: 7px; left: 34px;
}
.full-text > ol {counter-reset: num;}
.full-text > ol li:before {
    content: counter(num); counter-increment: num; background: var(--accent); color: #fff;
    position: absolute; top: -1px; left: 17px; width: 24px; height: 30px; font-size: 14px; font-weight: 600;
    display: flex; justify-content: flex-end; align-items: center; padding-right: 6px;
}
.full-text > ol li:after {
    content: ''; border: 10px solid transparent; border-left-color: var(--accent);
    position: absolute; left: 41px; top: -2px; transform: scale(0.66,1.5); transform-origin: 0 0;
}

.full-text table {width: 100%; border-collapse: collapse;}
.full-text table tr td {padding: 10px; border: 2px solid #fff;}
.full-text table tr:nth-child(2n+1) {background: #f2f6f9;}
.full-text table tr:nth-child(1) {background: #cee0ed; font-weight: 600;}

.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {
    font-size: 21px; margin-bottom: 20px; color: var(--tt-colored); font-weight: 700;
}
.full-text iframe {width: 100%; height: 400px; margin-bottom: 20px; border: 0;}
.full-text > *:last-child {margin-bottom: 0;}

/* Видео */
.video-responsive {padding-top: 60%; position: relative; margin-bottom: 20px;}
.video-responsive > iframe, .video-responsive > video {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}

/* =================================================================
   TELEGRAM КНОПКА ОБСУЖДЕНИЯ
   ================================================================= */
.telegram-discuss-block {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6; border-radius: 12px; padding: 25px; margin: 30px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.telegram-discuss-content {display: flex; align-items: center; gap: 20px;}

.telegram-discuss-icon {
    width: 50px; height: 50px; background: linear-gradient(135deg, #2196F3, #1976D2);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0;
}

.telegram-discuss-text {flex-grow: 1;}
.telegram-discuss-title {font-size: 18px; font-weight: 600; color: #1976D2; margin-bottom: 4px;}
.telegram-discuss-subtitle {font-size: 14px; color: #6c757d;}

.telegram-discuss-btn {
    background: linear-gradient(135deg, #2196F3, #1976D2); color: white;
    padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;
    transition: all 0.3s ease; white-space: nowrap; flex-shrink: 0;
}
.telegram-discuss-btn:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0); transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3); color: white;
}

/* =================================================================
   ТЕГИ И НАВИГАЦИЯ
   ================================================================= */
.page__tags {margin-top: 20px; gap: 10px; display: flex; flex-wrap: wrap;}
.page__tags a {
    display: flex; align-items: center; white-space: nowrap; height: 30px; border-radius: 2px;
    padding: 0 10px; font-size: 12px; text-transform: uppercase; color: var(--tt-lightest);
    border: 1px solid var(--bdc); transition: all 0.3s ease;
}
.page__tags a:hover {background: var(--accent); color: #fff; border-color: var(--accent);}

.page__prev-next {
    margin: 40px 0 0 0; padding-top: 20px; border-top: 1px solid var(--bdc); gap: 10px; display: flex;
}
.page__prev-next-link {line-height: 1.3; display: block; flex: 1;}
.page__prev-next-link + .page__prev-next-link {text-align: right;}
.page__prev-next-link div:first-child {
    font-size: 12px; text-transform: uppercase; color: var(--tt-lightest); margin-bottom: 6px;
}
.page__prev-next-link:hover {color: var(--accent);}

/* =================================================================
   РЕЙТИНГ И ДЕЙСТВИЯ
   ================================================================= */
.page__footer {
    margin-top: 20px; font-size: 15px; border-top: 1px solid var(--bdc); padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
}
.page__footer--last {margin-top: 20px; padding: 0; border: 0;}

.page__rating {display: flex; gap: 10px;}
.page__rating a {
    margin-right: 10px; display: flex; align-items: center; height: 36px; padding: 0 10px;
    border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 1px 3px 0 rgba(0,0,0,.06);
    background: linear-gradient(to bottom, #fff 0%, #fff 30%, #f5f6f8 100%);
    border-radius: 4px; transition: all 0.3s ease;
}
.page__rating a > span:last-child {
    display: inline-block; border-left: 1px solid rgba(0,0,0,.1);
    padding-left: 10px; margin-left: 10px; font-weight: 400;
}
.page__rating .fal {font-size: 18px; color: #27ae60;}
.page__rating a + a .fal {color: #e74c3c;}
.page__rating a:hover {background: linear-gradient(to top, #fff 0%, #fff 30%, #f2f2f2 100%);}

/* =================================================================
   КОММЕНТАРИИ
   ================================================================= */
.page__comments {margin-top: 40px;}
.page__comments-title {font-size: 24px; margin-bottom: 30px;}
.page__comments-info {
    font-size: 15px; margin-bottom: 15px; margin-top: -20px; color: var(--tt-lightest); line-height: 1.5;
}
.page__comments-info .fal {color: #eb4d4b; margin-right: 6px;}

.comment-item {margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--bdc);}
.comment-item__img {width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; overflow: hidden;}
.comment-item__letter {
    width: 100%; height: 100%; text-transform: uppercase; position: absolute; left: 0; top: 0; z-index: 5;
    color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
}
.comment-item__author, .comment-item__author a {font-size: 14px; color: var(--tt-colored); font-weight: 600;}
.comment-item__date {color: var(--tt-lightest); margin-top: 4px; font-size: 13px;}
.comment-item__main {margin: 8px 0 6px 0; line-height: 1.6;}
.comment-item__rating {white-space: nowrap; font-size: 13px;}
.comment-item__reply a {font-size: 13px; margin-right: 20px; color: var(--tt-lightest); transition: color 0.3s ease;}
.comment-item__reply a:hover {color: var(--accent);}

/* =================================================================
   АДАПТИВНОСТЬ СТРАНИЦЫ НОВОСТИ
   ================================================================= */
/* Уменьшаем порог переключения, так как 2 колонки влезают лучше */
@media screen and (max-width: 1024px) {
    .page--cols {
        display: flex;       /* Меняем Grid на Flex для вертикального стека */
        flex-direction: column;
    }
    .page__col-right {
        width: 100%; 
        margin-top: 40px;
    }
    /* Постер и сайдбар фиксы */
    .page__poster {margin-top: -20px;}
    .side-block__content {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));} /* Адаптивная сетка внутри сайдбара */
}

@media screen and (max-width: 760px) {
    .page__poster {height: 240px; margin-left: -20px; margin-right: -20px; margin-top: -40px;}
    .page__header {left: 5px; bottom: 20px; top: 20px;}
    .page__header h1 {font-size: 24px;}
    .page__intro, .telegram-discuss-block {margin-left: -20px; margin-right: -20px; padding-right: 20px;}
    .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 20px;}
    .article-meta-modern__left {min-width: 100% !important;}
}

@media screen and (max-width: 590px) {
    .page__meta, .page__date {font-size: 12px;}
    .telegram-discuss-content {flex-direction: column; text-align: center; gap: 15px;}
    .telegram-discuss-btn {width: 100%; padding: 15px 24px;}
    .page__prev-next {font-size: 15px;}
}

@media screen and (max-width: 470px) {
    .full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px;}
    .article-meta-modern__container {flex-direction: column !important; align-items: stretch !important;}
    .article-meta-modern__left {flex-direction: column !important; align-items: center !important;}
    .article-meta-modern__right {justify-content: center !important;}
}

/* =================================================================
   КОНЕЦ ЭТАПА 5
   ================================================================= */
   
/* =================================================================
   ЭТАП 6 (ФИНАЛ): FOOTER + PAGINATION + ADAPTIVE + УТИЛИТЫ
   ================================================================= */

/* =================================================================
   СОВРЕМЕННЫЙ FOOTER (МИНИМАЛИСТИЧНЫЙ)
   ================================================================= */
.modern-footer {
    background: linear-gradient(135deg, #1a252f 0%, #2c3e50 100%); color: #ecf0f1;
    padding: 60px 0 20px; font-family: 'Arsenal', sans-serif; position: relative; overflow: hidden;
    margin: 0 var(--indent-negative); width: calc(100% + 2 * var(--indent));
}

.modern-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #34495e, #2c3e50, #34495e);
}

.modern-footer__container {max-width: var(--max-width); margin: 0 auto; padding: 0 40px;}

.modern-footer__grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;}

/* Бренд */
.modern-footer__brand {display: flex; flex-direction: column; gap: 20px;}
.modern-footer__logo {display: flex; align-items: center; gap: 15px; margin-bottom: 20px;}
.modern-footer__logo-img {width: 120px; height: auto; filter: brightness(1.1);}
.modern-footer__info {
    font-size: 13px; line-height: 1.6; color: #95a5a6; background: rgba(255, 255, 255, 0.03);
    padding: 20px; border-radius: 6px; border-left: 3px solid #34495e;
}
.modern-footer__info strong {color: #ecf0f1; display: block; margin-bottom: 6px; font-weight: 600;}

/* Контакты */
.modern-footer__contacts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-right: 20px;
}
.modern-footer__section-title {
    font-size: 17px; font-weight: 600; color: #ecf0f1; margin-bottom: 20px;
    position: relative; padding-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;
}
.modern-footer__section-title::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: #7f8c8d;
}

.modern-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-height: 64px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    width: 100%;
    overflow-wrap: anywhere;
}
.modern-footer__contact-icon {width: 18px; height: 18px; color: #95a5a6; margin-top: 2px; flex-shrink: 0;}
.modern-footer__contact-link {
    color: #bdc3c7; text-decoration: none; transition: color 0.3s ease; font-size: 14px;
}
.modern-footer__contact-link:hover {color: #ecf0f1;}

/* Telegram CTA */
/* ===== Телеграм-кнопка в футере (переиспользуем шапочные стили) ===== */
.footer-telegram-cta { 
  /* фон-карточка под кнопкой (как контейнер) */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-telegram-link--wide {
  width: 100%;
  justify-content: space-between;   /* чтобы стрелка села справа */
  padding: 10px 14px;               /* чуть компактнее в футере */
}

.footer-telegram-cta .header-telegram-title {white-space: nowrap;}
.footer-telegram-cta .header-telegram-subtitle {white-space: nowrap;}

/* На узких — кнопка на 100% ширины без переполнения */
@media (max-width: 480px) {
  .header-telegram-link--wide { padding: 8px 10px; border-radius: 10px; }
}


/* Навигация */
.modern-footer__navigation {display: flex; flex-direction: column; gap: 15px;}
.modern-footer__nav-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.modern-footer__nav-column {display: flex; flex-direction: column; gap: 6px;}
.modern-footer__nav-link {
    color: #95a5a6; text-decoration: none; padding: 6px 0; font-size: 14px;
    transition: all 0.3s ease; border-radius: 3px; position: relative;
}
.modern-footer__nav-link:hover {color: #ecf0f1; padding-left: 8px;}
.modern-footer__nav-link::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 0; height: 1px; background: #7f8c8d; transition: width 0.3s ease;
}
.modern-footer__nav-link:hover::before {width: 6px;}

/* Нижняя часть */
.modern-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 25px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}

.modern-footer__developers {display: flex; align-items: center; gap: 30px;}
.modern-footer__dev-item {display: flex; align-items: center; gap: 12px;}
.modern-footer__dev-link {
    color: #95a5a6; text-decoration: none; font-size: 13px; transition: color 0.3s ease;
    display: flex; align-items: center; gap: 8px;
}
.modern-footer__dev-link:hover {color: #bdc3c7;}
.modern-footer__privacy-link {
    position: relative; padding: 8px 0; border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}
.modern-footer__privacy-link:hover {color: #ecf0f1 !important; border-bottom-color: rgba(255, 255, 255, 0.6);}

.modern-footer__age-rating {
    background: #34495e; color: #ecf0f1; padding: 8px 16px; border-radius: 4px;
    font-size: 16px; font-weight: 700; border: 1px solid #2c3e50;
}

/* =================================================================
   ПАГИНАЦИЯ
   ================================================================= */
.pagination {text-align: center; margin: 40px 0;}

.pagination__btn-loader a, .pagination__btn-loader span {
    display: flex; justify-content: center; align-items: center; height: 60px; padding: 0 50px;
    border-radius: 0px; background: var(--accent); color: #fff; text-transform: uppercase;
    font-size: 14px; letter-spacing: 2px; width: 100%; transition: all 0.3s ease;
}
.pagination__btn-loader a:hover {background: #c71f26; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(228,33,41,0.3);}

.pagination__pages {gap: 10px 10px; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: center;}
.pagination__pages a, .pagination__pages span {
    display: inline-block; line-height: 38px; padding: 0 10px; min-width: 40px; font-size: 16px;
    border: 1px solid var(--bdc-darker); border-radius: 20px; transition: all 0.3s ease;
}
.pagination__pages a:hover {background: var(--accent); color: #fff; border-color: var(--accent);}
.pagination__pages span:not(.nav_ext) {border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600;}

/* =================================================================
   АДАПТИВНОСТЬ FOOTER
   ================================================================= */
@media (max-width: 768px) {
  /* Колонки футера — в столбик */
  .modern-footer__grid { grid-template-columns: 1fr; gap: 30px; }

  /* Разделы — ДВА пункта в ряд на мобилке */
  .modern-footer__nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .modern-footer__bottom { flex-direction: column; text-align: center; gap: 25px; }
  .modern-footer__developers { flex-direction: column; gap: 20px; align-items: center; }
  .modern-footer__dev-item { justify-content: center; }
}

@media (max-width: 480px) {
    .modern-footer {padding: 40px 0 20px;}
    .modern-footer__container {padding: 0 20px;}
    .modern-footer__grid {gap: 25px;}
    .modern-footer__logo-img {width: 100px;}
    .modern-footer__info {padding: 15px; font-size: 12px;}
    .modern-footer__contact-item {flex-direction: row; align-items: center; gap: 12px;}
    .modern-footer__contact-icon {margin-top: 0;}     /* чтобы иконка не задиралась вверх */
    .modern-footer__contact-item > * {min-width: 0;}  /* длинные e-mail/адрес не переталкивают иконку */
    .modern-footer__telegram-cta {padding: 15px;}
    .modern-footer__telegram-btn svg {    fill: #ecf0f1;    transition: fill 0.3s ease;}
    .modern-footer__telegram-btn:hover svg {    fill: #fff;}
    .modern-footer__telegram-btn {padding: 10px 20px; font-size: 13px;}
}

/* =================================================================
   ГЛОБАЛЬНАЯ АДАПТИВНОСТЬ
   ================================================================= */
@media screen and (max-width: 1220px) {
    body {background-image: none;}
    .wrapper {padding: 0; background-image: none; overflow: hidden;}
    .wrapper-container {max-width: 100%; padding: 0 15px;}
    #scrolltop {width: 40px; height: 40px; line-height: 40px; font-size: 18px;}
}

@media screen and (max-width: 950px) {
    .wrapper-container {max-width: 100%; padding: 0 15px;}
}

@media screen and (max-width: 760px) {
    .wrapper-container {max-width: 100%; padding: 0 10px;}
    .d-grid, #dle-content {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}
    .content {margin-bottom: 40px;}
}

@media screen and (max-width: 590px) {
    .wrapper-container {max-width: 100%; padding: 0 10px;}
}

@media screen and (max-width: 470px) {
    .wrapper-container {max-width: 100%; padding: 0 10px;}
    .sect--bg {padding-bottom: 20px; padding-top: 30px;}
}

/* Оптимизация контейнеров для больших экранов */
@media screen and (min-width: 1400px) {
    .cols {gap: 24px;}
    .col-main {padding-right: 80px;}
}

/* =================================================================
   LOGIN/MODAL ОКНА
   ================================================================= */
.login {
    position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: var(--ui-bg); border-radius: 4px; width: 400px;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 15px 45px rgba(0, 0, 0, 1);
}
.login__header {padding: 20px 40px; background: var(--ui-bg-darker);}
.login__title {font-size: 18px; padding: 1px 0; text-transform: capitalize;}
.login__close {cursor: pointer; font-size: 24px; opacity: 0.6; margin-left: 20px;}
.login__content {padding: 20px 40px;}
.login__row {margin-bottom: 20px; position: relative; display: block; font-size: 14px; color: var(--tt-lightest);}
.login__caption {font-size: 14px; color: var(--tt); margin-bottom: 10px;}
.login__input input {padding-left: 40px;}
.login__row .fal {
    opacity: 0.5; position: absolute; left: 0; bottom: 0; line-height: 40px; width: 40px; text-align: center;
}
.login__row button {width: 100%;}
.login__social {background: var(--ui-bg-darker); padding: 20px 40px; text-align: center;}
.login__social-caption {font-size: 11px; text-transform: uppercase; margin-bottom: 10px;}
.login__avatar {width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; overflow: hidden;}
.login__menu {padding-left: 35px; padding-right: 35px; margin-bottom: -10px; display: flex; flex-wrap: wrap;}
.login__menu li {flex: 1 1 0; min-width: auto; max-width: 100%; margin: 0 5px 10px 5px;}
.login__menu a {
    display: block; border-radius: 6px; padding: 10px; text-align: center; white-space: nowrap;
    background: var(--ui-bg-darker); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); font-size: 13px;
}

@media screen and (max-width: 590px) {
    .login {max-width: 90%; max-height: 90%; overflow-x: hidden; overflow-y: auto;}
    .login__header, .login__content, .login__social {padding-left: 20px; padding-right: 20px;}
}

/* =================================================================
   ДОПОЛНИТЕЛЬНЫЕ БЛОКИ
   ================================================================= */
.confidential-check {
    font-size: 12px; padding-left: 26px; position: relative; align-self: start;
}
.confidential-check a {color: var(--accent-link); text-decoration: underline;}
.confidential-check input {
    position: absolute; left: 0; top: 3px; appearance: none; -webkit-appearance: none;
    display: inline-block; cursor: pointer; width: 20px; height: 20px; border-radius: 3px;
    background: var(--bg-darker); border: 1px solid var(--bdc);
}
.confidential-check input:checked::before {
    content: "\f00c"; font-weight: 900; font-family: 'Font Awesome 5 Pro';
    opacity: 0.8; position: absolute; left: 3px; bottom: 1px; font-size: 14px; color: var(--accent);
}

/* =================================================================
   ДОПОЛНИТЕЛЬНЫЕ КНОПКИ И ДЕЙСТВИЯ
   ================================================================= */
.page__btn-comments {
    height: 30px; padding: 0 10px; font-size: 12px; text-transform: uppercase;
    margin-left: 20px; background: var(--accent); color: #fff; border-radius: 4px;
}
.page__btn-comments:hover {background: #c71f26;}

.page__error {
    color: var(--tt-lighter); line-height: 1.3; font-size: 14px; display: flex; align-items: center; gap: 10px;
}
.page__error-btns {display: flex; gap: 6px;}
.page__error-btns div {
    background: var(--tt-lightest); color: #fff; padding: 8px 10px; border-radius: 3px; font-size: 12px;
}
.page__error-text div, .page__error-text span {font-weight: 700;}

/* =================================================================
   ФИНАЛЬНЫЕ АДАПТИВНЫЕ ПРАВКИ
   ================================================================= */
@media screen and (max-width: 760px) {
    .page__error {display: none;}
    .page__rating a + a {margin: 0;}
}

@media screen and (max-width: 590px) {
    .page__btn-comments {width: 100%; margin: 0; margin-top: 20px;}
}

/* =================================================================
   ЗАВЕРШЕНИЕ - КОНЕЦ STYLES.CSS
   ================================================================= */

/* Удаляем старые ненужные стили */
.headsoc {display: none !important;}

/* Оптимизация производительности */
* {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
img {image-rendering: -webkit-optimize-contrast;}

/* =================================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
   ================================================================= */
/* ================================================================
   MOBILE HEADER LAYOUT — оверрайд под квадратный логотип  (вставлено)
   ================================================================ */

/* === MOBILE LOGO FIX — жёсткие размеры для квадрата и защита от width:100% === */
.logo picture, .logo img { display: block; line-height: 0; }

/* ≤ 768px — основной мобильный размер */
@media (max-width: 768px) {
  /* Сетка/контейнер шапки остаются как есть; важен модуль логотипа */
  .logo {
    width: 56px;              /* фиксированная «клетка» под квадрат */
    height: 56px;
    flex: 0 0 56px;           /* запрещаем растягивание/сжатие */
    margin-right: 8px;
    padding: 0;
  }
  .logo picture { width: 100%; height: 100%; }
  .logo img {
    width: 100% !important;   /* перекрываем возможное width:100%/auto из базовых */
    height: 100% !important;  /* заставляем вписаться именно в 56×56 */
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;      /* аккуратно вписывает квадрат и десктопный логотип */
  }

  /* Центрируем телеграм-кнопку и даём ей место */
  .header-telegram-promo {
    margin-left: 8px;
    margin-right: auto;
    max-width: 220px;
    min-width: 0;
  }
  .header-telegram-link { padding: 8px 12px; gap: 8px; }
  .header-telegram-title { font-size: 12px; white-space: nowrap; }
  .header-telegram-subtitle { font-size: 10.5px; display: block; }

  /* Правый блок (поиск/меню) — безопасные отступы */
  .search-inline { margin-left: 10px; }
  .header__btn-menu { margin-left: 6px; }
}

/* ≤ 430px — ещё компактнее, чтобы точно ничего не наезжало */
@media (max-width: 430px) {
  .logo { width: 52px; height: 52px; flex-basis: 52px; }
  .header-telegram-promo { max-width: 185px; }
  .header-telegram-subtitle { display: none; }       /* экономим место */
  .search-inline .header__btn,
  .header__btn-menu .header__btn { width: 36px; height: 36px; }
}

/* ================================================================
   MAIN NAV (светлое графитовое меню 2025) — добавлено
   ================================================================ */

/* Светлая подложка под меню (деликатная полоса) */
.mainnav-bar{
  background: transparent;                     /* ← фон берем из родителя (градиент) */
  border-bottom:1px solid rgba(31,42,68,.06);  /* тонкий деликатный разделитель снизу */
  position:relative;
  z-index:40;
  /* лёгкая «подсветка» по периметру, чтобы текст читался на любых серых фонах */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}


/* 2 строки на ПК: 18 пунктов → 9 колонок х 2 ряда; на моб. — блок скрывается */
.mainnav-grid{
  display:grid;
  grid-template-columns: repeat(9, minmax(0,1fr));
  gap:0;
  margin:0 auto; /* тянется на всю ширину контейнера шапки */
}

/* Эстетичные текстовые ссылки без «кирпичей/сеток» */
.mainnav-item{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:52px;
  color:#222426; /* базовый текст */
  font-weight:300; font-size:16px; line-height:1.1; letter-spacing:.02em;
  transition: color .18s ease, transform .18s ease;
  text-decoration:none;
}

/* Тонкое «воздушное» подчёркивание — от центра к краям, с затуханием */
.mainnav-item::after{
  content:"";
  position:absolute; left:24px; right:24px; bottom:10px; height:1px;
  background: linear-gradient(90deg,
    rgba(31,42,68,0) 0%,
    rgba(31,42,68,.55) 50%,
    rgba(31,42,68,0) 100%);
  transform: scaleX(.2);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin:50% 50%;
}

/* Акцент — насыщённый графит (тёмно-сине-графитовый), без заливки фона */
.mainnav-item:hover{
  color:#1f2a44;
  transform: translateY(-1px);
}
.mainnav-item:hover::after{
  opacity:1; transform: scaleX(1);
}

/* Текущий раздел */
.mainnav-item.is-current{
  color:#1f2a44;
}
.mainnav-item.is-current::after{
  opacity:1; transform: scaleX(1);
}

/* Доступность с клавиатуры */
.mainnav-item:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(31,42,68,.18);
  border-radius:8px;
  color:#1f2a44;
}

/* ---------------------- Мобильное меню (drawer) ---------------------- */

.mainnav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .24s ease; z-index:40;
}
.mainnav-overlay.show{ opacity:1; pointer-events:auto; }

.mainnav-drawer{
  position:fixed; inset:auto 0 0 0; background:#fff;
  border-top:1px solid #eceef2;
  box-shadow:0 -12px 36px rgba(0,0,0,.08);
  transform:translateY(100%); transition:transform .26s ease; z-index:41;
}
.mainnav-drawer.show{ transform:translateY(0); }

.mainnav-drawer__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid #eceef2; color:#222426;
}
.mainnav-drawer__title{ font-weight:600; font-size:15px; }
.mainnav-drawer__close{
  width:36px; height:36px; border-radius:10px; color:#222426;
  display:flex; align-items:center; justify-content:center;
  transition: color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mainnav-drawer__close:hover{ color:#1f2a44; transform: translateY(-1px); }
.mainnav-drawer__close:focus-visible{
  outline:none; box-shadow: 0 0 0 3px rgba(31,42,68,.18); color:#1f2a44;
}

/* Две колонки, без рамок/решётки. Воздух создаёт gap. */
.mainnav-menu{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:6px; padding:10px;
}
.mainnav-cell{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:46px; padding:10px 12px;
  color:#5c6269; font-weight:600; font-size:14px; letter-spacing:.02em;
  border-radius:10px;
  transition: color .18s ease, transform .18s ease;
  text-decoration:none;
}
.mainnav-cell::after{
  content:"";
  position:absolute; left:14px; right:14px; bottom:9px; height:1px;
  background: linear-gradient(90deg,
    rgba(31,42,68,0) 0%,
    rgba(31,42,68,.5) 50%,
    rgba(31,42,68,0) 100%);
  transform: scaleX(.2); opacity:0;
  transition: transform .2s ease, opacity .2s ease;
}
.mainnav-cell:hover{ color:#1f2a44; transform: translateY(-1px); }
.mainnav-cell:hover::after{ opacity:1; transform: scaleX(1); }
.mainnav-cell:focus-visible{
  outline:none; box-shadow: 0 0 0 3px rgba(31,42,68,.18); color:#1f2a44;
}

/* Адаптив: ПК показывает двухрядную панель, моб. — только drawer */
@media (min-width:1100px){
  .mainnav-bar{ display:block; }
}
@media (max-width:1099.98px){
  .mainnav-bar{ display:none; }
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion:reduce){
  .mainnav-item, .mainnav-item::after,
  .mainnav-overlay, .mainnav-drawer,
  .mainnav-cell, .mainnav-cell::after { transition:none !important; }
}

/* === ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ФАЙЛА main-page.tpl === */

/* Акцентный H1 на главной: деловой, заметный, но не кричащий */
/* MAIN-PAGE: главный h1 */
.home-h1 {
  font-size: 30px;
  font-weight: 400;
  color: var(--tt-colored);
  letter-spacing: -.02em;
  margin-bottom: 24px;
}


/* Сетка для контента сайдбара (если нужен равномерный поток карточек-шортов) */
.side-block__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* На широких — можно в два столбца, если карточки поддерживают */
@media (min-width: 1220px) {
  .side-block__content { grid-template-columns: 1fr; } /* оставляем один столбец для читаемости */
}

/* Небольшой отступ между боковыми блоками */
.side-block:not(:last-child) { margin-bottom: 24px; }

/* ================================================================
   custom-popular.tpl квадратная превью в сайдбаре
   ================================================================ */
/* === Sidebar news (custom-popular.tpl) — фиксируем «воздух» между карточками === */

/* 1) Контейнер списка карточек: вертикальный стек с гарантированным gap */
.side-block__content{
  display:flex;                /* вертикальная колонка */
  flex-direction:column;
  row-gap:12px;                /* вот этот отступ между карточками */
}

/* Fallback на случай, если где-то flex/gap переопределят */
.side-block__content .int + .int{ margin-top:20px; }

/* 2) Сама карточка — без внешних бордеров и лишних паддингов */
.side-block__content .int{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  padding:0 !important;
  border:0 !important;
  background:transparent;
}

/* 3) Квадратное превью: фиксированный размер и небольшой внутренний просвет,
      чтобы визуально оно не «слипалось» с соседними картинками */
.int__img--square{
  position:relative;
  width:96px; height:80px; flex:0 0 96px;
  border-radius:8px;
  overflow:hidden;
  margin-block:2px;            /* тонкий просвет сверху/снизу именно вокруг превью */
}
.int__img--square img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Лёгкий стеклянный перелив без изменения размеров */
.int__img--square::after{
  content:""; position:absolute; top:-25%; left:-120%;
  width:70%; height:150%; pointer-events:none;
  background:linear-gradient(60deg, rgba(255,255,255,0) 0%,
                                     rgba(255,255,255,.38) 45%,
                                     rgba(255,255,255,0) 100%);
  transform:skewX(-20deg); opacity:.85;
}
.side-block__content .int:hover .int__img--square::after{ animation:shineOnly 600ms ease-out 1 both; }
@keyframes shineOnly{ to{ left:160%; } }

/* 4) Текстовый столбец: аккуратный заголовок + дата */
.int__desc{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.side-block__content .int .int__title{
  font-size:15px; line-height:1.4; font-weight:500;
  color:#1d1d1f !important; text-decoration:none; display:block;
}
.side-block__content .int .int__title:hover{ color:#0a58ca; }
.int__meta{ margin-top:4px; }
.int__date{ display:block; font-size:12px; line-height:1.4; color:#6b7280; }

/* Уважение к reduce motion */
@media (prefers-reduced-motion:reduce){
  .side-block__content .int:hover .int__img--square::after{ animation:none!important; }
}
@media (prefers-reduced-motion: reduce) {
  .item__img::after, .short__img::after { animation: none !important; opacity: 0 !important; }
}


/* ================================================================
   custom-popular.tpl квадратная превью в сайдбаре
   ================================================================ */

/* MAIN-PAGE: двухколоночные карточки (после каждой тройки) */
.grid-item {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--bdc);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow .25s ease, transform .12s ease;
}
.grid-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* === MAIN-PAGE: двухколоночные карточки — устойчивый контейнер под фото === */
.grid-item .item__img {
  position: relative;               /* на случай отсутствия img-fit-cover */
  overflow: hidden;                  /* безопасно обрезаем края */
  margin: 0 0 12px 0;
  border-radius: 6px;
  background: #f6f7f8;
  /* aspect-ratio: 16 / 9;             /* современный способ задать высоту */
}

/* гарантируем, что сама <img> точно заполнит контейнер */
.grid-item .item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ФОЛБЭК, если aspect-ratio недоступен/перебит */
@supports not (aspect-ratio: 16/9) {
  .grid-item .item__img::before {
    content: "";
    display: block;
    padding-top: 56.25%;           /* 16:9 через паддинг-хак */
  }
  .grid-item .item__img img {
    position: absolute;
    inset: 0;                      /* top:0; right:0; bottom:0; left:0 */
  }
}



.grid-item .item__title .line-clamp {
  font-weight: 700;
  font-size: 20px;            /* заметно, но не «кричит» */
  -webkit-line-clamp: 3;
}
.grid-item .item__meta { margin-top: 8px; }

/* ================================================================
   Fullstory
   ================================================================ */
/* ===== Fullstory: заголовок и обложка ===== */
.page__article .article-title{
  color:#2a3440 !important; /* графит — читаемый на светлом фоне */
  margin-bottom:10px;
}
.page__cover{margin:12px 0 20px;}
.page__cover img{width:100%;height:auto;display:block;border-radius:8px;}

/* ===== Мета-блок ===== */
.article-meta{
  border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg,#f7f8fa 0%,#eef1f6 100%);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:18px;
  font-size:14px;
  color:var(--tt-lightest,#7b8896);
}
.article-meta__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.article-meta__label{margin-left:6px;margin-right:4px;color:var(--tt-lightest,#7b8896);}
.article-meta__value{color:var(--tt,#2a3440);font-weight:500;}
.article-meta__dot{color:#aab3be;}
.article-meta svg{vertical-align:-2px;color:#9aa6b2;}

/* ===== Текст статьи ===== */
.page__text img{max-width:100%;height:auto;}


/* ===== Telegram CTA ===== */
.tg-cta{margin-top:28px;border-radius:16px;background:linear-gradient(180deg,#f6f7f9 0%,#eceef2 100%);border:1px solid rgba(0,0,0,.06);}
.tg-cta__inner{display:flex;align-items:center;gap:16px;padding:18px 20px;}
.tg-cta__icon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(34,158,217,.12);color:#229ED9;}
.tg-cta__text{flex:1 1 auto;min-width:0;}
.tg-cta__title{font-weight:700;color:var(--tt,#2a3440);margin-bottom:2px;}
.tg-cta__subtitle{font-size:14px;color:var(--tt-lightest,#7b8896);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tg-cta__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;box-shadow:0 2px 8px rgba(0,0,0,.08);}
.tg-cta__btn--tg{background:linear-gradient(180deg,#2AABEE 0%,#229ED9 100%);color:#fff;}
.tg-cta__btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12);}
.tg-cta__btn:active{transform:translateY(0);opacity:.92;}
@media (max-width:768px){
  .tg-cta__inner{flex-direction:column;align-items:stretch;text-align:center;}
  .tg-cta__subtitle{white-space:normal;overflow:visible;text-overflow:initial;}
}

/* TG CTA — mobile-only fix */
@media (max-width: 768px) {
  .tg-cta {
    width: 100%;
    box-sizing: border-box;
    margin: 24px 0;
    border-radius: 12px;
  }

  .tg-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;       /* центрируем контент */
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-align: center;        /* заголовок и подзаголовок по центру */
  }

  .tg-cta__icon {
    display: flex;             /* фикс любого «float»/inline-смещения */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;                 /* убираем возможные внешние отступы слева */
    border-radius: 10px;
    background: #eaf3ff;       /* мягкая подложка под значок */
    color: #2296f3;
  }

  .tg-cta__text {
    max-width: 320px;          /* чтобы текст не «гулял» по ширине */
  }
  .tg-cta__title   { font-size: 16px; font-weight: 700; margin: 0; }
  .tg-cta__subtitle{ font-size: 13px; color: #6c757d; }

  .tg-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    white-space: nowrap;
  }
}