/* ------------------------------------------------------------------
   СЕКЦИЯ ВСТАВКИ КОДА · написана ПО ЭТАЛОНУ, а не собрана зеркалом кита.

   Пакет Claude Design под эту секцию не заказывался - решение владельца.
   Прецедент такой же есть у контактов (`site-contacts.css`), и довод тот
   же: раскладка у секции ОДНА, ось ОДНА (цвет фона), вкладка в листе
   `Design` ОДНА. Источник чисел - живой замер эталона:
   docs/konkurent/embed-zamer.md, страховка embed-strahovka.md.

   Цена решения названа вслух: правило проекта «стили секции - зеркало,
   руками не правятся» для ЭТОЙ секции снято, инструмента `adopt-embed`
   не существует. Значит правку этого файла не перетирает пересборка -
   но и защиты от расхождения с макетом больше нет.

   RTL: только логические свойства, физических нет ни одного.
   ------------------------------------------------------------------ */

/* Контейнерный запрос объявляется КАЖДЫМ китом на своей обёртке - ровно
   так же, как у обложки, предложения, показателей и отзывов. Общий узел
   один, и второе объявление ему не вредит; отсутствие же его в этом
   файле означало бы, что порог работает только когда на странице стоит
   ещё и соседняя секция. */
.ls-w{container-type:inline-size;container-name:ls}

/* ------------------------------------------------------------------
   ЕДИНИЦА ОТСТУПА У ЭТАЛОНА ТЕКУЧАЯ, И ОТ НЕЁ СЧИТАЕТСЯ ВСЯ СЕКЦИЯ.

   Замерено на его же `.website-container`:
     --spacing: clamp(.25rem, .2011rem + .2174cqi, .375rem)

   То есть шаг сетки не постоянные 4px, а от 4 до 6, и растёт он по
   ширине КОНТЕЙНЕРА, а не окна. Формула проверена тремя замерами и все
   три сошлись: 1305 -> 6.00, 753 -> 4.88, 433 -> 4.18.

   ЧИСЛА ПЕРЕСЧИТАНЫ НА НАШУ БУМАГУ, А НЕ ПЕРЕНЕСЕНЫ: наш ряд ширин
   (1120 и 390) с его рядом не совпадает, а числа, снятые в разных
   условиях, не сравнивают. По этой формуле у нас выходит 5.65 и 4.06,
   и от них считаются высота коробки, кегль, значок и зазор.

   Постоянными остаются ТРИ величины, и это тоже замер: радиус 16,
   боковое поле 24 и мера контейнера 1536 у эталона не текут.
   ------------------------------------------------------------------ */
.ls-embed{
  --ls-emb-u: clamp(4px, 3.2176px + 0.2174cqi, 6px);
  --ls-emb-max: 1536px;
  --ls-emb-gut: 24px;
  --ls-emb-r: calc(16px * var(--ls-r-k, 1));
  --ls-emb-h: calc(50 * var(--ls-emb-u));
  --ls-emb-cap: clamp(16px, 14.435px + 0.4348cqi, 20px);

  /* Широкая ветка. У эталона это `@tablet:py-20` - двадцать шагов. */
  padding-block: calc(20 * var(--ls-emb-u));
}

.ls-embed__in{
  max-inline-size: var(--ls-emb-max);
  margin-inline: auto;
  padding-inline: var(--ls-emb-gut);
}

/* ------------------------------------------------------------------
   КОРОБКА - ЭТО ФОН СЕКЦИИ, ЗАТЕМНЁННЫЙ НА ПОСТОЯННУЮ ДОЛЮ, А НЕ
   ПОСТОЯННЫЙ СЕРЫЙ.

   Замер перехода эталона со светлого на тёмный:
     фон #F9F9F9 (249) -> коробка #E9E9E9 (233), доля 0.9357
     фон #727272 (114) -> коробка #6B6B6B (107), доля 0.9386
   То есть на ТЁМНОМ фоне коробка тоже ТЕМНЕЕ секции - значит
   подмешивается чёрное, а не чернило темы.

   Выражено полупрозрачной чернотой, а не подмешиванием в переменную, и
   это не экономия: цвет секции приходит из данных клиента и живёт в
   инлайновом стиле корня, прочитать его дочерним правилом нечем.
   Полупрозрачный слой поверх любой плоскости даёт ровно тот же
   результат - и на плоскости, доставшейся от страницы, тоже.
   ------------------------------------------------------------------ */
/* КОРОБКА - ОРГАН РЕДАКТОРА, И У ПОСЕТИТЕЛЯ ЕЁ НЕТ ВОВСЕ. Она показывает
   хозяину сайта, где стоит вставка и что с ней сейчас: пусто или код есть.
   Размера от содержимого она не меняет - замерено у эталона, 1265x300 в
   обоих состояниях. */
.ls-embed__box{
  position: relative;
  min-block-size: var(--ls-emb-h);
  border-radius: var(--ls-emb-r);
  overflow: hidden;
  background: rgb(0 0 0 / 6.3%);
  border: 1px dashed color-mix(in srgb, currentColor 65%, transparent);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------
   ЧЕРНИЛО ЛЕСТНИЦЕЙ ИЗ ТРЁХ СТУПЕНЕЙ, И ЛЕСТНИЦА ПЕРЕВОРАЧИВАЕТСЯ САМА.

   У эталона на светлом подпись темнее штриха, штрих темнее рамки
   (76 < 93 < 127); на тёмном порядок зеркальный (251 > 247 > 195).
   Своего словаря цветов мы не заводим: подпись идёт `currentColor` -
   тем чернилом, которое пересчитал под фактическую плоскость
   `sc_site_v2_root()`, - а штрих и рамка отступают от него к плоскости
   на замеренную долю. Поэтому лестница переворачивается на тёмном
   фоне сама, без второго набора чисел.

   Литеральных цветов в этом файле нет ни одного - это требование
   Customize: цвет секции обязан слушаться палитры, а не таблицы.
   ------------------------------------------------------------------ */
.ls-embed__row{
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--ls-emb-u));
}

.ls-embed__ico{
  inline-size: calc(6 * var(--ls-emb-u));
  block-size: calc(6 * var(--ls-emb-u));
  flex: none;
  color: color-mix(in srgb, currentColor 92%, transparent);
}

.ls-embed__cap{
  font-size: var(--ls-emb-cap);
  /* Интерлиньяж у эталона постоянный на всех трёх ширинах: 28/20,
     24.88/17.77 и 22.93/16.38 - все три дают ровно 1.4. */
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   ЖИВОЙ КОД: ВЫСОТУ РЕШАЕТ ОН САМ.

   Постоянной высоты здесь нет и быть не должно. Обычная вставка ролика
   приходит высотой 315 точек, карта 450, виджет записи растёт по
   содержимому; коробка в 282 точки обрезала бы их все, а `overflow`
   спрятал бы обрезанное молча. Ровно так ведёт себя блок «Custom HTML»
   в самом WordPress: контейнер не мешает содержимому.

   Правило ниже - не оформление, а защита раскладки: чужая вставка часто
   приходит с жёсткой шириной в атрибуте, и на узкой бумаге она вылезла
   бы за край горизонтальной полосой. Ширину зажимаем, пропорцию нет.

   ПРАВИЛ ПО РЕЖИМУ ЗДЕСЬ НЕТ НИ ОДНОГО. Холст и живую страницу разводит
   САМ ПЕЧАТНИК: у посетителя печатается код, в редакторе - коробка.
   Прятать чужой код стилем нельзя - спрятанный, он всё равно выполнится.
   ------------------------------------------------------------------ */
.ls-embed__run > *,
.ls-embed__run iframe,
.ls-embed__run img,
.ls-embed__run video{
  max-inline-size: 100%;
}

/* ПУСТАЯ ВСТАВКА У ПОСЕТИТЕЛЯ НЕ ЗАНИМАЕТ МЕСТА.

   Печатник в этом случае не даёт содержимого вовсе, и без этой строки на
   странице остался бы отступ секции - вертикальная дыра в две с лишним
   сотни точек, объяснить которую человеку нечем. Корень секции при этом
   ОСТАЁТСЯ: исчезающая у посетителя секция - тот самый дефект цен, на
   который показал владелец. */
.ls-embed:has(> .ls-embed__in[data-blank]){
  padding-block: 0;
}

/* ------------------------------------------------------------------
   УЗКАЯ ВЕТКА. Порог 700 - общий порог проекта по ширине БУМАГИ, и
   медиазапросов к окну в вёрстке сайта нет и быть не должно.

   У эталона порог лежит между 433 и 753 (на 753 работает `py-20`, на
   433 `py-16`), то есть наши 700 попадают внутрь его интервала.
   ------------------------------------------------------------------ */
@container ls (max-width:700px){
  .ls-embed{
    padding-block: calc(16 * var(--ls-emb-u));
  }
}