/* Задача 43, часть 1. Сквозная обложка с видео: главная и 13 внутренних
   страниц (разметка — local/templates/fda/page-hero.php, видео вставляет
   page-hero.js). Выросла из обложки главной задач 38-40 (раньше файл
   назывался home-hero.css). Общие правила .hero — в template_styles.css;
   постраничные переопределения прежних обложек (.page-lab .hero и т. п.)
   здесь сбрасываются — у видеообложки один вид на всех страницах. */

/* Сброс переменных прежних обложек. Специфичность (0,2,2) выше, чем у
   .page-lab .hero и body.page-lab .hero, а файл подключается позже
   template_styles.css. */
html body .hero.hero--video {
  --hero-height: auto;
  --hero-bg: transparent;
  --hero-text-color: var(--color-white);
  --hero-title-transform: uppercase;
  --hero-title-spacing: 1px;
  --hero-title-weight: 600;
  --hero-title-max-width: 1160px;
  --hero-subtitle-weight: 600;
  --hero-subtitle-max-width: none;
  --hero-subtitle-gap: 12px;
  background: transparent;
}

/* <picture> — обёртка без своей коробки: позиционируется сам <img>
   (.hero__media, absolute на всю обложку). */
.hero--video picture {
  display: contents;
}

/* Видео видно сразу — пока оно грузится, показывается его постер. При
   ошибке и запрете автозапуска скрипт видео убирает, под ним картинка.
   Без плавного появления: анимаций, кроме счётчиков, на сайте нет. */

/* Затемнение (задача 39): по всей обложке 0,25 — края видео видны почти
   в полную силу, — и размытая полоса 0,45 под самим текстом
   (.hero__content::before идёт за текстом при любой высоте окна и любом
   переносе строк). Вместе под текстом ≈0,59. */
.hero--video .hero__overlay {
  background: rgba(0, 0, 0, 0.25);
}

.hero--video .hero__content::before {
  content: "";
  position: absolute;
  inset: -64px -96px;
  z-index: -1;
  border-radius: 48px;
  background: rgba(0, 0, 0, 0.45);
  filter: blur(40px);
  pointer-events: none;
}

/* ---- Главная: 100vh, крупный заголовок (задача 39) ---- */

/* Высота — на весь экран, как было. Явно: сброс выше обнуляет
   --hero-height у всех видеообложек. */
html body .hero.hero--home {
  min-height: 100vh;
}

/* Заголовок в две строки на 1440 («Контрактное производство /
   косметики» — перенос в разметке, pre-line). На 360 самое длинное слово
   «ПРОИЗВОДСТВО» умещается. */
.hero--home .hero__title {
  margin-bottom: var(--space-item);
  font-size: clamp(26px, 3.2vw + 16px, 64px);
  line-height: 1.15;
}

.hero--home .hero__subtitle {
  font-size: clamp(16px, 0.5vw + 14px, 22px);
}

/* ---- Внутренние страницы ---- */

/* Ниже главной, чтобы содержимое было видно сразу: около 60vh, от 420 до
   640px на компьютере (на 1440×900 — 540px, верх следующего блока виден).
   Сверху — шапка и крошки (как у прежних обложек), центр текста считается
   по видимой части. */
html body .hero.hero--page {
  min-height: clamp(420px, 60vh, 640px);
  padding-top: calc(var(--header-h) + var(--breadcrumbs-h));
  padding-bottom: var(--space-head);
}

.hero--page .hero__title {
  margin-bottom: var(--space-item);
  font-size: clamp(24px, 2.2vw + 16px, 52px);
  line-height: 1.15;
}

.hero--page .hero__title:last-child {
  margin-bottom: 0;
}

.hero--page .hero__subtitle {
  max-width: 760px;
  font-size: clamp(16px, 0.5vw + 14px, 22px);
}

/* Длинный подзаголовок (как на /lab, ~4 строки): кегль на ступень меньше,
   строка не шире 760px, вес легче — абзац текста, а не слоган. */
.hero--long-subtitle .hero__subtitle {
  font-size: clamp(15px, 0.3vw + 13px, 18px);
  font-weight: 500;
  line-height: 1.6;
}

/* Затемнение под крошками: крошки стоят у верхнего края обложки, где
   полосы под текстом уже нет. Сверху до низа крошек — 0,45 поверх общих
   0,25 (вместе ≈0,59, белый текст ≥4,5:1 на любом кадре), дальше плавно
   сходит на нет. */
.hero--page .hero__overlay {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.45) 0,
      rgba(0, 0, 0, 0.45) calc(var(--header-h) + var(--breadcrumbs-h)),
      rgba(0, 0, 0, 0) calc(var(--header-h) + var(--breadcrumbs-h) + 64px)),
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
}

/* Крошки поверх обложки — белые (body.has-page-hero ставит page-hero.php). */
body.has-page-hero .breadcrumbs {
  --breadcrumbs-fg: var(--color-white);
  --breadcrumbs-fg-strong: var(--color-white);
  --breadcrumbs-sep: var(--color-white);
  --breadcrumbs-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Телефон и планшет: высота по тексту плюс поля, но не меньше 360px. */
@media screen and (max-width: 980px) {
  html body .hero.hero--page {
    min-height: 360px;
    padding-top: calc(var(--header-h) + var(--breadcrumbs-h) + var(--space-item));
    padding-bottom: var(--space-head);
  }
}

/* ---- Видео ---- */

/* Окно пересекло 980px: скрипт меняет видео на подходящее, а до замены
   неподходящее скрыто, чтобы горизонтальное не мелькнуло на узком
   экране и наоборот. */
@media screen and (max-width: 980px) {
  .hero__video--desktop {
    display: none;
  }
}

@media screen and (min-width: 981px) {
  .hero__video--mobile {
    display: none;
  }
}

/* «Уменьшить движение» включили, когда видео уже шло, — видео прячется,
   под ним картинка из <picture>. */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* ---- Задача 46, часть 1: полоса между обложкой и цветной секцией ----
   Если сразу под обложкой цветная (мятная) секция, край видео и фон
   слипаются: между ними белая полоса высотой --space-head (40/32/24).
   Под обложкой белая секция — ничего не добавляется (у неё свой отступ).
   Между обложкой и секцией в разметке могут стоять <script>/<link>,
   поэтому «первая секция после обложки» — та, перед которой после
   обложки нет других секций. Новая цветная секция — дописать её класс. */
.hero--video ~ :is(.founder, .cta:not(.cta--plain), .reviews, .features-band, .minimum-band, .callback-form, .intro-banner):not(.hero--video ~ section ~ *) {
  margin-top: var(--space-head);
}