/* =========================================
 ЧАСТЬ 1: БАЗА И ШАПКА (MOBILE FIRST)
 ========================================= */
:root {
 --brand-red: #cc0000;
 --header-bg: #111111;
 --footer-bg: #1d1f24;
 --text-main: #414141;
 --text-meta: #888888;
 --bg-gray: #f2f2f2;
 --white: #ffffff;
 --border: #eeeeee;
 --font-main: 'Roboto', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
 font-family: var(--font-main); 
 background: var(--bg-gray); 
 color: var(--text-main); 
 line-height: 1.5; 
 -webkit-tap-highlight-color: transparent; 
 -webkit-font-smoothing: antialiased; 
 -moz-osx-font-smoothing: grayscale;
}

a { 
 text-decoration: none; color: inherit; 
 transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s; 
}

img { max-width: 100%; height: auto; display: block; object-fit: cover; }
ul { list-style: none; }

.container { 
 max-width: 1240px; margin: 0 auto; padding: 0 15px; 
 position: relative; height: 100%; 
 transform: translateZ(0); will-change: transform;
}

/* --- ТИПОГРАФИКА ВНУТРИ СТАТЬИ --- */

/* Заголовки внутри текста */
.article-body h1, 
.article-body h2, 
.article-body h3, 
.article-body h4 {
 color: #111; /* Заголовки чернее основного текста */
 font-weight: 600;
 line-height: 1.2;
 margin-top: 0px; /* Отступ сверху */
 margin-bottom: 26px; /* Отступ снизу */
}

/* Размеры заголовков (Mobile First) */
.article-body h2 { font-size: 22px; }
.article-body h3 { font-size: 19px; }
.article-body h4 { font-size: 17px; }

/* На ПК делаем их чуть крупнее */
@media (min-width: 768px) {
 .article-body h2 { font-size: 26px; }
 .article-body h3 { font-size: 22px; }
 .article-body h4 { font-size: 19px; }
}

/* Списки (точечки и цифры) */
.article-body ul, .article-body ol {
 margin-bottom: 26px;
 padding-left: 20px;
}
.article-body li {
 margin-bottom: 8px;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

/* =========================================
 2. ШАПКА САЙТА (HEADER)
 ========================================= */
.espn-top-bar {
 background: #000; height: 50px; width: 100%; 
 position: relative; z-index: 100;
 transform: translateZ(0); will-change: transform; backface-visibility: hidden;
}

.top-flex { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }
.left-group { display: flex; align-items: center; height: 100%; }

/* Логотип */
.logo-area {
 background: var(--brand-red); height: 100%; display: flex; align-items: center; 
 padding: 0 25px; position: relative; margin-right: 15px; margin-left: -15px; 
}
.logo-area::after {
 content: ''; position: absolute; top: 0; right: -15px; width: 30px; height: 100%; 
 background: var(--brand-red); transform: skewX(-20deg); z-index: 1;
}
.logo {
 color: #fff; font-weight: 900; font-size: 24px; text-transform: uppercase; 
 line-height: 1; font-style: italic; letter-spacing: -1px; position: relative; z-index: 2;
}

/* Правая часть */
.header-tools, .mobile-right-area { display: flex; align-items: center; gap: 15px; height: 100%; }
.tool-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 5px; display: flex; align-items: center; }
.tool-btn:hover { color: var(--brand-red); }

/* --- УПРАВЛЕНИЕ ВИДИМОСТЬЮ (MOBILE FIRST) --- */
.desktop-only { display: none !important; } /* Скрыто на мобильных */
.mobile-only { display: block !important; } /* Видно на мобильных */

/* --- Стили для ПК (от 992px) --- */
@media (min-width: 992px) {
 .desktop-only { display: block !important; }
 .mobile-only { display: none !important; }
 .logo-area { margin-right: 25px; }
}

/* Элементы ПК шапки */
.auth-links-header { font-size: 12px; color: #fff; font-weight: 700; text-transform: uppercase; }
.auth-links-header a { color: #fff; }
.auth-links-header a:hover { text-decoration: underline; }
.sep { margin: 0 5px; color: #555; }

.auth-logged-in { display: flex; align-items: center; gap: 5px; height: 100%; }
.header-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid #333; transition: border-color 0.2s; }
.profile-icon-link:hover .header-avatar { border-color: var(--brand-red); }
.header-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; color: #ccc; border: 1px solid #333; }

/* Меню ПК */
.top-nav-desktop ul { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.top-nav-desktop a {
 color: #ccc; text-decoration: none; font-weight: 700; font-size: 13px; text-transform: uppercase;
 padding: 16px 0; border-bottom: 3px solid transparent; transition: color 0.2s, border-bottom-color 0.2s;
}
.top-nav-desktop a:hover, .top-nav-desktop a.active-tab { color: #fff; border-bottom-color: var(--brand-red); }

/* Подменю ПК */
.sub-header { background: #fff; border-bottom: 1px solid #ddd; height: 40px; width: 100%; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
.sub-nav { display: none; align-items: center; height: 100%; gap: 20px; list-style: none; padding: 0; margin: 0; }
.sub-nav.active { display: flex; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.sub-nav a { color: #333; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.sub-nav a:hover { color: var(--brand-red); }

/* Мобильное меню (Burger) */
.burger-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 0; line-height: 1; }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; visibility: hidden; opacity: 0; transition: 0.3s; }
.mobile-menu-overlay.open { visibility: visible; opacity: 1; }
.mobile-menu-content { position: absolute; top: 0; right: -100%; width: 280px; height: 100%; background: #111; transition: 0.3s; padding: 20px; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.3); overflow-y: auto; }
.mobile-menu-overlay.open .mobile-menu-content { right: 0; }
.mm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }
.mm-title { color: #fff; font-weight: 900; text-transform: uppercase; font-size: 18px; }
.mm-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
.mm-auth { display: flex; gap: 10px; margin-top: 20px; }
.mm-auth-btn { flex: 1; text-align: center; padding: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 4px; }
.mm-auth-btn.login { border: 1px solid #fff; color: #fff; }
.mm-auth-btn.reg { background: var(--brand-red); color: #fff; border: 1px solid var(--brand-red); }
.accordion-menu { list-style: none; padding: 0; margin: 0; }
.accordion-menu li { border-bottom: 1px solid #222; }
.mm-link, .mm-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 0; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 14px; text-decoration: none; cursor: pointer; }
.mm-trigger:hover { color: var(--brand-red); }
.mm-submenu { display: none; padding-left: 15px; padding-bottom: 15px; background: #1a1a1a; list-style: none; margin: 0 -20px; padding: 15px 20px; }
.mm-submenu li { border: none; margin-bottom: 10px; }
.mm-submenu a { color: #ccc; text-decoration: none; font-size: 14px; }
.mm-submenu a:hover { color: #fff; }
.has-children.open .mm-submenu { display: block; }
.has-children.open .arrow { transform: rotate(180deg); }

/* =========================================
 ЧАСТЬ 2: КОНТЕНТ И СЕТКИ (MOBILE FIRST)
 ========================================= */
/* Hero (Главная новость) */
.main-hero { margin-bottom: 20px; width: 100%; margin-top: 0px; }
.hero-card { position: relative; display: block; height: 300px; background: #000; border-radius: 12px; overflow: hidden; transform: translateZ(0); }
.hero-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: 0.5s; }
.hero-card:hover .hero-img { transform: scale(1.03); opacity: 0.6; }
.hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%); color: #fff; }
.hero-title { font-size: 22px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; }

@media (min-width: 992px) {
 .hero-card { height: 450px; }
 .hero-title { font-size: 32px; }
}

/* Общая сетка страницы (Контент + Сайдбар) */
.main-wrapper { 
 display: grid; grid-template-columns: 1fr; /* По умолчанию 1 колонка */
 gap: 20px; margin: 20px auto; transform: translateZ(0); will-change: transform;
}

@media (min-width: 992px) {
 .main-wrapper { grid-template-columns: 1fr 340px; align-items: start; }
}

/* Заголовки блоков (H2) */
.block-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #e5e5e5; margin-bottom: 20px; padding-bottom: 10px; position: relative; }
.block-title { font-size: 20px; font-weight: 900; text-transform: uppercase; line-height: 1; margin: 0; position: relative; }
.block-title::after { content: ''; position: absolute; bottom: -12px; left: 0; width: 100%; height: 2px; background: var(--brand-red); }
.block-link { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--brand-red); }

/* --- GRID A (MIXED) / $MYINF_2 --- */
.layout-a-grid { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }

/* Общие стили карточки */
.card-a { display: flex; flex-direction: column; background: #fff; overflow: hidden; transition: 0.2s; transform: translateZ(0); }
.card-a img { width: 100%; object-fit: cover; margin-bottom: 0; }
.card-a > a { display: block; width: 100%; position: relative; }
.card-a > div { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.card-a-title { font-weight: 800; font-size: 18px; line-height: 1.3; color: #111; margin-top: 5px; display: block; }
.card-a-cat { color: var(--brand-red); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 4px; display: block; line-height: 1; }

/* === НАСТРОЙКИ ДАТ (САМОЕ ВАЖНОЕ) === */

/* 1. Дата в СПИСКЕ на мобильном (мелкая, с временем) */
.date-mobile-only { 
 display: none; /* По умолчанию скрыта, включится ниже */
 font-size: 10px; color: #888; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; 
}

/* 2. Дата в ГЛАВНОЙ новости на мобильном (Hero) */
.date-standard {
 display: block;
 font-size: 11px; /* Можно менять размер только для мобильной главной */
 color: #999; margin-top: 8px; font-weight: 600; text-transform: uppercase;
}


/* === МОБИЛЬНЫЙ ВИД === */

/* Первая новость (Hero) */
.mob-mixed:first-child { margin-bottom: 0; border-radius: 12px 12px 0 0; border: 1px solid #e5e5e5; border-bottom: 1px solid #eee; background: #fff; z-index: 2; overflow: hidden; }
.mob-mixed:first-child > div { padding-bottom: 15px; }
.mob-mixed:first-child img { height: 220px; }
/* У Hero скрываем дату-списка, показываем стандартную */
.mob-mixed:first-child .date-mobile-only { display: none; }
.mob-mixed:first-child .date-standard { display: block; } 

/* Список новостей (Остальные) */
.mob-mixed:not(:first-child) { 
 display: flex; flex-direction: column; background: #ffffff; padding: 12px 20px; 
 border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #eee; 
 min-height: auto; border-radius: 0; margin-bottom: 0; 
}
.mob-mixed:not(:first-child) .mob-mix-img { display: none; } 
.mob-mixed:not(:first-child) .card-a-cat { display: none; }

/* В списке: показываем дату-списка, скрываем стандартную */
.mob-mixed:not(:first-child) .date-mobile-only { display: block; }
.mob-mixed:not(:first-child) .date-standard { display: none; }

.mob-mixed:not(:first-child) .card-a-title { font-size: 15px; margin-top: 0; font-weight: 500; line-height: 1.4; color: var(--text-main); }
.mob-mixed:not(:first-child) .mob-mix-content { padding: 0; }
.mob-mixed:last-child { border-radius: 0 0 12px 12px; border-bottom: 1px solid #e5e5e5; box-shadow: 0 4px 12px rgba(0,0,0,0.03); margin-bottom: 0px; }


/* === DESKTOP VIEW (ПК) === */
@media (min-width: 992px) {
 .layout-a-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 20px; }
 
 .mob-mixed, .mob-mixed:first-child, .mob-mixed:not(:first-child), .mob-mixed:last-child { 
 border: none !important; border-radius: 8px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
 margin-bottom: 0; background: #fff; overflow: hidden !important; 
 height: 100%; padding: 0 !important; 
 }

 .mob-mixed:not(:first-child) .mob-mix-img { display: block; width: 100%; } 
 .mob-mixed:not(:first-child) .card-a-cat { display: block; }
 
 /* --- НАСТРОЙКИ ДАТЫ ДЛЯ ПК --- */
 .mob-mixed .date-mobile-only { display: none !important; } /* Скрываем мобильную дату */
 
 .mob-mixed .date-standard { 
 display: block !important; 
 margin-top: auto; 
 font-size: 11px; /* <-- ЗДЕСЬ меняешь размер только для ПК */
 }

 .mob-mixed:not(:first-child) .mob-mix-content { padding: 15px; height: 100%; display: flex; flex-direction: column; }

 /* Карточки */
 .card-a:first-child { grid-row: 1 / 4; padding: 0; }
 .card-a:first-child .mob-mix-img { height: 350px; display: block; }
 .card-a:first-child .mob-mix-img img { height: 100%; width: 100%; object-fit: cover; }
 .card-a:first-child .mob-mix-content { padding: 25px; } 
 .card-a:first-child .card-a-title { font-size: 24px; font-weight: 800; }

 .card-a:not(:first-child) { flex-direction: row; align-items: stretch; height: 100%; }
 .card-a:not(:first-child) .mob-mix-img { width: 140px; flex-shrink: 0; height: auto; min-height: 100%; position: relative; } 
 .card-a:not(:first-child) .mob-mix-img img { position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; } 
 .card-a:not(:first-child) .mob-mix-content { padding: 15px; justify-content: center; } 
 .card-a:not(:first-child) .card-a-title { font-size: 15px; margin-top: 0; font-weight: 800; } 
 
 .card-a:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important; }
}

/* --- GRID B ($MYINF_3) --- */
.layout-b-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.card-b { background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: 0.2s; }
.card-b:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.card-b-img { height: 200px; width: 100%; object-fit: cover; }
.card-b-body { padding: 15px; }
.card-b-cat { color: var(--brand-red); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; display: block; }
.card-b-title { font-weight: 800; font-size: 18px; line-height: 1.3; margin-bottom: 0; }

@media (min-width: 600px) { .layout-b-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .layout-b-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- GRID C ($MYINF_4) --- */
.layout-c-grid { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }

/* Карточка */
.card-c { 
 display: flex; flex-direction: column; background: #fff; border-radius: 8px; 
 overflow: hidden; border: 1px solid #eee; transition: 0.2s; 
 transform: translateZ(0);
}

/* Ховер: только тень, без сдвига */
.card-c:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #ddd; }

/* Картинка */
.card-c-img-link { width: 100%; height: 200px; flex-shrink: 0; overflow: hidden; display: block; }
.card-c-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.card-c:hover .card-c-img { transform: scale(1.05); }

/* Контент */
.card-c-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }

/* Заголовок */
.card-c-title { 
 font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; 
 color: #1a1a1a; transition: 0.2s; text-decoration: none; 
}
.card-c-title:hover { color: var(--brand-red); }

/* Описание */
.card-c .nf-desc {
 font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 12px;
 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Мета данные (Низ) */
.card-c-meta { 
 margin-top: auto; 
 font-size: 12px; color: #999; font-weight: 600; 
 display: flex; align-items: center; justify-content: space-between; /* Разносим по краям */
 padding-top: 10px;
 border-top: 1px solid #f9f9f9;
}

/* Элементы меты (Иконки) */
.card-c .meta-right { display: flex; align-items: center; gap: 15px; }

.card-c .meta-el {
 font-size: 11px; color: #999; font-weight: 600; 
 display: flex; align-items: center; gap: 6px; text-transform: uppercase; cursor: default;
}
.card-c .meta-el svg { stroke: #bbb; transition: 0.2s; }

/* Адаптив (на планшете и ПК карточка горизонтальная) */
@media (min-width: 768px) { 
 .card-c { flex-direction: row; align-items: stretch; } 
 .card-c-img-link { width: 280px; height: auto; min-height: 180px; } 
}

/* --- GRID D ($MYINF_5) --- */
.layout-d-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }

/* Карточка */
.card-d { 
 display: flex; flex-direction: column; background: #fff; border-radius: 8px; 
 overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: 0.3s; 
 height: 100%; transform: translateZ(0);
}

/* Ховер: только тень, без прыжка */
.card-d:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Картинка */
.card-d-img-link { width: 100%; height: 260px; display: block; overflow: hidden; }
.card-d-img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
/* Зум картинки */
.card-d:hover .card-d-img { transform: scale(1.05); }

/* Контент */
.card-d-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }

/* Заголовок */
.card-d-title { 
 font-size: 18px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; 
 color: #1a1a1a; transition: 0.2s; text-decoration: none; 
}
.card-d-title:hover { color: var(--brand-red); }

/* Мета данные (Низ) */
.card-d-meta { 
 margin-top: auto; 
 font-size: 12px; color: #999; font-weight: 600; 
 display: flex; align-items: center; justify-content: space-between; /* Разносим по краям */
 padding-top: 12px;
 border-top: 1px solid #f9f9f9;
}

/* Группа справа */
.card-d .meta-right { display: flex; align-items: center; gap: 15px; }

/* Элементы меты (Иконки) */
.card-d .meta-el {
 font-size: 11px; color: #999; font-weight: 600; 
 display: flex; align-items: center; gap: 6px; text-transform: uppercase; cursor: default;
}
.card-d .meta-el svg { stroke: #bbb; transition: 0.2s; }

/* Адаптив (2 колонки на планшете) */
@media (min-width: 768px) { 
 .layout-d-grid { grid-template-columns: 1fr 1fr; } 
}

/* --- ГИБРИДНАЯ ЛЕНТА (Вид материалов) --- */
.nf-container { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 5px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); margin-bottom: 20px; }
.nf-item { border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.nf-item:last-child { border-bottom: none; }

/* Mobile View (Default) */
.nf-mobile-view { display: block; padding: 12px 0; border-bottom: 1px solid #f0f0f0;} 
.nf-desktop-view { display: none; }
.nf-mob-meta { font-size: 11px; color: var(--text-meta); font-weight: 500; margin-bottom: 5px; }
.nf-time { color: #555; font-weight: 700; }
.nf-hot { color: var(--brand-red); margin-right: 5px; font-size: 14px; vertical-align: middle; animation: blink 1.5s infinite; }
.nf-mob-title { display: block; font-size: 15px; line-height: 1.4; color: var(--text-main); text-decoration: none; }
.nf-mob-title:hover { color: var(--brand-red); }
.nf-mob-title b, .nf-bold { font-weight: 800; }

/* Desktop View (overrides) */
@media (min-width: 992px) {
 .nf-container { background: transparent; border: none; padding: 0; box-shadow: none; display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
 .nf-mobile-view { display: none; }
 .nf-desktop-view { display: flex; align-items: stretch; }
 
 /* Карточка */
 .nf-item { 
 background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; 
 transition: 0.2s; border-bottom: 1px solid #eee; margin-bottom: 20px; 
 transform: translateZ(0); 
 }
 .nf-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: #ddd; }
 
 /* --- КОНТЕЙНЕР КАРТИНКИ (DIV) --- */
 .nf-img-box { 
 width: 260px; min-height: 180px; flex-shrink: 0; 
 position: relative; overflow: hidden; display: block;
 }
 
 /* Ссылка внутри контейнера */
 .nf-main-link { display: block; width: 100%; height: 100%; }
 
 .nf-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
 
 /* Зуммируем картинку при наведении на контейнер */
 .nf-item:hover .nf-img { transform: scale(1.05); }
 
 /* --- КАТЕГОРИЯ-ССЫЛКА НА КАРТИНКЕ --- */
 .nf-badge-cat {
 position: absolute; bottom: 10px; left: 10px;
 background: #cc0000; color: #fff; font-size: 10px; font-weight: 800;
 text-transform: uppercase; padding: 4px 8px; border-radius: 4px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.3); 
 z-index: 5; /* Чтобы ссылка работала */
 text-decoration: none;
 transition: background 0.2s;
 }
 .nf-badge-cat:hover { background: #a30000; }

 /* Контент */
 .nf-card-body { padding: 20px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
 
 .nf-card-title { font-size: 18px; font-weight: 800; line-height: 1.3; color: #1a1a1a; margin-bottom: 10px; transition: 0.2s; text-decoration: none; }
 /* Подсветка заголовка только при наведении на него */
 .nf-card-title:hover { color: var(--brand-red); }
 
 .nf-desc {
 font-size: 14px; line-height: 1.5; color: #555; margin-bottom: 15px;
 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
 }

 /* Нижняя панель */
 .nf-card-meta { 
 margin-top: auto; display: flex; align-items: center; 
 justify-content: space-between; padding-top: 12px; border-top: 1px solid #f9f9f9;
 }
 
 .meta-right { display: flex; align-items: center; gap: 15px; }
 
 .meta-el {
 font-size: 11px; color: #999; font-weight: 600; 
 display: flex; align-items: center; gap: 6px; text-transform: uppercase; cursor: default;
 }
 .meta-el svg { stroke: #bbb; }
}

/* =========================================
 ЧАСТЬ 3: САЙДБАР, ФУТЕР И ПРОЧЕЕ
 ========================================= */
/* Сайдбар */
.sidebar-area { width: 100%; transform: translateZ(0); }
.widget { background: #fff; border-radius: 8px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.05); width: 100%; }
.sidebar-area .widget:last-child { margin-bottom: 0; }
.widget-title { font-size: 14px; font-weight: 800; text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid var(--brand-red); padding-bottom: 8px; color: #111; }

/* Матч-центр */
.match-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; width: 100%; }
.match-row:last-child { border-bottom: none; }
.match-team { flex: 1; font-size: 13px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-team:first-child { text-align: left; } .match-team:last-child { text-align: right; }
.match-score { width: 45px; background: #f0f0f0; padding: 4px 0; border-radius: 4px; font-weight: 800; text-align: center; margin: 0 10px; flex-shrink: 0; }
.live-badge { background: var(--brand-red); color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 3px; text-transform: uppercase; margin-right: 5px; vertical-align: middle; }

/* Информер Хроника */
.fw-item { display: flex; flex-direction: column; width: 100%; margin-bottom: 12px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
.fw-item:last-child { border-bottom: none; margin-bottom: 0; }
.fw-meta { font-size: 11px; color: var(--text-meta); margin-bottom: 4px; display: block; }
.fw-meta span { margin-left: 8px; text-transform: uppercase; font-weight: 700; color: var(--brand-red); }
.fw-title { font-size: 14px; line-height: 1.4; display: block; color: var(--text-main); text-decoration: none; transition: color 0.2s; }
.fw-title:hover { color: var(--brand-red); }
.fw-title b { font-weight: 800; } .fw-title.fw-bold { font-weight: 700; }
.icon-hot { color: var(--brand-red); margin-right: 5px; font-size: 14px; vertical-align: middle; animation: blink 1s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* Таблица */
.table-widget { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-widget th { text-align: left; color: #888; font-weight: 400; padding-bottom: 10px; font-size: 12px; }
.table-widget td { padding: 8px 0; border-bottom: 1px solid #f9f9f9; vertical-align: middle; }
.team-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.team-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; display: block; }
.tbl-pts { font-weight: 800; text-align: right; color: var(--brand-red); }

/* Полная статья */
.full-article { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
@media (min-width: 768px) { .full-article { padding: 40px; } }
.article-head { margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.article-category { display: inline-block; background: var(--brand-red); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 11px; padding: 4px 8px; border-radius: 4px; margin-bottom: 15px; }
.article-title { font-size: 26px; font-weight: 900; line-height: 1.2; color: #111; margin-bottom: 15px; }
@media (min-width: 768px) { .article-title { font-size: 36px; } }
.article-main-img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 30px; max-height: 500px; object-fit: cover; }
.article-body { font-size: 16px; line-height: 1.6; color: var(--text-main); }
.article-body p { margin-bottom: 26px; } .article-body b, .article-body strong { font-weight: 700; }
.article-body blockquote { border-left: 4px solid var(--brand-red); padding-left: 20px; margin: 30px 0; font-style: italic; color: #555; font-size: 20px; }

/* Footer Статьи */
.article-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 20px; }
.share-block { display: flex; align-items: center; gap: 15px; }
.share-label { font-weight: 700; font-size: 14px; color: #111; }
.meta-footer { display: inline-flex; align-items: center; flex-wrap: wrap; background: #f8f9fa; border: 1px solid #e9ecef; padding: 8px 15px; border-radius: 50px; gap: 0; }
.meta-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6c757d; padding: 0 15px; position: relative; text-decoration: none; transition: color 0.2s; }
.meta-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: #dee2e6; }
.meta-item:first-child { padding-left: 0; } .meta-item:last-child { padding-right: 0; }
.meta-item svg { width: 16px; height: 16px; stroke: #adb5bd; transition: stroke 0.2s; }
.meta-item.author { font-weight: 700; color: #333; } .meta-item.author svg { stroke: var(--brand-red); }
.meta-item.comments:hover { color: var(--brand-red); } .meta-item.comments:hover svg { stroke: var(--brand-red); }
@media (max-width: 600px) { .meta-footer { display: flex; border-radius: 8px; justify-content: space-between; width: 100%; } .meta-item { padding: 5px 0; font-size: 12px; } .meta-item::after { display: none; } .meta-item.date span { display: none; } }

/* Footer */
.site-footer { background: var(--footer-bg); color: #b0b0b0; padding: 40px 0 20px; margin-top: 40px; font-size: 13px; transform: translateZ(0); will-change: transform; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }
.footer-col h4 { color: #fff; margin-bottom: 15px; font-size: 14px; text-transform: uppercase; }
.footer-links li { margin-bottom: 8px; font-size: 13px; }

/* Реклама */
.ad-placeholder { width: 100%; min-height: 120px; background: #f9f9f9; border: 1px dashed #e0e0e0; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ad-label { color: #ccc; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; }
.ad-placeholder img, .ad-placeholder iframe { position: relative; z-index: 2; max-width: 100%; display: block; margin: 0 auto; }
.content-area > :last-child { margin-bottom: 0 !important; }

/* Комментарии */
.comments-section { margin-top: 20px; background: transparent; padding: 0; box-shadow: none; border-radius: 0; }
.comm-header-title { font-size: 24px; font-weight: 900; margin-bottom: 30px; color: #111; position: relative; display: inline-block; padding-bottom: 10px; border: none; padding-left: 0; }
.comm-header-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 4px; background: var(--brand-red); border-radius: 2px; }
.comm-list { display: block; }
.bb-comm-card, .comm-item { display: flex; gap: 20px; background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.03); transition: transform 0.2s, box-shadow 0.2s; position: relative; margin-bottom: 25px !important; }
.bb-comm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.bb-comm-side, .comm-avatar { flex-shrink: 0; }
.bb-avatar, .comm-avatar { width: 55px; height: 55px; border-radius: 50%; padding: 3px; border: 2px solid #f0f0f0; overflow: hidden; }
.bb-avatar img, .comm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bb-comm-body, .comm-content { flex-grow: 1; display: flex; flex-direction: column; }
.bb-comm-header, .comm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px; }
.bb-author, .comm-author-name { font-size: 16px; font-weight: 800; color: #111; }
.bb-author a, .comm-author-name a { text-decoration: none; color: #111; }
.bb-author a:hover, .comm-author-name a:hover { color: var(--brand-red); }
.bb-date, .comm-date { font-size: 12px; color: #999; font-weight: 500; } .bb-time { color: #ccc; margin-left: 5px; }
.bb-comm-text, .comm-text { font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 15px; }
.bb-comm-footer, .comm-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.bb-btn-reply, .comm-reply-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #555; background: #f7f7f7; padding: 8px 16px; border-radius: 20px; transition: all 0.2s; text-decoration: none !important; border: none; cursor: pointer; }
.bb-btn-reply:hover, .comm-reply-btn:hover { background: var(--brand-red); color: #fff; box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3); }
.bb-btn-reply svg { stroke: currentColor; }
.bb-moder-panel { font-size: 11px; opacity: 0.4; transition: opacity 0.2s; }
.bb-comm-card:hover .bb-moder-panel { opacity: 1; }
@media (max-width: 600px) { .bb-comm-card, .comm-item { padding: 15px; gap: 15px; } .bb-avatar, .comm-avatar { width: 40px; height: 40px; } .bb-comm-header, .comm-header { flex-direction: column; align-items: flex-start; gap: 2px; } .bb-btn-reply, .comm-reply-btn { padding: 6px 12px; font-size: 11px; } }

/* =========================================
 9. КОММЕНТАРИИ И ФОРМА (PREMIUM CARD STYLE + MOBILE FIX)
 ========================================= */
.comments-section {
 margin-top: 40px;
 background: transparent; 
 padding: 0; box-shadow: none; border-radius: 0;
}

.comm-header-title {
 font-size: 24px; font-weight: 900; margin-bottom: 30px; color: #111;
 position: relative; display: inline-block; padding-bottom: 10px;
 border: none; padding-left: 0;
}
.comm-header-title::after {
 content: ''; position: absolute; bottom: 0; left: 0;
 width: 40px; height: 4px; background: var(--brand-red); border-radius: 2px;
}

.comm-list { display: block; }

/* КАРТОЧКА КОММЕНТАРИЯ */
.bb-comm-card, .comm-item {
 display: flex; gap: 20px; background: #fff; border-radius: 12px; padding: 25px;
 box-shadow: 0 5px 20px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.03);
 transition: transform 0.2s, box-shadow 0.2s; position: relative;
 margin-bottom: 25px !important;
 
 /* --- FIX: Защита от распирания карточек --- */
 max-width: 100%;
 box-sizing: border-box;
}
.bb-comm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

/* Аватар */
.bb-comm-side, .comm-avatar { flex-shrink: 0; }
.bb-avatar, .comm-avatar {
 width: 55px; height: 55px; border-radius: 50%; padding: 3px; 
 border: 2px solid #f0f0f0; overflow: hidden;
}
.bb-avatar img, .comm-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Тело */
.bb-comm-body, .comm-content { 
 flex-grow: 1; display: flex; flex-direction: column;
 /* --- FIX: Критично для Flex-элементов на мобильном --- */
 min-width: 0; 
 word-wrap: break-word;
}

.bb-comm-header, .comm-header {
 display: flex; justify-content: space-between; align-items: center;
 margin-bottom: 10px; border-bottom: 1px solid #f5f5f5; padding-bottom: 10px;
 flex-wrap: wrap; /* Чтобы дата не вылезала на мобильном */
}
.bb-author, .comm-author-name { font-size: 16px; font-weight: 800; color: #111; }
.bb-author a, .comm-author-name a { text-decoration: none; color: #111; }
.bb-author a:hover, .comm-author-name a:hover { color: var(--brand-red); }

.bb-date, .comm-date { font-size: 12px; color: #999; font-weight: 500; }
.bb-time { color: #ccc; margin-left: 5px; }

.bb-comm-text, .comm-text { font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 15px; }

/* Подвал кнопок */
.bb-comm-footer, .comm-footer {
 display: flex; align-items: center; justify-content: space-between; margin-top: auto;
}
.bb-btn-reply, .comm-reply-btn {
 display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
 font-weight: 700; text-transform: uppercase; color: #555; background: #f7f7f7;
 padding: 8px 16px; border-radius: 20px; transition: all 0.2s; text-decoration: none !important;
 border: none; cursor: pointer;
}
.bb-btn-reply:hover, .comm-reply-btn:hover {
 background: var(--brand-red); color: #fff; box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3);
}
.bb-btn-reply svg { stroke: currentColor; }

.bb-moder-panel { font-size: 11px; opacity: 0.4; transition: opacity 0.2s; }
.bb-comm-card:hover .bb-moder-panel { opacity: 1; }

@media (max-width: 600px) {
 .bb-comm-card, .comm-item { padding: 15px; gap: 15px; }
 .bb-avatar, .comm-avatar { width: 40px; height: 40px; }
 .bb-comm-header, .comm-header { flex-direction: column; align-items: flex-start; gap: 2px; }
 .bb-btn-reply, .comm-reply-btn { padding: 6px 12px; font-size: 11px; }
}

/* ФОРМА ДОБАВЛЕНИЯ */
.comm-form-box {
 background: #fff; border-radius: 12px; padding: 25px;
 box-shadow: 0 5px 20px rgba(0,0,0,0.04); margin-bottom: 30px;
 
 /* --- FIX: Запрещаем блоку быть шире экрана --- */
 max-width: 100vw; 
 overflow-x: hidden;
}

.comm-form-inner {
 display: flex; gap: 20px; align-items: flex-start;
}

.comm-form-avatar {
 width: 50px; height: 50px; border-radius: 50%; background: #f9f9f9;
 display: flex; align-items: center; justify-content: center; overflow: hidden;
 flex-shrink: 0; /* Чтобы аватар не сжимался */
}
.comm-form-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comm-form-avatar svg { width: 24px; height: 24px; fill: #ccc; }

.comm-form-body { 
 flex-grow: 1; width: 100%; 
 /* --- FIX: Позволяет сжимать внутреннюю таблицу uCoz --- */
 min-width: 0; 
}

.comm-form-field { margin-bottom: 15px; }

/* Твои стили полей */
.comm-form-input {
 width: 100%; border: 1px solid #eee; border-radius: 8px; padding: 12px 15px;
 font-family: var(--font-main); font-size: 14px; outline: none; resize: vertical;
 background: #fafafa; transition: 0.2s;
}
.comm-form-input:focus {
 background: #fff; border-color: #ccc; box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/* Кнопки */
.comm-form-actions {
 display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}

.comm-form-btn {
 background: var(--brand-red); color: #fff; border: none; padding: 10px 25px;
 border-radius: 20px; font-weight: 700; text-transform: uppercase; font-size: 12px;
 cursor: pointer; transition: 0.2s;
 box-shadow: 0 4px 10px rgba(204, 0, 0, 0.2);
}
.comm-form-btn:hover {
 background: #a30000; box-shadow: 0 6px 15px rgba(204, 0, 0, 0.3); transform: translateY(-1px);
}

.comm-form-options { display: flex; gap: 10px; }
.comm-option svg { width: 18px; height: 18px; fill: #999; cursor: pointer; transition: 0.2s; }
.comm-option:hover svg { fill: var(--brand-red); }
.ucf-bb { display: none !important; }

/* --- FIX: ЛЕКАРСТВО ОТ ГОРИЗОНТАЛЬНОГО СКРОЛЛА --- */
/* Эти стили насильно сжимают таблицу uCoz внутри твоего дизайна */
.comm-form-box table, 
.comm-form-box form {
 width: 100% !important;
 max-width: 100% !important;
 table-layout: fixed; /* Таблица не будет распираться от содержимого */
}

/* Фикс для полей ввода внутри таблицы uCoz, если они там есть */
.comm-form-box input[type="text"], 
.comm-form-box textarea,
.comm-form-box iframe {
 max-width: 100% !important;
 box-sizing: border-box !important;
}

/* Если капча слишком широкая */
.comm-form-box img {
 max-width: 100%;
 height: auto;
}



/* Теги */
.tags-wrapper { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.tags-icon { flex-shrink: 0; color: var(--brand-red); display: flex; align-items: center; }
.tags-list { font-size: 0; line-height: 0; }
.tags-list a { display: inline-block; font-size: 11px; font-weight: 800; color: #555; background: #f4f4f4; padding: 6px 12px; border-radius: 4px; margin-right: 8px; margin-bottom: 5px; text-decoration: none; transition: 0.2s; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; }
.tags-list a:hover { background: var(--brand-red); color: #fff; transform: translateY(-1px); }

/* Поиск */
.bb-search-wrapper { position: relative; width: 100%; max-width: 100%; margin: 0 auto 20px auto; }
.bb-search-input { width: 100%; height: 55px; padding: 0 60px 0 25px; border: 2px solid #f0f0f0; background: #fff; border-radius: 50px; font-family: var(--font-main); font-size: 16px; font-weight: 500; color: #333; outline: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.bb-search-input:focus { border-color: var(--brand-red); box-shadow: 0 8px 20px rgba(204, 0, 0, 0.15); background: #fff; }
.bb-search-input::placeholder { color: #bbb; font-weight: 400; }
.bb-search-submit { position: absolute; top: 5px; right: 5px; width: 45px; height: 45px; background: var(--brand-red); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; }
.bb-search-submit svg { stroke: #fff; transition: stroke 0.2s; }
.bb-search-submit:hover { background: #a30000; transform: scale(1.05); }
@media (max-width: 600px) { .bb-search-input { height: 50px; font-size: 14px; padding-left: 20px; } .bb-search-submit { width: 40px; height: 40px; } }

/* Поиск Overlay */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 17, 17, 0.95); backdrop-filter: blur(10px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.search-overlay.active { opacity: 1; visibility: visible; }
.search-close-btn { position: absolute; top: 30px; right: 30px; background: none; border: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; transition: 0.2s; opacity: 0.7; }
.search-close-btn:hover { opacity: 1; color: var(--brand-red); transform: rotate(90deg); }
.search-overlay-content { width: 100%; max-width: 800px; padding: 20px; transform: translateY(30px); transition: 0.4s ease; }
.search-overlay.active .search-overlay-content { transform: translateY(0); }
.search-input-wrapper { position: relative; border-bottom: 2px solid #555; display: flex; align-items: center; transition: 0.3s; }
.search-input-wrapper:focus-within { border-bottom-color: var(--brand-red); }
.search-icon-big { color: #fff; margin-right: 20px; opacity: 0.5; }
#bigSearchInput { width: 100%; background: transparent; border: none; font-size: 32px; font-weight: 700; color: #fff; padding: 20px 0; font-family: 'Inter', sans-serif; outline: none; }
#bigSearchInput::placeholder { color: #666; font-weight: 500; }
.search-help-text { margin-top: 15px; color: #666; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 600px) { .search-close-btn { top: 20px; right: 20px; font-size: 30px; } #bigSearchInput { font-size: 20px; padding: 15px 0; } .search-icon-big { width: 24px; height: 24px; margin-right: 10px; } }

/* Модальные окна */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.6); backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-window { background: #fff; width: 90%; max-width: 380px; padding: 30px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); position: relative; transform: translateY(30px); transition: all 0.3s ease; }
.modal-overlay.active .modal-window { transform: translateY(0); }
.modal-title { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 25px; color: #111; }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #aaa; line-height: 1; transition: 0.2s; }
.modal-close:hover { color: #000; }
.modal-input-group { margin-bottom: 15px; }
.modal-input-group input { width: 100%; height: 48px; padding: 0 15px; border: 1px solid #ddd; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 15px; background: #fafafa; box-sizing: border-box; }
.modal-input-group input:focus { background: #fff; border-color: #cc0000; outline: none; }
.modal-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; color: #666; }
.modal-remember { display: flex; align-items: center; cursor: pointer; }
.modal-remember input { margin-right: 6px; accent-color: #cc0000; }
.modal-forgot { color: #cc0000; text-decoration: none; font-weight: 600; }
.modal-submit { width: 100%; height: 48px; background: #cc0000; color: #fff; border: none; border-radius: 50px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.modal-submit:hover { background: #a30000; transform: translateY(-2px); }
.modal-footer { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; font-size: 14px; color: #666; }
.modal-footer a { color: #111; font-weight: 700; text-decoration: none; }

/* Пагинация */
.catPages1, .pagesBlock1, .pagesBlockuz1, .bb-pagination { display: flex; flex-flow: row wrap; gap: 6px; justify-content: center; margin: 40px 0; padding: 0; }
.catPages1 a, .catPages1 b, .catPages1 span, .pagesBlock1 a, .pagesBlock1 b, .pagesBlock1 span, .swchItem, .swchItemA { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; font-family: var(--font-main); font-size: 14px; font-weight: 700; text-decoration: none !important; transition: all 0.2s ease; box-sizing: border-box; }
a.swchItem, .catPages1 a, .pagesBlock1 a { background: #fff; border: 1px solid #e0e0e0; color: #333; }
a.swchItem:hover, .catPages1 a:hover, .pagesBlock1 a:hover { border-color: var(--brand-red); color: var(--brand-red); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(204, 0, 0, 0.15); background: #fff; }
b.swchItemA, span.swchItemA, .catPages1 b, .pagesBlock1 b, .catPages1 b span, .pagesBlock1 b span { background: var(--brand-red); color: #ffffff !important; border: 1px solid var(--brand-red); cursor: default; box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3); }
.swchItemDots, .catPages1 span, .pagesBlock1 span { border: none !important; background: transparent !important; box-shadow: none !important; color: #999; width: auto; padding: 0 5px; pointer-events: none; }
@media (max-width: 480px) { .catPages1 a, .catPages1 b, .pagesBlock1 a, .pagesBlock1 b, .swchItem, .swchItemA { width: 38px; height: 38px; font-size: 13px; } }

/* Заголовок архива */
.page-archive-header { background: #fff; border: 1px solid #e5e5e5; border-left: 5px solid var(--brand-red); border-radius: 8px; padding: 20px 25px; margin-bottom: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.archive-breadcrumbs { font-size: 12px; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 5px; }
.archive-breadcrumbs a { text-decoration: none; color: #999; transition: 0.2s; }
.archive-breadcrumbs a:hover { color: var(--brand-red); }
.archive-breadcrumbs .sep { margin: 0 5px; color: #ccc; }
.page-archive-header h1 { font-size: 24px; font-weight: 900; margin: 0; color: #111; line-height: 1.2; }
@media (max-width: 600px) { .page-archive-header { padding: 15px; } .page-archive-header h1 { font-size: 20px; } }


/* --- FOOTER STYLES --- */
.site-footer {
 background: #111; /* Твой темный фон */
 color: #fff;
 padding: 30px 0 15px;
 font-size: 14px;
}

/* Сетка (По умолчанию для МОБИЛЬНЫХ - одна колонка) */
.footer-grid {
 display: block;
 margin-bottom: 20px;
}

.footer-col {
 border-bottom: 1px solid #222; /* Разделитель на мобильном */
}
.footer-col:last-child {
 border-bottom: none;
}

/* Заголовки (Кнопки аккордеона) */
.footer-accordion-head {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 0;
 cursor: pointer;
 user-select: none;
}

.footer-accordion-head h4 {
 margin: 0;
 font-size: 16px;
 font-weight: 700;
 text-transform: uppercase;
 color: #fff;
}

/* Стрелочка */
.footer-accordion-head .arrow {
 width: 10px; height: 10px;
 border-right: 2px solid #555;
 border-bottom: 2px solid #555;
 transform: rotate(45deg);
 transition: 0.3s;
}
/* Если открыто - стрелка вверх */
.footer-col.open .arrow {
 transform: rotate(-135deg);
 border-color: #cc0000; /* Твой красный цвет */
}

/* Тело аккордеона (скрыто на мобильном) */
.footer-accordion-body {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease-out;
}
/* Если открыто */
.footer-col.open .footer-accordion-body {
 max-height: 300px; /* Достаточно, чтобы показать содержимое */
}

.footer-links {
 list-style: none;
 padding: 0;
 margin: 0 0 15px 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a { 
 color: #999; text-decoration: none; transition: 0.2s; 
}
.footer-links a:hover { color: #fff; }

/* Кнопки приложений */
.app-buttons { display: flex; flex-direction: column; gap: 10px; }
.app-btn {
 display: block; text-align: center; background: #222; color: #fff;
 padding: 8px; border-radius: 6px; font-weight: 600; font-size: 12px;
 border: 1px solid #333; text-decoration: none;
}

/* Низ подвала */
.footer-bottom {
 border-top: 1px solid #222;
 padding-top: 20px;
 text-align: center;
 color: #777;
 font-size: 12px;
}
.footer-bottom > div { margin-bottom: 10px; }

/* === DESKTOP VIEW (ПК) === */
@media (min-width: 768px) {
 .site-footer { padding: 50px 0 20px; }

 .footer-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr); /* 4 колонки */
 gap: 30px;
 }

 .footer-col { border: none; }

 /* Отключаем клики и скрытие на ПК */
 .footer-accordion-head { 
 pointer-events: none; 
 padding: 0 0 20px 0; 
 cursor: default; 
 }
 .footer-accordion-head .arrow { display: none; } /* Прячем стрелку */

 .footer-accordion-body {
 max-height: none !important; /* Всегда открыто */
 overflow: visible;
 }

 .footer-bottom {
 display: flex;
 justify-content: space-between;
 text-align: left;
 }
 
 .app-buttons { flex-direction: row; }
}