/* =============================================================================
   Переменные и настройки
   ============================================================================= */
:root {
    --color-text: #333;
    --color-heading: #1a284d;
    --color-primary: #3a7dca;
    --color-primary-dark: #2c609d;
    --color-secondary: #e94e34;
    --color-background: #fff;
    --color-background-alt: #f7f9fc;
    --color-border: #eaeaea;
    --color-white: #fff;
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);
    --transition-duration: 0.3s ease;
аа

    /* --- additions (non-breaking) --- */
    --tr-dur: .3s;
    --tr-ease: ease;
    --z-header: 100;
    --z-nav: 99;
    --z-burger: 101;
    --container-max: 1240px;
}


/* =============================================================================
   Базовые стили и сброс
   ============================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding-top: calc(var(--header-top-bar-height) + var(--header-main-height));
}


img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

iframe {
    max-width: 100%;
    display: block;
    border: 0;

}

.container {
    max-width: var(--container-max);
    padding: 0 20px;
    margin: 0 auto;
}

h1,
h2,
h3,
h4 {
    font-family: 'Merriweather', 'Georgia', serif;
    color: var(--color-heading);
    margin-top: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-duration);
}

a:hover {
    color: var(--color-primary-dark);
}


/* === a11y: focus-visible defaults === */
:where(a, button, .btn, .header__nav-link, .pagination a.page-numbers) {
    outline: none;
}

:where(a, button, .btn, .header__nav-link, .pagination a.page-numbers):focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}


/* =============================================================================
   Стили для кнопок
   ============================================================================= */
.btn {
    display: inline-block;
    padding: 12px 32px;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 15px rgba(58, 125, 202, 0.4);
}

.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(58, 125, 202, 0.5);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-text);
    padding: 8px;
    border-radius: 50%;
    line-height: 0;
}

.btn--secondary:hover {
    background-color: var(--color-background-alt);
}

.btn--secondary svg {
    width: 24px;
    height: 24px;
}


/* =============================================================================
   Стили для Слайдера (Hero)
   ============================================================================= */

.hero {
    width: 100%;
    /* Возвращаем фоновый цвет, это хорошая практика */
    background-color: #eef1f5;
}



.hero .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--color-white);
    padding-bottom: 60px;
    /* Вот ключ к решению: задаем большие вертикальные отступы */
    padding-top: 100px;
    padding-bottom: 140px;
    /* Делаем нижний отступ больше для точек пагинации */

}




.hero .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(10, 20, 40, 0.6), rgba(10, 20, 40, 0.4));
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.hero__title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 20px;
    line-height: 1.2;
}



.hero__text {
    font-size: 1.125rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero .swiper-button-next,
.hero .swiper-button-prev {
    color: var(--color-white);
    --swiper-navigation-size: 30px;
}

.hero .swiper-button-next:hover,
.hero .swiper-button-prev:hover {
    opacity: 0.8;
}

.hero .swiper-pagination {
    bottom: 30px;
}

.hero .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: background-color var(--transition-duration);
}

.hero .swiper-pagination-bullet-active {
    background-color: var(--color-white);
}

/* убираем фон у hero, чтобы внизу не было серой полосы */
.hero {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

/* точки фиксируем внутри hero на комфортной высоте */
.hero .swiper-pagination {
    bottom: 36px !important;
    z-index: 3;
}



/* задаём одинаковую высоту области слайдера */
.hero .swiper {
  height: clamp(420px, 70vh, 680px);
}

/* слайд растягиваем на высоту swiper */
.hero .swiper-slide {
  height: 100%;
  box-sizing: border-box;
}


/* =============================================================================
   Стили для Секций (Общие)
   ============================================================================= */

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 2.5rem;
    /* 40px */
    margin-bottom: 15px;
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.125rem;
    /* 18px */
    color: var(--color-text);
    max-width: 700px;
    margin: 0 auto;
}

.section-footer {
    text-align: center;
    margin-top: 60px;
}


/* =============================================================================
   Стили для Секции Новостей
   ============================================================================= */

.news-section {
    padding: 80px 0;
    background-color: var(--color-background-alt);
}

.news-grid {
    display: grid;
    /* Создаем адаптивные колонки: минимум 320px, максимум - равные доли */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.news-card {
    background-color: var(--color-background);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    /* Обрезает все, что выходит за рамки */
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.news-card__image-container {
    overflow: hidden;
    /* Прячет части изображения, которые выходят при увеличении */
}

.news-card__image {
    width: 100%;
    display: block;
    /* Гарантирует одинаковые пропорции для всех картинок */
    aspect-ratio: 16 / 10.8;
    object-fit: cover;
    /* Масштабирует картинку, чтобы она заполнила блок, обрезая лишнее */
    transition: transform 0.4s ease;
}

.news-card:hover .news-card__image {
    transform: scale(1.05);
    /* Эффект увеличения картинки при наведении */
}

.news-card__content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Позволяет контенту занять все доступное место */
}

.news-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.875rem;
    /* 14px */
}

.news-card__category {
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background-color: #eef4ff;
    /* Светло-голубой */
    color: #4c6a9c;
    /* Темно-голубой */
}

.news-card__category--kids {
    background-color: #fff4e5;
    /* Светло-оранжевый */
    color: #b45309;
    /* Темно-оранжевый */
}

.news-card__category--history {
    background-color: #f0f0f0;
    /* Серый */
    color: #555;
    /* Темно-серый */
}

.news-card__date {
    color: #777;
}

.news-card__title {
    font-size: 1.25rem;
    /* 20px */
    margin-bottom: 15px;
}

.news-card__title a {
    color: var(--color-heading);
}

.news-card__title a:hover {
    color: var(--color-primary);
}

.news-card__excerpt {
    margin-bottom: 20px;
    flex-grow: 1;
    /* Занимает доступное пространство, прижимая кнопку "Читать" вниз */
}

.news-card__read-more {
    font-weight: 600;
    color: var(--color-primary);
    align-self: flex-start;
    /* Прижимается к левому краю */
}


/* =============================================================================
   Стили для Сетки Контента и Сайдбара
   ============================================================================= */

.main-content-grid {
    display: grid;
    /* 2/3 для контента, 1/3 для сайдбара */
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
    /* Выравниваем по верхнему краю */
    overflow: hidden;

}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* =============================================================================
   Стили для Виджетов (Общие)
   ============================================================================= */
.widget {
    background-color: var(--color-background);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.widget-title {
    font-size: 1.25rem;
    /* 20px */
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* =============================================================================
   Стили для Виджета "Календарь"
   ============================================================================= */

/* ===== Виджет: Календарь мероприятий (новый дизайн) ===== */
.widget .event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* карточка события */
.widget .event-list>li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--color-border, #E2E6ED);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(17, 34, 68, .06);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.widget .event-list>li:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(17, 34, 68, .10);
    background: #f9fbff;
}

/* дата-пилюля слева */
.widget .event-list .event-date {
    min-width: 64px;
    text-align: center;
    border-radius: 14px;
    padding: 8px 8px 6px;
    background: var(--color-primary, #3a7dca);
    color: #fff;
    font-weight: 800;
    line-height: 1.1;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}

.widget .event-list .event-date span {
    display: block;
    font-size: 22px;
    line-height: 1;
}

.widget .event-list .event-date::after {
    /* трёхбукв. месяц уже в HTML после <span>, просто слегка стилизуем */
    content: '';
}

/* заголовок события */
.widget .event-list .event-title {
    font-weight: 700;
    color: var(--color-text, #202733);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.widget .event-list>li:hover .event-title {
    color: var(--color-primary, #3a7dca);
}

/* ссылка "весь календарь" */
.widget .widget__more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-weight: 700;
    color: var(--color-primary, #3a7dca);
    text-decoration: none;
}

.widget .widget__more-link:hover {
    text-decoration: underline;
}

.widget .event-list > li { position: relative; }

/* Оверлей-ссылка перекрывает всю карточку */
.widget .event-item__overlay{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;  /* = inset:0 */
  display: block;
  z-index: 50;                /* ВАЖНО: выше текста и даты */
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}



.news-card-widget__title a,
.news-card-widget__title a:visited {
  color:var(--color-heading);
  text-decoration: none;
}

/* Синий только при наведении (на устройствах с мышью) */
@media (hover: hover) and (pointer: fine) {
  .news-card-widget__title a:hover {
    color:var(--color-primary);
  }
}

/* Чтобы на тап-устройствах не казалось "активным" */
.news-card-widget__title a:active,
.news-card-widget__title a:focus {
  color:var(--color-heading);
}



/* =============================================================================
   Стили для Кнопки "Наверх"
   ============================================================================= */

.scroll-up-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 50;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    display: flex;
    justify-content: center;
    align-items: center;

    /* Скрытое состояние */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--transition-duration), transform var(--transition-duration), visibility var(--transition-duration);
}

.scroll-up-btn svg {
    fill: currentColor;
    /* SVG наследует цвет родителя */
}

/* Видимое состояние (будет добавляться через JS) */
.scroll-up-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =============================================================================
   Стили для Панели Доступности
   ============================================================================= */

.accessibility-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    /* Выше всего на странице */
    background-color: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    /* Скрытое состояние */
    transform: translateY(-110%);
    transition: transform 0.4s ease-out;
}

.accessibility-panel.is-active {
    transform: translateY(0);
}

.accessibility-panel__container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
    gap: 30px;
    position: relative;
    flex-wrap: wrap;
    /* Для мобильных */
}

.accessibility-panel__group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accessibility-panel__label {
    font-weight: 500;
    color: var(--color-heading);
}

.btn--accessibility {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--transition-duration), border-color var(--transition-duration), color var(--transition-duration);
}

.btn--accessibility:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Стиль для активной кнопки */
.btn--accessibility.is-selected {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn--accessibility.btn--reset {
    background-color: transparent;
}

.accessibility-panel__close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
}

/* =============================================================================
   Классы для Режимов Доступности
   ============================================================================= */

/* 1. Изменение размера шрифта через <html>, чтобы все rem'ы масштабировались */
html.fontsize-medium {
    font-size: 18px;
}

html.fontsize-large {
    font-size: 20px;
}

/* 2. Тема высокой контрастности */
body.theme-high-contrast {
    --color-text: #fff;
    --color-heading: #fff;
    --color-primary: #ff0;
    /* Ярко-желтый для ссылок и акцентов */
    --color-primary-dark: #dd0;
    --color-background: #000;
    --color-background-alt: #000;
    --color-border: #666;
    --color-white: #fff;
    --shadow-sm: none;
}

/* Переопределение стилей для контрастной темы */
body.theme-high-contrast .widget,
body.theme-high-contrast .news-card,
body.theme-high-contrast .accessibility-panel {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: none;
}

body.theme-high-contrast .header.scrolled {
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

body.theme-high-contrast img {
    /* Делаем изображения черно-белыми, но контрастными */
    filter: grayscale(100%) contrast(150%);
}

body.theme-high-contrast .hero .swiper-slide::before {
    /* Делаем маску слайдера плотной */
    background: rgba(0, 0, 0, 0.8);
}


/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ ОТДЕЛЬНОЙ НОВОСТИ
   ============================================================================= */

/* --- Шапка статьи --- */
.article-header {
    height: 50vh;
    /* Высота в половину экрана */
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Выравниваем контент по нижнему краю */
    padding-bottom: 60px;
}

/* Затемняющая маска для читаемости */
.article-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 20, 40, 0.8), rgba(10, 20, 40, 0.2));
}

.article-header__container {
    position: relative;
    z-index: 2;
}

.article-header__content {
    max-width: 800px;
}

.article-header__title {
    color: var(--color-white);
    font-size: 3rem;
    /* 48px */
    line-height: 1.2;
    margin-top: 15px;
}



/* --- Секция контента статьи --- */
.article-section {
    padding: 80px 0;
}

.article-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    /* Основной контент + сайдбар 320px */
    gap: 50px;
    align-items: flex-start;
}



/* --- Основной текст статьи --- */
.article-content {
    max-width: 750px;
    /* Ограничиваем ширину для лучшей читаемости */
}

.article-lead {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 2em;
}

.article-content h2 {
    font-size: 2rem;
    /* 32px */
    margin-top: 2em;
    margin-bottom: 1em;
}

.article-content p,
.article-content ul,
.article-content blockquote {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

.article-content ul {
    list-style: none;
    padding-left: 20px;
}

.article-content ul li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
}

.article-content ul li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 0;
}

.article-content blockquote {
    padding: 20px 30px;
    background: var(--color-background-alt);
    border-left: 4px solid var(--color-primary);
    font-style: italic;
    font-size: 1.125rem;
}

.article-content blockquote p {
    margin: 0;
}

.article-content blockquote footer {
    margin-top: 10px;
    font-style: normal;
    font-weight: 600;
}

/* --- Сайдбар статьи --- */
.article-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.meta-list li {
    margin-bottom: 10px;
}

.meta-list strong {
    min-width: 80px;
    display: inline-block;
}

.social-share {
    display: flex;
    gap: 10px;
}

.social-share__link {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-heading);
    transition: all var(--transition-duration);
}

.social-share__link:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-3px);
}

/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ "КАЛЕНДАРЬ МЕРОПРИЯТИЙ"
   ============================================================================= */

/* --- Общий заголовок для внутренних страниц --- */
.page-header {
    padding: 60px 0;
    text-align: center;
    background-color: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border);
}

.page-header__title {
    font-size: 2.8rem;
    /* 45px */
    margin-bottom: 15px;
}

.page-header__subtitle {
    font-size: 1.125rem;
    color: var(--color-text);
    max-width: 600px;
    margin: 0 auto;
}

body.theme-high-contrast .page-header {
    border-color: var(--color-border);
}

/* --- Секция с мероприятиями --- */
.events-section {
    padding: 80px 0;
}

/* --- Панель фильтров --- */
.filter-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.filter-group {
    background-color: var(--color-background-alt);
    border-radius: 8px;
    padding: 8px;
    display: inline-flex;
    gap: 8px;
}

.filter-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--color-text);
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.filter-btn:hover {
    color: var(--color-primary);
}

.filter-btn.is-active {
    background-color: var(--color-white);
    color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.theme-high-contrast .filter-group {
    background-color: #111;
}

body.theme-high-contrast .filter-btn.is-active {
    background-color: #222;
}

/* --- Сетка мероприятий (основана на news-grid) --- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* --- Адаптация карточки для мероприятия --- */
.event-card .news-card__image-container {
    position: relative;
}

/* Дата поверх изображения */
.event-card__date {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    color: var(--color-heading);
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.event-card__date strong {
    font-family: 'Merriweather', serif;
    font-size: 2rem;
    display: block;
}

.event-card__date span {
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* В контрастной теме убираем прозрачность у даты */
body.theme-high-contrast .event-card__date {
    background-color: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.calendar-day .calendar-event {
    cursor: default;
    text-decoration: none;
}

/* =============================================================================
   СТИЛИ ДЛЯ СЕКЦИИ "ВСЕ БИБЛИОТЕКИ СИСТЕМЫ" 
   ============================================================================= */
  /* ====== Полировка Variant A (чисто CSS, без новых классов) ====== */

.branch-libraries-section{
  padding: 48px 0;
  background-color: var(--color-background-alt);
  border-bottom: 3px solid var(--color-primary);
}

/* Хедер */
.collapsible-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  cursor:pointer;
  user-select: none;
}

.collapsible-header .section-title{ margin: 0; }

.collapsible-header .arrow-icon{
  display:inline-block;
  line-height:1;
  font-size: 1.6rem;
  color: var(--color-primary);
  transform-origin: 50% 50%;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

.collapsible-header.is-open .arrow-icon{
  transform: rotate(180deg);
}

/* Контент раскрытия: чуть приятнее + без “дёрганья” */
.collapsible-content{
  max-height: 0;
  overflow: hidden;
  padding-top: 0;

  opacity: 0;
  transform: translateY(-6px);

  transition:
    max-height 560ms cubic-bezier(.2,.8,.2,1),
    padding-top 560ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease,
    transform 240ms ease;
}

.collapsible-content.is-open{
  max-height: 2000px; /* запас */
  padding-top: 28px;

  opacity: 1;
  transform: translateY(0);
}

/* Центрируем кнопку карты, но список оставляем “как текст” */
.collapsible-content{ text-align: center; }
.libraries-grid{ text-align: left; }

/* ====== РОВНЫЙ список: grid вместо column-count ====== */
/* (Разметку не меняем — только CSS) */
.libraries-grid{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
}

@media (max-width: 1100px){
  .libraries-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .libraries-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .libraries-grid{ grid-template-columns: 1fr; }
}

.libraries-grid li{
  margin: 0;
  padding: 0;
  position: static;
}
.libraries-grid li::before{ content: none; }

/* Ссылка: ровная высота “тап-зоны”, аккуратный ховер */
.libraries-grid a{
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-heading);

  line-height: 1.25;
  min-height: 44px; /* чтобы все “клетки” ощущались ровно */
  box-sizing: border-box;

  transition:
    background var(--transition-duration),
    color var(--transition-duration),
    transform var(--transition-duration);
}


.libraries-grid a:hover{
  background: rgba(0,0,0,0.04);
  color: var(--color-primary);
  transform: translateX(2px);
}

.libraries-grid a:focus-visible{
  outline: 3px solid rgba(0,0,0,0.18);
  outline-offset: 2px;
}

/* Кнопка карты — по центру и аккуратно */
.map-link{
  display: inline-block;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.14);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  background: transparent;

  transition: background var(--transition-duration), transform var(--transition-duration);
}

.map-link:hover{
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* Уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .collapsible-content,
  .collapsible-header .arrow-icon,
  .libraries-grid a,
  .map-link{ transition: none !important; }
}


/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ ФИЛИАЛА БИБЛИОТЕКИ
   ============================================================================= */
.page-section {
    padding: 60px 0;
}

.page-title {
    font-size: 2.8rem;
    margin-bottom: 40px;
}

/* Верхняя сетка с информацией */
.branch-info-grid {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

.branch-contact-info {
    flex: 1;
    /* Занимает половину места */
}

.branch-map {
    flex: 1;
    /* Занимает вторую половину */
}



/* Стилизация контактов */
.branch-contact-info p {
    line-height: 1.7;
    margin-bottom: 1em;
}

.branch-contact-info h4 {
    font-family: 'Montserrat', sans-serif;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

/* Карта */
.branch-map iframe {
    width: 100%;
    min-height: 400px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

/* Иконки соцсетей */
.social-links {
    margin-top: 2em;
}

.social-links__icons {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 44px;
    height: 44px;
    background-color: var(--color-background-alt);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.social-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Блок "О нас" */
.branch-about h2 {
    font-size: 2rem;
    margin-bottom: 1em;
}

/* Баннеры в сайдбаре */
.sidebar .widget a {
    display: block;
    margin-bottom: 20px;
}

.sidebar .widget a img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.sidebar .widget a:hover img {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

#pos-banner-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* --- Блок заведующей --- */
.page-branch .manager-block__photo {
    width: 280px;
    /* Крупная ширина для фото */
    height: auto;
    aspect-ratio: 4 / 5;
    /* Портретная пропорция */
    object-fit: cover;
    border-radius: 12px;
}



/* --- Стили для блока "Оцените работу" --- */
.rating-section {
    border-top: 1px solid var(--color-border);
    padding-top: 60px;
    margin-top: 60px;
}

.rating-grid {
    display: flex;
    align-items: center;
    gap: 40px;
}

.rating-grid__text {
    flex: 2;
    /* Текст занимает 2/3 ширины */
}

.rating-grid__text p {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.rating-grid__text .btn {
    margin-top: 1em;
}

.rating-grid__qr {
    flex: 1;
    /* QR-код занимает 1/3 ширины */
    text-align: right;
}

.rating-grid__qr img {
    max-width: 200px;
    /* Ограничиваем размер QR-кода */
    width: 100%;
    height: auto;
}

/* --- Сотрудники: компактные карточки + фото без искажений --- */

/* сетка: делаем карточки заметно меньше */
.branch-employees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    align-items: start;
}

/* карточка компактнее */
.employee-card {
    background: var(--color-background-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.06);
}

/* фото: не плющится, держим пропорции */
.employee-card__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;   /* портрет */
    object-fit: cover;     /* сохраняет пропорции, обрезает лишнее */
    object-position: center;
    display: block;
}

/* текст компактнее */
.employee-card__info {
    padding: 10px 12px 12px;
}

.employee-card__name {
    margin: 0 0 4px;
    font-size: 0.95rem;
    line-height: 1.25;
}

.employee-card__pos {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.3;
    opacity: 0.8;
}



/* =============================================================================
   СТИЛИ ДЛЯ СЕКЦИИ "АФИША"
   ============================================================================= */

.poster-section {
    padding-top: 20px;
    padding-bottom: 80px;
}

.poster-grid {
    display: grid;
    /* 4 колонки на больших экранах, 2 на планшетах, 1 на мобильных */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}



.poster-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.poster-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.poster-card__image {
    width: 100%;
    display: block;
    /* Пропорция для вертикальных афиш */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.poster-card:hover .poster-card__image {
    transform: scale(1.05);
}

.poster-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--color-white);
    text-align: left;
}

.poster-card__title {
    font-family: 'Merriweather', serif;
    font-size: 1.25rem;
    color: var(--color-white);
    line-height: 1.3;
    margin: 0 0 5px 0;
}

.poster-card__date {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    opacity: 0.8;
}




.partners-section {
    padding: 80px 0;
    background-color: var(--color-background-alt);
    overflow: hidden;
    /* Важно, чтобы стрелки не создавали горизонтальную прокрутку */
}

/* Контейнер для слайдера и стрелок */
.partners-slider-wrapper {
    position: relative;
    padding: 0 50px;
    /* Оставляем место по бокам для стрелок */
}

/* Слайдер */
.partners-slider {
    padding: 10px 0;
}

/* Карточка партнера */
.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    /* Увеличили высоту карточек */
    padding: 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--transition-duration), transform var(--transition-duration);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.partner-card img {
    max-width: 100%;
    max-height: 100%;
    /* Увеличили максимальную высоту */
    object-fit: contain;
}

/* =============================================================================
   УСИЛЕННЫЕ СТИЛИ ДЛЯ КНОПОК СЛАЙДЕРА "ИНФОРЕСУРСЫ"
   ============================================================================= */

.partners-slider-wrapper .partners-slider-prev,
.partners-slider-wrapper .partners-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;

    background-color: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    transition: background-color var(--transition-duration), color var(--transition-duration), transform 0.2s ease;
}

.partners-slider-wrapper .partners-slider-prev:hover,
.partners-slider-wrapper .partners-slider-next:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.05);
}

.partners-slider-wrapper .partners-slider-prev {
    left: 0;
}

.partners-slider-wrapper .partners-slider-next {
    right: 0;
}

.partners-slider-wrapper .partners-slider-prev::after,
.partners-slider-wrapper .partners-slider-next::after {
    font-size: 1.2rem;
    font-weight: 900;
}



/* Располагаем стрелки по бокам */
.partners-slider-prev {
    left: 0;
}

.partners-slider-next {
    right: 0;
}

/* Иконки стрелок */
.partners-slider-prev::after,
.partners-slider-next::after {
    font-size: 1.2rem;
    font-weight: 900;
}


/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ КАЛЕНДАРЯ
   ============================================================================= */

.calendar-section {
    padding: 60px 0 80px;
    background-color: var(--color-background-alt);
}

.calendar-container {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* --- Шапка календаря --- */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-nav-btn,
.calendar-today-btn {
    font-family: 'Montserrat', sans-serif;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.calendar-nav-btn {
    width: 36px;
    height: 36px;
    color: var(--color-heading);
}

.calendar-today-btn {
    padding: 6px 16px;
    color: var(--color-primary);
}

.calendar-nav-btn:hover,
.calendar-today-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.calendar-title {
    font-size: 1.5rem;
    margin: 0;
}

/* --- Сетка календаря --- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
    text-align: center;
    padding: 15px 5px;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border);
}

.calendar-day {
    position: relative;
    padding: 8px;
    min-height: 140px;
    border-right: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
}

/* Убираем лишние границы */
.calendar-grid>*:nth-child(7n) {
    border-right: none;
}

.calendar-grid>*:nth-child(-n+7) {
    border-top: none;
}

.calendar-date {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Стили для "сегодняшней" даты */
.calendar-day.is-today .calendar-date {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
}

/* Стили для неактивных дат (другой месяц) */
.calendar-day.is-inactive {
    background-color: #fcfcfc;
}

.calendar-day.is-inactive .calendar-date {
    color: #b0b0b0;
}


/* --- Стили для событий в календаре --- */
.calendar-event {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    line-height: 1.4;
    cursor: pointer;
    transition: opacity var(--transition-duration);
    color: #fff;
}

.calendar-event:hover {
    opacity: 0.85;
}

.event-time {
    display: block;
    font-weight: 600;
}

.calendar-event.event--exhibition::before { background-color:#3a7dca; }
.calendar-event.event--movie::before      { background-color:#5d6a90; }
.calendar-event.event--kids::before       { background-color:#e98b34; }
.calendar-event.event--meeting::before    { background-color:#e94e34; }
.calendar-event.event--concert::before    { background-color:#8b0000; }
.calendar-event.event--quiz::before       { background-color:#006400; }
.calendar-event.event--fair::before       { background-color:#9c03e2; }
.calendar-event.event--theatre::before    { background-color:#ff5e00; }
.calendar-event.event--class::before      { background-color:#e900c2; }
.calendar-event.event--lectures::before   { background-color:#13e000; }
.calendar-event.event--stocks::before     { background-color:#fffb00; }
.calendar-event.event--present::before     { background-color:#b3f0ff; }




/* ===== Кликабельность событий (явно как ссылка) ===== */

/* если событие в гриде стало <a class="calendar-event"> */
a.calendar-event{
  display: block;
  text-decoration: none; /* убрать стандартное подчеркивание ссылки */
  color: inherit;        /* цвет берём из .calendar-event (у тебя #fff) */
}

/* фокус с клавиатуры */
a.calendar-event:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Подчёркиваем заголовок при наведении — сразу понятно, что это ссылка */
a.calendar-event:hover .event-title{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* маленький индикатор "ссылка" справа */
a.calendar-event::after{
  content: "↗";
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 12px;
  opacity: 0.75;
  transition: opacity var(--transition-duration), transform var(--transition-duration);
}

a.calendar-event:hover::after{
  opacity: 1;
  transform: translateY(-1px);
}

/* ===== Маркер/цвет типа события через ::before (у тебя уже цвета прописаны) ===== */
/* ДОБАВЬ базовый ::before, иначе твои .event--...::before могут не отображаться */
.calendar-event{
  position: relative;
  display: block;
  padding-left: 14px; /* место под маркер слева */
}

.calendar-event::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: currentColor; /* если где-то не задан тип — будет текущий цвет */
}

/* Чтобы маркер не был белым (у тебя у .calendar-event color:#fff),
   сделаем маркер независимым: твои правила ниже перекроют background-color */
.calendar-event::before{ background-color: rgba(255,255,255,0.85); }

/* ===== Особый случай: жёлтый тип (stocks) — белый текст плохо читается ===== */
.calendar-event.event--stocks{
  color: #111;
}
.calendar-event.event--stocks .event-time{
  color: #111;
}



/* =============================================================================
   СТИЛИ ДЛЯ ПЛАШКИ О COOKIE
   ============================================================================= */

.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1500;
    /* Выше большинства элементов */

    background-color: var(--color-background);
    padding: 20px 0;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.08);
    border-top: 1px solid var(--color-border);

    /* Скрытое состояние (под экраном) */
    transform: translateY(110%);
    transition: transform 0.5s ease-out;
}

/* Видимое состояние */
.cookie-notice.is-visible {
    transform: translateY(0);
}

.cookie-notice__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-notice__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.cookie-notice__text a {
    font-weight: 500;
    text-decoration: underline;
}

.cookie-notice__btn {
    padding: 10px 30px;
    /* Делаем кнопку чуть компактнее */
    flex-shrink: 0;
    /* Запрещаем кнопке сжиматься */
}




/* --- БЛОК ЗАВЕДУЩЕЙ  (карточный стиль) --- */
.manager-block {
    display: flex;
    flex-wrap: wrap;
    /* Для адаптивности на мобильных */
    align-items: center;
    gap: 25px;
    margin-top: 30px;
    padding: 25px;
    background-color: var(--color-background-alt);
    border-left: 4px solid var(--color-primary);
    /* Добавим акцентную линию */
    border-radius: 0 12px 12px 0;
}

.manager-block__photo {
    width: 200px;
    height: 240px;
    border-radius: 12px;
    /* Скругленные углы вместо круга */
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.manager-block__info h4 {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    /* 24px, делаем имя заметнее */
    margin: 0 0 8px 0;
}

.manager-block__info p {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    /* 18px */
    font-weight: 500;
}

.news-archive .manager-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}


/* =============================================================================
   СТИЛИ ДЛЯ КОНТЕНТ-БЛОКОВ В СТАТЬЯХ
   ============================================================================= */

/* --- 1. Блок для изображения с подписью --- */
.article-image {
    margin: 40px 0;
    /* Вертикальные отступы */
}

.article-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.image-caption {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 15px;
    color: #777;
}

/* --- 2. Адаптивный контейнер для видео (YouTube, Vimeo и др.) --- */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    /* Соотношение сторон 16:9 */
    height: 0;
    overflow: hidden;
    margin: 40px 0;
    border-radius: 12px;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ КОНТАКТОВ И ФОРМЫ
   ============================================================================= */

.contact-form {
    margin-top: 30px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-heading);
}

.form-input {
    width: 100%;
    padding: 12px 18px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-background-alt);
    transition: border-color var(--transition-duration), box-shadow var(--transition-duration);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(58, 125, 202, 0.2);
    /* Подсветка при фокусе */
}

textarea.form-input {
    resize: vertical;
    /* Разрешаем менять высоту только по вертикали */
    min-height: 120px;
}

.contact-info-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.contact-info-list strong {
    min-width: 80px;
    display: inline-block;
}


/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ "ДОКУМЕНТЫ"
   ============================================================================= */

.documents-category {
    margin-bottom: 50px;
    /* Добавляем отступ между категориями */
}

.section-title--small {
    font-family: 'Merriweather', serif;
    font-size: 1.8rem;
    /* Делаем заголовок категории чуть меньше основного */
    color: var(--color-heading);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}




/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ "РУКОВОДСТВО"
   ============================================================================= */

/* Ограничиваем ширину текстового блока для лучшей читаемости */
.text-content-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.management-section {
    margin-bottom: 50px;
}

.management-section p {
    line-height: 1.8;
    margin-bottom: 1em;
}

/* --- Карточка руководителя --- */
.manager-card {
    display: flex;
    /* Используем flexbox для выравнивания */
    flex-wrap: wrap;
    /* Разрешаем перенос на мобильных */
    gap: 30px;
    /* Отступ между фото и текстом */
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
    /* Линия-разделитель */
}

/* Убираем верхнюю линию у самого первого руководителя */
.management-section>.manager-card:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* Блок с фотографией */
.manager-photo {
    flex-shrink: 0;
    /* Запрещаем блоку сжиматься */
    width: 220px;
    /* Фиксированная ширина фото */
    margin: 0;
}

.manager-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    /* Скруглим углы */
}

/* Блок с информацией */
.manager-info {
    flex-grow: 1;
    /* Занимает все оставшееся место */
    min-width: 300px;
    /* Минимальная ширина, чтобы текст не сжимался */
}

.manager-info h3 {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 5px;
}

.manager-title {
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 0;
    font-size: 1.1rem;
    margin-bottom: 1.5em;
}

.manager-contacts p {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.manager-bio {
    margin-top: 1.5em;
}


/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ "СТРУКТУРА БИБЛИОТЕКИ" 
   ============================================================================= */

/* Ограничиваем ширину текстового блока для лучшей читаемости */
.text-content-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Блок одного отдела */
.department-entry {
    padding: 40px 0;
    border-bottom: 1px solid var(--color-border);
}

.department-entry:last-child {
    border-bottom: none;
}

.department-entry__title {
    font-family: 'Merriweather', serif;
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 25px;
}

/* --- Блок руководителя (текст + фото) --- */
.department-entry__manager {
    overflow: hidden;
    /* Очистка обтекания */
    margin-bottom: 30px;
}

.department-entry__manager-photo {
    float: right;
    /* Главное свойство: прижимаем фото вправо */
    width: 320px;
    margin-left: 30px;
    margin-bottom: 15px;
}

.department-entry__manager-photo img {
    width: 100%;
    height: auto;
    /* Эту строку можно оставить или удалить, она больше не главная */
    display: block;
    margin-bottom: 10px;
    aspect-ratio: 4 / 5;
    /* <-- ЗАДАЕМ ПРАВИЛЬНУЮ ПРОПОРЦИЮ */
    object-fit: cover;
    /* <-- ЗАСТАВЛЯЕМ КАРТИНКУ ЗАПОЛНИТЬ ЭТУ ПРОПОРЦИЮ */
    border-radius: 12px;
}

.department-entry__manager-photo figcaption {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

.department-entry__manager-info p {
    line-height: 1.8;
    margin-bottom: 1.5em;
}

/* --- Сетка рядовых сотрудников --- */
.department-entry__staff-grid {
    display: grid;
    /* Адаптивная сетка: 2-3 колонки */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    clear: both;
    /* Гарантирует, что сетка начнется ПОСЛЕ блока руководителя */
}

.department-entry__staff-photo {
    margin: 0;
}

.department-entry__staff-photo img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    /* Единая пропорция 4:5 */
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 12px;
}

.department-entry__staff-photo figcaption {
    font-size: 1rem;
    font-weight: 500;
}


/* Блок для одного исторического периода */
.history-block {
    /* Это свойство- "костыль" заставляет блок вести себя правильно с float */
    overflow: hidden;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.history-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Левая колонка с фотографиями */
.history-block__gallery {
    float: left;
    /* <-- ГЛАВНОЕ СВОЙСТВО: Прижимаем блок с фото влево */
    width: 280px;
    margin-right: 30px;
    /* Создаем отступ справа, чтобы текст не прилипал */
    margin-bottom: 15px;
    /* Отступ снизу на случай переноса */
}

.history-block__gallery figure {
    margin: 0;
}

.history-block__gallery img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.history-block__gallery figcaption {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    text-align: center;
}


/* --- Контейнер временной шкалы с вертикальной линией --- */
.history-timeline {
    position: relative;
    padding: 20px 0;
    margin-top: 50px;
    /* Рисуем центральную линию */
    border-left: 3px solid var(--color-primary);
    margin-left: 20px;
    /* Сдвигаем, чтобы было место для точек */
}

/* --- Один элемент (событие) на шкале --- */
.timeline-item {
    position: relative;
    padding-left: 50px;
    /* Отступ от линии */
    margin-bottom: 50px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* --- Круглая точка на линии --- */
.timeline-item__point {
    position: absolute;
    left: 0;
    transform: translateX(-55%);

    top: 5px;
    /* Вертикальное выравнивание оставляем */
    width: 25px;
    height: 25px;
    background-color: var(--color-background);
    border: 4px solid var(--color-primary);
    border-radius: 50%;
}

/* --- Заголовок (год) --- */
.timeline-item__year {
    font-family: 'Merriweather', serif;
    font-size: 2rem;
    color: var(--color-primary);
    margin: 0 0 15px 0;
}

/* --- Текст и фото события --- */
.timeline-item__text {
    line-height: 1.8;
}

.timeline-item__text figure {
    margin: 0 0 1em 0;
    /* Убираем боковые отступы у картинки */
    max-width: 450px;
}





/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ 404
   ============================================================================= */

.error-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 350px);
    /* Занимает почти весь экран */
    padding: 40px 20px;
}

.error-page__svg-container {
    margin-bottom: 20px;
}

.error-page__title {
    font-family: 'Merriweather', serif;
    font-size: 10rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: rgba(26, 40, 77, 0.1);
    /* Полупрозрачный цвет */
}

.error-page__subtitle {
    font-family: 'Merriweather', serif;
    font-size: 2.5rem;
    margin-top: -30px;
    /* Накладываем на цифры 404 */
    margin-bottom: 20px;
    color: var(--color-heading);
}

.error-page__text {
    font-size: 1.125rem;
    max-width: 500px;
    margin-bottom: 40px;
    color: var(--color-text);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.error-page__search-form {
    display: flex;
    width: 100%;
    max-width: 300px;
}

.error-page__search-form .search-form__input {
    height: 48px;
    border-radius: 8px 0 0 8px;
}

.error-page__search-form .search-form__btn {
    height: 48px;
    width: 50px;
    padding: 0;
    border-radius: 0 8px 8px 0;
}


/* =============================================================================
   РАСШИРЕННЫЕ СТИЛИ ДЛЯ ВЕРСИИ ДЛЯ СЛАБОВИДЯЩИХ
   ============================================================================= */

/* --- 1. Стили для интервалов --- */
html.spacing-medium body {
    letter-spacing: 0.5px;
    /* Межбуквенный */
    line-height: 1.9;
    /* Межстрочный */
}

html.spacing-large body {
    letter-spacing: 1px;
    line-height: 2.2;
}

/* --- 2. Стиль для отключения изображений --- */
body.images-off img,
body.images-off figure,
body.images-off .poster-card__image,
body.images-off .news-card__image,
body.images-off .hero-slider {
    display: none !important;
}

/* --- 3. Стиль для подчеркивания ссылок --- */
body.links-highlight a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    border-bottom: 2px solid;
}

/* --- 4. Стиль для скрытого голосового уведомителя --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}




/* --- Общий контейнер --- */
.pagination {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    /* Все дочерние элементы будут иметь отступ */
}

/* --- Стили для КАЖДОГО элемента пагинации --- */
/* (Это и span, и a) */
.pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 15px;

    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;

    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-background);
    color: var(--color-text);

    transition: background-color var(--transition-duration), color var(--transition-duration), border-color var(--transition-duration);
}

/* --- Эффект при наведении (только для ссылок) --- */
.pagination a.page-numbers:hover {
    background-color: var(--color-background-alt);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- Стиль для ТЕКУЩЕЙ (активной) страницы (это span) --- */
.pagination .page-numbers.current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    cursor: default;
}

/* --- Стиль для многоточия (...) --- */
.pagination .page-numbers.dots {
    border: none;
    background-color: transparent;
}

/* =============================================================================
   СТИЛИ ДЛЯ ЯКОРНОЙ НАВИГАЦИИ НА СТРАНИЦАХ
   ============================================================================= */

.anchor-nav {
    padding: 30px 0;
    margin-bottom: 50px;
}

.anchor-nav__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.anchor-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.anchor-nav__link {
    display: block;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    background-color: #f7f9fc;
    color: var(--color-primary);
    border: 1px solid #f7f9fc;
    border-radius: 30px;
    transition: background-color var(--transition-duration), color var(--transition-duration), transform 0.2s ease;
}

.anchor-nav__link:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* =============================================================================
   СТИЛИ ДЛЯ РАСКРЫВАЮЩЕГОСЯ ОПИСАНИЯ ОТДЕЛА
   ============================================================================= */

.department-entry__details-wrapper {
    margin: 30px 0;
    /* Отступ сверху и снизу */
}

/* Кнопка "Подробнее об отделе" */
.department-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    margin-bottom: 15px;
}

.department-details-toggle .arrow-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-weight: bold;
}

/* Поворот стрелки при открытии */
.department-details-toggle.is-active .arrow-icon {
    transform: rotate(180deg);
}

/* Скрываемый текстовый блок */
.department-entry__collapsible-text {
    /* Анимация будет работать через grid-template-rows */
    display: grid;
    grid-template-rows: 0fr;
    /* Изначально текст сжат */
    transition: grid-template-rows 0.4s ease-out;
    line-height: 1.8;
}

.department-entry__collapsible-text.is-open {
    grid-template-rows: 1fr;
    /* Текст плавно расширяется до своего полного размера */
}

/* Внутренний контейнер, необходимый для плавной анимации */
.department-entry__collapsible-text>div {
    overflow: hidden;
}

/* =============================================================================
   СТИЛИ ДЛЯ ПАСХАЛКИ НА 404-Й СТРАНИЦЕ
   ============================================================================= */

.easter-egg {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    border-left: 4px solid var(--color-secondary);
    /* Акцентная красная линия */
    background-color: var(--color-background-alt);
    border-radius: 0 8px 8px 0;
}

.easter-egg__text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-heading);
    margin: 0;
}

/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ FAQ (АККОРДЕОН)
   ============================================================================= */

.faq-section .container {
    max-width: 900px;
    /* Сделаем контейнер чуть уже для лучшей читаемости */
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    width: 100%;
    padding: 25px 0;

    font-family: 'Merriweather', serif;
    font-size: 1.3rem;
    /* 21px */
    font-weight: 700;
    color: var(--color-heading);

    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;

    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-duration);
}

.faq-question:hover {
    color: var(--color-primary);
}

/* Иконка-стрелочка */
.faq-question::after {
    content: '+';
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-primary);
    transform: rotate(0deg);
    transition: transform var(--transition-duration);
    margin-left: 20px;
}

/* Стили для открытого вопроса */
.faq-item.is-open .faq-question {
    color: var(--color-primary);
}

.faq-item.is-open .faq-question::after {
    content: '−';
    /* Меняем плюс на минус */
    transform: rotate(180deg);
}

.faq-answer {
    /* Новый трюк для плавной анимации через Grid */
    display: grid;
    grid-template-rows: 0fr;
    /* Изначально контент сжат до нуля */
    transition: grid-template-rows 0.4s ease-out;
}

/* Стили для открытого ответа */
.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
    /* Плавно расширяем до полного размера контента */
}

/* Это нужно, чтобы анимация работала корректно */
.faq-answer>div {
    overflow: hidden;
}

/* И добавим отступ для внутреннего блока, а не для контейнера */
.faq-answer>div>*:last-child {
    padding-bottom: 30px;
}

.faq-answer p,
.faq-answer ul {
    margin-bottom: 1em;
    line-height: 1.8;
}

.faq-answer ul {
    padding-left: 20px;
}


/* =============================================================================
                 СТИЛИ ДЛЯ СОБЫТИЙ В КАЛЕНДАРЕ 
   ============================================================================= */

/* --- Контейнер для всех событий в одной ячейке --- */
.calendar-events-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Отступ между несколькими событиями в один день */
}

/* --- Карточка одного события --- */
.calendar-event {
    display: block;
    /* Важно, чтобы ссылка занимала всю ширину */
    text-decoration: none;
    padding: 0;
    /* Убираем старые отступы */
    border-radius: 0;
    background-color: transparent;
    /* Убираем старый фон */
    color: inherit;
    /* Наследуем цвет текста */
    line-height: 1.4;
    position: relative;
    padding-left: 12px;
    /* Оставляем место для цветной полоски */
}

/* --- Цветная вертикальная полоска слева --- */
.calendar-event::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    background-color: var(--color-secondary);
    /* Красный цвет по умолчанию */
    border-radius: 4px;
}

/* --- Стили для времени (теперь оно будет видно всегда) --- */
.calendar-event .event-time {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text);
    opacity: 0.7;
}

/* --- Стили для заголовка --- */
.calendar-event .event-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-heading);
}

/* Разные цвета для разных типов событий */
.calendar-event.event--exhibition::before {
    background-color: #3a7dca;
    /* Синий для "Выставка" */
}

.calendar-event.event--kids::before {
    background-color: #e98b34;
    /* Оранжевый для "Детям" */
}

.calendar-event.event--meeting::before {
    background-color: #e94e34;
    /* Красный для "Встречи" */
}

.calendar-event.event--movie::before {
    background-color: #5d6a90;
    /* Приглушенный синий для "Кинопоказ" */
}


/* --- Заголовок года (кнопка) --- */
.media-archive-year.is-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5em;
    margin-top: 2em;
}

.media-archive-year-group:first-of-type .media-archive-year.is-toggle {
    margin-top: 0;
}

/* --- Стрелочка ---
                 */
.media-archive-year .arrow-icon {
    font-size: 2rem;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

/* При открытии поворачиваем стрелку */
.media-archive-year-group.is-open .media-archive-year .arrow-icon {
    transform: rotate(180deg);
}

/* --- Список публикаций (логика скрытия/показа через max-height) --- */
.media-archive-list-text {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Изначально блок полностью "схлопнут" */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.media-archive-year-group.is-open .media-archive-list-text {

    max-height: 10000px;
    /* Можете увеличить, если списки очень длинные */
    margin-top: 20px;
 }





/* =============================================================================
             СТИЛИ ДЛЯ РАЗДЕЛА "КЛУБЫ"
   ============================================================================= */

/* --- 1. СТИЛИ ДЛЯ ОБЩЕЙ СТРАНИЦЫ (ПЛИТКА) - archive-club.php --- */

/* --- Сетка (контейнер для плиток) --- */
.clubs-grid {
    display: grid;
    /* Адаптивная сетка: 3 колонки на десктопе, 2 на планшете, 1 на мобильном */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* --- Плитка одного клуба --- */
.club-tile {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.club-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

/* --- Изображение плитки --- */
.club-tile__image img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover;

    /* === НАЧАЛО ИЗМЕНЕНИЙ === */

    /* 1. Делаем картинку черно-белой по умолчанию */
    filter: grayscale(100%);

    /* 2. Добавляем плавный переход для фильтра и трансформации */
    transition: transform 0.4s ease, filter 0.4s ease;

    /* === КОНЕЦ ИЗМЕНЕНИЙ === */
}

.club-tile:hover .club-tile__image img {
    /* 3. Возвращаем 100% цветности */
    filter: grayscale(0%);

    /* Оставляем эффект зума */
    transform: scale(1.05);
}


/* --- Затемняющий слой с текстом --- */
.club-tile__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 50%, transparent);
    display: flex;
    align-items: flex-end;
    min-height: 50%;
}

/* --- Заголовок плитки --- */
.club-tile__title {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-white);
    margin: 0;
}


/* --- 2. СТИЛИ ДЛЯ СТРАНИЦЫ ОДНОГО КЛУБА - single-club.php --- */

/* --- Контейнер для основного контента --- */
.entry-content {
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: 1.5em;
}

.entry-content h2 {
    font-size: 2rem;
    margin-top: 2em;
    margin-bottom: 1em;
}

/* --- Плашка с деталями (Возраст, Стоимость...) --- */
.club-details-list {
    list-style: none;
    padding: 20px;
    margin: 2em 0;
    /* Отступы сверху и снизу */
    background-color: var(--color-background-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
}

.club-details-list li {
    font-size: 1.1rem;
    line-height: 1.7;
}


/* =============================================================================
   ФИНАЛЬНЫЕ РАБОЧИЕ СТИЛИ ДЛЯ ГАЛЕРЕИ WORDPRESS
   ============================================================================= */

/* --- Стили для главного контейнера галереи <figure class="wp-block-gallery"> --- */
.wp-block-gallery.is-layout-flex {
    /* Эти правила превратят стандартный flex-контейнер в нашу сетку */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
    margin-top: 2em !important;
}

/* --- Стили для каждой отдельной картинки <figure class="wp-block-image"> --- */
.wp-block-gallery .wp-block-image {
    margin: 0 !important;
    /* Убираем лишние отступы */
}

/* --- Стили для тега <img> внутри --- */
.wp-block-gallery .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    /* Заставляем картинку заполнить всю область */
    display: block !important;

    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    /* Масштабируем и обрезаем, чтобы вписаться */

    border-radius: 8px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform 0.3s ease !important;
}

/* --- Эффект при наведении --- */
/* Если картинка обернута в ссылку, стилизуем ссылку */
.wp-block-gallery .wp-block-image a {
    display: block;
}

.wp-block-gallery .wp-block-image a:hover img {
    transform: scale(1.05) !important;
}

/* Если картинка НЕ обернута в ссылку */
.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05) !important;
}


/* Сбрасываем ограничения ширины/высоты для картинок в галерее */
.wp-block-gallery .wp-block-image,
.wp-block-gallery .wp-block-image.size-thumbnail {
    width: 100% !important;
    max-width: 100% !important;
}

.wp-block-gallery .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* Я бы height всё-таки сделал auto */
}

/* =============================================================================
   ФОТО С ПОДПИСЬЮ-ОВЕРЛЕЕМ (gallery--overlay)
   ============================================================================= */

.gallery--overlay figure.wp-block-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

/* само фото */
.gallery--overlay figure.wp-block-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .4s ease, filter .4s ease;
  filter: brightness(0.85);
}

/* затемнённый низ + подпись */
.gallery--overlay figure.wp-block-image figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1.4rem 1.6rem;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.35),
    transparent
  );

  color: #fff;
  font-weight: 500;
  text-align: center;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.4;

  /* аккуратный многострочный обрез */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* максимум 3 строки */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* лёгкий ховер-эффект */
.gallery--overlay figure.wp-block-image:hover img {
  transform: scale(1.03);
  filter: brightness(0.95);
}



/* --- Общий контейнер формы --- */
.wpforms-container .wpforms-form {
    padding: 0 !important;
}

/* --- Обертка для каждого поля --- */
/* Убираем стандартные отступы WPForms */
.wpforms-container .wpforms-field-container .wpforms-field {
    padding: 0 0 25px 0 !important;
    /* Делаем отступ только снизу, как в нашем .form-group */
}

/* --- Ярлыки полей (ФИО, Email...) --- */
/* Заменяем спрятанный <label> на наш <label class="form-label"> */
.wpforms-container .wpforms-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-heading);
    /* Копируем все стили из вашего .form-label */
}

/* --- Поля ввода (input, textarea) --- */
/* Применяем наши стили .form-input ко всем полям WPForms */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field textarea {
    width: 100%;
    padding: 12px 18px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-background-alt);
    transition: border-color var(--transition-duration), box-shadow var(--transition-duration);
    /* Копируем все стили из вашего .form-input */
}

.wpforms-container .wpforms-field input[type="text"]:focus,
.wpforms-container .wpforms-field input[type="email"]:focus,
.wpforms-container .wpforms-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(58, 125, 202, 0.2);
}

textarea.form-input {
    resize: vertical;
    min-height: 120px;
}

/* --- Кнопка "Отправить" --- */
/* --- Стилизуем кнопку отправки WPForms, чтобы она выглядела как наша .btn.btn--primary --- */
.wpforms-container .wpforms-submit-container .wpforms-submit {
    /* Копируем стили из вашего .btn */
    display: inline-block !important;
    padding: 12px 32px !important;
    font-family: 'Montserrat', 'Arial', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 8px !important;
    transition: transform var(--transition-duration), box-shadow var(--transition-duration) !important;

    /* Копируем стили из вашего .btn--primary */
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 15px rgba(58, 125, 202, 0.4) !important;
}

/* --- Эффект при наведении --- */
.wpforms-container .wpforms-submit-container .wpforms-submit:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(58, 125, 202, 0.5) !important;
    background-color: var(--color-primary-dark) !important;
    /* Добавим смену цвета фона для надежности */
}

/* Убираем лишние элементы, которые может добавлять WPForms */
.wpforms-required-label,
.wpforms-field-label-inline {
    display: none !important;
}

/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ "НАГРАДЫ И ГРАМОТЫ"
   ============================================================================= */

.awards-grid {
    display: grid;
    /* Адаптивная сетка, 3-4 колонки */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.award-card {
    text-align: center;
}

.award-card__image-link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.award-card__image-link:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.award-card__image-link img {
    width: 100%;
    height: auto;
    display: block;
    background-color: var(--color-background-alt);
    /* Фон на случай, если картинка не загрузится */
}

.award-card__caption {
    padding-top: 15px;
}

.award-card__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-heading);
    margin: 0;
}

/* --- Стили для информационного блока на странице "Документы" --- */
.info-notice {
    padding: 20px;
    margin-bottom: 40px;
    /* Отступ до списка документов */
    background-color: var(--color-background-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
}

.info-notice p {
    margin: 0;
    line-height: 1.7;
}

/* =============================================================================
   СТИЛИ ДЛЯ СПИСКА КНИГ ДЛЯ СЛАБОВИДЯЩИХ
   ============================================================================= */

.accessible-books-list {
    display: flex;
    flex-direction: column;
}

.book-card {
    display: flex;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid var(--color-border);
}

.book-card__cover {
    flex-shrink: 0;
    width: 120px;
}

.book-card__cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.book-card__title {
    font-family: 'Merriweather', serif;
    font-size: 1.5rem;
    margin: 0 0 10px 0;
    color: var(--color-heading);
}

.book-card__author,
.book-card__format {
    margin: 0 0 10px 0;
    font-weight: 500;
}

.book-card__excerpt {
    line-height: 1.7;
    color: var(--color-text);
}

/* --- Стили для изображений с подписями внутри контента --- */
.entry-content figure {
    margin: 40px 0;
    /* Вертикальные отступы */
}

.entry-content figure img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.entry-content figure figcaption {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 15px;
    color: #777;
    font-style: italic;
}


/* =============================================================================
   НОВЫЙ ДИЗАЙН ДЛЯ СТРАНИЦЫ "БИБЛИОГРАФИЧЕСКИЕ ОБЗОРЫ"
   ============================================================================= */

/* --- Контейнер для списка обзоров --- */
.reviews-list-modern {
    display: flex;
    flex-direction: column;
}

/* --- Карточка одного обзора --- */
.review-item-modern {
    padding: 30px 0;
    border-bottom: 1px solid var(--color-border);
}

.reviews-list-modern .review-item-modern:first-of-type {
    padding-top: 10px;
}

.reviews-list-modern .review-item-modern:last-of-type {
    border-bottom: none;
}

/* --- Дата --- */
.review-item-modern__date {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 8px;
}

/* --- Заголовок --- */
.review-item-modern__title {
    font-family: 'Merriweather', serif;
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 0;
}

.review-item-modern__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.review-item-modern__title a:hover {
    color: var(--color-primary);
}


/* =============================================================================
      СТИЛИ ДЛЯ ОБЛОЖЕК (Воскресенские чтения)
   ============================================================================= */
/* ---- Настройки ---- */
:root {
  --covers-min: 170px;
  --covers-gap: 24px;
  --covers-radius: 12px;
  --covers-shadow: 0 6px 18px rgba(0,0,0,.10);

  /* добавил */
  --covers-bg: #fff;       /* фон внутри рамки (когда contain) */
  --covers-pad: 6px;       /* внутренний отступ, чтобы обложка не прилипала */
}

/* ---- Сетка ---- */
.wp-block-group.gallery--covers,
.wp-block-group.gallery--covers > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--covers-min), 1fr));
  gap: var(--covers-gap);
  margin-top: 2rem;
}

/* ---- Карточка ---- */
.wp-block-group.gallery--covers figure.wp-block-image {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- Контейнер под обложку (рамка/тень/равная высота) ---- */
.wp-block-group.gallery--covers figure.wp-block-image > a,
.wp-block-group.gallery--covers figure.wp-block-image > img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--covers-radius);
  overflow: hidden;
  box-shadow: var(--covers-shadow);
  transition: transform .3s ease, box-shadow .3s ease;

  /* важно для contain */
  background: var(--covers-bg);
}

/* Если картинка обёрнута в ссылку — даём внутренний отступ */
.wp-block-group.gallery--covers figure.wp-block-image > a {
  padding: var(--covers-pad);
  box-sizing: border-box;
}

/* ---- Hover ---- */
.wp-block-group.gallery--covers figure.wp-block-image > a:hover,
.wp-block-group.gallery--covers figure.wp-block-image > img:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

/* ---- Картинка внутри (НЕ ОБРЕЗАЕМ) ---- */
.wp-block-group.gallery--covers figure.wp-block-image img {
  width: 100%;
  height: 100%;
  display: block;

  /* ключевой фикс: WP иногда ставит inline style="object-fit:cover" */
  object-fit: contain !important;
  object-position: center !important;

  /* чтобы углы совпадали при padding */
  border-radius: calc(var(--covers-radius) - var(--covers-pad));
}

/* ---- Подпись ---- */
.wp-block-group.gallery--covers figure.wp-block-image figcaption {
  margin-top: .75rem;
  font-size: .95rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-primary, #1b3a7a);

  /* многострочный обрез */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;   /* сколько строк оставить */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ====== ФИЛЬТР-КНОПКИ (с галочкой при выборе) ====== */
.news-archive .news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

.news-archive .news-filters .chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 14px;
    border-radius: 9999px;
    background-color: #fff;
    border: 1px solid #d9e1ec;
    color: #202733;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* скрываем input */
.news-archive .news-filters .chip input {
    display: none;
}

/* hover / focus */
.news-archive .news-filters .chip:hover {
    border-color: #3a7dca;
    color: #3a7dca;
    box-shadow: 0 2px 5px rgba(58, 125, 202, 0.1);
    transform: translateY(-1px);
}

/* активное состояние */
.news-archive .news-filters .chip:has(input:checked) {
  background-color: #3a7dca;
  color: #fff;
  border-color: #3a7dca;
  box-shadow: 0 3px 8px rgba(58, 125, 202, 0.25);
  transform: translateY(-1px);
}


.news-archive .news-filters .chip span { background: transparent; }

/* анимация нажатия */
.news-archive .news-filters .chip:active {
    transform: scale(0.97);
}

/* анимация появления галочки */
@keyframes chipCheck {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}



/* КОТ — бегает снизу по экрану */
.easter-cat {
    position: fixed;
    bottom: 12px;
    left: -120px;
    z-index: 9999;
    font-size: 48px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
    animation: cat-run 4.2s linear forwards;
}

@keyframes cat-run {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(100vw + 240px))
    }
}


/* --- Стили для интерактивной карты-навигации --- */
.fond-map-nav {
    padding: 80px 0;
    position: relative;
    background-color: var(--color-background-alt);
    overflow: hidden;
    /* Важно для анимации линии */
}

.fond-map-nav .container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    /* Выравниваем по верху для подписей */
    position: relative;
}

/* Линия-путь */
.fond-map-nav__line {
    position: absolute;
    top: 25px;
    /* На уровне центра иконок */
    left: 10%;
    width: 80%;
    height: 3px;
    background-color: #e0e0e0;
    /* Фоновый цвет линии */
    z-index: 1;
}

/* Анимированная "прорисовывающаяся" линия */
.fond-map-nav__line::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
    /* Цвет активной линии */

    transform: scaleX(0);
    /* Изначально линия "сжата" до нуля */
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.2s;
    /* Начинаем анимацию с небольшой задержкой */
}

/* Когда секция появляется на экране (AOS добавляет класс), запускаем анимацию */
.fond-map-nav.aos-animate .fond-map-nav__line::after {
    transform: scaleX(1);
    /* "Растягиваем" линию до 100% */
}

/* Элемент-станция */
.fond-map-nav__item {
    text-align: center;
    position: relative;
    z-index: 2;
    /* Чтобы иконки были над линией */
    width: 150px;
    /* Фиксируем ширину для подписей */
}

/* Иконка-кнопка */
.fond-map-nav__icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 4px solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-white);
    margin-bottom: 15px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.fond-map-nav__icon:hover {
    transform: scale(1.2);
    background-color: var(--color-primary);
}

/* Подпись */
.fond-map-nav__label {
    font-weight: 500;
    color: var(--color-heading);
}

/* Стили для секций контента (остаются как раньше) */
.fond-section {
    padding-top: 50px;
    margin-top: 50px;
    border-top: 1px solid var(--color-border);
}

/* =============================================================================
   СТИЛИ ДЛЯ СТРАНИЦЫ "КРАЕВЕДЧЕСКИЙ ФОНД" (ДИЗАЙН "ОГЛАВЛЕНИЕ")
   ============================================================================= */

.fond-contents-list {
    margin-top: 50px;
    border-top: 1px solid var(--color-border);
}

/* --- Общий стиль для каждого пункта --- */
.fond-contents-item {
    padding: 25px 0;
    border-bottom: 1px solid var(--color-border);
}

.fond-contents-item__title {
    font-family: 'Merriweather', serif;
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 0;
}

.fond-contents-item__title a {
    color: var(--color-heading);
    text-decoration: none;
    transition: color 0.3s ease;
}

.fond-contents-item__title a:hover {
    color: var(--color-primary);
}

/* --- Стили для аккордеона --- */
.fond-accordion-toggle {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--color-heading);
    transition: color 0.3s ease;
}

.fond-accordion-toggle:hover {
    color: var(--color-primary);
}

.fond-accordion-toggle .arrow-icon {
    font-size: 2rem;
    color: var(--color-primary);
    transition: transform 0.4s ease;
}

.fond-accordion-group.is-open .fond-accordion-toggle .arrow-icon {
    transform: rotate(180deg);
}

.fond-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.fond-accordion-group.is-open .fond-accordion-content {
    max-height: 2000px;
    padding-top: 20px;
}

.search-form {
    position: relative;
}

.search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .25rem);
    z-index: 50;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    max-height: 60vh;
    overflow: auto;
    padding: .25rem;
}

.suggest-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: .75rem;
    align-items: center;
    padding: .5rem .6rem;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
}

.suggest-item img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
}

.suggest-title {
    font-weight: 600;
    line-height: 1.2;
    display: block;
}

.suggest-meta {
    font-size: .85rem;
    opacity: .7;
    display: block;
}

.suggest-item:hover,
.suggest-item.is-active {
    background: #f5f7fb;
}

mark {
    background: #a3dfff;
}


/* секция заголовка истории */
.suggest-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .6rem;
    font-weight: 600;
    font-size: .9rem;
    color: #555;
    user-select: none;
}

.suggest-clear-all {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #888;
    padding: .25rem .4rem;
    border-radius: 4px;
}

.suggest-clear-all:hover {
    background: #f2f3f5;
    color: #333;
}

/* история – пункты */
.suggest-item.is-history {
    grid-template-columns: 20px 1fr auto;
    /* иконка, текст, крестик */
}

.history-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #bbb;
    display: inline-block;
}

.suggest-item .suggest-remove {
    margin-left: .5rem;
    border: 0;
    background: transparent;
    color: #999;
    cursor: pointer;
    padding: .25rem;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}

.suggest-item .suggest-remove:hover {
    background: #f2f3f5;
    color: #333;
}
/* =============================================================================
   СТИЛИ ДЛЯ БЛОКА "РАСПИСАНИЕ КЛУБОВ"
   ============================================================================= */

/* --- Стили для секции --- */
.schedule-section {
    padding: 60px 0;
}

/* --- Контейнер для картинки --- */
.schedule-image-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: var(--color-white);
    padding: 15px;
    border-radius: 12px;
}

/* --- Стили для САМОГО ИЗОБРАЖЕНИЯ --- */
.schedule-image-container img {
    /* Основные стили */
    display: block;
    border-radius: 8px;
    
    /* Адаптивность и центрирование */
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;

    /* Ограничение высоты для "портретных" изображений */
    max-height: 80vh;
    object-fit: contain;
}


/* ===== Карточки вложенных файлов ===== */

/* Группировка (не обязательно, но дает отступы) */
.entry-content .file-list { display: grid; gap: 12px; }

/* 1) Gutenberg: блок "Файл" */
.entry-content .wp-block-file {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-border, #E2E6ED);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(17,34,68,.06);
}

.entry-content .wp-block-file a.wp-block-file__button {
  margin-left: auto;
  background: #3a7dca; color: #fff;
  padding: 8px 14px; border-radius: 8px;
  text-decoration: none; font-weight: 600;
  transition: transform .12s ease, background .12s ease;
}
.entry-content .wp-block-file a.wp-block-file__button:hover { background:#428ee6; transform: translateY(-1px); }

/* 2) Карточка для "голых" ссылок (добавим класс .file-card) */
.entry-content .file-card {
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px;
  border:1px solid var(--color-border, #E2E6ED);
  border-radius:12px; background:#fff;
  box-shadow:0 6px 24px rgba(17,34,68,.06);
}
.entry-content .file-card .file-card__btn {
  margin-left:auto;
  background:#374151; color:#fff; padding:8px 14px; border-radius:8px;
  text-decoration:none; font-weight:600;
}
.entry-content .file-card .file-card__btn:hover { background:#111827; }



/* оверлей никогда не должен перехватывать клики */
.hero .swiper-slide::before { pointer-events: none !important; }

/* активный слайд всегда выше остальных (на всякий) */
.hero .swiper-slide { z-index: 0; }
.hero .swiper-slide-active { z-index: 2; }

/* контент и кнопка выше оверлея */
.hero .hero__content { position: relative; z-index: 3; }
.hero a.btn { position: relative; z-index: 4; }

/* Лейаут как "Дата: 24 января 2026" для всех строк */
.meta-list li,
.widget-list.meta-list li {
  display: grid;
  grid-template-columns: 140px 1fr; /* ширина под "Дата/Рубрики" */
  column-gap: 16px;
  align-items: baseline;
}

/* чтобы strong (Дата:/Рубрики:) не прижимался и был в первой колонке */
.meta-list li strong,
.widget-list.meta-list li strong {
  display: block;
}

/* всё, что после strong — во 2-ю колонку */
.meta-list li strong + *,
.widget-list.meta-list li strong + * {
  grid-column: 2;
}


.meta-list li a,
.widget-list.meta-list li a {
  color: inherit;
  text-decoration: none;
}
.meta-list li a:hover,
.widget-list.meta-list li a:hover {
  text-decoration: underline;
}


/* По умолчанию список скрыт */
.calendar-list {
  display: none;
}


/* DESKTOP: прячем кнопки/тогглы раскрытия подменю */
@media (min-width: 1025px) {
  .header__nav .submenu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Заголовок карточки: по умолчанию чёрный, синий только при наведении */
.card__title a,
.post__title a,
.news__title a,
.article__title a {
  color: #111;              /* чёрный */
  text-decoration: none;
}

.card__title a:visited,
.post__title a:visited,
.news__title a:visited,
.article__title a:visited {
  color: #111;              /* чтобы после клика не становилась фиолетовой */
}

/* Ховер только там, где он реально есть (мышь/трекпад) */
@media (hover: hover) and (pointer: fine) {
  .card__title a:hover,
  .post__title a:hover,
  .news__title a:hover,
  .article__title a:hover {
    color: #1a5cff;          /* синий при наведении */
  }
}

/* Если хочешь, чтобы при тапе (focus/active) НЕ синела */
.card__title a:focus,
.card__title a:active,
.post__title a:focus,
.post__title a:active,
.news__title a:focus,
.news__title a:active,
.article__title a:focus,
.article__title a:active {
  color: #111;
}


/* Вернуть "голубую" иконку файла как раньше */
.document-list a .document-icon{
  color: var(--color-primary);
}

/* Если нужно, чтобы и ссылка (название) тоже была как раньше голубая */
.document-list a{
  color: var(--color-primary);
}

/* А если хочешь: иконка голубая, а текст тёмный — оставь только это: */
.document-list a .document-name{
  color: var(--color-heading);
}



/* =========================
   Документы — аккордеон без подложек
   ========================= */

/* 1) Заголовки аккордеонов (год + вложенный) */
.media-archive-year.is-toggle,
.documents-inner-title.is-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  user-select: none;

  /* без подложек */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  /* “строчный” вид */
  padding: 16px 0;
  margin: 0;

  border-bottom: 1px solid var(--color-border);
}

/* Вложенный заголовок чуть компактнее и с отступом */
.documents-inner-title.is-toggle {
  padding: 12px 0;
  margin-left: 18px;
}

/* Ховер/фокус — без карточек, но понятно что кликабельно */
.media-archive-year.is-toggle:hover,
.documents-inner-title.is-toggle:hover {
  opacity: 0.85;
}

.media-archive-year.is-toggle:focus,
.documents-inner-title.is-toggle:focus {
  outline: none;
}

.media-archive-year.is-toggle:focus-visible,
.documents-inner-title.is-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  outline-offset: 4px;
  border-radius: 6px; /* только для обводки фокуса */
}

/* 2) Группы */
.media-archive-year-group {
  margin-top: 14px;
}

.media-archive-year-group:first-child {
  margin-top: 0;
}

/* Вложенный блок — чуть отделим */
.documents-inner-accordion {
  margin-top: 8px;
}

/* 3) Стрелка */
.media-archive-year .arrow-icon,
.documents-inner-title .arrow-icon {
  display: inline-block;
  margin-left: 16px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.8;
}

/* поворот при открытии */
.media-archive-year-group.is-open > .media-archive-year .arrow-icon {
  transform: rotate(90deg);
  opacity: 1;
}
.documents-inner-accordion.is-open > .documents-inner-title .arrow-icon {
  transform: rotate(90deg);
  opacity: 1;
}

/* 4) Панели (раскрывающаяся часть) */
.media-archive-year-content,
.documents-inner-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.media-archive-year-group.is-open > .media-archive-year-content {
  max-height: 9999px;
}

.documents-inner-accordion.is-open > .documents-inner-panel {
  max-height: 9999px;
}

/* отступы внутри панелей */
.media-archive-year-content {
  padding: 10px 0 0;
}
.documents-inner-panel {
  padding: 8px 0 0 18px;
}

/* 5) Список документов — тоже без “плиток” */
ul.document-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.document-list > li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}

ul.document-list > li:last-child {
  border-bottom: 0;
}

ul.document-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
}

.document-icon {
  flex: 0 0 24px;
  margin-top: 2px;
  opacity: 0.9;
}

.document-name {
  font-weight: 600;
  line-height: 1.35;
}

ul.document-list a:hover .document-name {
  text-decoration: underline;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .media-archive-year-content,
  .documents-inner-panel,
  .media-archive-year .arrow-icon,
  .documents-inner-title .arrow-icon {
    transition: none;
  }
}


/* =========================
   FIX: кнопки-карточки (не ломаем шрифт и размеры)
   ========================= */

/* Сброс браузерных стилей кнопки, чтобы выглядело как раньше (figure) */
button.department-entry__staff-photo,
button.department-entry__manager-photo {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;

  /* ВОТ ЭТО лечит "сломался шрифт" */
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;

  text-align: left;
  cursor: pointer;
}

/* В сетке сотрудникам ок быть шириной 100% */
button.department-entry__staff-photo { width: 100%; }

/* Руководителю НЕ ставим width:100%, оставляем твой width:320px из основного CSS */
button.department-entry__manager-photo { display: block; } /* float будет работать стабильно */

/* Красивый фокус с клавиатуры */
button.department-entry__staff-photo:focus-visible,
button.department-entry__manager-photo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ВАЖНО:
   Если у тебя где-то есть правило, которое задаёт manager-photo width:100% — УДАЛИ его.
   Например: .department-entry__staff-photo, .department-entry__manager-photo { width:100%; ... }
*/


/* =========================
   DRAWER (сайд-панель)
   ========================= */

.drawer { position: fixed; inset: 0; z-index: 9999; display: none; }
.drawer.is-open { display: block; }

.drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(440px, 92vw);
  background: #fff;

  transform: translateX(100%);
  transition: transform .25s ease;

  overflow: auto;
  padding: 24px;
  outline: none;
}

.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__close {
  position: sticky;
  top: 0;
  margin-left: auto;

  display: inline-block;
  border: 0;
  background: transparent;
  cursor: pointer;

  font-size: 28px;
  line-height: 1;
}

.drawer__name {
  margin: 12px 0 4px;
  font-family: 'Merriweather', serif; /* чтобы совпало с заголовками */
}

.drawer__position { opacity: .75; margin-bottom: 16px; }

.drawer__text { line-height: 1.8; }

body.is-locked { overflow: hidden; }



/* ===== Drawer: плавная анимация ===== */

.drawer { 
  position: fixed; inset: 0; z-index: 9999;
  display: block;                 /* держим в DOM */
  pointer-events: none;           /* чтобы не кликабельно когда закрыто */
}

/* Оверлей */
.drawer__overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.0);
  opacity: 0;
  transition: opacity .28s ease, background-color .28s ease;
}

/* Панель */
.drawer__panel{
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(440px, 92vw);
  background: #fff;

  transform: translate3d(104%, 0, 0);   /* чуть дальше, чтобы не торчало */
  opacity: 0;
  transition:
    transform .34s cubic-bezier(.22, 1, .36, 1),
    opacity   .22s ease;

  overflow: auto;
  padding: 24px;
  outline: none;

  /* чуть приятнее визуально */
  box-shadow: -24px 0 60px rgba(0,0,0,.18);
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

/* Открытое состояние */
.drawer.is-open{
  pointer-events: auto;
}

.drawer.is-open .drawer__overlay{
  opacity: 1;
  background: rgba(0,0,0,.45);
}

.drawer.is-open .drawer__panel{
  transform: translate3d(0,0,0);
  opacity: 1;
}

/* Доп. эффект (по желанию): лёгкий blur фона, если браузер поддерживает */
@supports (backdrop-filter: blur(6px)) {
  .drawer.is-open .drawer__overlay{
    backdrop-filter: blur(6px);
  }
}

/* Уважение к пользователям с "уменьшением анимации" */
@media (prefers-reduced-motion: reduce){
  .drawer__overlay, .drawer__panel { transition: none !important; }
}


.drawer__name,
.drawer__position,
.drawer__text{
  transform: translateY(6px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.drawer.is-open .drawer__name,
.drawer.is-open .drawer__position,
.drawer.is-open .drawer__text{
  transform: translateY(0);
  opacity: 1;
}

/* сделаем ступеньку */
.drawer.is-open .drawer__position{ transition-delay: .04s; }
.drawer.is-open .drawer__text{ transition-delay: .08s; }


/* ФИО: 2 строки максимум */
.staff-name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  margin-top: 4px;
  line-height: 1.25;
  min-height: calc(1.25em * 2); /* всегда резервируем место под 2 строки */
}


/* Карточка: делаем колонку "картинка + подпись" */
.department-entry__staff-photo{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Фото сверху, подпись снизу */
.department-entry__staff-photo img{
  flex: 0 0 auto;
}

/* Текстовый блок под фото делаем одинаковой высоты */
.department-entry__staff-photo strong,
.department-entry__staff-photo br,
.department-entry__staff-photo{
  /* ничего тут не нужно — просто оставил, чтобы понятно было, где блок */
}

/* Оборачиваем текст в блок, но у тебя сейчас текст прямо внутри кнопки.
   Поэтому зададим стили по селекторам ниже. */

/* Должность (1 строка) */
.department-entry__staff-photo strong{
  display: block;
  margin-top: 2px;
  line-height: 1.25;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ФИО (до 2 строк, иначе обрезка) */
.department-entry__staff-photo{
 
}



button.department-entry__staff-photo,
button.department-entry__manager-photo{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;

  font: inherit;
  color: inherit;
  line-height: inherit;

  text-align: left;
  cursor: pointer;
}
button.department-entry__staff-photo{ width: 100%; }

/* фокус */
button.department-entry__staff-photo:focus-visible,
button.department-entry__manager-photo:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 12px;
}




/* ДЕФОЛТ (десктоп/планшет) — как было */
.news-archive .news-filters{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  overflow: visible;
}

/* МОБИЛКА — одна строка + листание */
@media (max-width: 768px){
  .news-archive .news-filters{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    padding: 8px 4px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox */
  }

  .news-archive .news-filters::-webkit-scrollbar{
    display:none; /* Chrome/Safari */
  }

  .news-archive .news-filters .chip{
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

 

  /* опционально: подсказка градиентами по краям */
  .news-archive .news-filters::before,
  .news-archive .news-filters::after{
    content:"";
    position: sticky;
    top: 0;
    width: 28px;
    height: 100%;
    pointer-events:none;
    z-index:2;
  }
  .news-archive .news-filters::before{
    left:0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
  }
  .news-archive .news-filters::after{
    right:0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  }
}



.page-section {
    padding: 40px 0 72px;
}

.text-content-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------- ОБЩИЙ КОНТЕЙНЕР ---------- */
.media-feed-wrap {
    width: 100%;
}

/* ---------- ОДИН ГОД ---------- */
.media-feed-year-card {
    padding: 28px 0;
    border-top: 1px solid rgba(20, 35, 75, 0.08);
}

.media-feed-year-card:first-of-type {
    border-top: 0;
}

/* ---------- ЗАГОЛОВОК ГОДА ---------- */
.media-feed-year-title {
    margin: 0;
}

.media-feed-year-toggle {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;

    cursor: pointer;
    user-select: none;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--color-primary);
    font: inherit;
}

.media-feed-year-toggle:focus-visible {
    outline: 2px solid rgba(20, 35, 75, 0.14);
    outline-offset: 6px;
    border-radius: 8px;
}

.media-feed-year-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.media-feed-year-number {
    margin: 0;
    font-size: clamp(1.85rem, 3.4vw, 2.7rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #2b426b;
}


/* ---------- УБИРАЕМ СЧЁТЧИК ---------- */
.media-feed-year-count {
    display: none;
}

/* ---------- СТРЕЛКА ---------- */
.media-feed-year-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    color: #5a8fe3;
    background: transparent;
}

.media-feed-year-arrow svg {
    width: 14px;
    height: 14px;
}

.media-feed-year-toggle[aria-expanded="true"] .media-feed-year-arrow {
    transform: rotate(180deg);
}

/* ---------- КОНТЕНТ ГОДА ---------- */
.media-feed-year-body {
    display: block;
    padding: 14px 0 0;
    overflow: hidden;

    max-height: 5000px;
    opacity: 1;
    transform: translateY(0);

    transition:
        max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        transform 0.22s ease,
        padding-top 0.22s ease;
}

/* Переопределяем hidden, чтобы работала анимация */
.media-feed-year-body[hidden] {
    display: block !important;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    padding-top: 0;
    pointer-events: none;
}

.media-feed-cards {
    display: block;
    border-top: 1px solid rgba(20, 35, 75, 0.08);
}

/* ---------- ОДНА ПУБЛИКАЦИЯ ---------- */
.media-feed-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid rgba(20, 35, 75, 0.08);
}

.media-feed-card:first-child {
    border-top: 0;
}

/* ---------- УБИРАЕМ ЛИШНЮЮ МЕТКУ ---------- */
.media-feed-card-label {
    display: none;
}

/* ---------- ЗАГОЛОВОК ---------- */
.media-feed-card-title {
    margin: 0;
    font-size: clamp(1.08rem, 1.45vw, 1.55rem);
    line-height: 1.42;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: #203660;
}

/* ---------- КНОПКА ССЫЛКИ ---------- */
.media-feed-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;
    margin: 0;

    border: 1px solid rgba(61, 125, 224, 0.18);
    border-radius: 999px;
    background: transparent;

    color: #4f84dc;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.media-feed-card-link span {
    transition: transform 0.2s ease;
}

.media-feed-card-link:hover,
.media-feed-card-link:focus-visible {
    color: var(--color-primary);
    border-color: rgba(61, 125, 224, 0.34);
    transform: translateX(2px);
    outline: none;
}

.media-feed-card-link:hover span,
.media-feed-card-link:focus-visible span {
    transform: translateX(3px);
}

/* ---------- ПУСТОЕ СОСТОЯНИЕ ---------- */
.media-feed-empty {
    padding: 18px 0;
    border-top: 1px solid rgba(20, 35, 75, 0.08);
    border-bottom: 1px solid rgba(20, 35, 75, 0.08);
    color: #5f6d87;
    font-size: 1rem;
    line-height: 1.6;
}



/* Всплывающее окно контактов в подвале */
.footer__dev-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.dev-contact-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.dev-contact-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dev-contact-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    transition: opacity 0.35s ease;
}

.dev-contact-modal.is-active .dev-contact-modal__overlay {
    opacity: 1;
}

.dev-contact-modal__dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;

    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);

    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition:
        opacity 0.35s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.dev-contact-modal.is-active .dev-contact-modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.dev-contact-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #111;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dev-contact-modal__close:hover {
    transform: rotate(90deg);
    opacity: 0.7;
}

.dev-contact-modal__title {
    margin: 0 32px 10px 0;
    font-size: 22px;
    line-height: 1.2;
}

.dev-contact-modal__text {
    margin: 0 0 16px;
    color: #555;
}

.dev-contact-modal__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dev-contact-modal__links a {
    display: block;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f3f4f6;
    color: #111;
    text-decoration: none;

    opacity: 0;
    transform: translateY(10px);
    transition:
        background 0.2s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

.dev-contact-modal.is-active .dev-contact-modal__links a {
    opacity: 1;
    transform: translateY(0);
}

.dev-contact-modal.is-active .dev-contact-modal__links a:nth-child(1) {
    transition-delay: 0.08s;
}

.dev-contact-modal.is-active .dev-contact-modal__links a:nth-child(2) {
    transition-delay: 0.12s;
}

.dev-contact-modal.is-active .dev-contact-modal__links a:nth-child(3) {
    transition-delay: 0.16s;
}

.dev-contact-modal.is-active .dev-contact-modal__links a:nth-child(4) {
    transition-delay: 0.2s;
}

.dev-contact-modal__links a:hover {
    background: #e5e7eb;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .dev-contact-modal__dialog {
        max-width: 100%;
        border-radius: 18px;
        padding: 20px;
    }

    .dev-contact-modal__title {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dev-contact-modal,
    .dev-contact-modal__overlay,
    .dev-contact-modal__dialog,
    .dev-contact-modal__links a,
    .dev-contact-modal__close {
        transition: none !important;
        animation: none !important;
    }
}





/* Отступ заголовка на странице мероприятий */

.event-single .event-hero .event-title {
    margin-top: 12px;
}