/* ==================================================
   СПИСОК НОВОСТЕЙ (news.php) - ЛИНЕЙНЫЙ ФОРМАТ
   ================================================== */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Расстояние между новостями */
    margin: 40px auto;
    max-width: 900px; /* Ограничиваем ширину для комфортного чтения */
}

.news-list-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    
    background-color: var(--white); /* Белый фон блока (или любой другой из переменных) */
    border: 1px solid #ddd;          /* Тонкая серая обводка */
    border-radius: 10px;             /* Скругление углов блока */
    padding: 25px;                   /* Отступы внутри блока */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Легкая тень для объема */
    transition: transform 0.3s, box-shadow 0.3s; /* Плавный эффект при наведении */
}

/* Квадратный контейнер для картинки-иконки */
.news-item-image-container {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: #000;
    border-radius: 6px; /* Чуть скруглил углы */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.news-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Дата в списке */
.news-item-date {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}

/* Заголовок в списке */
.news-item-title {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Основной текст в списке */
.news-item-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Стили для кликабельных ссылок внутри текста */
.news-link {
    color: #0066cc; /* Синий цвет для ссылок */
    text-decoration: underline;
    transition: color 0.3s;
}

.news-link:hover {
    color: var(--yellow);
}

/* Адаптивность для списка новостей на мобильных */
@media (max-width: 768px) {
    .news-list-item {
        flex-direction: row; /* На телефоне картинка остается слева */
        gap: 15px;
    }
    
    .news-item-image-container {
        width: 60px; /* Иконка становится еще меньше */
        height: 60px;
    }
}


/* ==================================================
   ДЕТАЛЬНАЯ СТРАНИЦА НОВОСТИ (news_detail.php)
   ================================================== */
.news-detail-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.btn-back {
    display: inline-block;
    font-family: 'Bebas Neue Cyrillic', sans-serif;
    font-size: 1.2rem;
    color: var(--text-light);
    text-decoration: none;
    margin-bottom: 30px;
    text-transform: uppercase;
    transition: color 0.3s;
}

.btn-back:hover {
    color: var(--dark-gray);
}

.news-header {
    margin-bottom: 30px;
}

.news-detail-date {
    font-family: 'Routine Variable Thin', sans-serif;
    color: var(--text-light);
    font-size: 1rem;
    margin-bottom: 10px;
}

.news-detail-title {
    font-family: 'Bebas Neue Cyrillic', sans-serif;
    font-size: 3.5rem;
    color: var(--text-dark);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.news-detail-content {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.news-detail-content p {
    margin-bottom: 20px;
}

/* Адаптивность для детальной страницы */
@media (max-width: 768px) {
    .news-detail-title { font-size: 2.5rem; }
    .news-detail-content { font-size: 1rem; }
}


/* ==================================================
   ЗАГОЛОВОК ГАЛЕРЕИ (Отбивка от текста)
   ================================================== */
.news-gallery-title {
    font-family: 'Bebas Neue Cyrillic', sans-serif;
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-top: 60px;           
    margin-bottom: 25px;        
    padding-top: 40px;          
    border-top: 2px solid #eee; 
}


/* ==================================================
   СЛАЙДЕР ВНУТРИ НОВОСТИ
   ================================================== */
.news-gallery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
    width: 100%;
}

.news-main-view {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
}

.news-main-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.news-main-view video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: none;
}

.news-main-view .active {
    display: block;
}

.news-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.news-thumbnails::-webkit-scrollbar {
    height: 6px;
}

.news-thumbnails::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

.news-thumb {
    width: 90px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    object-fit: cover;
    background: #111;
    transition: all 0.3s;
}

.news-thumb:hover {
    opacity: 0.8;
}

.news-thumb.active {
    opacity: 1;
    border-color: var(--yellow);
}

/* Адаптив слайдера под телефоны */
@media (max-width: 768px) {
    .news-main-view {
        border-radius: 8px;
    }
    .news-thumb {
        width: 75px;
        height: 50px;
    }
}