/*
==========================================================================
 Финальные стили для кастомной главной страницы
==========================================================================
*/

/* --- Основной контейнер страницы --- */

body .is-layout-flex {
    display: flex
;
    justify-content: center;
}
.custom-homepage-container {
    max-width: 1380px;
    margin: 30px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Заголовок "ЦСКА – Все сюда!" --- */
.custom-homepage-container h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
}

/* --- Ссылки "Вход | Пример страницы" под заголовком --- */
.news-header-links {
    text-align: center;
    margin-bottom: 25px;
    color: #555;
    font-size: 14px;
}

.news-header-links a {
    color: #1a73e8;
    text-decoration: none;
}

.news-header-links a:hover {
    text-decoration: underline;
}

/* --- Горизонтальная линия-разделитель --- */
.news-divider {
    border: 0;
    /*border-top: 1px solid #e0e0e0;
    margin: 25px 0;*/
}

/* --- Стили для списка новостей --- */

/* Контейнер одной новости (строка) */
.news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px;
    border-bottom: 1px solid #f0f0f0;
}

/* Заголовок новости (левая часть) */
.news-title {
    flex: 1; /* Позволяет заголовку занимать все свободное место */
    text-decoration: none;
    color: #333;
    font-size: 20px;
    margin-right: 20px;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter', sans-serif; /* Пример */
    font-weight: 400; /* Можно сделать его чуть жирнее */
	font-style: normal;
}

.news-title:hover {
    text-decoration: underline;
    color: #000;
}

/* Правый блок (дата + звезда) */
.news-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Дата новости */
.news-date {
    color: #555;
    font-size: 14px;
    margin-right: 15px;
}

/*
==========================================================================
 РАБОЧИЕ СТИЛИ для кнопки "Избранное" (на основе вашего примера)
==========================================================================
*/

/* Обёртка кнопки */
.favorites-button-wrapper {
    line-height: 1;
}

/* Сама кнопка (невидимая основа) */
.simplefavorite-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    /*margin: 0 !important;*/
    cursor: pointer;
    line-height: 1;
}

/* Скрываем весь лишний текст, который добавляет плагин */
.simplefavorite-button .favorite-text,
.simplefavorite-button .unfavorite-text,
.simplefavorite-button .simplefavorite-button-count,
.simplefavorite-button .simplefavorite-spinner {
    display: none !important;
}

/* Иконка по умолчанию (пустая звезда) */
.simplefavorite-button::before {
    content: "☆"; /* Пустая звезда */
    font-size: 30px;
    color: #bbb;
    transition: color 0.2s;
}

/* Иконка при наведении */
.simplefavorite-button:hover::before {
    color: #f0ad4e !important; /* Оранжевый */
	border: 0px;
}

/* В избранном — закрашенная звезда.
   Используем все возможные селекторы из вашего рабочего примера */
.simplefavorite-button.favorited::before,
.simplefavorite-button.active::before,
.simplefavorite-button[aria-pressed="true"]::before {
    content: "★"; /* Закрашенная звезда */
    color: #ffc107 !important; /* Золотой */
}




/*
==========================================================================
 Финальные, исправленные стили для двухколоночного макета
==========================================================================
*/

/* Главный flex-контейнер для колонок */
.two-column-layout {
    display: flex;
    justify-content: space-between; /* Распределяем пространство */
}

/* Левая колонка (основная) */
.main-news-column {
    /* ЗАДАЕМ ТОЧНУЮ ШИРИНУ С УЧЕТОМ ОТСТУПА */
    width: calc(65% - 20px); /* 65% минус половина отступа */
    min-width: 0;
}

/* Правая колонка (избранное) */
.favorites-column {
    /* ЗАДАЕМ ТОЧНУЮ ШИРИНУ С УЧЕТОМ ОТСТУПА */
    width: calc(35% - 20px); /* 35% минус половина отступа */
    min-width: 0;
    border-left: 1px solid #e0e0e0;
    padding-left: 20px;
}

/* Стили для заголовков колонок ("Последние новости", "Избранное") */
.column-title {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 820px) {
    .two-column-layout {
        flex-direction: column; /* Ставим колонки друг под другом */
        gap: 50px; /* Добавляем расстояние между ними */
    }

    /* На мобильных каждая колонка занимает всю ширину */
    .main-news-column,
    .favorites-column {
        width: 100%;
    }

    .favorites-column {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid #e0e0e0;
        padding-top: 30px;
    }
}




/*
==========================================================================
 Стили для пагинации
==========================================================================
*/
.pagination {
    margin-top: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px; /* Расстояние между кнопками */
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}

.pagination .page-numbers:hover {
    background-color: #ddd;
    border-color: #ccc;
}

.pagination .page-numbers.current {
    background-color: #ccc;
    border-color: #ccc;
    color: #555;
    cursor: default;
}

.pagination .page-numbers.dots {
    border: none;
    background: none;
    padding: 8px 5px;
}