/* ------------------------------------------------------------------
   Переходник для контента с боевого voyage-maximum.ru.

   Текст на сайте заказчика размечен своими классами (их ставит
   визуальный редактор CMS). Чтобы страницы переносились как есть,
   мы НЕ переписываем эти классы в разметке, а описываем их здесь —
   в нашей палитре и нашей типографике. Контент копируется один в один,
   а выглядит по-нашему.

   Акценты заказчика при этом сохраняются: что у него было красным,
   остаётся красным, что синим — синим, просто оттенки наши.

   Подключается ПОСЛЕ css/voyage.css (оттуда берутся --vm-red/--vm-blue).
   ------------------------------------------------------------------ */

/* --- цветовые акценты ------------------------------------------- */

/* красный: заголовки программы, цена */
.color-highlight1,
.colored-text1 {
  color: #ca2e2e;
  color: var(--vm-red); }

/* синий: подзаголовки, «В стоимость тура включено» */
.color-highlight2,
.colored-text2 {
  color: #3c4ea5;
  color: var(--vm-blue); }

.colored-text1,
.colored-text2 {
  font-weight: 700; }

/* --- заголовок уровня h2, сделанный абзацем --------------------- */

.h2-like {
  margin: 40px 0 20px;
  font-size: 18px;
  line-height: 30px;
  font-weight: 600; }

@media (min-width: 768px) {
  .h2-like {
    margin: 50px 0 25px;
    font-size: 24px;
    line-height: 36px; } }

/* Заголовки внутри цветных обёрток должны брать цвет обёртки. В
   voyage.css заголовкам текстовой колонки задан #333333, и это
   правило перебивало бы наследование — возвращаем его явно. */
.color-highlight1 h1,
.color-highlight1 h2,
.color-highlight1 h3,
.color-highlight1 h4,
.color-highlight1 h5,
.color-highlight1 h6,
.color-highlight2 h1,
.color-highlight2 h2,
.color-highlight2 h3,
.color-highlight2 h4,
.color-highlight2 h5,
.color-highlight2 h6 {
  color: inherit; }

/* Заголовки внутри цветных обёрток цвет наследуют, но у .h3 шаблона
   свои отступы — обнуляем двойной отступ от вложенности. */
.color-highlight1 > :first-child,
.color-highlight2 > :first-child {
  margin-top: 0; }

.color-highlight1 > :last-child,
.color-highlight2 > :last-child {
  margin-bottom: 0; }

/* --- списки ------------------------------------------------------ */

/* Список с круглыми маркерами — как .bulleted-list шаблона,
   но маркер красный, как у заказчика. */
.red-circle__list {
  list-style: none;
  padding: 0; }

/* Отбивка 6px — та же, что у списков темы в voyage.css: при
   межстрочном 24px типовые 12px разносили пункты дальше, чем строки
   внутри пункта. */
.red-circle__list li {
  position: relative;
  margin-top: 6px;
  padding-left: 20px; }

.red-circle__list li:first-child {
  margin-top: 0; }

.red-circle__list li::before {
  content: "";
  position: absolute;
  display: block;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #ca2e2e;
  background-color: var(--vm-red);
  border-radius: 50%; }

@media (min-width: 768px) {
  .red-circle__list li::before {
    top: 10px; } }

/* Служебная обёртка редактора: на боевом это просто отступ слева.
   Внутри списков отступ уже даёт сам список — не задваиваем. */
.info_box {
  margin-bottom: 5px; }

li.info_box {
  margin-bottom: 0; }

/* --- обёртки контента ------------------------------------------- */

.opisbk > :first-child,
.tour_descr > :first-child {
  margin-top: 0; }

.opisbk > :last-child,
.tour_descr > :last-child {
  margin-bottom: 0; }


/* --- разделители и фреймы из перенесённых текстов ----------------- */

/* <hr> со старого сайта — 234 штуки в страницах, странах и их дереве.
   Своего вида у темы для него нет, браузер рисует свою серую вдавленную
   линию в 2px, и она выбивается из стилистики страницы. Сергей попросил
   убрать везде (28.10.2026). Прячем, а не вычищаем из текстов: `<hr>`
   ставит редактор в админке, и вычищенный вернулся бы с первой правкой
   страницы, да и повторный перенос со старого сайта принёс бы его снова.
   Передумаем — снять одно правило. */
.content hr {
  display: none; }

/* Фреймы с чужих сайтов (модули подбора туров magturyview.ru на страницах
   видов отдыха) приходят с `frameborder="1"`: браузер рисует вдавленную
   рамку 2px цветом текста — у «Нового года» она получалась красной, у
   «Майских» синей. Снимаем у всех фреймов в тексте. (28.10.2026) */
.content iframe {
  border: 0; }


/* --- Команда на «О компании»: четыре карточки в ряд ---------------
   Была таблица «фото | имя | должность», 28.10.2026 её собрали сеткой
   2×2, в тот же день развернули в один ряд: при 2×2 правая половина
   колонки оставалась пустой и блок читался началом другого раздела.

   Четыре колонки в 830px дают карточку 192px — это ровно натуральная
   ширина самой маленькой фотографии (генеральный директор, 184×215),
   остальные (379–720px) ужимаются. Рамка 4:5, то есть 192×240: при
   ней фото директора растягивается на 7%, незаметно. Больше карточку
   делать нельзя — пойдёт мыло, поэтому у блока есть `max-width`:
   в колонке без сайдбара (1170px) ряд всё равно останется 830px.
   Разметку ставит _tools/about_team.php. */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 20px;
  max-width: 830px;
  margin: 25px 0 35px; }

.team__item {
  text-align: center; }

/* Обёртка держит пропорцию и обрезает фото при наведении: сам <img>
   масштабировать нельзя — он вылезет за скругление. */
.team__photo-wrap {
  display: block;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 4 / 5; }

.team__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 20px;
  transition: transform .35s ease; }

.team__item:hover .team__photo {
  transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .team__photo {
    transition: none; }
  .team__item:hover .team__photo {
    transform: none; } }

/* Имя фирменным синим — тем же, что заголовки колонки: в ряду из
   четырёх подписей чёрное имя сливалось с должностью под ним. */
.team__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--vm-blue, #3c4ea5); }

.team__position {
  margin-top: 3px;
  font-size: 12px;
  line-height: 16px;
  color: #666666; }

/* --- Контакты: карта, СБП, MAX (разметку ставит _tools/contacts_page.php) --- */

/* Карта Яндекса во всю ширину колонки; высота своя — у iframe её нет.

   ⚠ Второй селектор в каждой паре — страховка по самому iframe. На класс
   обёртки полагаться нельзя: в тексте страницы он держится не всегда
   (правка в админке, повторный перенос — и остаётся голый <div>), а без
   ширины браузер рисует iframe своими 300×150, и карта выглядит слетевшей.
   Ловим по адресу виджета, он у карты всегда один. (28.10.2026) */
.contacts-map,
.content div:has(> iframe[src*="map-widget"]) {
  margin: 20px 0 25px;
  overflow: hidden;
  border-radius: 20px; }

.contacts-map iframe,
.content iframe[src*="map-widget"] {
  display: block;
  width: 100%;
  height: 420px;
  border: 0; }

@media (max-width: 767px) {
  .contacts-map iframe,
  .content iframe[src*="map-widget"] {
    height: 320px; } }

/* Логотип слева, текст обтекает. Пункт списка не ниже картинки — через
   ::after, а не display: flow-root: тот снимает с <li> маркер списка. */
.contacts-float-wrap::after {
  content: "";
  display: block;
  clear: both; }

.contacts-float {
  float: left;
  margin: 0 15px 5px 0; }

/* Значок MAX с подписью — как кнопка-ссылка.
   Вторым селектором ловим ссылку по адресу и значку внутри: класса
   `contacts-max` в тексте страницы нет, как и у карты выше. Без него
   значок вставал в строку по базовой линии, а подпись шла подчёркнутой
   ссылкой из текста. (28.10.2026) */
.contacts-max,
.content a[href*="max.ru/"]:has(> img) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none; }

.contacts-max img,
.content a[href*="max.ru/"] > img {
  display: block;
  width: 40px;
  height: 40px; }

.contacts-max:hover,
.content a[href*="max.ru/"]:has(> img):hover {
  text-decoration: underline; }

/* До 768px ряд из четырёх даёт карточку уже 150px — подписи в три
   строки. Разворачиваем в две колонки, как было до 28.10.2026. */
@media (max-width: 767px) {
  .team {
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 24px 20px; }
  .team__name {
    font-size: 14px; } }