/* Новый первый экран сложной карточки (шаблон 81) — разметка в modules/item.php ({{CardHero}}, тумблер «Новый первый
   экран» в «Сложной карточке»), видео и «Читать полностью» — js/2024/card81-hero.js.
   Одна панель #F5F5F7 (как шапка). ПК и планшет лёжа (от 1024 px): слева текст, справа рамка 16:9 высоты --c81-h0 (ниже) —
   без сжатия видео и чёрных полос, карточка забирает остальную ширину. Телефон, планшет стоя и узкое окно (до 1023 px) —
   столбиком, как карточка 2026 на телефоне: рамка во всю ширину панели сверху, под ней название, цена и кнопки.
   Цвета сайта, без теней; фиолетовые — название, цена, кнопка, значки. */

/* прежний баннер и нижний блок с роликом на этом экране не нужны (скрипт модуля их ещё и убирает); пустой блок YouTube
   (отступ 40px) скрипт страницы убирает после отрисовки — всё ниже текста подпрыгивало, прячем сразу */
.c81-hero ~ .banner-new,
.c81-hero ~ .banner-new--icon,
.c81-hero ~ .video-new,
.c81-hero ~ .video-new-tube:not(:has(iframe)) { display: none !important; }

.c81-hero { position: relative; padding-top: 126px; margin-bottom: 24px; color: #121212; }
.c81-hero .breadcrumbs-cat { padding: 0; margin: 0 0 18px; }
.c81-hero .breadcrumbs-cat__inner span, .c81-hero .breadcrumbs__link { color: #9a9aa1; opacity: 1; }
.c81-hero .breadcrumbs__link:last-child span { color: #121212; }
.c81-hero .breadcrumbs-cat__inner svg path { stroke: #9a9aa1; }

.c81-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px; border-radius: 30px; background: #F5F5F7; }

/* Высота рамки — здесь, а не скриптом: первая отрисовка сразу итоговая (раньше скрипт ставил её после загрузки — экран
   прыгал при обновлении страницы). Обычная — рамка на 7/12 ширины панели: (ширина панели − 72) × 7/12 × 9/16 (698×392 на
   ≥1366). Экран не плющим: обычная, пока экран с шапкой и текстом под ним влезает в окно с зазором 16 px (без рамки это
   126 + 34 + 48 + 24 + 121 = 353 px); не влезает — ниже, но не меньше 87% обычной, остаток текста — за край окна.
   Скрипт высоту не трогает; длинный текст карточки не влез — карточка выше рамки, рамка по центру. Без единиц
   контейнера (старые браузеры) — 392. */
@supports (height: 1cqw) {
  .c81-hero .container { container-type: inline-size; }
  .c81-panel { --c81-hmax: calc((100cqw - 72px) * 0.328125); --c81-h0: clamp(calc(var(--c81-hmax) * 0.87), calc(100vh - 369px), var(--c81-hmax)); }
}

/* текст: от линии 24 + 32 = 56px от края панели; высота — как у рамки, длинный текст не обрезается: карточка выше рамки,
   рамка по центру. Рамка ниже 340 — поля и промежутки плотнее: поля 24 → 12, промежутки 18 → 14 */
.c81-card { --c81-hc: var(--c81-h0, 392px); --c81-gap: clamp(14px, calc(var(--c81-hc) / 2 - 152px), 18px);
  display: flex; flex-direction: column; justify-content: center; gap: var(--c81-gap); min-width: 0; min-height: var(--c81-hc);
  padding: clamp(12px, calc(var(--c81-hc) - 316px), 24px) 8px clamp(12px, calc(var(--c81-hc) - 316px), 24px) 32px; }
.c81-card__top, .c81-card__bottom { display: flex; flex-direction: column; gap: var(--c81-gap, 18px); }

/* название градиентом по буквам: тёмный → светлый фиолетовый */
.c81-title { width: fit-content; max-width: 100%; margin: 0; font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #2A1A63, #8C78D8); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.c81-sub { margin: 0; font-size: 15px; line-height: 1.45; color: #55555c; }
.c81-pricerow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.c81-price { font-size: 26px; font-weight: 700; line-height: 1.1; color: #121212; }
.c81-price span { font: inherit; }
.c81-art { display: flex; align-items: center; gap: 2px; font-size: 13px; line-height: 20px; color: #6e6e73; }
.c81-art b { margin-left: 4px; font-weight: 500; color: #3b3b3b; }
.c81-actions { display: flex; align-items: center; gap: 10px; }
.c81-btn { display: flex; align-items: center; justify-content: center; flex: 0 1 250px; height: 46px; padding: 0 22px; border: 0; border-radius: 100px; background: #705ABF; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s; }
.c81-ico { display: block; flex: none; width: 44px; height: 44px; color: #705ABF; }
.c81-ico svg { display: block; width: 100%; height: 100%; }
.c81-pdf { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 14px; font-weight: 500; color: #705ABF; }
.c81-pdf svg { flex: none; width: 18px; height: 18px; }

/* рамка 16:9 по высоте */
.c81-media { position: relative; display: block; overflow: hidden; height: var(--c81-h0, 392px); aspect-ratio: 16 / 9; border-radius: 20px; background: #ececf0; }
.c81-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* автоплей из «Видео» (2:1 в рамке 16:9 — края по ~6% срезаются): с выключенной модалкой — сразу, фото под ним нет, до
   первого кадра рамка тёмная (--live); ролик с модалкой проявляется поверх запасного фото, когда пошёл */
.c81-media--live { background: #16141d; }
.c81-bgv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.c81-bgv.is-on { opacity: 1; }
/* «плей» — как на карточке 2026 (#mainVideoPlayBtn): полупрозрачный чёрный круг 64px, при наведении scale(1.1) */
.c81-play { position: absolute; left: 50%; top: 50%; display: block; width: 64px; height: 64px; transform: translate(-50%, -50%); transition: transform .2s ease; }
.c81-play svg { display: block; width: 100%; height: 100%; }

/* текст под экраном («Топ блок» карточки, .textbox-new): плашка #F5F5F7, заголовок не выводится (повторял название),
   две строки описания под маской и «Читать полностью» — раскрывается плавно (max-height до полной высоты, её ставит скрипт) */
.c81-hero ~ .textbox-new { display: block; margin-top: 24px; padding: 22px 32px 18px 56px; border-radius: 30px; background: #F5F5F7; }
.c81-hero ~ .textbox-new .textbox-new__title { display: none; }
.c81-hero ~ .textbox-new .textbox-new__text { max-height: 3.2em; overflow: hidden; margin: 0; text-align: left; font-size: 16px; line-height: 1.6; color: #3b3b3b;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); transition: max-height .9s cubic-bezier(.16, 1, .3, 1); }
.c81-hero ~ .textbox-new.is-open .textbox-new__text, .c81-hero ~ .textbox-new.c81-short-text .textbox-new__text { max-height: var(--c81-full, 40em); -webkit-mask-image: none; mask-image: none; }
.c81-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; border: 0; background: none; color: #705ABF; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.c81-more svg { transition: transform .4s ease; }
.c81-hero ~ .textbox-new.is-open .c81-more svg { transform: rotate(180deg); }
/* «Читать полностью» — в разметке сразу (modules/item.php); описание в две строки и короче — кнопки не видно, место
   остаётся (скрипт узнаёт это после загрузки — убранная кнопка сдвинула бы всё ниже) */
.c81-hero ~ .textbox-new.c81-short-text .c81-more { visibility: hidden; }

/* наведение — только там, где оно есть (на телефоне :hover залипает после тапа) */
@media (hover: hover) {
  .c81-btn:hover { background: #5b47a6; color: #fff; }
  .c81-pdf:hover, .c81-more:hover { text-decoration: underline; }
  .c81-media:hover .c81-play { transform: translate(-50%, -50%) scale(1.1); }
}
/* «листайте вниз» — «мышка» прежнего баннера (.mouse-icon и анимация колёсика drop — style2024.css) в цветах экрана и чуть
   меньше: по центру, посреди свободного места под текстом. От 1024 px и только когда ниже экрана ничего не видно (макбук);
   появляется после загрузки, исчезает при первой прокрутке — js/2024/card81-hero.js */
.c81-scroll { position: fixed; left: 50%; z-index: 5; transform: translateX(-50%); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.c81-scroll.is-on { opacity: 1; }
.c81-scroll .mouse-icon { width: 20px; height: 34px; border-color: #705ABF; border-radius: 14px; opacity: .5; }
.c81-scroll .mouse-icon .wheel { background: #705ABF; }
@media (prefers-reduced-motion: reduce) {
  .c81-hero ~ .textbox-new .textbox-new__text, .c81-more svg, .c81-bgv { transition: none; }
  .c81-scroll .mouse-icon .wheel { animation: none; }
}

/* серые подложки ниже первого экрана — в #F5F5F7, как шапка: «Было круто», «Готовые модули» и плашки модулей (были #F2F2F2) */
.c81-hero ~ .gallery, .c81-hero ~ #card_complects, .c81-hero ~ #card_complects .modules-item__bot-item { background-color: #F5F5F7; }

/* до 1300 px сайт отодвигает текстовый блок на 30px от края, а панель стоит в контейнере (15px) — ровняем по панели */
@media (max-width: 1300px) {
  .c81-hero ~ .textbox-new { margin-left: 15px; margin-right: 15px; }
}

/* 1024–1199 (планшет лёжа, узкое окно ноутбука): карточка уже — название и цена мельче, отступ слева меньше */
@media (max-width: 1199px) {
  .c81-card { padding-left: 24px; }
  .c81-title { font-size: 32px; }
  .c81-price { font-size: 24px; }
}

/* до 1023 px — столбиком: рамка 16:9 во всю ширину панели сверху (в разметке она после текста — order), под ней текст;
   высоту по окну не подгоняем. На низком окне (телефон лёжа) рамка не выше окна за вычетом шапки — по центру. */
@media (max-width: 1023px) {
  .c81-panel { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px; border-radius: 24px; }
  .c81-media { order: -1; width: 100%; max-width: calc((100vh - 200px) * 16 / 9); height: auto; margin: 0 auto; border-radius: 16px; }
  .c81-card { --c81-gap: 18px; min-height: 0; justify-content: flex-start; padding: 24px 8px 8px; }
}

/* телефон (до 768 px включительно шапка сайта — 78px): плотнее, название 28px, кнопка «Рассчитать стоимость» тянется на
   свободное место рядом со значками, «плей» 56px */
@media (max-width: 768px) {
  .c81-hero { padding-top: 92px; margin-bottom: 0; }
  /* крошки — одной строкой со скроллом, без полосы прокрутки; текущая страница (последний пункт) не выводится — как у
     карточки 2026 */
  .c81-hero .breadcrumbs-cat { max-width: none; margin-bottom: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .c81-hero .breadcrumbs-cat::-webkit-scrollbar { display: none; }
  .c81-hero .breadcrumbs-cat span.breadcrumbs__link,
  .c81-hero .breadcrumbs-cat__inner > svg:has(+ span.breadcrumbs__link) { display: none; }
  .c81-panel { padding: 12px; }
  .c81-card { --c81-gap: 14px; padding: 18px 4px 4px; }
  .c81-title { font-size: 28px; line-height: 1.1; }
  .c81-price { font-size: 24px; }
  .c81-actions { flex-wrap: wrap; gap: 8px; }
  .c81-btn { flex: 1 0 auto; max-width: 320px; height: 48px; padding: 0 16px; }
  .c81-play { width: 56px; height: 56px; }
  .c81-hero ~ .textbox-new { margin-top: 12px; padding: 16px 20px 14px; border-radius: 24px; }
  .c81-hero ~ .textbox-new .textbox-new__text { max-height: 3.1em; font-size: 15px; line-height: 1.55; }
}
/* узкий телефон: кнопка с двумя значками в строку влезает с 348 px только с текстом 14px (360 — частая ширина Android);
   уже — кнопка на всю строку, значки вместе строкой ниже */
@media (max-width: 374px) {
  .c81-btn { padding: 0 14px; font-size: 14px; }
}
@media (max-width: 347px) {
  .c81-btn { flex-basis: 100%; }
}