/* =========================================================================
   MONARQUE — ХИРО-БЛОК (эталон: dollshouse.online, замер 1440x1000)
   Хиро кончается на y=490 при ширине 1440 => 34% ширины окна.
   Подключать ПОСЛЕ styles.css:
     <link rel="stylesheet" href="static/css/hero.css">
   Вёрстку блока отдаёт frontend/static/showcases/hero.js (window.MNQ.hero).
   ========================================================================= */

.hero-compact {
  --hero-bg: #0a0a0a;
  --hero-acc: #ff9000;
  --hero-acc-2: #ffb44d;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* пропорция референса: 34vw = 489.6px при ширине 1440 */
  min-height: clamp(360px, 34vw, 560px);
  /* контент прижат к низу блока */
  padding: 5.6rem 0 3.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background-color: var(--bg, var(--hero-bg));
  isolation: isolate;
}

.hero-compact[hidden] { display: none !important; }

/* ---------- выравнивание по верху страницы ----------
   Ссылка «Перейти к содержимому» (.skip) в styles.css описана как position: fixed,
   но правило `body > *:not(.ambient):not(.site-header) { position: relative }` перебивает её
   по специфичности. Будучи инлайновым в потоке, ссылка создаёт над хиро лишнюю строку ~20px.
   Возвращаем ей fixed, чтобы хиро начиналось на y=0 (эталон: 0…490 при ширине 1440).
   Примечание для Лида: правильнее поправить это правило в styles.css. */
body > a.skip[href] { position: fixed; }

/* ---------- видео: обёртка по центру, 21/9, края уходят в чёрное ---------- */
.hero-compact__video-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  height: 100%;
  aspect-ratio: 21 / 9;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

/* боковые градиенты: 26% с каждой стороны, от #0a0a0a к прозрачному */
.hero-compact__video-wrap::before,
.hero-compact__video-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26%;
  z-index: 2;
  pointer-events: none;
}
.hero-compact__video-wrap::before {
  left: 0;
  background: linear-gradient(
    to right,
    #0a0a0a 0%,
    rgba(10, 10, 10, 0.92) 30%,
    rgba(10, 10, 10, 0.45) 70%,
    rgba(10, 10, 10, 0) 100%
  );
}
.hero-compact__video-wrap::after {
  right: 0;
  background: linear-gradient(
    to left,
    #0a0a0a 0%,
    rgba(10, 10, 10, 0.92) 30%,
    rgba(10, 10, 10, 0.45) 70%,
    rgba(10, 10, 10, 0) 100%
  );
}

.hero-compact__video-wrap img,
.hero-compact__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.85) saturate(1.05);
  pointer-events: none;
}

.hero__video { opacity: 0; transition: opacity 0.8s ease; }
/* видео в хиро всегда видимо, даже если styles.css подключён после hero.css */
.hero-compact__video-wrap .hero-compact__video,
.hero-compact__video-wrap .hero-compact__video.hero__video {
  opacity: 1;
}

/* ---------- вертикальный оверлей ---------- */
.hero-compact__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.35) 0%,
    rgba(10, 10, 10, 0) 22%,
    rgba(10, 10, 10, 0) 62%,
    #0a0a0a 100%
  );
}

/* ---------- контент: прижат к низу ---------- */
.hero-compact__body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: clamp(2.5rem, 6vw, 7rem);
  padding-right: clamp(2.5rem, 6vw, 7rem);
}
.hero-compact__content { max-width: 44rem; }
.hero-compact__slides { display: grid; }

.hero__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.3s ease;
  pointer-events: none;
  will-change: opacity, transform;
}
.hero__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s ease 0.2s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  pointer-events: auto;
}

/* ---------- порядок: пилюля-кикер -> h1 -> абзац -> кнопки ---------- */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin-bottom: 1.15rem;
  padding: 0.38rem 0.85rem;
  border-radius: 20px;
  background: rgba(255, 144, 0, 0.12);
  border: 1px solid rgba(255, 144, 0, 0.35);
  color: #ffd9a8;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* пульсирующая точка в пилюле */
.hero__dot {
  position: relative;
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--acc, var(--hero-acc));
  box-shadow: 0 0 10px var(--acc, var(--hero-acc));
}
.hero__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--acc, var(--hero-acc));
  animation: heroStatusPulseRing 1.8s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes heroStatusPulseRing {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.hero-compact h1 {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: clamp(1.65rem, 2.45vw, 2.3rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* вторая строка — оранжевая (акцентная часть заголовка уходит на свою строку) */
.hero-compact h1 span,
.hero-compact h1 em {
  display: block;
  color: var(--acc, var(--hero-acc));
  font-style: normal;
  text-shadow: 0 0 24px rgba(255, 144, 0, 0.4);
}

.hero-compact p {
  max-width: 34rem;
  margin: 0 0 1.25rem;
  color: rgba(244, 245, 247, 0.88);
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}
.hero__actions .btn {
  min-height: 2.55rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 750;
}
.hero__actions .btn--gold {
  background: var(--acc, var(--hero-acc));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(255, 144, 0, 0.25);
}
.hero__actions .btn--gold:hover {
  background: var(--acc-2, var(--hero-acc-2));
  box-shadow: 0 4px 18px rgba(255, 144, 0, 0.45);
}
.hero__actions .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
.hero__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- «Скрыть промо ✕»: правый нижний угол ВНУТРИ хиро ----------
   Владелец: «Вот это перенести в правый нижний угол внутри хироблока».
   Кнопка прижата к углу хиро с отступом 1rem от низа и 1rem от правого края.
   Отступ снизу у .hero-compact (3.4rem) держит кнопку ниже кнопок действия,
   поэтому она не наезжает на контент и не выходит за границы блока. */
.hero-compact__hide {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 14, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(244, 245, 247, 0.82);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hero-compact__hide:hover {
  background: rgba(12, 12, 14, 0.8);
  border-color: rgba(255, 144, 0, 0.55);
  color: #fff;
}

/* ---------- полоса возврата под хиро, скрыта по умолчанию ---------- */
.hero-restore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 5.2rem 1rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(244, 245, 247, 0.55);
  font-size: 0.75rem;
}
.hero-restore[hidden] { display: none !important; }
.hero-restore button {
  background: none;
  border: none;
  padding: 0;
  color: var(--acc, var(--hero-acc));
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .hero-compact { min-height: clamp(340px, 46vw, 460px); }
}
/* =========================================================================
   МОБИЛЬНЫЙ ПЕРВЫЙ ЭКРАН (≤767px). Замеры 390x844.
   Владелец: белый текст героя наезжает на светлое фото, кнопки и «Скрыть промо»
   просвечивают. Ниже — база без токенов витрины (кабинеты и любая страница
   без data-showcase). Витрины уточняют цвет подложки в sites.css §17,
   подставляя --site-bg: у светлого Конкурса слой фарфоровый, у тёмных сайтов
   чёрный. Это важно: белый текст на тёмном сайте и тёмный текст Конкурса
   требуют противоположных затемнений.
   ========================================================================= */
@media (max-width: 767px) {
  .hero-compact {
    /* Высота по содержимому: H1 + абзац + 2 кнопки + «Скрыть промо» помещаются
       без наложений, а нижний отступ держит «Скрыть промо» ниже кнопок. */
    min-height: 0;
    padding: 4.2rem 0 4.8rem;
  }
  .hero-compact__video-wrap { aspect-ratio: auto; width: 100%; }

  /* Плотный затемняющий слой: фото остаётся, текст читается на любом кадре.
     Два слоя суммируются по альфе: сверху ~0.78, снизу ~0.95. */
  .hero-compact__overlay {
    background:
      linear-gradient(
        180deg,
        rgba(6, 5, 9, 0.64) 0%,
        rgba(6, 5, 9, 0.72) 40%,
        rgba(6, 5, 9, 0.9) 82%,
        #060509 100%
      ),
      linear-gradient(
        90deg,
        rgba(6, 5, 9, 0.55) 0%,
        rgba(6, 5, 9, 0.42) 55%,
        rgba(6, 5, 9, 0.58) 100%
      );
  }

  .hero-compact__body { padding-inline: 1.25rem; }
  .hero-compact h1 { font-size: clamp(1.5rem, 6.6vw, 1.95rem); line-height: 1.12; }
  .hero-compact p { margin-bottom: 1.15rem; }

  /* Кнопки героя — НЕПРОЗРАЧНЫЕ: сплошной фон, alpha = 1 */
  .hero__actions { gap: 0.6rem; }
  .hero__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 2.75rem;
  }
  .hero__actions .btn--gold {
    background: #d9bc7a;
    border-color: #d9bc7a;
    color: #1a160c;
    box-shadow: none;
  }
  .hero__actions .btn--ghost,
  .hero__actions .btn:not(.btn--gold) {
    background: #14141c;
    border-color: rgba(217, 188, 122, 0.5);
    color: #fff;
  }

  /* «Скрыть промо» — в правом нижнем углу ВНУТРИ хиро; тап-зона не меньше
     44×44 px (требование владельца для мобилки), кнопки действия не задевает:
     нижний отступ хиро (4.8rem) больше высоты кнопки плюс отступ от края. */
  .hero-compact__hide {
    bottom: 1rem;
    right: 1rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.34rem 0.9rem;
    background: #14141c;
    border-color: rgba(217, 188, 122, 0.5);
    color: #f4f5f7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide.is-active { transition: none; }
  .hero__dot::after { animation: none; }
}