/* Базовая связка сайта поверх Bootstrap: бренд через токены :root (задаются
   layout-ом из ThemeSettings; этап 3 добавит полноценную тему из ЛК). */
a { color: var(--site-link, var(--site-accent)); }
.btn-primary {
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-active-bg: var(--site-accent);
  --bs-btn-active-border-color: var(--site-accent);
  --bs-btn-color: var(--site-accent-text);
  --bs-btn-hover-color: var(--site-accent-text);
  --bs-btn-active-color: var(--site-accent-text);
  --bs-btn-hover-opacity: .9;
}
.btn-outline-primary {
  --bs-btn-color: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-hover-color: var(--site-accent-text);
  --bs-btn-active-bg: var(--site-accent);
  --bs-btn-active-border-color: var(--site-accent);
  --bs-btn-active-color: var(--site-accent-text);
}

/* Текст поверх картинки блока «Баннер-герой». */
.site-hero-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  color: #fff;
  pointer-events: none;
}

/* Richtext-блок без внешних отступов первого/последнего элемента. */
.site-richtext > :first-child { margin-top: 0; }
.site-richtext > :last-child { margin-bottom: 0; }

/* ── Визуальные варианты секций (библиотека секций, этап 1) ───────────────────
   Владелец выбирает «Вариант вида» у блока → рендерер (и сайт, и мини-апп) вешает на ОБЁРТКУ
   секции класс `site-<тип>--<вариант>`. Ниже — базовые примеры платформы; тема перекрывает их
   или объявляет свои варианты в `presets.json → variants` и стилизует своим CSS.
   Вариант не выбран — обёртки нет вовсе, разметка прежняя. */

/* Баннер-герой: текст сбоку, а не поверх картинки (удобно для длинных заголовков). */
@media (min-width: 768px) {
  .site-hero--split > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .site-hero--split .site-hero-text {
    position: static;
    padding: 1.25rem;
    background: none;
    color: inherit;
    pointer-events: auto;
  }
}

/* Баннер-герой: затемнение по всей картинке — светлый текст читается на пёстром фото. */
.site-hero--overlay .site-hero-text {
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  text-align: center;
}

/* Кнопка: во всю ширину колонки (призыв к действию под текстом). */
.site-cta--wide .btn { display: block; width: 100%; }

/* Карта в блоке «Контакты»: место под фрейм занято сразу (высота задана инлайном
   из настройки блока) — страница не прыгает, когда карта догрузится. */
.site-contacts-map {
  overflow: hidden;
  border-radius: var(--bs-border-radius, .375rem);
  background: var(--bs-secondary-bg, #e9ecef);
}

.site-contacts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ряд кнопок маршрута: переносится на узких экранах, а не режется. */
.site-contacts-routes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}