/* ─────────────────────────────────────────────────────────────────────────────
   Тизер «Стройка онлайн» — блок для главной, /proektyi/ и /postroennyie-doma/.
   Собран 06.08.2026. Подключается ТОЛЬКО на этих трёх страницах.

   Почему отдельный файл, а не stroyka-onlayn.css целиком: в файле раздела
   519 правил, тизеру нужны 42 из них, а 35 бьют по общим классам сайта
   (.chamfered, .tag.chamfered, .blog-filters, .video-player, .video-poster,
   .video-caption). На странице раздела они безобидны, на главной и в каталоге
   переопределили бы чужие блоки.

   Три токена объявлены в :root файла раздела и в общий бандл темы не входят
   (--font-sans, --font-mono, --size-body-m) — поэтому продублированы здесь
   локально на .lc-teaser. Без этого декларации с ними молча не применятся.
   ───────────────────────────────────────────────────────────────────────────── */

.lc-teaser {
  --font-sans: var(--default-font, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", "RobotoMono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --size-body-m: 18px;
  --lcq-plate: var(--bg-color, #f2f0ed);
}
@media (max-width: 992px) {
  .lc-teaser { --size-body-m: 16px; }
}

/* ── база живого компонента type-item ────────────────────────────────────────
   В общем бандле темы .type-item / .item-tag / .item-descr объявлены ТОЛЬКО
   под .capital-main__info .right-side — в чужой секции от них не работает
   ничего: ни плашка тега, ни косая линия над описанием. Проверено 06.08.2026
   по боевому styles.css. Поэтому база продублирована здесь под своим скоупом;
   размеры ниже её переопределяют (они сняты с героя ипотеки).
   ───────────────────────────────────────────────────────────────────────────── */

.lc-teaser__types .type-item .item-tag {
  display: inline-block;
  line-height: 100%;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: var(--brand-main-base);
  background-color: var(--brand-main-low);
  border: 0.1rem solid var(--brand-main-base);
}
.lc-teaser__types .type-item .item-descr {
  position: relative;
  color: var(--brand-main-base);
}
.lc-teaser__types .type-item .item-descr::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.3rem;
  position: absolute;
  top: 0;
  left: 0;
  /* тот же скос, что у живого компонента: линия «ломается» слева */
  transform: skewX(-32deg);
  pointer-events: none;
  transition: border-color 0.3s;
}

/* ── Вертикальный ритм ───────────────────────────────────────────────────────
   Тема разделяет секции MARGIN'ом, и разделитель принадлежит следующей секции:
   margin-top 83 / 167 / 183 / 250 px. Соседние margin схлопываются в максимум,
   поэтому отступ не удваивается. Первая версия блока держала отступ padding'ом
   внутри секции — он не схлопывается, и на главной вышло 234 сверху и 350 снизу
   (жалоба владельца 06.08), а на «Проектах» — двойной отступ от комплектаций.

   Что дают соседи (замер боевых страниц 06.08, ширина 1440):
     главная      answers-section padding-bottom 80  |  houses-section padding-top 220
     проекты      equipment-section margin-bottom 167 |  дальше подвал
     построенные  houses-main 0                       |  consultation-section 0

   Ритм темы по видимому просвету между секциями главной: 140 / 200 / 300 px —
   кратно 100 (10rem). Наш блок с правилами ниже даёт 300 сверху и 220 снизу.
   ───────────────────────────────────────────────────────────────────────────── */
.lc-teaser-section { margin: 20rem 0; }

/* Комбинатор ~, а не +: прямыми соседями секции по DOM оказываются наши же
   <link> и <script>, которые чанк печатает вокруг блока. С «+» правила молча
   не совпадали — поймано замером боевой главной 06.08. */

/* Сосед сверху меряется не по краю своей секции: у .answers-section висит
   декоративный орнамент answers_bg2.svg (::after, квадрат 608 px на 1440),
   и он ВЫХОДИТ за низ секции — на десктопе ровно на 12rem. В коробочной вёрстке
   темы после отзывов идёт .houses-section со своим padding-top 22rem, то есть
   тема оставляет орнаменту 12rem и ещё 10rem чистого просвета. Держим ту же
   меру: 22rem даёт 100 px от нижнего края орнамента до заголовка тизера.
   Первая версия правила (12rem) сажала заголовок вплотную к орнаменту —
   просвет выходил 0 px (жалоба владельца 06.08, замер боевой главной).
   Вылет орнамента и ответ темы по ширинам (замер боевой главной 06.08):
     1440 → вылет 12rem (120 px), houses 22rem   576–992 → вылет 4.5rem, houses 22rem
     1024 → вылет 12rem (85 px),  houses 22rem   ≤575    → вылет 1.5rem, houses 9rem */
.answers-section ~ .lc-teaser-section { margin-top: 22rem; }

/* сосед снизу уже дал 220 своим padding'ом — свой отступ не нужен */
.lc-teaser-section:has(~ .houses-section) { margin-bottom: 0; }

/* ── правила тизера, снятые из stroyka-onlayn.css (боевая версия 05.08.2026) ── */
.lc-teaser { position: relative; }
.lc-teaser__title { margin: 0; }
.lc-teaser__body { min-width: 0; }
.lc-teaser--section {
  display: grid;
  /* Кадр 44rem = 366 px и отбивка 4rem = 33 px — ровно колонка и gap
     трёхколоночной сетки темы (.home-advantages__content на главной:
     3 × 366.44, gap 33.3). Замер боевой 06.08: прежние 50rem/6.4rem
     не совпадали ни с одним модулем сайта. История ширины: 56 → 50
     (2026-07-10, «заголовку и пунктам больше воздуха») → 44. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 44rem);
  grid-template-areas:
    "title title"
    "body  media";
  column-gap: 4rem;
  row-gap: 4rem;
  align-items: center;
}
.lc-teaser--section .lc-teaser__title {
  grid-area: title;
  /* сам шрифт задаёт живой .section-title в разметке;
     здесь только клемма ~2/3 (правило заголовков секций) */
  max-width: 92rem;
}
.lc-teaser--section .lc-teaser__media { grid-area: media; }
.lc-teaser--section .lc-teaser__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.2rem;
}
.lc-teaser--section .lc-teaser__media { position: relative; }

/* Фирменный орнамент main_bg.svg на окне СНЯТ (владелец 06.08, скрин боевой
   страницы: «лишняя фигура затесалась»). Он задумывался выглядывающим за угол
   окна, но окну нужен overflow: hidden под маску из плашек — поэтому орнамент
   обрезался и рисовался ВНУТРИ, поверх фона. При загруженном ролике видео
   перекрывало его целиком, при ленивой загрузке он стал виден. Пользы ноль,
   мотив тот же пиксельный, что и у маски. */
.lc-teaser--section[data-section-layout="hero"] {
  grid-template-areas:
    "title media"
    "list  media"
    "btn   btn";
  align-items: start;
  row-gap: 4.8rem;
}
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__body { display: contents; }
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__types {
  grid-area: list;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem 4.8rem;   /* широкий межколонник между пунктами */
  max-width: none;      /* без клеммы: вся левая колонка, до упора в видео */
}
.lc-teaser--section[data-section-layout="hero"] [data-teaser-btn] {
  grid-area: btn;
  justify-self: end;
}
.lc-teaser__types {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: stretch;
  max-width: 46rem;
}
.lc-teaser__types .type-item { padding: 0 0 0 0.8rem; }
.lc-teaser__types .type-item .item-tag {
  font-size: 1.6rem;                /* 1:1 герой ипотеки (база capital-main — 2rem) */
  padding: 0.2rem 1.6rem;           /* 1:1 герой ипотеки */
  margin: 0 0 0 0.5rem;             /* лёгкий сдвиг тега вправо — 1:1 живой type-item */
}
.lc-teaser__types .type-item .item-descr {
  margin: 0.8rem 0 0;
  /* Отступ 10rem = 1:1 ЖИВОЙ маткапитал: скос «срабатывает» — излом
     слева, длинная линия, текст далеко справа (фидбек владельца;
     ипотечные 2.6rem прижимали текст к излому). Саму линию рисует
     базовый type-item.css (::before width:100%, --brand-main-low;
     персиковый .active оттуда же — ничего не переопределяем). */
  padding: 0.8rem 0 0.8rem 10rem;
  font-size: 1.6rem;                /* размер текста — 1:1 герой ипотеки */
  line-height: 110%;
  letter-spacing: -0.02em;
  color: var(--brand-main-mid);
}
.lc-teaser__types .type-item .item-descr::before {
  border-top: max(0.1rem, 1px) solid var(--grey-low);
  border-left: max(0.1rem, 1px) solid var(--grey-low);
}
.lc-teaser__types .type-item.active .item-descr::before {
  border-top: 0.2rem solid var(--brand-second-mid);
  border-left: 0.2rem solid var(--brand-second-mid);
}
/* Наведение подсвечивает сразу, не дожидаясь скрипта; сам скрипт переносит на
   наведённый пункт класс .active, и подсветка остаётся после ухода курсора. */
.lc-teaser__types .type-item:hover .item-descr::before {
  border-top: 0.2rem solid var(--brand-second-mid);
  border-left: 0.2rem solid var(--brand-second-mid);
}
@media (max-width: 992px) {
.lc-teaser-section { margin: 12rem 0; }
/* Ниже 992 орнамент отзывов мельчает и вылезает всего на 4.5rem — 22rem здесь
   были бы дырой в 205 px. Селектор повторён: у него специфичность выше, и без
   этой строки десктопные 22rem накрыли бы планшет. */
.answers-section ~ .lc-teaser-section { margin-top: 12rem; }
.lc-teaser--section {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "body";
    row-gap: 2.8rem;
  }
.lc-teaser--section .lc-teaser__title { max-width: 100%; }
.lc-teaser--section[data-section-layout="hero"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    grid-template-areas:
      "title title"
      "list  media"
      "btn   btn";
    column-gap: 3.2rem;
    row-gap: 2.8rem;
    align-items: start;
  }
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__title { margin-bottom: 2rem; }
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__types { grid-template-columns: 1fr; gap: 2rem; }
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__types .type-item .item-descr { padding-left: 8.6rem; }
.lc-teaser--section[data-section-layout="hero"] .btn-arrow { justify-self: end; }
}
@media (max-width: 575px) {
.lc-teaser-section { margin: 9rem 0; }
/* На телефоне орнамент вылезает на 1.5rem, а тема даёт следующей секции 9rem —
   ту же меру берёт и тизер: просвет 96 px на 480. */
.answers-section ~ .lc-teaser-section { margin-top: 9rem; }
.lc-teaser--section { row-gap: 2.4rem; }
.lc-teaser__types { max-width: none; }
.lc-teaser--section[data-section-layout="hero"] {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "media" "list" "btn";
  }
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__types { grid-template-columns: 100%; row-gap: 2.4rem; margin-top: 1.6rem; }
.lc-teaser--section[data-section-layout="hero"] .lc-teaser__types .type-item .item-descr { padding-left: 4.8rem; font-size: 1.5rem; }
}

/* ── Медиа-окно: ускоренное видео под маской из плашек ───────────────────────
   Приём боевого блока «Качество» (.lc-quality__frames[data-frames-mask="pixels"]):
   маска — не картинка, а плашки цвета фона на сетке 10×10, собранные в кластеры.
   При наведении кластер уезжает монолитом за свой край и открывает кадр.
   Раскладку кластеров строит скрипт в чанке (маска 3 — массив в правом нижнем).

   Маска работает на всех ширинах, включая телефон (решение владельца 06.08 после
   примерки четырёх раскладок). Это отличие от боевого блока «Качество», где весь
   механизм заперт в @media (min-width: 993px): там плашки нужны ради разъезда,
   здесь — ради самого рисунка, а он читается и без наведения.
   ───────────────────────────────────────────────────────────────────────────── */

.lc-teaser__media--px {
  display: block;
  position: relative;
  width: 100%;
  max-width: 44rem;   /* колонка трёхколоночной сетки темы = 366 px */
  /* пропорция фирменных масок (255×180) — тизер не растёт в высоту */
  aspect-ratio: 255 / 180;
  justify-self: end;
  overflow: hidden;
  /* фон в цвет страницы, а не #000: постер грузится ~0.5 с, и всё это время
     на месте кадра стояла чёрная дыра (замер боевой страницы 06.08) */
  background-color: var(--bg-color, #f2f0ed);
}
.lc-teaser__media--px video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Лёгкое затемнение кадра — выбор владельца 06.08 из трёх примеренных на
     стенде. Соседние формулы раздела: постеры камер 0.85 contrast .96
     saturate .95 (решение 14.07 «на live-кадрах много шума»), фото блока
     «О трансляциях» 0.82 contrast 1.03. Здесь взято мягче обоих. */
  filter: brightness(0.9) contrast(0.98);
  pointer-events: none;
}
.lc-teaser__media--px .lcq-cluster {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.45, 0, 0.2, 1);
}
.lc-teaser__media--px .lcq-px {
  display: block;
  position: absolute;
  /* 10.15%, а не 10% — перекрытие в четверть пикселя убирает светлые швы
     между соседними плашками на дробном масштабе (1:1 с боевым) */
  width: 10.15%;
  height: 10.15%;
  background-color: var(--lcq-plate, #f2f0ed);
}
.lc-teaser__media--px:hover .lcq-cluster,
.lc-teaser__media--px:focus-visible .lcq-cluster {
  transform: translate(calc(var(--px-dx, 0) * var(--px-dist, 42%)),
                       calc(var(--px-dy, 0) * var(--px-dist, 42%)));
}

/* Строка-подсказка: выходит снизу вместе с разъездом плашек. Стрелки в ней нет —
   стрелка уже занята кнопкой CTA, две подряд читались бы как два разных перехода. */
.lc-teaser__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1.2rem 1.6rem;
  background: linear-gradient(to top, rgba(38, 41, 44, 0.86) 0%, rgba(38, 41, 44, 0) 100%);
  color: var(--white-base, #fff);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.lc-teaser__media--px:hover .lc-teaser__hint,
.lc-teaser__media--px:focus-visible .lc-teaser__hint {
  opacity: 1;
  transform: translateY(0);
}

/* Сенсорные экраны: наведения нет — ни разъезда, ни строки. */
@media (hover: none) {
  .lc-teaser__media--px:hover .lcq-cluster { transform: none; }
  .lc-teaser__media--px:hover .lc-teaser__hint { opacity: 0; }
}

@media (max-width: 992px) {
  .lc-teaser__media--px { max-width: none; }
}