/* ─────────────────────────────────────────────────────────────
   S6 — «Онлайн визит»: заголовок слева, описание справа,
   ниже панорамный тур во всю ширину контейнера (1296×550).
   Секция начинается сразу с текста (сверху отступа нет),
   общая высота по эталону — 867px (735px контента + 132px внизу).
   ───────────────────────────────────────────────────────────── */
.online-visit {
  padding-bottom: 132px; /* 867 (высота секции) − 735 (низ блока тура) */
  background: var(--white);
}

/* Контейнер работает как сетка из двух колонок с переносом:
   60% (778px) + 34% (441px), тур переносится на новую строку */
.online-visit__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* ── Левая колонка: x = 72…850 ───────────────────────────────── */
.online-visit__intro {
  flex: 0 0 60%; /* 60% от 1296 = 777.6px ≈ 778px по карте */
  max-width: 60%;
}

/* Надзаголовок «Онлайн визит»: иконка + текст в одну строку.
   По карте бокс 27px высотой, текст начинается с x = 100
   (иконка 18px от x = 72 + промежуток 10px) */
.online-visit__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
  /* В токенах такого оттенка нет: это --ink с прозрачностью 0.6 */
  color: rgba(47, 53, 68, 0.6);
}

.online-visit__eyebrow-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--brand);
}

/* ── Заголовок секции: y = 37…115, две строки по 38.85px ─────── */
.online-visit__title {
  margin-top: 10px; /* 37 − 27 = 10px от надзаголовка */
  font-family: var(--font-body);
  font-size: 37px;
  line-height: 38.85px;
  font-weight: 700;
  color: var(--ink);
}

/* ── Правая колонка: описание, x = 850…1291, 5 строк по 27px ─── */
.online-visit__text {
  flex: 0 0 34%; /* 34% от 1296 = 440.6px ≈ 441px по карте */
  max-width: 34%;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  color: var(--muted);
}

/* ── Панорамный тур: во всю ширину, y = 185…735 ──────────────── */
.online-visit__tour {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 50px; /* 185 − 135 (низ описания) = 50px */
}

.online-visit__frame {
  display: block;
  width: 100%;
  height: 550px; /* вместе с рамкой: border-box */
  /* На сайте у врезки собственные значения, отличные от токенов */
  border: 1px solid #eee;
  border-radius: 25px;
  overflow: hidden;
  background: var(--white);
}

/* ─────────────────────────────────────────────────────────────
   Планшет: колонки схлопываются в одну, отступы уменьшаются
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .online-visit {
    padding-bottom: 80px;
  }

  .online-visit__intro,
  .online-visit__text {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .online-visit__text {
    margin-top: 20px;
  }

  .online-visit__title {
    font-size: 32px;
    line-height: 36px;
  }

  .online-visit__tour {
    margin-top: 36px;
  }

  .online-visit__frame {
    height: 460px;
  }
}

/* ─────────────────────────────────────────────────────────────
   Телефон
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .online-visit {
    padding-bottom: 56px;
  }

  .online-visit__eyebrow {
    font-size: 19px;
    line-height: 22px;
    gap: 8px;
  }

  .online-visit__eyebrow-icon {
    width: 16px;
    height: 16px;
  }

  .online-visit__title {
    margin-top: 8px;
    font-size: 26px;
    line-height: 30px;
  }

  .online-visit__text {
    margin-top: 16px;
    font-size: 16px;
    line-height: 25px;
  }

  .online-visit__tour {
    margin-top: 28px;
  }

  .online-visit__frame {
    height: 380px;
    border-radius: var(--radius);
  }
}