@charset "UTF-8"
/**
 * Ваши правки стилей.
 *
 * Подключается ПОСЛЕ template.css, поэтому правила отсюда перебивают
 * стили шаблона без !important. При обновлении шаблона template.css
 * заменится новой версией, а этот файл останется нетронутым.
 *
 * ВАЖНО: своей палитры здесь нет. Все цвета берутся из :root в
 * template.css (--wine-950, --brass, --ivory-50 и т.д.) — второй набор
 * переменных раньше конфликтовал с основным и подменял фон/шрифт сайта.
 */

/* ═══════════════════════════════════════════════════════════
   ПЕРЕОПРЕДЕЛЕНИЯ BOOTSTRAP
   Чтобы штатные классы (btn, breadcrumb, progress, border…)
   сразу брали фирменные цвета из template.css.
   ═══════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════
   КАРТОЧКА КАТАЛОГА (card_ochka.php)
   ═══════════════════════════════════════════════════════════ */

.card-ochka {
    overflow: hidden;          /* фото не вылазит за границы при зуме */
    border-radius: 0;
    transition: box-shadow .3s ease;
}

.card-ochka:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
}

.card-ochka .card-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.card-ochka .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.card-ochka:hover .card-img-wrapper img {
    transform: scale(1.05);
}

.card-ochka .card_podzag {
    height: 66px;
    overflow: hidden;
}

/* Кнопки поверх stretched-link, иначе по ним нельзя кликнуть */
.card-footer .btn {
    position: relative;
    z-index: 2;
}

.card-img-top {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.badge_big {
    padding: .5em 1em;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
}

/* ═══════════════════════════════════════════════════════════
   ПАНЕЛЬ ФИЛЬТРОВ
   ═══════════════════════════════════════════════════════════ */

.fest-filters {
    padding: .85rem 1.15rem;
    background: var(--ivory-100);
    border: 1px solid var(--line);
    border-radius: .75rem;
}

.fest-filters__group + .fest-filters__group {
    padding-left: 1rem;
    border-left: 1px solid var(--line);
}

.fest-filters__label {
    color: var(--ink-muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Кнопка-чипс — фирменный бордовый вместо синего Bootstrap.
   Фолбэки убраны: переменные заданы в template.css. */
.fest-filter {
    --bs-btn-padding-y: .35rem;
    --bs-btn-padding-x: .8rem;

    --bs-btn-color: var(--wine-950);
    --bs-btn-bg: var(--ivory-50);
    --bs-btn-border-color: rgba(61, 7, 18, .66);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wine-950);
    --bs-btn-hover-border-color: var(--wine-950);

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--wine-950);
    --bs-btn-active-border-color: var(--line);

    /* Отключённое состояние: у Bootstrap для него свои переменные,
       иначе кнопка возвращается к синему цвету btn-outline-primary. */
    --bs-btn-disabled-color: var(--wine-950);
    --bs-btn-disabled-border-color: var(--wine-950);
    --bs-btn-disabled-bg: transparent;

    --bs-btn-focus-shadow-rgb: 61, 7, 18;

    border-radius: 2rem;
    white-space: nowrap;
}

/* Гасим залипшую фокус-подсветку после тапа на мобильном.
   Реальное состояние кнопки задаётся классом btn-primary из JS. */
.fest-filter:focus,
.fest-filter:focus-visible {
    box-shadow: none !important;
}

.fest-filter.btn-outline-primary:focus,
.fest-filter.btn-outline-primary:active {
    color: var(--wine-950) !important;
    background-color: transparent !important;
    border-color: rgba(61, 7, 18, .66) !important;
}

/* Выбранный фильтр: JS меняет btn-outline-primary на btn-primary */
.fest-filter.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--wine-950);
    --bs-btn-border-color: var(--wine-950);
    --bs-btn-hover-bg: var(--wine-800);
    --bs-btn-hover-border-color: var(--wine-800);
    --bs-btn-active-bg: var(--wine-800);
    --bs-btn-active-border-color: var(--wine-800);
}

.fest-filter__count {
    opacity: .55;
    font-size: .85em;
}

/* Вариант, под который не осталось фестивалей */
.fest-filter.is-empty {
    opacity: .35;
    text-decoration: line-through;
    pointer-events: none;
}

.fest-filters__reset {
    color: var(--ink-muted);
    text-decoration: underline;
    white-space: nowrap;
}

.fest-filters__reset:hover { color: var(--wine-800); }
.fest-filters__total       { white-space: nowrap; }

@media (max-width: 991.98px) {
    .fest-filters__group + .fest-filters__group {
        padding-left: 0;
        border-left: 0;
    }

    .fest-filters__foot {
        width: 100%;
        margin-left: 0 !important;
        justify-content: space-between;
        padding-top: .5rem;
        border-top: 1px solid var(--line);
    }
}

/* ═══════════════════════════════════════════════════════════
   КАРТОЧКА МЕРОПРИЯТИЯ (страница мероприятий)
   ═══════════════════════════════════════════════════════════ */

/* Сетка внутри рамки со скруглением: сдвиг на 1px уводит крайние
   границы колонок за край, где их обрезает overflow-hidden. */
.inner-grid { margin-right: -1px; margin-bottom: -1px; }

.max-icon { transform: rotate(-18deg); }

/* Пропорции снимка. Bootstrap .ratio не подходит — он растягивает
   все дочерние элементы, и плашки поверх фото ломаются. */
.card-media {
    aspect-ratio: 765 / 322;
    background: #2f1014;
}

/* Затемнение по краям снимка, чтобы светлые плашки читались */
.card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(30, 5, 10, .12), rgba(30, 5, 10, .02) 55%, rgba(30, 5, 10, .25));
}

.festival-card {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.festival-card img { transition: transform .35s ease; }

.festival-card:hover,
.festival-card:focus-visible {
    transform: translateY(-4px);
    background: var(--ivory-200) !important;
    box-shadow: 0 13px 28px rgba(61, 7, 18, .19);
}

.festival-card:hover img,
.festival-card:focus-visible img { transform: scale(1.025); }

/* .card-title / .card-kicker — классы Bootstrap. Селектор ограничен
   .festival-card, чтобы не задеть заголовки карточек каталога. */
.festival-card .card-title  { font-size: clamp(1.5rem, 1.6vw, 2.1rem); min-height: 4rem; }
.festival-card .card-kicker { min-height: 4rem; color: #4b3a32; }

.fact-label    { font-size: .58rem; letter-spacing: .02em; color: #4b3a32; }
.fact-label-md { font-size: .78rem; letter-spacing: .02em; color: #4b3a32; }
.card-cta      { letter-spacing: .12em; }

/* ── Подвал страницы мероприятий ── */
.footer-crest { width: 94px; height: 88px; object-fit: cover; mix-blend-mode: screen; }
footer a:hover, footer a:focus-visible { color: var(--brass-light) !important; }

@media (max-width: 991.98px) {
    .footer-crest { width: 70px; height: 66px; }

    /* Колонки подвала друг под другом — вертикальная линия слева
       заменяется горизонтальной сверху */
    footer .border-start {
        border-left: 0 !important;
        border-top: 1px solid var(--brass);
        padding-left: .75rem !important;
        padding-top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .brand-crest { width: 55px; height: 52px; }
    .trust-row   { flex-wrap: nowrap !important; justify-content: flex-start !important; }
}

/* ═══════════════════════════════════════════════════════════
   БЛОКИ ФАКТОВ ФИКСИРОВАННОЙ ВЫСОТЫ (выравнивание карточек)
   ═══════════════════════════════════════════════════════════ */

.h-2s {
    height: 4rem;
    min-height: 4rem;
    max-height: 4rem;
    overflow: hidden;
}

.h-2s .small {
    font-size: clamp(12px, 2.5vw, 14px);
}

.h-1s {
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   ЗАГОЛОВОК С ЛИНИЯМИ ПО БОКАМ
   ═══════════════════════════════════════════════════════════ */

.rule-heading {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Линии слева и справа тянутся flex-grow — заголовок всегда по центру */
.rule-heading::before,
.rule-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--brass);
}

.rule-heading h2 {
    margin: 0;
    flex-shrink: 0;
    color: var(--ink);
    font-size: clamp(.9rem, 1.6vw, 1.15rem);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   SEO-БЛОК ВНИЗУ СТРАНИЦЫ
   ═══════════════════════════════════════════════════════════ */

.seo-after {
    opacity: .8;
    padding-top: 50px;
    padding-bottom: 50px;
}

.seo-after p {
    font-size: clamp(0.8rem, 0.9vw + 0.5rem, 0.8rem);
}

.seo-after :is(h1, h2, h3, h4, h5, h6) {
    font-size: clamp(1.2rem, 1vw + 1.5rem, 1.8rem);
}

/* ═══════════════════════════════════════════════════════════
   МОДАЛКИ / ФОРМЫ
   ═══════════════════════════════════════════════════════════ */

.modal-xxl { max-width: 1120px; }

.control-group {
    padding-bottom: 10px;
}

.control-label {
    padding-bottom: 5px;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
}

.setro-wedal .modal-footer {
    justify-content: flex-start;
}

.setro-wedal .modal-footer .btn {
    margin-left: 15px;
}

/* ═══════════════════════════════════════════════════════════
   МОБИЛЬНАЯ КНОПКА ВНИЗУ ЭКРАНА
   ═══════════════════════════════════════════════════════════ */

.mobile-sticky-cta {
    position: fixed;
    z-index: 1040;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: .75rem;
    padding: .75rem;
    background: var(--ivory-200);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 8px rgba(0, 0, 0, .17);
}

.mobile-sticky-cta .btn-primary {
    flex-grow: 1;
    white-space: nowrap;
}

.mobile-sticky-cta .btn-outline-primary {
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   ПОДМЕНЮ РАЗДЕЛА (горизонтальная полоса вкладок)
   ═══════════════════════════════════════════════════════════ */

.section-submenu {
    margin-bottom: 2rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-submenu__list {
    padding: .65rem 0;
    gap: 0;
    list-style: none;
}

.section-submenu__item {
    display: flex;
}

.section-submenu__link {
    display: inline-block;
    padding: .25rem 1.25rem;
    color: var(--ink-muted);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.section-submenu__link:hover,
.section-submenu__link:focus-visible {
    color: var(--wine-800);
}

.section-submenu__link.is-active {
    color: var(--wine-950);
    font-weight: 600;
}

/* Вертикальная чёрточка между пунктами */
.section-submenu__divider {
    width: 1px;
    height: 14px;
    align-self: center;
    background: var(--brass);
    opacity: .6;
}

/* На мобильном — пункты в одну строку с горизонтальной прокруткой */
@media (max-width: 991.98px) {
    .section-submenu .section-submenu__list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        /* justify-content: flex-start !important; */
    }
}


.breadcrumb {
    --bs-link-color-rgb: 61, 7, 18; /* --wine-950 */
    --bs-link-hover-color-rgb: 104, 23, 42; /* --wine-800 */
}
.breadcrumb a {
    text-decoration: underline;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    text-decoration: none;
}


h3 { overflow-wrap:anywhere; }
























/* ══════════════════════════════════════════════════════════════
   Страница фестиваля — надстройка над Bootstrap 5.3.

   Принцип: раскладка и компоненты — штатным Bootstrap (row/col,
   card, accordion, badge, progress, modal, input-group, утилиты).
   Здесь остаётся ТОЛЬКО то, чего Bootstrap не умеет:

     1. Тема — через его же переменные --bs-* (это родной способ
        перекрасить компонент, а не переписывать его правила).
     2. Декор — фон hero, линии с ромбом, уголки карточки, рамки
        между ячейками сеток, пропорции фото.

   Все цвета берутся из :root в template.css.
   ══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. ТЕМА BOOTSTRAP
   ───────────────────────────────────────────────────────────── */

.festival-page {
    color: var(--ink);
    background: var(--ivory-50);

    /* Базовые переменные Bootstrap на весь блок страницы */
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--ink-muted);
    --bs-border-color: var(--line);
    --bs-emphasis-color: var(--wine-800);
    --bs-link-color-rgb: 61, 7, 18;
    --bs-link-hover-color-rgb: 104, 23, 42;
}

/* Контейнер шире стандартного: у Bootstrap потолок 1320px,
   в макете 1480px — расширяем его же класс, а не заводим свой. */

/* Кнопки: прямые углы и высота как в макете */


.festival-page .btn-lg { min-height: 54px; }

.festival-page .btn-primary {
    --bs-btn-bg: var(--wine-950);
    --bs-btn-border-color: var(--wine-950);
    --bs-btn-hover-bg: var(--wine-800);
    --bs-btn-hover-border-color: var(--wine-800);
    --bs-btn-active-bg: var(--wine-900);
    --bs-btn-active-border-color: var(--wine-900);
    padding:0.7rem;
}
.btn-primary {

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: color-mix(in srgb, var(--wine-950) 50%, transparent);
    --bs-btn-disabled-border-color: var(--wine-950);
}
.btn-outline-primary {

    --bs-btn-disabled-color: color-mix(in srgb, var(--wine-950) 50%, transparent);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--wine-950) 50%, transparent);
}

.festival-page .btn-outline-primary {
    --bs-btn-color: var(--wine-950);
    --bs-btn-border-color: var(--brass);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wine-950);
    --bs-btn-hover-border-color: var(--wine-950);
    --bs-btn-active-bg: var(--wine-950);
    --bs-btn-active-border-color: var(--wine-950);
}

.festival-page .btn-link {
    --bs-btn-color: var(--wine-800);
    --bs-btn-hover-color: var(--wine-700);
    --bs-btn-padding-y: 0;
    min-height: auto;
    text-decoration: none;
}

/* Карточки: прямые углы, светлый фон */
.festival-page .card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-bg: var(--ivory-50);
}

/* Поля ввода */
.festival-page .form-control,
.festival-page .form-select {
    --bs-border-radius: 0;
    min-height: 44px;
}

.festival-page .form-control:focus,
.festival-page .form-select:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 .2rem rgb(198 161 90 / .25);
}

/* Прогресс заполненности */
.festival-page .progress {
    --bs-progress-height: 6px;
    --bs-progress-bg: var(--ivory-200);
    --bs-progress-border-radius: 0;
}

.festival-page .progress-bar {
    background: linear-gradient(90deg, var(--brass), var(--wine-800));
}

/* Аккордеон */
.festival-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-color: var(--wine-800);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--wine-950);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-border-radius: 0;
}

.festival-accordion .accordion-button {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
}

.festival-accordion .accordion-button i { color: var(--brass-dark); }

.festival-accordion .accordion-body {
    color: var(--ink-muted);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.6;
}

/* Модалка заявки */
.festival-modal {
    --bs-modal-border-radius: 0;
    --bs-modal-border-color: var(--brass);
    --bs-modal-bg: var(--ivory-50);
}

.festival-modal .modal-footer { background: var(--ivory-100); }

/* Значки */
.festival-page .badge {
    --bs-badge-border-radius: 0;
    --bs-badge-font-weight: 500;
}


/* ─────────────────────────────────────────────────────────────
   2. ЦВЕТОВЫЕ ПОМОЩНИКИ
   (фирменных оттенков в Bootstrap нет — добавляем в его стиле)
   ───────────────────────────────────────────────────────────── */

.text-wine  { color: var(--wine-800) !important; }
.text-brass { color: var(--brass-dark) !important; }
.bg-tint    { background: var(--ivory-100) !important; }


/* ─────────────────────────────────────────────────────────────
   3. ЗАГОЛОВКИ РАЗДЕЛОВ
   Декоративная линия — только псевдоэлементом; выравнивание
   (d-flex, gap) задано классами Bootstrap в разметке.
   ───────────────────────────────────────────────────────────── */

.section-kicker {
    color: var(--brass-dark);
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.section-title {
    color: var(--wine-800);
    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 3vw, 2.65rem);
    font-weight: 600;
    line-height: 1.12;
}

.section-title::after,
.section-title--center::before {
    width: min(7rem, 18vw);
    height: 1px;
    flex: none;
    content: "";
    background: var(--brass);
}

.subsection-title {
    color: var(--wine-800);
    font-family: var(--font-serif);
    font-weight: 600;
}

/* Линия с ромбом посередине (hero и карточка заявки) */
.ornament-rule i {
    color: var(--brass);
    font-size: .5rem;
}

.ornament-rule::before,
.ornament-rule::after {
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

.ornament-rule::before { flex: 0 0 6rem; }
.ornament-rule::after  { flex: 1 1 auto; }

.ornament-rule--center::before,
.ornament-rule--center::after { flex: 1 1 auto; }


/* ─────────────────────────────────────────────────────────────
   4. ПЕРВЫЙ ЭКРАН
   ───────────────────────────────────────────────────────────── */

.festival-hero {
    min-height: 680px;
    color: var(--ivory-50);
    background-position: center;
    background-size: cover;
}

.festival-title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: var(--brass-light);
}

.festival-subtitle {
    max-width: 44rem;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    opacity: .92;
}

.festival-facts {
    font-family: var(--font-serif);
    font-size: clamp(.92rem, 1.25vw, 1.05rem);
}

.festival-facts i {
    width: 1.25rem;
    flex: none;
    margin-top: .15rem;
    color: var(--brass-light);
    text-align: center;
}

.hero-tag {
    padding: .55rem 1rem;
    color: var(--brass-light);
    background: transparent;
    border: 1px solid rgb(223 193 127 / .5);
    font-family: var(--font-sans);
    font-size: .92rem;
}

/* Карточка заявки: латунные уголки — чистый декор */
.application-card {
    border-color: var(--brass) !important;
    box-shadow: 0 1.5rem 3rem rgb(61 7 18 / .18);
}

.application-card::before,
.application-card::after {
    position: absolute;
    width: 24px;
    height: 24px;
    content: "";
    pointer-events: none;
}

.application-card::before {
    top: 10px;
    left: 10px;
    border-top: 1px solid var(--brass);
    border-left: 1px solid var(--brass);
}

.application-card::after {
    right: 10px;
    bottom: 10px;
    border-right: 1px solid var(--brass);
    border-bottom: 1px solid var(--brass);
}


/* ─────────────────────────────────────────────────────────────
   5. ПОЛОСА ДОВЕРИЯ И ПРЕИМУЩЕСТВА
   Разделители между ячейками сетки — Bootstrap их не рисует.
   ───────────────────────────────────────────────────────────── */

.trust-strip {
    background: var(--ivory-100);
    font-family: var(--font-serif);
    font-size: 0.9rem;
}

.trust-item { min-height: 58px; }
.trust-item i { color: var(--brass-dark); font-size: 1.35rem; }
.trust-item strong { color: var(--wine-800); }

/* Линии между ячейками: 2 в ряд на мобильном, 4 на десктопе */
.trust-item:nth-child(2n)   { border-left: 1px solid var(--line); }
.trust-item:nth-child(n+3)  { border-top: 1px solid var(--line); }

@media (min-width: 1200px) {
    .trust-item:not(:first-child) { border-left: 1px solid var(--line); }
    .trust-item:nth-child(n+3)    { border-top: 0; }
}

.benefit-item i {
    color: var(--brass-dark);
    font-size: 2.2rem;
}

.benefit-item:nth-child(2n)  { border-left: 1px solid var(--line); }
.benefit-item:nth-child(n+3) { border-top: 1px solid var(--line); }

@media (min-width: 992px) {
    .benefit-item:not(:first-child) { border-left: 1px solid var(--line); }
    .benefit-item:nth-child(n+3)    { border-top: 0; }
}


/* ─────────────────────────────────────────────────────────────
   6. ТАРИФЫ, ВЗНОСЫ, ДОКУМЕНТЫ
   ───────────────────────────────────────────────────────────── */

.tariff-card { transition: box-shadow .2s ease, transform .2s ease; }

.tariff-card:hover {
    box-shadow: 0 .75rem 1.5rem rgb(61 7 18 / .1);
    transform: translateY(-2px);
}

.tariff-badge {
    color: var(--wine-950);
    background: var(--brass-light);
    font-size: .68rem;
    letter-spacing: .04em;
}

.tariff-prices,
.fee-list {
    font-family: var(--font-sans);
    font-size: .82rem;
}

.tariff-prices > div,
.fee-list > div {
    padding-block: .32rem;
    border-bottom: 1px dashed var(--line);
}

.tariff-prices > div:last-child,
.fee-list > div:last-child { border-bottom: 0; }

.tariff-prices dt,
.fee-list dt {
    color: var(--ink-muted);
    font-weight: 400;
}

.tariff-prices dd,
.fee-list dd {
    margin: 0;
    color: var(--wine-800);
    font-weight: 600;
    text-align: right;
}

.fee-panel { background: var(--ivory-100); }

.documents-panel {
    background: var(--ivory-100);
    border-color: var(--brass) !important;
    
}


.document-item { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.document-item:last-child { padding-bottom: 0; border-bottom: 0; }
.document-item i { font-size: 1.2rem; }

.services-toggle { font-family: var(--font-serif); font-weight: 600; font-size:1.1rem}
.services-toggle i:first-child { color: var(--brass-dark); }

.services-toggle .fa-chevron-down {
    display: inline-block;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    transform-origin: 50% 50%;
}

.services-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}


.programme-day {
    background: var(--ivory-100);
    border-left: 2px solid var(--brass);
    font-family: var(--font-serif);
    font-size: .92rem;
    line-height: 1.5;
}

.programme-day strong { color: var(--wine-800); }


/* ─────────────────────────────────────────────────────────────
   7. КОНВЕРСИОННАЯ ПОЛОСА
   ───────────────────────────────────────────────────────────── */

.conversion-banner {
    color: var(--ivory-50);
    background:
        linear-gradient(90deg, var(--wine-950), rgb(80 13 27 / .92)),
        radial-gradient(circle at 12% 50%, #6a3a1a 0%, #2a1008 60%);
}

.conversion-banner h2 { font-family: var(--font-serif); }

.conversion-mark {
    width: 56px;
    height: 56px;
    color: var(--brass-light);
    font-family: var(--font-serif);
    font-size: 1.8rem;
}

.conversion-mark img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(99%) sepia(52%) saturate(1935%) hue-rotate(309deg) brightness(90%) contrast(94%);

}

.conversion-title {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 1.5vw, 1.6rem);
    font-weight: 600;
    color: var(--brass-light);
}


/* ─────────────────────────────────────────────────────────────
   8. КАРТОЧКИ ФЕСТИВАЛЕЙ
   ───────────────────────────────────────────────────────────── */

.festival-card { transition: box-shadow .25s ease, transform .25s ease; }

.festival-card:hover {
    box-shadow: 0 1rem 2rem rgb(61 7 18 / .14);
    transform: translateY(-3px);
}

/* Пропорция фото — aspect-ratio, у Bootstrap для img его нет */
.festival-card__image {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.card-badge {
    color: var(--ivory-50);
    background: rgb(61 7 18 / .82);
    font-size: .68rem;
}

.feature-badge {
    color: var(--ink-muted);
    background: var(--ivory-100);
    border: 1px solid var(--line);
    font-size: .7rem;
    font-weight: 400;
}

.card-meta { font-family: var(--font-sans); }
.card-meta i { width: 1rem; color: var(--brass-dark); text-align: center; }

.all-events-link {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* ─────────────────────────────────────────────────────────────
   9. ЗАОЧНОЕ УЧАСТИЕ И ПОДПИСКИ
   ───────────────────────────────────────────────────────────── */

.circle-icon {
    width: 52px;
    height: 52px;
    color: var(--brass-dark);
    background: var(--ivory-50);
    border: 1px solid var(--brass);
    border-radius: 50%;
    font-size: 1.3rem;
}

.subscription-card { border: 1px solid var(--line); }

@media (min-width: 992px) {
    /* Не двоим общую границу между двумя колонками */
    .subscription-card + .subscription-card { border-left: 0; }
}


/* ─────────────────────────────────────────────────────────────
   10. SEO-БЛОК И ЛИПКАЯ ПАНЕЛЬ
   ───────────────────────────────────────────────────────────── */

.seo-section {
    background: var(--ivory-100);
    font-family: var(--font-serif);
}

.seo-section h3 { font-family: var(--font-serif); }

/* Панель прижата к низу экрана: у Bootstrap fixed-bottom
   нет фона и тени, поэтому позиционируем сами */
.mobile-sticky-cta {
    position: fixed;
    z-index: 1030;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--ivory-50);
    border-top: 1px solid var(--line);
    box-shadow: 0 -.5rem 1rem rgb(61 7 18 / .1);
}

/* Чтобы панель не перекрывала конец страницы */
@media (max-width: 991.98px) {
    .festival-page { padding-bottom: 76px; }
}



.fluid-bleed {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
}










/* ── Сворачиваемый SEO-блок ── */
.seo-collapse {
    --seo-lines: 6;   /* сколько строк видно в свёрнутом виде */
}

.seo-collapse__body {
    position: relative;
    overflow: hidden;

    /* lh — высота строки, 6lh = ровно 6 строк.
       Первая строка — запасная для браузеров без поддержки lh */
    max-height: 9rem;
    max-height: calc(var(--seo-lines) * 1lh);
    transition: max-height 1.3s ease;
}

/* Затухание у нижнего края — видно, что текст продолжается.
   Цвет должен совпадать с фоном .seo-section */
.seo-collapse__body::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4rem;
    content: "";
    pointer-events: none;
    background: linear-gradient(transparent, var(--ivory-100));
    transition: opacity 1.6s ease;
}

.seo-collapse.is-open .seo-collapse__body {
    max-height: 300rem;   /* заведомо больше любого текста */
}

.seo-collapse.is-open .seo-collapse__body::after {
    opacity: 0;
}

/* Короткий текст: ни обрезки, ни градиента, ни кнопки */
.seo-collapse__body.is-short {
    max-height: none;
}

.seo-collapse__body.is-short::after {
    display: none;
}

.seo-collapse__toggle {
    color: var(--wine-800);
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}

.seo-collapse__toggle i {
    transition: transform .5s ease;
}

.seo-collapse.is-open .seo-collapse__toggle i {
    transform: rotate(180deg);
}

.seo-collapse__body p {
    font-size: clamp(0.8rem, 0.9vw + 0.5rem, 0.8rem);
}
.seo-collapse__body h2 {
    font-size: clamp(1.8rem, 0.9vw + 0.5rem, 2.8rem);
    padding-bottom:0; 
    margin-bottom:1rem;
}
.seo-collapse__body h3 {
    font-size: clamp(1.1rem, 0.9vw + 0.5rem, 1.2rem);
}











/* Форма в две колонки */
.setro-wedal .modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    font-family: var(--font-sans);
}

/* По умолчанию все поля на всю ширину */
.setro-wedal .modal-body > .control-group {
    grid-column: 1 / -1;
}

/* Телефон и почта — по половине */
.setro-wedal .modal-body > .control-group.phone { grid-column: 1; }
.setro-wedal .modal-body > .control-group.email { grid-column: 2; }

/* Мобильная версия — всё в столбик */
@media (max-width: 575.98px) {
    .setro-wedal .modal-body {
        display: block;
    }
}

/* Все поля-чекбоксы: control-group с классом, начинающимся на check_ */
.setro-wedal .control-group[class*="check_"] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .6rem;
    row-gap: .35rem;
    align-items: start;
}

/* Обёртка перестаёт быть блоком — её дети попадают в сетку выше */
.setro-wedal .control-group[class*="check_"] > .controls {
    display: contents;
}

.setro-wedal .control-group[class*="check_"] .form-check {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    margin: 0;
    padding-left: 0;
}

.setro-wedal .control-group[class*="check_"] .form-check-input {
    float: none;
    margin: .2rem 0 0;
}

.setro-wedal .control-group[class*="check_"] > .control-label {
    grid-column: 2;
    grid-row: 1;
}

.setro-wedal .control-group[class*="check_"] > .control-label label {
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

/* Пояснение — под текстом согласия, а не под галочкой */
.setro-wedal .control-group[class*="check_"] [id$="-desc"] {
    grid-column: 2;
    grid-row: 2;
}

.setro-wedal .control-group[class*="check_"] [id$="-desc"] .form-text {
    margin-top: 0;
}
.setro-wedal .modal-header .close {
    margin-left: auto;
}
.setro-wedal .modal-header .close {
    margin-left: auto;
    padding: 0 .25rem;
    color: var(--wine-950);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s ease;
}

.setro-wedal .modal-header .close:hover {
    opacity: 1;
}


.setro-wedal .form-control {
    font-size:0.9rem;
}

#wjcallback-modal.show, #wjcallback-loader {
    display: block;
    background-color: #3d071299;
    overscroll-behavior: contain;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

}
.wjcallbackform.setro-wedal {
max-width:600px;
border-radius:15px;
}


/* ═══════════════════════════════════════════════════════════
   КАТАЛОГ: СЕТКА И АНИМАЦИЯ ФИЛЬТРА
   ═══════════════════════════════════════════════════════════ */

.fest-grid .fest-card {
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: ease;
}

.fest-grid .fest-card.is-hiding {
    opacity: 0;
    transform: scale(.95);
}

.form-check-input:checked {
    background-color: var(--wine-950);
    border-color: var(--wine-950);
}

.festival-page .btn {
    --bs-btn-border-radius: 0;
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .5rem;
    border-radius: 10px;

    /* содержимое по центру независимо от переносов в разметке */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.site-footer .nav-item  {
 display:block;
 width:100%;
}


/* ══════════ Пагинация ══════════ */

/* Обёртка: кнопки, под ними счётчик — оба по центру */
.com-content-category-blog__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

/* Счётчик был прижат вправо через float — сбрасываем и ставим вторым */
.com-content-category-blog__counter {
    order: 2;
    float: none !important;
    margin: 0;
    padding: 0 !important;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: .85rem;
}

.com-content-category-blog__pagination {
    order: 1;
}

.pagination {
    --bs-pagination-color: var(--ink);
    --bs-pagination-bg: var(--ivory-50);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-border-radius: 4px;
    --bs-pagination-padding-x: .85rem;
    --bs-pagination-padding-y: .45rem;

    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--wine-800);
    --bs-pagination-hover-border-color: var(--wine-800);

    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgb(198 161 90 / .25);
    --bs-pagination-focus-bg: var(--ivory-100);

    --bs-pagination-active-bg: var(--wine-950);
    --bs-pagination-active-border-color: var(--wine-950);

    --bs-pagination-disabled-color: var(--ink-muted);
    --bs-pagination-disabled-bg: var(--ivory-100);
    --bs-pagination-disabled-border-color: var(--line);

    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    margin-bottom: 0 !important;
}

.pagination .page-link {
    min-width: 2.6rem;
    font-family: var(--font-sans);
    font-size: .9rem;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}

/* ── Стрелки ──
   Joomla выводит их иконочным шрифтом, которого в шаблоне нет
   (подключён только Font Awesome) — кнопки остаются пустыми.
   Прячем её span и рисуем стрелку псевдоэлементом FA. */
.pagination .page-link [class^="icon-"] {
    display: none;
}

.pagination .page-link:has([class^="icon-"])::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
}

.pagination .page-link:has(.icon-angle-double-left)::before  { content: "\f100"; }
.pagination .page-link:has(.icon-angle-left)::before         { content: "\f104"; }
.pagination .page-link:has(.icon-angle-right)::before        { content: "\f105"; }
.pagination .page-link:has(.icon-angle-double-right)::before { content: "\f101"; }

@media (max-width: 575.98px) {
    .pagination .page-link {
        min-width: 2.2rem;
        --bs-pagination-padding-x: .6rem;
    }
}






@media (max-width: 991.98px) {
    .section-submenu .section-submenu__list {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;

        /* justify-content убран: он прижимал влево всегда.
           Центрирование даёт margin: auto на элементах — при нехватке
           места отступы схлопываются сами, и прокрутка не ломается */
        justify-content: normal !important;

        padding-inline: 1rem;
        scroll-padding-inline: 1rem;
        padding-bottom: .6rem;

        scrollbar-width: thin;
        scrollbar-color: var(--brass) transparent;
    }

    /* Распорки по краям: когда список короткий — центрируют,
       когда длинный — сжимаются до нуля */
    .section-submenu .section-submenu__list > :first-child {
        margin-inline-start: auto;
    }

    .section-submenu .section-submenu__list > :last-child {
        margin-inline-end: auto;
    }
    
    /* Webkit рисует полосу своими правилами, а не scrollbar-* */
    .section-submenu .section-submenu__list::-webkit-scrollbar {
        height: 3px;
    }

    .section-submenu .section-submenu__list::-webkit-scrollbar-track {
        background: transparent;
    }

    .section-submenu .section-submenu__list::-webkit-scrollbar-thumb {
        background: var(--brass);
        border-radius: 3px;
    }

    .section-submenu > .container-xxl {
        padding-inline: 0 !important;
    }
}