/**
 * Ваши правки стилей.
 *
 * Этот файл подключается ПОСЛЕ template.css, поэтому правила отсюда
 * перебивают стили шаблона без !important.
 *
 * Смысл файла: при обновлении шаблона template.css заменится новой версией,
 * а custom.css останется нетронутым. Пишите правки только сюда.
 */


.article-list .article {
    position: relative;
    margin:10px;
    margin-bottom: 50px;
    padding: 0px;
    border: 0px solid #f5f5f5;
    border-radius: 0px;
    
}


/* Стилизация карточек фестиваля */
.fest-grid .fest-card {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

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

.card-ochka {
    overflow: hidden; /* фото не вылазит за границы */
    transition: box-shadow 0.3s ease;

   border-radius: 0px;
}

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

/* .card-ochka .card-img-top {
    transition: transform 0.4s ease;
    border-radius: 0px;
} */

/* .card-ochka .card-img-wrapper {
    overflow: hidden;
    height: 300px; 
}

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

.card-ochka .card-img-wrapper {
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 /1 ; /* или 4/3 — выбери пропорцию */

}

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

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

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

.card-footer .btn {
    position: relative; /* Важно: позиционирование для z-index */
    z-index: 2;         /* Кнопки поверх оверлея */
} */

.card-img-top {
    max-width: 100%;        /* Растягиваем на всю ширину карточки */
    height: auto;
    object-fit: cover;  /* Самое важное: обрезка без искажения пропорций */
    object-position: center; /* Центрируем картинку, чтобы обрезались края равномерно */
}


/* Стилизация бейджей */
.badge_big {
    font-size: 0.8em;
    padding: 0.5em 1em;
    font-weight: 400;
    white-space: normal;
    line-height: 1.3;
}



.modal-xxl {
    max-width: 1120px;
}
@media (min-width: 1400px) {
    .modal-xxl {
        max-width: 1120px;
    }
}






/* Мобильная кнопка действия внизу экрана */

.mobile-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: .75rem;
  padding: .75rem;
  background: #EBE9E2;
  border-top: 1px solid var(--color-border);
  z-index: 1040;
  box-shadow: 0 -8px 8px rgba(0, 0, 0, 0.168);
}
.mobile-sticky-cta .btn-primary { flex-grow: 1;  white-space:nowrap;}
.mobile-sticky-cta .btn-outline-primary { flex-shrink: 1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }



/* Панель фильтров — одна строка на всю ширину */
.fest-filters {
    padding: .85rem 1.15rem;
    background: var(--ivory-100, #f8f2e8);
    border: 1px solid var(--line, #d6c4a8);
    border-radius: .75rem;
}

/* Разделитель между группами */
.fest-filters__group + .fest-filters__group {
    padding-left: 1rem;
    border-left: 1px solid var(--line, #d6c4a8);
}

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

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

    --bs-btn-color: var(--wine-950, #400915);
    --bs-btn-bg: var(--ivory-50, #FFFDF8);
    --bs-btn-border-color: #400915a9;

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

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--wine-950, #400915);
    /* --bs-btn-active-border-color: var(--wine-950, #400915);  */
    --bs-btn-active-border-color: var(--line, #d6c4a8);

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

    /* Цвет подсветки при фокусе с клавиатуры — RGB-составляющие #400915 */
    --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, #400915);
    --bs-btn-border-color: var(--wine-950, #400915);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wine-800, #68172A);
    --bs-btn-hover-border-color: var(--wine-800, #68172A);

    --bs-btn-active-bg: var(--wine-800, #68172A);
    --bs-btn-active-border-color: var(--wine-800, #68172A);
}

.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, #7d6c6c);
    text-decoration: underline;
    white-space: nowrap;
}

.fest-filters__reset:hover {
    color: var(--wine-800, #68172a);
}

.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, #d6c4a8);
    }
}



/* карточки вывода *//* ══════════════════════════════════════════════════════════════
   Стили страницы мероприятий.

   Принцип: сначала переопределяем переменные Bootstrap, чтобы его
   штатные классы (bg-primary, border, .card, .btn, .progress …)
   сразу брали фирменные цвета и шрифт. Дальше остаётся описать
   только то, чего в Bootstrap нет в принципе: пропорции фото,
   анимации наведения, градиент поверх снимка.

   Было 194 строки, стало ~60.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Фирменная палитра */
  --wine: #400915;
  --wine-dark: #35030d;
  --navy: #071a34;
  --gold: #b88942;
  --gold-dark: #8f6429;
  --gold-soft: #d8b57a;
  --milk: #faf7f2;
  --card-milk: #f4eee5;
  --serif: "Literata", Georgia, "Times New Roman", serif; */
  --bs-progress-bar-bg: var(--wine-800);

  /* Переменные Bootstrap. После этого его собственные утилиты
     text-primary, bg-primary, border-primary, .border, заголовки
     и текст сами используют фирменные цвета — без своих правил. */
  --bs-primary-rgb: 77, 7, 20;
  /*--bs-body-font-family: var(--serif); */
  --bs-body-color: var(--navy);
  --bs-body-bg: var(--milk);
  --bs-heading-color: var(--navy);
  --bs-emphasis-color: var(--navy);
  --bs-border-color: rgba(184, 137, 66, .44);
  --bs-border-radius: .5rem;
  --bs-link-color-rgb: 7, 26, 52;
  --bs-link-hover-color-rgb: 77, 7, 20;
  --bs-breadcrumb-divider-color: var(--gold);
}

/* Кнопки Bootstrap собирает с зашитыми цветами, поэтому их
   перекрашиваем через переменные самого компонента. */
.btn-primary {
  --bs-btn-bg: var(--wine);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-bg: #700d22;
  --bs-btn-hover-border-color: var(--gold-soft);
  --bs-btn-active-bg: var(--wine-dark);
  --bs-btn-active-border-color: var(--gold);
}

.btn-outline-primary {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wine);
  --bs-btn-hover-border-color: var(--wine);
  --bs-btn-active-bg: var(--wine);
  --bs-btn-active-border-color: var(--wine);
}

/* Цвета, которых нет в палитре Bootstrap */
.text-gold      { color: var(--gold) !important; }
.text-gold-dark { color: var(--gold-dark) !important; }
.text-gold-soft { color: var(--gold-soft) !important; }
.border-gold    { --bs-border-color: var(--gold); }
.bg-milk        { background-color: var(--milk) !important; }
.bg-card        { background-color: var(--card-milk) !important; }

/* ── Шапка ───────────────────────────────────────────────── */
.brand-crest    { width: 90px; height: 75px; object-fit: cover; mix-blend-mode: multiply; }
.brand-title    { font-size: clamp(1.35rem, 2.8vw, 2.35rem); line-height: 1.02; }
.brand-subtitle { font-size: clamp(.7rem, 1vw, 1.05rem); line-height: 1.1; }
.brand-motto    { color: var(--gold-dark); letter-spacing: .13em; line-height: 1.55; }
.max-icon       { transform: rotate(-18deg); }

/* Подчёркивание пункта меню, выезжающее при наведении */
.main-nav .nav-link { position: relative; padding: .72rem .5rem; }
.main-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .45rem;
  right: .45rem;
  bottom: .18rem;
  height: 2px;
  background: var(--wine);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.main-nav .nav-link:hover::after,
.main-nav .nav-link:focus-visible::after,
.main-nav .nav-link.active::after { transform: scaleX(1); }

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

/* ── Карточка фестиваля ──────────────────────────────────── */

/* Пропорции снимка. В 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: #e9dfd0 !important;
  box-shadow: 0 13px 28px rgba(77, 7, 20, .19);
}

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

.card-title  { font-size: clamp(1.5rem, 1.6vw, 2.1rem); min-height: 4rem; }
.card-kicker { color: #4b3a32; min-height: 2.3em; min-height: 4rem;}
.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(--gold-soft) !important; }

/* ── Мобильные правки ────────────────────────────────────── */
@media (max-width: 991.98px) {
  .footer-crest { width: 70px; height: 66px; }

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

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* конец карточки */

.seo-after { 
    opacity: 0.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, 2rem);
}

.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;              /* текст не сжимается, режутся только линии */
    font-size: clamp(.9rem, 1.6vw, 1.15rem);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
}