/**
 * RNG · раздел дисков — герой «Амбиент» (вариант 3, согласован 11.09.2026)
 * Видео на весь герой фоном + тёмный overlay, слоган по центру,
 * светлая кнопка «Explore designs» -> фирменная контурная, ручной Play скрыт
 * (видео и так автозапускается muted-циклом из wheels-catalog-v71.js).
 * Подключается ПОСЛЕ wheels-catalog-v71.css, только на рубрике wheels.
 * Откат: убрать enqueue rng-wheels71-hero + удалить файл.
 */

/* ---- герой на всю высоту, видео фоном ---- */
.brand-hero{
  position:relative;
  min-height:min(90vh,860px);
  padding:0;
  overflow:hidden;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:#0A0A0B;
}
.brand-hero .brand-film{
  position:absolute;inset:0;
  margin:0;width:100%;height:100%;
  aspect-ratio:auto;max-height:none;
  background:#0A0A0B;z-index:0;pointer-events:none;
}
.brand-hero .brand-film video{
  width:100%;height:100%;object-fit:cover;
}
/* затемнение поверх видео — читаемость слогана */
.brand-hero .brand-film::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 36%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(10,10,11,.52) 0%, rgba(10,10,11,.26) 44%, rgba(10,10,11,.74) 100%);
}
/* ручной Play не нужен — амбиентный фон */
.brand-hero .brand-film-toggle{display:none;}

/* ---- слоган по центру, поверх видео ---- */
.brand-hero .brand-hero-copy{
  position:relative;z-index:2;
  width:100%;max-width:1100px;margin:0 auto;
  padding:0 6%;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  text-align:center;
  gap:clamp(18px,3vw,30px);
}
.brand-hero .brand-hero-copy .eyebrow{
  width:auto;margin:0;
  color:rgba(244,243,241,.72);
  letter-spacing:.24em;font-size:12px;
}
.brand-hero .brand-hero-copy h1{
  letter-spacing:.01em;
  text-shadow:0 2px 34px rgba(0,0,0,.55);
  text-wrap:balance;
}

/* ---- действия по центру, фирменная контурная кнопка ---- */
.brand-hero .brand-actions{
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:clamp(16px,2vw,30px);margin:0;
}
.brand-hero .brand-actions .button.light{
  margin-top:0;
  gap:10px;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  padding:15px 30px;
  letter-spacing:.14em;
  text-transform:uppercase;
  -webkit-transition:background .25s,border-color .25s;
  transition:background .25s,border-color .25s;
}
.brand-hero .brand-actions .button.light:hover{
  background:var(--wl-dim,rgba(198,242,78,.14));
  border-color:var(--wl,#C6F24E);
  color:var(--wl,#C6F24E);
}
.brand-hero .brand-actions a:not(.button){
  color:rgba(244,243,241,.82);
  text-transform:uppercase;letter-spacing:.14em;font-size:12px;
  -webkit-transition:color .25s;transition:color .25s;
}
.brand-hero .brand-actions a:not(.button):hover{color:#fff;}

/* ---- мобильные ---- */
@media (max-width:768px){
  .brand-hero{min-height:84svh;}
  .brand-hero .brand-actions{
    -webkit-box-orient:vertical;-webkit-box-direction:normal;
    -ms-flex-direction:column;flex-direction:column;
    gap:14px;width:100%;
  }
  .brand-hero .brand-actions .button.light{width:100%;}
  .brand-hero .brand-hero-copy h1{font-size:clamp(34px,9vw,52px);}
}