/* ==========================================================================
   Секция 10 — Telegram-комьюнити
   ========================================================================== */

.community {
  overflow: hidden;
}

/* ---------- Декор ----------
   Объект секции — скриншот телеграм-чата справа, объект-окно, значит точки
   (docs/visual-language.md, «Декор: два вопроса»).

   Были кольца в зазоре между текстом и скриншотом: круг стоял ровно
   в пустоте посередине, наполовину заходил под окно и ни за чем не лежал —
   единственное кольцо на сайте, которое не было ореолом фигуры.

   Коробка 200×160 садится на внутренний нижний угол скриншота: при left
   47.4% и top 47% это 682..882 по горизонтали и 433..593 по вертикали,
   скриншот занимает 782..1389 и 196..538. Наружу выступает угол, остальное
   уходит под окно. До верхней кромки секции 433px, до нижней 328,
   до вывода справа снизу — 15px по вертикали: обрезать нечего,
   на текст узор не наезжает. */
.community__dots {
  left: 47.4%;
  top: 47%;
  width: 200px;
  height: 160px;
}

/* Колонки почти равны, текстовая чуть шире. В макете скриншот был в 1.467 раза
   шире текста, но высоту экрана задаёт именно скриншот: он растёт вместе
   с шириной колонки, а экран обязан помещаться в одно поле зрения (1440×800
   и 1366×768). Заодно широкая текстовая колонка снимает по строке с заголовка
   и с лида — это ещё 80px высоты. */
.community__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-8);
}

/* Правая колонка целиком: скриншот и вывод под ним. Раскладка по рядам сетки
   больше не нужна — в двухколоночной сетке два блока встают сами, а на узком
   экране так же сами выстраиваются потоком. */
.community__side {
  min-width: 0;
}

/* ---------- Текстовая колонка ---------- */

/* В макете заголовок мельче общего H2 — 56px на 1920, отсюда потолок clamp.
   text-wrap: wrap больше не нужен: он стоял против balance, который вместе
   с принудительным <br> добавлял заголовку пятую строку. Переноса в разметке
   нет, и balance из base.css раскладывает фразу в три ровные строки. */
.community__title {
  /* Ритм шапки общий для всех секций: бейдж → 40 → H2 → 24 → лид → 48 → контент.
     Кегль тоже общий: был 42 против 55.4 у большинства. */
  margin-top: calc(var(--s-6) + var(--s-2));
}

/* Подзаголовок здесь не лид первого экрана (38px), а текст на 22px:
   замер по ширине строки «После регистрации ты попадаешь в Telegram-чат».
   max-width снят, нижняя граница clamp опущена с 17 до 16px (это низ общей
   шкалы --fz-body): с прежними значениями фраза на 1366 вставала в три
   строки вместо двух, а лишняя строка — это 26px, которых экрану не хватало,
   чтобы уместиться в 768. Длина строки при этом остаётся в пределах меры. */
.community__lead {
  margin-top: var(--s-5);
}

/* Переносы подзаголовка. Разбивка на три строки задана заказчиком дословно
   и держится явными <br>. Ниже 900px колонка становится одноколоночной и вдвое
   уже — там разбивка бессмысленна, и переносы гасятся: текст переливается сам.
   display: none на <br> — рабочий способ, элемент просто перестаёт создавать
   перенос строки. */
.community__lead-br { display: inline; }

/* Выделение в подзаголовке — брендовым цветом, а не тёмным жирным.
   Тёмное выделение было единственным на весь сайт: в остальных секциях
   ударное слово в подзаголовке всегда фиолетовое. Толщина прежняя. */
.community__lead strong { color: var(--brand); font-weight: 600; }

/* «ЧТО ТАМ» + короткая линия. В макете линия не тянется до края колонки,
   а обрывается на 250px — flex: 1 растягивал её на все 705. */
.community__subtitle {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-7);
  color: var(--brand);
  font-size: var(--fz-h3);
  letter-spacing: var(--ls-caps-lg);
  /* Без nowrap на узком экране линия отжимает «ЧТО ТАМ» в две строки:
     сжимается текст, а не линия. */
  white-space: nowrap;
}

/* Линия не плоской заливкой, а затухающим переливом: слева она держит цвет
   заголовка, справа растворяется в фоне и не обрывается плашкой. */
.community__subtitle::after {
  content: "";
  flex: 0 1 250px;
  height: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand) 0%, rgba(124, 59, 246, .06) 100%);
}

.community__list {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

/* Пункты списка в макете крупнее основного текста: 20.3px по четырём
   замерам. Высоту пункта держит кружок значка (48), шаг между пунктами
   получается 64 — как в макете. */
.community__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

/* Кружок под значком — ступень --sm из шкалы base.css, своих размеров
   не заводим. Заливка переливом вместо плоского --brand-soft и волосяная
   кромка внутрь: тот же приём, что у значков на экране 9. */
.community__ico {
  background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px rgba(124, 59, 246, .12);
}

.community__item-text { min-width: 0; }

/* ---------- Скриншот чата ---------- */

.community__shot {
  position: relative;
  margin: 0;
}

/* Свечение под кадром. Дорогой продуктовый шот отличается от вставленной
   картинки именно этим: кадр не лежит на фоне, а висит над ним и подсвечен.
   Пятно уже кадра и затухает задолго до кромок секции, поэтому стыка
   с соседними экранами не создаёт (docs/visual-language.md). */
.community__shot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  width: 90%;
  height: 90%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124, 59, 246, .22) 0%, transparent 100%);
  pointer-events: none;
}

/* Кадр. Имитации окна приложения (точки, плашка с названием чата, белая рамка
   вокруг) здесь больше нет: она пришла из прототипа, добавляла экрану ещё один
   предмет с бортами и тенью и повторяла название, которое и так видно на самом
   скриншоте. Скриншот вписан в фон так же, как интерфейс платформы на экране 8:
   скругление, волосяная кромка по контуру (без неё светлый интерфейс сливается
   со светлым фоном страницы) и парная тень --sh-lift.
   Прокрутки внутри кадра больше нет (см. мобильный блок ниже), поэтому нет
   и overscroll-behavior-x: он переехал в утилиту .scroll-x в base.css —
   поведение ленты не может зависеть от того, в какой секции она стоит.
   overflow остаётся ради скругления: кадр режет содержимое по своим углам. */
.community__screen {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-lift), 0 0 0 1px rgba(27, 22, 51, .07);
}

/* Кадрирование по низу. Исходник 2601×1700 при ширине колонки давал 417px
   высоты — из-за него экран не влезал в одно поле зрения. Обрезано ровно
   то, что ничего не сообщает: хвост длинного поста в правой панели. Список
   тем в левой панели виден целиком, до «Помощь (Q&A)».
   Последние проценты высоты гасит маска — тот же приём, что у скриншота
   платформы на экране 8: срез приходится на середину строки поста, и без
   растворения он читается как брак картинки, а не как кадрирование. Маска
   уводит содержимое в белую подложку кадра, кромка и скругление остаются
   на месте. */
.community__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 90%, rgba(0, 0, 0, .45) 97%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 90%, rgba(0, 0, 0, .45) 97%, transparent 100%);
}

/* ---------- Вывод ---------- */

/* Полка света вместо плашки. Ручка у секции ровно одна — мера строки;
   кегль, поля и материал приходят из .verdict (base.css).

   Оговорка про меру: на десктопе она не работает. Блок стоит в правой
   колонке сетки, и его ширину задаёт колонка, а не мера — 536px на 1280,
   607 на 1440, 678 на 1600, 801 на 1920. В em это 17.8-19.1 при любом
   мониторе, то есть всегда у́же заявленных 24em. Число строк здесь меняет
   только длина фразы, и 24em оставлены как потолок для узких экранов:
   ниже 900px колонок нет, вывод идёт во всю ширину контейнера, и там мера
   снова работает. Две строки на 1280 / 1440 / 1600 / 1920 — 429+462,
   483+520, 536+578, 599+646.
   Отбивка 32: под мокапом Telegram самое светлое место на экране, и волосяная
   кромка полки рядом с его нижней кромкой теряется — на снимках она читается
   начиная примерно с этого расстояния. Меньше ставить нельзя, больше некуда:
   вывод и так стоит в правой колонке ради высоты экрана. */
.community__callout {
  --verdict-measure: 24em;
  margin-top: var(--s-6);
}

/* ---------- Адаптив ---------- */

@media (max-width: 1100px) {
  .community__grid { gap: var(--s-7); }
}

/* Условие раскладки — не только ширина.
   Второе условие добавлено из-за ландшафта телефона. На 932×430 (iPhone Plus
   и Pro Max боком) ширина проходила границу min-width: 901px, и секция
   разъезжалась в две колонки при высоте окна 430: скриншот и текст вставали
   рядом, каждый вдвое у́же, а вывод уезжал под кадр. На соседнем 844×390
   раскладка при этом была одноколоночной — один и тот же телефон боком давал
   два разных экрана. Потолок 999px обязателен: десктоп начинается с 1000
   и его раскладку это правило не касается. */
@media (max-width: 900px), (max-width: 999px) and (max-height: 599px) {
  /* minmax(0, …), а не 1fr: иначе колонка растягивается под широкий скриншот
     и вся секция уезжает за край экрана. */
  .community__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }

  /* В одну колонку скриншот встаёт под текстом во всю ширину, внутреннего
     угла у него больше нет — узор уходит вместе с раскладкой. */
  .community__dots { display: none; }

  /* Колонка одна и вдвое шире — заказчикова разбивка лида на три строки
     здесь бессмысленна, текст переливается сам. */
  .community__lead-br { display: none; }
}

@media (max-width: 700px) {
  /* ПРАВКА ЗАКАЗЧИКА: скриншот показывается ЦЕЛИКОМ.
     Было: отдельный мобильный кроп (только левая колонка со списком тем),
     пропорция 710/1240 и маска по правому краю — правой панели с постом
     на телефоне не было вовсе, а строки тем обрывались посреди слова.
     Заказчик: «его как бы не видно половину».

     Стало: тот же кадр, что на десктопе, в СВОЕЙ натуральной пропорции
     1600/1046 и без единой обрезки — ни кадрирования по 16/9, ни маски.
     На 375 это 327×214: мелко, но видно обе панели и то, что в чате идёт
     живое обсуждение. Размен назван заказчиком: «пусть будет маленький,
     но полностью вставлен».

     Пропорция задана явно, а не через aspect-ratio: auto. Разница видна
     только до загрузки картинки, и она дорогая: у lazy-картинки без
     пропорции нет зарезервированного места, и высота приезжает под уже
     отрисованный вывод секции. Число совпадает с натуральным, поэтому
     на вид не меняет ничего. */
  .community__img {
    aspect-ratio: 1600 / 1046;
    object-fit: contain;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .community__screen { border-radius: var(--r-lg); }

  /* Свечение уходит под низ кадра. Прежде оно тут просто выключалось
     (display: none): пятно в 90% ширины упиралось в поля секции и читалось
     полосой засветки вдоль кромки экрана, а не подсветкой под объектом.
     Выключать не нужно — нужно перенести туда, где его на телефоне видно:
     под нижнюю кромку кадра, контактной подсветкой. Ровно та же правка,
     что у кадра платформы на экране 8, — два одинаковых по устройству
     кадра обязаны вести себя одинаково. */
  .community__shot::before {
    left: 50%;
    top: auto;
    bottom: -5%;
    width: 68%;
    height: 11%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(124, 59, 246, .30) 0%, transparent 100%);
  }
}

@media (max-width: 640px) {
  /* Строка в две строки — кружок встаёт по её верху, а не по середине */
  .community__item { align-items: flex-start; gap: var(--s-3); }

  /* ---------- Отбивки внутри секции на телефоне ----------

     Три зазора здесь заданы под ДВЕ колонки: 48 между колонками сетки,
     48 над «ЧТО ТАМ» и 32 под скриншотом. В одну колонку они превращаются
     в вертикальные паузы подряд — на 375 секция выходит 1590px, из них
     128 приходится ровно на эти три разрыва, и ни один из них ничего
     не группирует: сверху вниз идёт один и тот же рассказ про чат.

     Ступень вниз по шкале у каждого: 48 → 32 и 32 → 24. Внутри списка
     пунктов остаётся 16, между секциями 96 — три уровня сохраняются,
     просто сжаты под ширину экрана.

     Скриншот после правки заказчика показывается целиком и занимает
     214px на 375 вместо прежних 571 — резать там больше нечего. */
  .community__grid { gap: var(--s-6); }
  .community__subtitle { margin-top: var(--s-6); }
  .community__callout { margin-top: var(--s-5); }
}

/* ---------- Вывод в две строки ----------
   Правка заказчика: «желательно в две строки». На телефоне вывод вставал
   в три: «Короче: это не мёртвый / чат, а движуха, / где зарабатывают».

   Разбор. Кегль вывода — сквозной (--fz-verdict, 21px на телефоне) и секции
   его не трогают: «у них ровно одна ручка --verdict-measure, и она меняет
   число строк, а не громкость» (docs/visual-language.md). Значит две строки
   надо добыть шириной. Замер (tools/_iv-probe.js, ширина самой длинной
   строки при переносе на две): нужна колонка не меньше 321px.

   Что мешало: база на ≤767 режет вывод до measure × .62 = 14.88em = 312px,
   а из них 16+16 съедают боковые поля блока — под текст оставалось 280.
   Отсюда две правки:
     мера 26em → блок 338px (на 375 упирается в контейнер и берёт его 327);
     боковые поля 0 → под текст уходит вся ширина блока.
   Замер после: 375 — 298+321, две строки; 393 и 430 — тоже две.
   На 320 контейнер 288 < 321, и там строки остаются три: разложить фразу
   на две в такой ширине можно было бы только кеглем, а кегль не наш.

   Поля 0 не оставляют текст без воздуха: блок теперь ровно по контейнеру,
   то есть вывод стоит на той же вертикали, что весь остальной текст экрана.
   Полка света привязана к ширине блока и едет за ним. */
@media (max-width: 767px) {
  .community__callout {
    --verdict-measure: 26em;
    padding-inline: 0;
  }
}

/* ---------- Телефон боком ----------

   Замер до правки (852×393, честная эмуляция с isLandscape): связка
   бейдж + заголовок + лид занимает 327px из 393 — 83% экрана, и первого
   пункта списка видно РОВНО НОЛЬ пикселей. Человек повернул телефон
   и получил экран, на котором нет ничего, кроме названия раздела.
   Отдельно: скриншот чата разворачивается на 788×443, то есть один объект
   выше всего окна.

   Условие то же слово в слово, что у раскрытий в историях и у скрипта
   секции 11, — телефон боком, но не десктоп в низком окне (max-width: 999).

   1. Отбивки шапки вдвое: 24 → 12. Селектор `.badge + .community__title`,
      а не просто класс: в base.css отбивку метки задаёт `.badge + :is(...)`
      со специфичностью 0-2-0, и правило в одно имя её не перебьёт.
      Кегли не трогаем — они сквозные, их место в base.css.
   2. Скриншот не кадрируется, а масштабируется. Прежде тут стояло
      height: 260px + object-fit: cover от верхнего края, то есть кадр резался
      по низу и срез уводился в подложку градиентом на ::after. После правки
      заказчика («полностью вставлен») резать кадр нельзя ни по одной оси,
      поэтому кадр показывается целиком, а в экран его ставит ограничение
      ширины: 460px при пропорции 1600/1046 дают 301px высоты — на 393
      это 77% окна, кадр помещается вместе с выводом под ним. Без ограничения
      он развернулся бы на 804×526, то есть 1,3 экрана одной картинкой.
      Градиент-срез ушёл вместе с обрезкой: гасить больше нечего. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .badge + .community__title { margin-block-start: var(--s-3); }
  .community__lead { margin-top: var(--s-3); }
  .community__subtitle { margin-top: var(--s-5); }
  .community__list { gap: var(--s-3); }
  .community__grid { gap: var(--s-5); }
  .community__callout { margin-top: var(--s-4); }

  /* Ширину ограничивает вся коробка кадра, а не только сам кадр: свечение
     под ним живёт на ::before у .community__shot и считается в процентах
     от неё — при ограничении на уровне ниже пятно осталось бы шире кадра
     и читалось бы полосой засветки поперёк экрана. */
  .community__shot {
    max-width: min(100%, 460px);
    margin-inline: auto;
  }

  .community__img {
    height: auto;
    aspect-ratio: 1600 / 1046;
    object-fit: contain;
    -webkit-mask-image: none;
            mask-image: none;
  }
}