/* stacking.css (механика колоды, владелец таск 04) подключается манифестом
   base.html.twig строкой выше hero.css — с ?v=<версия темы> (ремонт N3:
   вложенный @import не версионировался и мог оставлять стейл в кэше). */

/* ============================================================
   sections/hero.css — секция «Hero». Владелец: таск 04.
   Полноэкранное видео + контент поверх. Постер ПОРТРЕТНЫЙ (1024×1536)
   при ландшафтном видео: object-fit: cover, фокус center top.
   ============================================================ */

#hero { padding-block: 0; }

.hero__frame {
  position: relative; /* якорь для абсолютного медиа-слоя (работает и при reduced-motion, когда секция static) */
  overflow: hidden;   /* клипует зум видео — без горизонтального скролла */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
}

/* --- Медиа-слой --- */
.hero__media {
  position: absolute;
  inset: 0;
  background: var(--color-surface-base); /* нет ни видео, ни постера — просто тёмная сцена */
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__poster { object-position: center top; } /* портретный кадр: держим верх (лицо) */
.hero__video  { object-position: center; }

/* Кинематографичный push-in при прокрутке: fallback от JS-переменной
   --stack-progress (её ведёт stacking.js) */
.hero__poster,
.hero__video {
  transform: scale(calc(1 + 0.08 * var(--stack-progress, 0)));
  transform-origin: 50% 30%;
}

/* Прогрессив: настоящие scroll-driven animations — эффект едет на компоузере.
   Анимация в каскаде сильнее обычного правила, JS-fallback ей не мешает. */
@supports (animation-timeline: scroll()) {
  html.stack-ready .hero__poster,
  html.stack-ready .hero__video {
    animation: hero-push linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
}
@keyframes hero-push {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Затемняющая вуаль для контраста текста поверх видео */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface-base) 20%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-base) 35%, transparent) 40%,
      color-mix(in srgb, var(--color-surface-base) 70%, transparent) 62%,
      color-mix(in srgb, var(--color-surface-base) 88%, transparent) 100%);
}

/* --- Контент --- */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding-block: var(--space-6) var(--space-6);
}

/* Бейдж лежит поверх кадра, а яркость кадра не контролируется (постер, видео,
   любой момент ролика). Поэтому под текстом — НЕПРОЗРАЧНАЯ плашка базовой
   поверхности: контраст золота к ней фиксирован (≈9:1) и не зависит от того,
   что именно в этой точке кадра. align-self не даёт плашке растянуться на всю
   колонку — она обнимает надпись. */
.hero__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-base);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 45%, transparent);
  color: var(--color-accent-primary);
  font-size: var(--text-xs);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hero__title {
  margin: 0 0 var(--space-2);
  max-width: 14ch;
  letter-spacing: 0.01em;
}

.hero__subtitle {
  /* поверх видео — только светлый первичный текст (контраст >= 4.5:1 на scrim) */
  margin: 0 0 var(--space-4);
  max-width: 560px;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Тихие якоря под CTA: не конкурируют с кнопками (R24.1) */
.hero__quiet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.hero__quiet-link {
  min-height: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero__quiet-link:hover { color: var(--color-text-primary); opacity: 1; }


/* --- Факты экспертизы --- */
.hero__facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-2) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}
.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__fact-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
}
.hero__fact-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-caption);
  line-height: var(--leading-caption);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}

@media (min-width: 769px) {
  .hero__content { padding-block: var(--space-8) var(--space-8); }
  .hero__facts { gap: var(--space-3) var(--gap-grid-lg); }
}

/* --- Меньше движения: ни зума, ни автоплеящегося видео --- */
@media (prefers-reduced-motion: reduce) {
  .hero__poster,
  .hero__video {
    animation: none !important;
    transform: none !important;
  }
  .hero__video { display: none; } /* остаётся статичный постер; JS дополнительно ставит паузу */
}