/* about.css — блок 6: «Моя школа LS — о нас».
   Замеры: Figma `1:3599` (ряд колонок) и сверка с 1920.png (блок y 2747–3775).
   Две колонки по 930 с зазором 20 (930 + 20 + 929 = 1879 ≈ 1880):
   • слева  — «Руководящий состав» и «Педагогический состав» (круглые фото + бейджи);
   • справа — карта филиалов с чипами-метками и «Государственная лицензия».
   Карта статичная (решение по CLAUDE.md, без Яндекс.API) → у блока нет поведения, JS не нужен.
   Все цвета/радиусы/тени — только переменные из base.css. */

/* Сверху 100: заголовку «Моя школа LS — о нас» нужен разгон ~120px от предыдущей
   карточки. Раньше 100 из них давал нижний padding «Выберите класс» (80+40), но
   между ними встал ЕГЭ-баннер — теперь запас держит сама секция и не зависит
   от того, какой блок стоит перед ней. */
.about { padding: 100px 0 20px; }

/* Заголовок секции: «Моя школа LS» чёрным, «— о нас» серым.
   ❗В Figma заголовок стоит от x=50, но у «Тарифов» — от 40, у «Факультативов» — от 20.
   Это несогласованность макета: держим общий отступ контейнера, чтобы левый край
   заголовков по всей странице был ровным (вынесено на согласование в PLAN.md). */
.about__title { margin-bottom: 30px; }
.about__title-muted { color: var(--color-gray-2); }

/* Тёмный акцент внутри серого абзаца — #525252 (--color-gray-1), не чёрный */
.about-dark { color: var(--color-gray-1); }

/* stretch, а не start: в макете обе колонки заканчиваются на одной линии
   (942 = 319+20+603 слева и 677+16+249 справа). На промежуточных ширинах
   натуральные высоты расходятся, поэтому колонки тянем до общей высоты,
   а разницу добирает последняя карточка каждой колонки (см. .school-video/.license). */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-cards);
  align-items: stretch;
}

.about__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-cards);
  min-width: 0;
}

.school-video,
.license { flex: 1 1 auto; }

/* У правой колонки зазор 16, а не 20 — так в макете (Figma 1:3653) */
.about__col--right { gap: clamp(8px, 0.851cqw, 16px); }

/* ── Общая белая карточка блока ─────────────────────────────── */
.about-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(16px, 1.596cqw, 30px);
}

.about-card__title {
  font-size: var(--fs-h4);      /* 28 */
  line-height: 1.2;
}

.about-card__desc {
  color: var(--color-gray-2);
  font-size: var(--fs-text);    /* 18 */
  line-height: 1.4;
}

/* ── Карточка «Руководящий состав» ──────────────────────────────
   Фото и круглая подложка стоят абсолютом (как в Figma), поэтому высоту карточки
   задаёт только текст: круг Ø359 выше карточки и срезается её нижним краем. */
.manager {
  position: relative;
  overflow: hidden;
}

/* Ширина в процентах, а не в px: круг справа спозиционирован в % от карточки,
   и фиксированные 432px наезжали на него на промежуточных ширинах 1601–1919.
   53.3% от контента (810) = 432 на 1920, дальше сжимается вместе с кругом. */
.manager__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 53.3%;
}

/* Второе предложение — тёмным (#525252); первое и третье остаются серыми */
.manager__accent { color: var(--color-gray-1); }

/* Круглая подложка — размеры Figma (нода 1:3602): 359×359 при x=531.
   531/930 = 57.1%, 359/930 = 38.6% от ширины карточки.

   Привязка снизу, а не сверху (в Figma y=20). В макете круг 359 при карточке 311,
   то есть свисает на 68px ниже её края и подрезается. Если держать его за верх,
   то на широких карточках (высоту задаёт текст, и она растёт) круг «всплывает»
   и целиком помещается внутрь — низ перестаёт подрезаться, вид не по макету.
   Свес задан через margin-bottom: процентные margin считаются от ШИРИНЫ контейнера,
   поэтому он масштабируется вместе с самим кругом.
   8.5% = 79px на карточке 930.

   ⚠️ Размер уменьшен с макетных 38.6% до 33% (правка 21.07.2026: круг обрезался
   сверху). Причина расхождения с Figma: там карточка 311 высотой, а у нас она
   рендерится 240 — текст руководителя занимает меньше строк, чем нарисовано
   в макете, и круг 359 в 240 просто не влезал (верх уходил на −40 за край).
   Ограничение считается по САМОЙ НИЗКОЙ карточке, а это ширина 1920: там текст
   идёт в 496px и переносится реже всего. Проверка: 240 − 307 + 79 = 12px
   просвета над кругом; на 1600 и 1440 карточка выше, запас только растёт.
   Если клиент захочет вернуть круг к макетным 38.6%, увеличивать надо не его,
   а высоту карточки — задать .manager min-height ≈ 16.5cqw (311 на 1920). */
.manager__disc {
  position: absolute;
  bottom: 0;
  margin-bottom: -8.5%;
  left: 59.9%;   /* центр круга сохранён на 76.4% ширины карточки */
  width: 33%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface);
}

/* Фото — размеры Figma (нода 1:3606): 308×266 при x=557. 557/930 = 59.9%, 308/930 = 33.1%.
   Экспорт с прозрачностью, подложка видна вокруг.

   Привязка не сверху (в Figma y=33), а СНИЗУ. Причина: высоту карточки задаёт текст,
   и на ширинах кроме 1920 она растёт (текст переносится чаще), а фото считается от
   ширины и, наоборот, уменьшается — между низом фото и низом карточки появлялась
   полоса пустого круга с видимой прямой границей вырезки. С `bottom: 0` срез вырезки
   всегда совпадает с краем карточки и не виден.
   ⚠️ Ширина уменьшена с макетных 33.1% до 28.5% — той же правкой 21.07.2026,
   что и у подложки: при 33.1% фото выходило 308×265 в карточку высотой 240
   и макушка срезалась на 26px. 28.5% дают 265×228, то есть ~12px просвета
   сверху — столько же, сколько у круга, поэтому пара «фото + подложка»
   осталась соразмерной. Центр совпадает с центром круга (76.4%).

   height: auto обязателен: иначе высоту берёт HTML-атрибут height="431". */
.manager__photo {
  position: absolute;
  bottom: 0;
  left: 62.15%;
  width: 28.5%;
  height: auto;
}

/* ── Карточка с обзорными роликами о школе ────────────────────
   Заменила карточку «Педагогический состав» (решение клиента 31.07.2026):
   заголовок и подпись убраны, внутри — слайдер из 3 роликов по одному на экран.

   Высота — прежний резиновый минимум карточки педсостава (603 на 1920 =
   32.074cqw). Ролик 16:9 в колонке 930 даёт как раз ~489 + подпись, поэтому
   соседняя карточка «Руководящий состав» и высоты колонок грида не едут.

   padding: 0 — видео заливает карточку целиком, без белой рамки вокруг
   тёмного кадра; скругление режет постер по углам карточки. */
.school-video {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  min-height: clamp(360px, 32.074cqw, 603px);
}

.school-video__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Механика листания — как у отзывов: нативный scroll-snap (см. createPager
   в main.js). Здесь всегда по одному ролику на страницу. */
.school-video__track {
  --per-page: 1;
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.school-video__track::-webkit-scrollbar { display: none; }

.school-video__page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}

.school-video__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
}

.school-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.school-video__item:hover .school-video__poster { transform: scale(1.03); }

/* Кружок play по центру кадра */
.school-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 6.9cqw, 90px);
  height: clamp(64px, 6.9cqw, 90px);
  border-radius: var(--radius-pill);
  /* Плотнее и с белой обводкой (просьба клиента 31.07.2026): полупрозрачный
     кружок на пёстром кадре класса читался слабо */
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: var(--color-white);
  transition: background-color 0.25s ease;
}

/* Та же оптическая поправка, что у отзывов: центр тяжести треугольника
   лежит на трети ширины, поэтому геометрическая центровка кажется сдвинутой
   влево. Процент от ширины иконки — чтобы поправка ехала вместе с кружком. */
.school-video__play svg { transform: translateX(10%); }

.school-video__item:hover .school-video__play { background: rgba(0, 0, 0, 0.8); }

/* Подпись ролика по низу кадра. Градиентная подложка обязательна:
   заголовка у карточки больше нет, и на светлых кадрах (класс у окна)
   белый текст без затемнения не читается. */
.school-video__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(40px, 5cqw, 80px) clamp(16px, 1.596cqw, 30px)
           clamp(16px, 1.596cqw, 30px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: var(--color-white);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

/* Стрелки лежат поверх произвольного фотокадра, поэтому здесь плотная
   тёмная подложка, а не рамка, как у отзывов на ровном розовом фоне. */
.school-video__arrows {
  position: absolute;
  right: clamp(16px, 1.596cqw, 30px);
  bottom: clamp(16px, 1.596cqw, 30px);
  z-index: 1;
  display: flex;
  gap: clamp(6px, 0.532cqw, 10px);
}

.school-video__arrows[hidden] { display: none; }

.school-video__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(40px, 2.66cqw, 50px);
  height: clamp(40px, 2.66cqw, 50px);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--color-white);
  transition: background-color 0.25s ease;
}

.school-video__arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.8); }

.school-video__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Карта филиалов + чипы-метки ─────────────────────────────
   Пропорция 929×677 по макету. Чипы — белые пилюли с иконкой map-pin.svg
   (той же, что у пиллов локаций в hero), посажены поверх подписей,
   впечатанных в экспорт карты.
   container-type → единицы cqw внутри = % ширины карты, чипы масштабируются с ней. */
.about-map {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 929 / 677;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* <picture> — инлайновая обёртка вокруг карты (мобильный кроп подменяется через
   <source>). display: contents убирает её из раскладки, чтобы размеры задавал
   сам <img>, как было до появления обёртки. */
.about-map picture { display: contents; }

/* Карта в макете обесцвечена — и в десктопном, и в мобильном (замер средней
   насыщенности по HSV: 2.6 и 3.9 из 255, тогда как у наших экспортов 30 и 25).
   Гасим фильтром, а не пересохранением картинок: чипы-метки лежат соседями,
   а не внутри <img>, поэтому остаются цветными. */
.about-map__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* Размеры по Figma (1:3661): padding 10/20, gap 10, иконка 24, текст 18, радиус 30 —
   пересчитаны в cqw от ширины карты 929. */
.map-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: max(6px, 1.08cqw);
  padding: max(6px, 1.08cqw) max(10px, 2.15cqw);
  border-radius: max(14px, 3.23cqw);
  background: var(--color-white);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--color-blue);
  /* ⚠️ Пол 11px обязателен. Чипы заданы в cqw от ширины карты, и на узком
     десктопе (карта ~535 при экране 1100) кегль падал до 10.4 — ниже порога
     читаемости. Пол чуть увеличивает чип, но он и должен НАКРЫВАТЬ впечатанную
     в экспорт подпись, поэтому «больше» здесь безопаснее, чем «мельче». */
  font-size: max(11px, 1.94cqw);
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 0.6cqw 2.4cqw rgba(54, 110, 223, 0.22);
  transform: translate(-50%, -50%);   /* top/left = центр чипа */
}

.map-pin img { width: max(13px, 2.58cqw); height: max(13px, 2.58cqw); flex: none; }

/* Центры чипов в % от карты — посажены поверх встроенных меток экспорта,
   чтобы иконка легла на точку, а пилюля накрыла впечатанную подпись */
.map-pin--gostiny { top: 10.5%; left: 51%; }
.map-pin--arbat   { top: 15.5%; left: 45%; }
.map-pin--butovo  { top: 92%;   left: 40%; }

/* Геленджик: единственный филиал (Красногвардейская, 38 = «Студия Анны Деменино»
   на карте map-gelendzhik.webp). Пилюля накрывает впечатанную подпись студии,
   иконка садится на здание. Значения подобраны по пикселю в браузере. */
.map-pin--gelendzhik { top: 45.7%; left: 59%; }

/* ── Карточка «Государственная лицензия» ──────────────────────
   Padding 50 (у остальных карточек 60). Скан 348×450 стоит абсолютом от верха
   карточки и нижней половиной уходит за её край — срезается overflow.
   Наклон уже есть в самой картинке, CSS-поворот не нужен. */
.license {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 2.66cqw, 50px);
}

/* Тоже в процентах (521/829), чтобы текст сжимался вместе со сканом справа */
.license__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62.8%;
}

/* 553/929 = 59.5% слева, 348/929 = 37.5% ширины.
   height: auto — иначе высоту задаёт HTML-атрибут height="900" и скан
   рисуется вдвое крупнее, наезжая на текст (см. .manager__photo). */
.license__img {
  position: absolute;
  top: 0;
  left: 59.5%;
  width: 37.5%;
  height: auto;
}

/* ─────────────────────  Адаптив (подгонка от 1920)  ───────────────────── */

/* ⚠️ Ступени 1600 и 1280 удалены: padding карточек, зазоры, высота педсостава
   и отступы бейджей теперь резиновые. Осталось единственное, что ступень
   действительно делала, — перестроение шапки педсостава в столбик; порог
   поднят до канонического 1280 и объединён с раскладкой ниже.

   Ступень 1100 (скан лицензии под текст) сведена к 1280: у неё была та же
   причина — узкая колонка, — а отдельный порог давал ещё один рывок. */
@media (max-width: 1280px) {
  .about { padding: 24px 0 20px; }


  /* ⚠️ Скан лицензии остаётся справа абсолютом, как на 1920 (свисает за нижний
     край и обрезается карточкой). Раньше здесь он переставлялся под текст
     в поток — и это ломало весь ряд: карточка вырастала на его высоту
     (447 вместо 212 на 1274), правая колонка становилась самой высокой в гриде,
     а левая растягивалась под неё, оставляя ~280px пустоты под бейджами
     педсостава. Плюс сам скан висел мелким прямоугольником с пустым полем справа.

     Единственное, что мешало оставить макетную раскладку, — колонка текста:
     на 62.8% её строки доезжают до скана (зазор 7px на 1279, −7 на 1100).
     Сужение до 55% даёт запас 25–50px на всём диапазоне; на 1920 значение
     не трогаем — там 62.8% из макета, и строки до скана не достают. */
  .license__text { max-width: 55%; }
}

@media (max-width: 1024px) {
  /* Одна колонка: сначала руководство + педсостав, затем карта + лицензия */
  .about__grid { grid-template-columns: 1fr; }

  /* Одноколоночник: фото руководителя возвращаем в обычный поток простым кругом */
  .manager {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    overflow: visible;
  }

  .manager__text { max-width: none; }

  .manager__disc { display: none; }

  .manager__photo {
    position: static;
    flex: none;
    width: 140px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-surface);
    object-fit: cover;
  }

}

/* ═══════════ Телефоны 360–767 — фрейм 1:8279, ноды 1:9695…1:9714 ═══════════
   Блоки типа B: карточки 340 при поле --page-gap (10), радиус 20, padding 20,
   вертикальный зазор 10 между всеми карточками. Замеры — Tz/mobile-360.md. */
@media (max-width: 767px) {
  /* Сверху 50 (по растру между низом синей секции и заголовком ≈47).
     Снизу тоже 50 (решение клиента 21.07.2026): раньше стояло 0 — «вузы»
     секция типа A и в PNG-макете стыкуется с карточкой лицензии вплотную.
     Но это выпадает из ритма самого макета: перед всеми остальными
     полноширинными синими секциями лежит серый зазор 50 (замеры по
     mobile-360-full.png: 4621…4671, 8222…8271, 11649…11698). Вплотную
     карточка вставала только здесь, и низ лицензии выглядел обрезанным
     краем синего блока. */
  .about { padding: 50px 0 50px; }

  /* Кегль НЕ переопределяем: идёт общий --fs-h2 (32 на ≤1200), как у остальных
     заголовков секций. В макете у «О нас» стоит 28, но это непоследовательность
     самого макета — решение клиента (20.07.2026): все заголовки одного кегля. */
  .about__title { margin-bottom: 20px; }

  .about__grid { gap: 10px; }

  .about__col,
  .about__col--right { gap: 10px; }

  .about-card { padding: 20px; }

  /* Карточке роликов на телефоне задаём пропорцию вместо унаследованной
     от педсостава высоты 360: при ширине 355 она давала почти квадрат, и
     кадр 16:9 обрезался по бокам почти вдвое. 4:3 — компромисс: обрезка
     умеренная, но под кружок play, подпись и стрелки места хватает
     (16:9 дало бы всего ~200px высоты, и они бы налезли друг на друга).
     Выравнивать высоты колонок здесь не нужно — грид уже в одну колонку. */
  .school-video {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  /* Подсветка-маркер под заголовками карточек (1:9718, 1:9724, 1:9699).
     ⚠️ Только на телефоне: на десктопе её нет (проверено кропом 1920.png).
     Заливка картинкой с явной высотой, а не обычным фоном: у фона высота равна
     content area шрифта, и плашка получилась бы выше макетных 25–30.
     width: fit-content — чтобы плашка обнимала текст, а не всю карточку. */
  .about-card__title {
    width: fit-content;
    background-image: linear-gradient(var(--color-light-blue), var(--color-light-blue));
    background-size: 100% 28px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    padding-inline: 2px;
    margin-left: -2px;
  }

  /* ── Руководящий состав (1:9716) — высота 370, фото и круг обратно в абсолют ──

     ⚠️ Размеры круга и фото ограничены сверху макетными px (правка 21.07.2026:
     на 420–767 фото закрывало текст). Раньше они стояли чистыми процентами
     от ширины карточки (69.118% / 59.118%), посчитанными под фрейм 360, а высота
     карточки — жёсткие 370px. Выше 360 карточка расширяется, круг и фото растут
     вместе с ней, а вертикали больше не становится: на 480 круг 318 наезжал
     на текст на 40px, на 767 круг 516 и фото 442×381 не влезали в 370 вовсе —
     макушка круга уходила на −32, фото ложилось прямо на абзац.
     Теперь композиция замирает на макетных 235/201 и дальше только центрируется.

     Центр композиции в макете — 169.5 из 340 = 49.85% ширины карточки, поэтому
     `left: 50%` с центрированием повторяет макет 360 с точностью до полпикселя
     и одновременно держит фото и круг соосными на любой ширине (при раздельных
     процентных left они бы разъехались, как только размеры упёрлись в потолок). */
  .manager {
    display: block;
    position: relative;
    min-height: 370px;
    overflow: hidden;
    /* Размеры пары: доля от ширины карточки, но не больше макетных px */
    --disc-size: min(69.118%, 235px);  /* 235/340 */
    --photo-size: min(59.118%, 201px); /* 201/340 */
  }

  /* Круг Ø235 в точке (52, 187) от карточки: низ (422) свисает на 52 ниже
     карточки (370) и срезается. Привязка к низу — как на десктопе, чтобы
     при более длинном тексте круг не «всплывал» внутрь карточки.
     Свес задан долей от самого круга (52/235 = 22.13%), а не от ширины карточки:
     после ограничения размера процент от карточки продолжал бы расти и утаскивал
     круг вниз сильнее, чем нужно. */
  .manager__disc {
    display: block;
    left: 50%;
    transform: translateX(-50%);
    width: var(--disc-size);
    margin-bottom: calc(var(--disc-size) * -0.2213);
  }

  /* Фото 201×174 в точке (69, 196): низ вровень с краем карточки */
  .manager__photo {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--photo-size);
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background: none;
    object-fit: fill;
  }

  /* ── Карта (1:9703) ── */
  .about-map { aspect-ratio: 340 / 247; }

  /* Чипы на телефоне привязаны ЛЕВЫМ ВЕРХНИМ углом (в макете это точки нод),
     а не центром как на десктопе. Размеры — в cqw от ширины карты (340),
     поэтому метки растут вместе с картой до 767. */
  .map-pin {
    transform: none;
    gap: 1.176cqw;                    /* 4/340 */
    padding: 1.176cqw 2.353cqw 1.176cqw 1.176cqw;
    border-radius: 8.824cqw;          /* 30/340 */
    font-size: 2.941cqw;              /* 10/340 */
  }

  .map-pin img { width: 4.118cqw; height: 4.118cqw; }   /* 14/340 */

  .map-pin--gostiny { top: 4.05%;  left: 44.41%; }   /* (151, 10) */
  .map-pin--arbat   { top: 13.36%; left: 35.59%; }   /* (121, 33) */
  .map-pin--butovo  { top: 87.04%; left: 32.94%; }   /* (112, 215) */

  /* Геленджик: тот же кроп карты, что на десктопе (пропорция совпадает), но пин
     привязан левым верхним углом. Значения выверены в браузере на 375. */
  .map-pin--gelendzhik { top: 42%; left: 45%; }

  /* ── Лицензия (1:9697) — карточка 340, padding 20, скан абсолютом ──
     Контейнер для cqw вешаем на колонку, а не на саму карточку: у карточки
     padding 20, и единица считалась бы от 300 вместо 340 (декор уехал бы влево). */
  .about__col--right { container-type: inline-size; }

  /* ⚠️ min-height обязателен. В Figma у карточки vertical: hug, то есть её
     высоту задаёт ТОЛЬКО текстовая колонка (211px), а скан лежит абсолютом и
     в расчёт не идёт: он уходил на 54px ниже карточки и срезался её overflow
     ровно посередине документа (жалоба клиента 21.07.2026). Пол = верх скана
     63 + его высота + поле 20 снизу; высота скана = ширина × 1.2931
     (пропорция исходника 696×900). На 360 даёт 285 — ровно высоту карточки
     в PNG-макете (284). */
  .license {
    display: block;
    padding: 20px;
    overflow: hidden;
    min-height: calc(83px + min(59.32cqw, 258.6px));
  }

  /* Колонка текста идёт во всю ширину карточки: заголовок в макете стоит
     в ОДНУ строку — маркер 1:9699 имеет 276×30 (по растру x 25…300),
     то есть шире 200px. Ограничение 200 — только у абзаца (нода 1:9701).
     Внутренний зазор колонки — 10, а не 20. */
  .license__text {
    max-width: none;
    gap: 10px;
  }

  .license .about-card__desc { max-width: 66.667%; }   /* 200/300 контента */

  /* Скан 156×202 в точке (204, 63) от карточки. Вылет за ПРАВЫЙ край (204+156=360
     при 340) оставляем — это приём макета, обрезку даёт overflow: hidden.
     А вот низ теперь помещается целиком: см. min-height выше.

     ⚠️ Привязка правым краем и потолок 200px — вместо чистых долей от 360.
     Мобильная раскладка нарисована под 360, и на чистых cqw к 767 скан
     раздувался до 343×443 (вдвое), карточка вырастала до 602 и превращалась
     в почти пустой белый прямоугольник. Потолок включается примерно с 456px;
     до него всё по макету — на 360 min(45.882cqw, 200px) = 156, а right: -20
     ставит левый край ровно в 204. */
  .license__img {
    position: absolute;
    top: 63px;
    bottom: auto;
    left: auto;
    right: -20px;
    width: min(45.882cqw, 200px);
    height: auto;
  }
}