/* ======================== */
/* 1. Базовый сброс и шрифты (ФИНАЛЬНЫЙ) */
/* ======================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- ВАЖНО: Стили для корректной работы бесконечного скролла --- */
html, body {
    /* Гарантируем, что они могут растягиваться по контенту */
    min-height: 100%; 
    /* Предотвращаем горизонтальные полосы прокрутки */
    overflow-x: hidden; 
}

body {
    font-family: Roboto, sans-serif; 
    background-color: #fff; 
    color: #333;
    line-height: 1.6;
    /* Явно разрешаем вертикальный скролл */
    overflow-y: scroll; 
}

.container {
    /* Максимальная ширина */
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 10px;
}

/* ======================== */
/* 2. Шапка (Header) */
/* ======================== */
.top-header {
    border-bottom: 2px solid #e7e7e7;
    margin-bottom: 15px;
}

.menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.menu-left a {
    text-decoration: none;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    padding: 0 10px;
    border-right: 1px solid #ccc;
    white-space: nowrap;
}

.menu-left a:last-child {
    border-right: none;
}

.menu-center {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.logo-source {
    color: #c00; 
    font-weight: 900;
    font-size: 24px;
    margin-right: 3px;
}

.menu-right .fa-search {
    color: #999;
    cursor: pointer;
}

/* ======================== */
/* 3. Основной Блок (Статья + Боковая Лента) */
/* ======================== */

.main-content-block {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.header_mixed_ind{
    display:none;
}
/* 3.1. Левая колонка (Главная Новость / Статья) */
.featured-story-compact,
.full-article-block { /* Добавлено .full-article-block для страницы статьи */
    /* Устанавливаем пропорцию 50 */
    flex: 50; 
}
.featured-story-compact{
    display: flex;
    flex-direction: column;
    /* Убедитесь, что высота достаточна для прижимания */
    min-height: 350px;
}
.in-article-tizers {
    /* Ключевое свойство для прижимания к низу Flex-контейнера */
    margin-top: auto; 
}
.featured-image-container {
    margin-bottom: 10px;
}

.featured-image {
    width: 100%;
    height: auto;
    display: block;
}

.featured-title {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 5px;
    font-weight: 500; 
    color: #000;
}

.featured-meta {
    display: flex;
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}

.featured-meta span {
    margin-right: 15px;
}

.read-more-btn {
    width:235px;
    display: inline-block;
    padding: 8px 15px;
    background-color: #c00; 
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3px;
    margin-bottom: 20px;
}

/* Тизеры под статьей */
.in-article-tizers {
    margin-top: auto; /* Для прижимания к низу в featured-story-compact */
}

.in-article-tizer-item {
    margin-top: 15px;
    margin-bottom: 15px;
    border-bottom: 3px dashed #837f7f;
    border-top: 3px dashed #837f7f;
    padding-bottom: 15px;
    background-color: #fcdcdc;
    padding: 10px;
}
.in-article-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.in-article-img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    margin-right: 10px;
}
.in-article-text {
    font-size: 19px;
    line-height: 1.4;
    font-weight: 500;
    color: #000;
}

/* 3.2. Правая колонка (Сайдбар) */
.side-tizers-compact {
    /* Устанавливаем пропорцию 35 */
    flex: 35; 
}

/* Общие стили для ВСЕХ тизеров в сайдбаре */
.tizer-item {
    display: block; 
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Контейнер для двух тизеров в одну строку */
.tizers-top-row {
    display: flex;
    gap: 15px; 
}

/* Стили для КРУПНЫХ тизеров в этом ряду (Два тизера в одной строке) */
.tizer-item.large-tizer-in-row {
    flex: 1; 
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; 
}

.tizer-item.large-tizer-in-row .tizer-img {
    width: 100%;
    height: 175px; 
    margin-bottom: 5px;
}

.tizer-item.large-tizer-in-row .tizer-text {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 5px;
}

.tizer-item.large-tizer-in-row .tizer-meta {
    font-size: 11px;
    color: #999;
}

/* Иконка Play для тизеров в ряду */
.tizer-item.large-tizer-in-row .video-icon {
    position: absolute;
    left: 50%; 
    top: 50px; 
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 5px;
    font-size: 12px;
}

/* Стили для Вертикального Списка (Три тизера вертикально) */
.tizers-vertical-list {
    /* Не требует Flexbox, если элементы имеют фиксированную высоту */
}

/* Стили для мелких тизеров с миниатюрой в вертикальном списке */
.tizer-item.small-tizer-with-thumb {
    display: flex; 
    align-items: center;
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
}

.tizer-item.small-tizer-with-thumb:last-child {
    border-bottom: none;
}

.tizer-item.small-tizer-with-thumb .tizer-img-inline {
    width: 170px; 
    height: 130px;
    object-fit: cover;
    margin-right: 10px;
}
.tizer-item.small-tizer-with-thumb .tizer-text-inline-img {
    font-size: 19px;
    font-weight: 500;
    color: #000;
    line-height: 1.3;
    flex: 1;
}

/* Иконка Play на маленькой миниатюре в вертикальном списке */
.video-tizer-small .video-icon-small-thumb {
    position: absolute;
    left: 25px; 
    top: 35px;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 3px;
    font-size: 10px;
}

/* ======================== */
/* 4. Сетка Нижних Тизеров (Шаблон A - 3 колонки) */
/* ======================== */
.separator {
    border: 0;
    height: 1px;
    background: #e7e7e7;
    margin: 20px 0;
}

.bottom-tizers-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    /* 🔑 ГАРАНТИЯ ОДИНАКОВОЙ ВЫСОТЫ ТИЗЕРОВ */
    align-items: stretch; 
}

.grid-tizer-item {
    flex: 1;	
    /* 🔑 ДЕЛАЕМ САМ ТИЗЕР ВЕРТИКАЛЬНЫМ FLEX-КОНТЕЙНЕРОМ */
    display: flex;
    flex-direction: column;

    text-align: left;
    text-decoration: none;
    color: inherit;
    border: 1px solid #d6d6d6;
    padding-bottom: 0; /* Убираем, чтобы не мешало flex-логике */
}

.grid-tizer-img-container {
    position: relative;
    /* margin-bottom: 10px; */ /* Убрано, чтобы не занимать место внизу */
    line-height: 0;
}

.grid-tizer-img {
    width: 100%;
    height: 180px; 
    object-fit: cover;
}
.three-tizers-grid .grid-tizer-img {
    height: 300px;
}
.four-tizers-grid .grid-tizer-img {
    height: 215px; 
}

/* 🔑 КЛАСС ДЛЯ ВЫРАВНИВАНИЯ ТЕКСТА: ЗАНИМАЕТ ВСЕ ОСТАВШЕЕСЯ МЕСТО */
.grid-tizer-text-block {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.grid-tizer-text {
    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 5px;
    /* Отступы внутри блока: сверху и по бокам */
    padding: 15px 20px 0; 
}

/* 🔑 ВЫРАВНИВАНИЕ ВРЕМЕНИ ПО НИЗУ */
.tizer-meta{
    /* КЛЮЧЕВОЕ СВОЙСТВО: Выталкивает элемент к низу */
    margin-top: auto; 
    
    /* Отступы: по бокам и снизу, чтобы компенсировать padding-bottom у .grid-tizer-item */
    padding: 15px 20px 25px; 
    font-size: 12px;
    color: #999;
}


/* Иконка Play на больших квадратных тизерах */
.video-icon-large {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
    opacity: 0.8;
}

/* ======================== */
/* 4.1. Смешанный блок тизеров (Шаблон B) */
/* ======================== */
.tizers-mixed-block {
    margin-bottom: 30px;
}

/* 4.1.1. Верхний ряд (2 горизонтальных тизера в ряд) */
.mixed-row-two-cols {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    /* Убедимся, что тизеры одинаковой высоты */
    align-items: stretch; 
}

/* 🔑 ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ: Стили для самого тизера (А-тега) */
.mixed-tizer-item.large-horizontal {
    flex: 1; /* Чтобы тизеры делили пространство 50/50 */
    display: flex;
    text-decoration: none;
    color: inherit;
    border: 1px solid #eee;
    padding: 10px;
    position: relative;
    /* 🔑 Выравниваем изображение и текст по центру по вертикали */
    align-items: center; 
}

.mixed-tizer-item.large-horizontal .mixed-img {
    width: 100px; /* Фиксированная ширина изображения */
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
}

/* Блок текста должен занимать оставшееся место */
.mixed-tizer-item.large-horizontal .mixed-text-block {
    flex: 1;
}

.mixed-tizer-item.large-horizontal .mixed-text-title {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 5px;
    /* ⚠️ Используем 0, чтобы избежать проблем с отступами */
    padding-left: 0; 
}

/* Иконка видео в смешанном блоке */
.video-icon-mixed {
    position: absolute;
    /* Центрируем на изображении 100x100 внутри padding: 10px */
    left: 60px; 
    top: 60px;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 5px;
    font-size: 12px;
    z-index: 5; /* Убедимся, что иконка выше видео */
}


/* 4.1.2. Нижний ряд (2 крупных тизера на всю ширину) */
.mixed-row-full-width {
    display: flex;
    gap: 20px;
}

.mixed-tizer-item.full-width-large {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    border-left: 5px solid #c00; /* Красная полоса, как у новости */
}

.mixed-tizer-item.full-width-large .full-width-text-block {
    max-width: 60%;
}

.mixed-tizer-item.full-width-large .full-width-img {
    width: 120px;
    height: 80px;
    object-fit: cover;
}

/* ======================== */
/* 5. Стили для бесконечной прокрутки (JS) и Футер */
/* ======================== */
.loading-spinner {
    text-align: center;
    padding: 20px 0;
    /* Сначала он скрыт */
    display: none; 
    font-size: 1.1em;
    color: #555;
}

.loader {
    border: 4px solid #f3f3f3; 
    border-top: 4px solid #c00; 
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* !!! ВАЖНО: Элемент-заглушка для JS-скролла !!! */
#end-of-content-sentinel {
    height: 1px; /* Минимальная высота */
    display: block;
    margin-top: 50px; 
}

.footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #999;
}

/* ======================== */
/* 6. Адаптивность для мобильных */
/* ======================== */
@media (max-width: 768px) {
    .header_mixed_ind{
        display:block !important;
    }
    .title-overlay-content {
        position: relative !important;
        padding: 10px !important;
        color: black !important;
        background: none !important;
    }
    .article-title{
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        text-shadow: none !important;
    }
    .article-meta.overlay-meta span {
        color: #000 !important;
    }
    .main-content-block {
        flex-direction: column; 
        gap: 0;
    }
    .full-article-block .tizers-top-row {
        display:none;
    }

    .side-tizers-compact {
        display:none;
        order: -1; 
        border-left: none;
        padding-left: 0;
        margin-bottom: 20px;
        padding-top: 15px;
        border-top: 1px solid #eee;
        /* На мобильном занимают всю ширину */
        flex: 0 0 100%; 
    }
    .featured-story-compact,
    .full-article-block {
        padding-right: 0;
        /* На мобильном занимают всю ширину */
        flex: 0 0 100%; 
    }
    
    /* Адаптация нижних сеток */
    .bottom-tizers-grid {
        flex-direction: column;
    }
    .grid-tizer-item {
        width: 100%;
        min-width: unset; /* Сброс минимальной ширины */
    }
    /* Адаптивность для смешанного блока */
    .mixed-row-two-cols,
    .mixed-row-full-width {
        flex-direction: column;
        gap: 15px;
    }
    .mixed-tizer-item.full-width-large .full-width-text-block {
        max-width: 70%;
    }
    /* Сайдбар на мобильном */
    .tizers-top-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 10px;
    }
    .tizer-item.large-tizer-in-row {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .tizer-item.large-tizer-in-row:last-child {
        border-bottom: 1px solid #eee; 
    }
}

/* =========================================================================
    7. Стили для ВСТАВЛЕННЫХ ТИЗЕРОВ (Подсветка)
    ========================================================================= */

.injected-tizer-in-content {
    background-color: #f7f7f7; 
    padding: 20px;
    margin: 30px 0; 
    border-left: 5px solid #ff5722; 
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

.injected-tizer-in-content > * {
    display: block;
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================================
    8. ЭФФЕКТЫ НАВЕДЕНИЯ (ПОДЧЕРКИВАНИЕ И ЦВЕТ)
    ========================================================================= */

/* 1. Ссылки в главном меню */
.menu-left a:hover {
    text-decoration: underline;
    /* Цвет текста ссылки при наведении */
    color: #ff4a4e; 
}

/* 2. Все основные тизеры (Левая колонка, Сетка, Смешанные) */
.tizer-item:hover .tizer-text,
.tizer-item:hover .tizer-text-inline-img,
.grid-tizer-item:hover .grid-tizer-text,
/* ⚠️ ИСПРАВЛЕНО: Удалили неиспользуемый селектор .mixed-col-item a:hover .mixed-title */
/* .mixed-col-item a:hover .mixed-title, */
.mixed-tizer-item.large-horizontal:hover .mixed-text-title { /* 🔑 Добавили корректный селектор */
    /* Подчеркиваем текст заголовка при наведении на весь блок */
    text-decoration: underline;
    /* ✅ НОВЫЙ ЦВЕТ: Изменяем цвет текста при наведении */
    color: #ff4a4e !important; /* !important может быть нужен, чтобы перебить базовый #000 */
}

/* 3. Ссылки-тизеры, встроенные в статью (если они используют .in-article-link) */
.in-article-link:hover .in-article-text {
    text-decoration: underline;
    color: #ff4a4e;
}

/* 4. Ссылки, встроенные в основной контент (через injectTeasersIntoContent) */
/* Если тизеры используют универсальный класс .tizer-item */
.injected-tizer-in-content .tizer-item:hover .tizer-text {
    text-decoration: underline;
    color: #ff4a4e !important;
}

/* 5. Общий стиль для всех ссылок тизеров, если они используют общий класс: */
a.grid-tizer-item:hover .grid-tizer-text {
    color: #ff4a4e !important;
}
.tizers-top-row a:nth-child(1) { width: 50%; } /* или фиксированное значение */
.tizers-top-row a:nth-child(2) { width: 50%; }

/* =========================================================================
    9. СТИЛИ EXIT-INTENT POPUP
    ========================================================================= */

/* -------------------------------------------
    ОБЩИЕ СТИЛИ КОНТЕЙНЕРА
------------------------------------------- */
/* =========================================================================
   EXIT POPUP STYLES
   ========================================================================= */

/* 1. Контейнер попапа: Затемнение фона и скрытие по умолчанию */
.popup-container {
    /* Фиксируем на весь экран */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Затемненный фон */
    background: rgba(0, 0, 0, 0.7); 
    
    /* Скрываем по умолчанию */
    visibility: hidden;
    opacity: 0;
    
    /* Размещение контента по центру и поверх всего */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
    
    /* Плавный переход для показа/скрытия */
    transition: opacity 0.3s, visibility 0.3s;
}

/* 2. Класс для отображения попапа (добавляется через JS) */
.popup-container.visible {
    visibility: visible;
    opacity: 1;
}

/* 3. Основной контент (белый блок с новостями) */
.popup-content {
    background: white;
    padding: 20px 30px; /* Отступы внутри блока */
    border-radius: 8px;
    
    /* Максимальная ширина, чтобы выглядело как на скриншоте */
    max-width: 900px; 
    width: 90%; 
    
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Анимация при появлении (необязательно, но красиво) */
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}

.popup-container.visible .popup-content {
    transform: scale(1);
}

/* 4. Кнопка закрытия */
.popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px; /* Размер 'x' */
    color: #333;
    cursor: pointer;
    line-height: 1; /* Убрать лишние отступы */
    opacity: 0.5;
    transition: opacity 0.2s;
}

.popup-close-btn:hover {
    opacity: 1;
}

/* 5. Заголовок */
.popup-title {
    text-align: center;
    font-size: 28px;
    color: #444;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: bold;
}

/* 6. Сетка тизеров (основной макет) */
.popup-grid {
    /* Дополнительные стили для центрирования, если нужно */
}

/* Стили для 3-колоночной сетки внутри попапа */
.popup-content .three-tizers-grid {
    display: grid;
    /* 3 колонки одинаковой ширины */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Расстояние между тизерами */
}

/* =========================================================================
   Адаптивность для мобильных устройств (менее 768px)
   ========================================================================= */

@media (max-width: 768px) {
    .popup-content {
        max-width: 95%; /* Чуть больше на маленьких экранах */
        padding: 15px;
    }
    
    .popup-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .popup-content .three-tizers-grid {
        /* На мобильных устройствах делаем 1 колонку */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
}