/* Первый экран главной, 06.10.2026 (hero-split.php).
   Половина экрана — текст и кнопки, половина — кадр с дверью. Секция
   остаётся .h2-hero: фон, высота и отступ под фиксированную шапку берутся
   из theme.css. Внутренние блоки — свои классы. */

html body.fg-preview .h2-hero.hs-hero{
  display:grid !important;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  align-items:stretch !important;
  background:#0b1016 !important;
  /* Компактнее полного окна; длинный текст может увеличить высоту. */
  min-height:clamp(560px,calc(84svh - var(--vt-nav-h)),760px) !important;
  overflow:hidden;
}

/* Левая колонка. Левое поле — как у шапки (60u), на экранах шире 1920 px
   текст встаёт на одну вертикаль с логотипом. */
.hs-hero__copy{
  position:relative; z-index:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.3rem,2.8vh,2.1rem);
  padding-block:clamp(2rem,4vh,3rem);
  padding-inline:max(calc(60 * var(--u)), calc((100vw - 1920px) / 2 + 60 * var(--u))) clamp(1.5rem,3vw,3.5rem);
  color:#fff;
}
html body.fg-preview .h2-hero.hs-hero h1{
  margin:0; color:#fff;
  font-size:clamp(2rem,3.1vw,3.4rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.005em;
  /* Старые слои первого экрана запрещают перенос заголовка. */
  white-space:normal !important; max-width:16ch; text-wrap:balance;
}
.hs-hero__lead{
  margin:0; max-width:46ch;
  font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.6;
  color:rgba(255,255,255,.78);
}

/* Кнопки — строкой под текстом. */
.hs-hero__act{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:clamp(.4rem,1.2vh,1rem)}
html body.fg-preview .hs-hero__act .fg-button{
  min-height:54px; padding:1.05rem 1.7rem;
  font-family:inherit; font-size:.78rem; letter-spacing:.08em;
  justify-content:space-between; gap:.9rem; cursor:pointer; white-space:nowrap;
}
/* 07.10.2026: основные кнопки шапки и hero используют один цвет,
   включая наведение. Повышенная специфичность перекрывает старые слои. */
html body.fg-preview .nav .nav-cta.nav-cta.nav-cta,
html body.fg-preview .hs-hero__act .fg-button-filled.fg-button-filled.fg-button-filled{
  background:var(--sk-gold,#a87926) !important;
  border-color:var(--sk-gold,#a87926) !important;
  color:var(--sk-on-gold,#16171b) !important;
  box-shadow:none !important;
}
@media(hover:hover){
  html body.fg-preview .nav .nav-cta.nav-cta.nav-cta:hover,
  html body.fg-preview .hs-hero__act .fg-button-filled.fg-button-filled.fg-button-filled:hover{
    background:var(--sk-gold-h,#946a21) !important;
    border-color:var(--sk-gold-h,#946a21) !important;
    color:var(--sk-on-gold,#16171b) !important;
  }
}
html body.fg-preview .hs-hero__act .fg-button:not(.fg-button-filled){
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.4); color:#fff;
}
html body.fg-preview .hs-hero__act .fg-button > [aria-hidden="true"]{flex:0 0 auto}

/* Правая колонка: кадр. Дверь на снимке — 53–70% ширины, точка
   кадрирования 80% ставит её по центру колонки на ширинах 1100–1920.
   Кадр расширен влево, переход занимает 36% его ширины. */
.hs-hero__photo{
  position:relative; min-height:100%;
  margin-left:-7vw;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 10%,rgba(0,0,0,.7) 22%,#000 36%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.22) 10%,rgba(0,0,0,.7) 22%,#000 36%);
}
.hs-hero__photo img{
  position:absolute; inset:0;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:80% 50%;
}

/* Подсветка: снизу кадр с выключенной полосой, сверху — оригинал.
   Кадры отличаются только полосой и её отражением на полу, поэтому
   «дышит» только подсветка. Цикл начинается с яркой фазы — первый
   показ (LCP) идёт с горящей полосой. */
.hs-hero__lit{animation:hs-door-glow 6s ease-in-out 1s infinite}
/* Первую секунду подсветка просто горит (animation-delay), потом цикл:
   держится ~1 с, плавно гаснет, плавно загорается. */
@keyframes hs-door-glow{
  0%,18%,100%{opacity:1}
  59%{opacity:.06}
}
@media (prefers-reduced-motion:reduce){
  .hs-hero__lit{animation:none}
}

@media(max-width:1200px){
  html body.fg-preview .h2-hero.hs-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hs-hero__photo img{object-position:76% 50%}
}

/* Узкий экран: текст сверху, кадр под ним во всю ширину. */
@media(max-width:900px){
  html body.fg-preview .h2-hero.hs-hero{
    grid-template-columns:minmax(0,1fr);
    min-height:0 !important;
  }
  .hs-hero__copy{padding:2.2rem 24px 1.2rem; gap:1.1rem}
  html body.fg-preview .h2-hero.hs-hero h1{font-size:clamp(1.7rem,7vw,2.3rem) !important}
  .hs-hero__lead{font-size:1rem}
  .hs-hero__act{flex-direction:column; gap:.7rem}
  html body.fg-preview .hs-hero__act .fg-button{width:100%; min-height:50px}
  .hs-hero__photo{
    margin-left:0;
    min-height:0; aspect-ratio:4 / 3.4;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);
            mask-image:linear-gradient(180deg,transparent 0,#000 18%);
  }
  .hs-hero__photo img{object-position:62% 45%}
}
@media(max-width:480px){
  .hs-hero__copy{padding-inline:20px}
}