/* ============================================================
   Custom CSS для темы Простор — кастомные блоки Силико
   ============================================================
   Куда вставлять:
     Админка → Простор → Настройка шаблона → Для разработчиков →
     Пользовательские скрипты → вкладка CSS
   Что даёт:
     - Базовая типографика (заголовки, абзацы, списки, таблицы, ссылки)
       уже стилизуется темой через .ui-wysiwyg — мы не дублируем.
     - Здесь только наши кастомные блоки: TOC, карточки, callout,
       контакты, кнопки-обёртки, баннер блога.
   Принципы:
     - На стандартных тегах <h2>, <p>, <ul>, <table>, <a> внутри
       .ui-wysiwyg НЕ должно быть атрибута class — тогда сработают
       стили темы. И НЕ должно быть инлайнового style.
     - Кастомные блоки получают class="si-*" — стили темы для них
       не сработают (селектор :not([class])).
     - !important на ключевых визуальных правилах — потому что
       Custom CSS грузится ДО app.css темы, и без важности
       проигрывает по порядку загрузки.
   ============================================================ */

/* --- Лид-параграф --- */
.ui-wysiwyg p.si-lead {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin-bottom: 1.5rem !important;
}

/* --- Якоря с поправкой на фикс-шапку --- */
.ui-wysiwyg h2[id] { scroll-margin-top: 120px; }

/* --- Содержание (TOC) --- */
.ui-wysiwyg table.si-toc {
  width: 100% !important;
  background: #f7f8fb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 2rem 0 !important;
}
.ui-wysiwyg table.si-toc td {
  padding: 2rem 3rem !important;
  border: none !important;
}
.ui-wysiwyg table.si-toc tr:hover td { background: #f7f8fb !important; }
.ui-wysiwyg .si-toc__title {
  font-weight: 700;
  margin: 0 0 1.2rem;
  color: #222;
  font-size: 1.4rem;
}
.ui-wysiwyg .si-toc ul {
  padding: 0 0 0 2rem !important;
  margin: 0 !important;
  font-size: 1.4rem;
  line-height: 1.8;
  list-style: disc !important;
}
.ui-wysiwyg .si-toc ul li {
  padding: 0 !important;
  margin: 0 !important;
}
.ui-wysiwyg .si-toc ul li:after { display: none !important; }
.ui-wysiwyg .si-toc a {
  color: var(--theme-primary-color, #C0392B) !important;
  text-decoration: none !important;
  border: none !important;
}
.ui-wysiwyg .si-toc a:hover { text-decoration: underline !important; }

/* --- Карточки в ряд --- */
.ui-wysiwyg table.si-cards {
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-spacing: 1.5rem 0 !important;
  border-collapse: separate !important;
  margin: 2rem 0 !important;
}
.ui-wysiwyg table.si-cards td.si-card {
  background: #f7f8fb !important;
  border-radius: 10px !important;
  padding: 1.8rem 2rem !important;
  vertical-align: top !important;
  border: none !important;
}
.ui-wysiwyg table.si-cards td.si-card--accent { border-left: 4px solid var(--theme-primary-color, #C0392B) !important; }
.ui-wysiwyg table.si-cards td.si-card--center { text-align: center !important; }
.ui-wysiwyg table.si-cards tr:hover td.si-card { background: #f7f8fb !important; }

/* Номер шага в красном кружке */
.ui-wysiwyg .si-card__num {
  display: inline-block !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  line-height: 3.6rem !important;
  text-align: center !important;
  background: var(--theme-primary-color, #C0392B) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  margin: 0 0 1rem !important;
}
.ui-wysiwyg .si-card__title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin: 0 0 0.5rem !important;
}
.ui-wysiwyg .si-card__desc {
  font-size: 1.3rem !important;
  color: #555 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.ui-wysiwyg .si-card__price {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--theme-primary-color, #C0392B) !important;
  margin: 0 0 0.5rem !important;
}
.ui-wysiwyg .si-card__icon {
  width: 6.4rem !important;
  height: 6.4rem !important;
  display: block !important;
  margin: 0 auto 0.8rem !important;
}
/* Видео-блок: ролик на всю ширину контейнера (ячейки или контента), ниже — подпись.
   Используется в about (3 видео в ряд через .si-videos). */
.ui-wysiwyg video.si-video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 6px !important;
  background: #000 !important;
}
.ui-wysiwyg p.si-video__caption {
  text-align: center !important;
  font-size: 1.4rem !important;
  color: var(--theme-secondary-color, #777) !important;
  margin: 0.8rem 0 0 !important;
}
/* Сетка видео в ряд (как si-cards/si-gallery, но под <video>).
   table-layout: fixed → колонки равной ширины; border-spacing задаёт зазор между видео. */
.ui-wysiwyg table.si-videos {
  width: 100% !important;
  table-layout: fixed !important;
  background: transparent !important;
  box-shadow: none !important;
  border-spacing: 1.2rem 0 !important;
  border-collapse: separate !important;
  margin: 2rem 0 3rem !important;
}
.ui-wysiwyg table.si-videos td {
  padding: 0 !important;
  border: none !important;
  vertical-align: top !important;
}
.ui-wysiwyg table.si-videos tr:hover td { background: transparent !important; }
/* Внутри table.si-videos — фиксируем высоту видео и режем по object-fit: cover.
   Так все 3 тайла одинакового размера независимо от исходных пропорций
   (одно из них портретное 400×720, два горизонтальных). */
.ui-wysiwyg table.si-videos video.si-video {
  width: 100% !important;
  height: 32rem !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Сетка карточек-превью.
   table-layout: fixed — все колонки одинаковой ширины (иначе td подгоняются под контент).
   vertical-align: top — содержимое каждой ячейки начинается с одинаковой верхней линии. */
.ui-wysiwyg table.si-cards { table-layout: fixed !important; }
.ui-wysiwyg table.si-cards > tbody > tr > td.si-card { vertical-align: top !important; }

/* Модификатор: картинка-превью на всю ширину карточки.
   Высота зафиксирована в px (а не aspect-ratio: внутри <td> aspect-ratio не везде
   надёжно работает). 18rem ≈ 180px — достаточно для горизонтальных превью. */
.ui-wysiwyg .si-card__icon.si-card__icon--full {
  width: 100% !important;
  height: 18rem !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 6px !important;
  margin: 0 0 1.2rem !important;
}
/* Подпись под превью — обрезаем максимум до 2 строк с многоточием и фиксируем высоту.
   line-clamp работает в Chrome/Safari/Firefox; min-height — safety net на случай 1 строки. */
.ui-wysiwyg .si-card--center .si-card__title {
  min-height: 4.6rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  line-clamp: 2 !important;
  text-align: center !important;
}

/* --- Блок-подсказка --- */
.ui-wysiwyg table.si-callout {
  width: 100% !important;
  background: #f7f8fb !important;
  border-left: 4px solid var(--theme-primary-color, #C0392B) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  margin: 2rem 0 !important;
}
.ui-wysiwyg table.si-callout td {
  padding: 1.4rem 2rem !important;
  border: none !important;
  font-size: 1.4rem;
  line-height: 1.6;
}
.ui-wysiwyg table.si-callout tr:hover td { background: #f7f8fb !important; }
.ui-wysiwyg .si-callout__title { color: var(--theme-primary-color, #C0392B) !important; font-weight: 700 !important; }

/* --- Контактный блок --- */
.ui-wysiwyg table.si-contact {
  width: 100% !important;
  background: #f7f8fb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 2rem 0 !important;
}
.ui-wysiwyg table.si-contact td {
  padding: 2rem 3rem !important;
  vertical-align: middle !important;
  border: none !important;
}
.ui-wysiwyg table.si-contact tr:hover td { background: #f7f8fb !important; }
.ui-wysiwyg .si-contact__label {
  color: #888 !important;
  font-size: 1.3rem !important;
  margin: 0 0 0.4rem !important;
}
.ui-wysiwyg .si-contact__value {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.ui-wysiwyg .si-contact__value a {
  color: var(--theme-primary-color, #C0392B) !important;
  text-decoration: none !important;
  border: none !important;
}

/* --- Кнопки CTA (обёртка) --- */
.ui-wysiwyg p.si-cta { margin: 2.5rem 0 !important; }
.ui-wysiwyg p.si-cta .ui-btn {
  margin-right: 1.5rem;
  margin-bottom: 1rem;
}

/* --- Баннер статьи блога --- */
.ui-wysiwyg .si-banner { margin: 0 0 2rem !important; }
.ui-wysiwyg .si-banner img {
  width: 100% !important;
  border-radius: 8px !important;
  display: block !important;
}

/* --- 35% картинка + 65% текст --- */
.ui-wysiwyg table.si-imgtext {
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-collapse: collapse !important;
  margin: 1.5rem 0 !important;
}
.ui-wysiwyg table.si-imgtext td {
  padding: 0 !important;
  border: none !important;
  vertical-align: top !important;
}
.ui-wysiwyg table.si-imgtext tr:hover td { background: transparent !important; }
.ui-wysiwyg .si-imgtext__img { width: 35% !important; padding-right: 2rem !important; }
.ui-wysiwyg .si-imgtext__img img { width: 100% !important; border-radius: 6px !important; }
.ui-wysiwyg .si-imgtext__text { width: 65% !important; }

/* --- Галерея миниатюр --- */
.ui-wysiwyg table.si-gallery {
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-spacing: 0.8rem 0 !important;
  border-collapse: separate !important;
  margin: 2rem 0 !important;
}
.ui-wysiwyg table.si-gallery td {
  padding: 0 !important;
  border: none !important;
}
.ui-wysiwyg table.si-gallery tr:hover td { background: transparent !important; }
.ui-wysiwyg table.si-gallery img {
  width: 100% !important;
  border-radius: 6px !important;
  display: block !important;
  cursor: zoom-in !important;
  transition: transform 0.2s !important;
}
.ui-wysiwyg table.si-gallery a:hover img { transform: scale(1.02) !important; }
/* Модификатор для галереи из одного фото — не растягиваем на всю ширину */
.ui-wysiwyg table.si-gallery.si-gallery--single {
  max-width: 60rem !important;
  margin: 2rem auto !important;
}
/* Подзаголовки разделов фотогалереи */
.ui-wysiwyg h3.si-gallery__title {
  margin-top: 3.5rem !important;
  margin-bottom: 1.5rem !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: var(--theme-primary-color, #C0392B) !important;
}