/* ============================================================
   EKKSO — HERO «card-stack» слайдер
   Портирован из jh3y (CodePen NPxxawM): перекрывающиеся
   панели (z-index стопкой), контент фикс-ширины с якорем
   справа, перетаскивание между панелями + автоплей 7с.
   ============================================================ */
.hero{position:relative;background:var(--paper);padding:14px}

slideshow-stack{position:relative;display:block;width:100%;
  height:calc(100svh - 28px);max-height:940px;min-height:0}

.ss-container{
  --rad:1.2rem;                 /* радиус скругления */
  --button-width:3.4rem;        /* толщина сложенного слайда */
  --panel-padding:clamp(22px,3.4vw,56px);
  --border-color:rgba(255,255,255,.16);
  --inactive-tabs-width:calc((var(--total-tabs) - 1) * var(--button-width));
  --active-panel-width:calc(100cqi - var(--inactive-tabs-width));
  --active-panel-height:calc(100cqh - var(--inactive-tabs-width));
  --ease:linear(0 0%,.0036 9.62%,.0185 16.66%,.0489 23.03%,.0962 28.86%,
    .1705 34.93%,.269 40.66%,.3867 45.89%,.5833 52.95%,.683 57.05%,
    .7829 62.14%,.8621 67.46%,.8991 70.68%,.9299 74.03%,.9545 77.52%,
    .9735 81.21%,.9865 85%,.9949 89.15%,1 100%);
  position:relative;width:100%;height:100%;
  container-type:size;
  border-radius:var(--rad);overflow:hidden;touch-action:none;
}

/* ряд невидимых «ручек» — клик/перетягивание.
   grid-template задаётся ИНЛАЙН из JS (явной строкой), иначе
   transition не срабатывает: var(--active-tab) текстуально не меняется. */
.ss-tablist{display:grid;grid-auto-flow:column;grid-template-columns:1fr;
  position:absolute;inset:0;height:100%;pointer-events:none;z-index:20;margin:0;padding:0;list-style:none}
.ss-tablist button{width:var(--button-width);height:100%;pointer-events:all;opacity:0;cursor:grab;border:0;background:none;padding:0;position:relative}
/* расширенная тап-зона «корешков» (≥44px) на тач-экранах */
.ss-tablist button::before{content:'';position:absolute;inset:0 -12px}
@container (max-width:560px){
  .ss-tablist button::before{inset:-12px 0}
}
.ss-tablist button[aria-selected="true"]{cursor:default}

.ss-panels{display:grid;grid-auto-flow:column;grid-template-columns:1fr;height:100%}
.ss-panels,.ss-tablist{
  transition-property:grid-template-columns,grid-template-rows;
  transition-duration:.9s;transition-timing-function:var(--ease);
}
[data-dragging] .ss-panels,[data-dragging] .ss-tablist{transition:none!important}

.ss-panel{position:relative;height:100%;min-width:var(--button-width);
  border-radius:var(--rad);z-index:calc(var(--total-tabs) - var(--index))}
.ss-panel:nth-of-type(1) .ss-panel-content{width:var(--active-panel-width)}
.ss-panel:not(:nth-of-type(1)) .slide__content{padding-left:calc((var(--rad) * 2) + var(--panel-padding))}

.ss-panel-content{position:absolute;right:0;top:0;bottom:0;overflow:hidden;
  width:calc(var(--active-panel-width) + (var(--rad) * 2));
  border:1px solid var(--border-color);border-radius:var(--rad);
  box-shadow:0 22px 60px rgba(10,18,6,.34)}
.ss-panel-content img,.ss-panel-content video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ss-panel-content::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,6,.05) 0%,rgba(10,16,6,.28) 50%,rgba(8,13,4,.84) 100%)}

.slide__content{position:absolute;inset:0;padding:var(--panel-padding);
  display:flex;align-items:flex-end;container-type:inline-size;z-index:2}
.slide-text{color:#fff;max-width:min(640px,82cqi);display:grid;gap:14px;justify-items:start;
  opacity:0;visibility:hidden;translate:0 18px;
  transition:opacity .45s var(--ease),visibility 0s linear .45s,translate .7s var(--ease)}
[role="tabpanel"]:not([inert]) .slide-text{opacity:1;visibility:visible;translate:0 0;
  transition:opacity .6s var(--ease) .3s,visibility 0s,translate .7s var(--ease) .3s}
.slide-text .eyebrow{color:#fff;opacity:.86;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.slide-text h2{font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(28px,4.6cqi,56px);line-height:1.04;letter-spacing:-.022em;
  max-width:17ch;text-shadow:0 2px 22px rgba(0,0,0,.4)}
.slide-text p{font-size:clamp(15px,1.9cqi,19px);color:rgba(255,255,255,.92);
  max-width:42ch;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.slide-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px}

/* ── Вертикальная раскладка (телефон) — все слайды влезают.
   grid-template-rows/columns задаётся из JS (см. applySizes). ── */
@container (max-width:560px){
  .ss-tablist button{width:100%;height:var(--button-width)}
  .ss-panel{min-width:0;min-height:var(--button-width)}
  .ss-panel-content{width:100%;height:calc(var(--active-panel-height) + (var(--rad) * 2));top:auto;right:0;bottom:0}
  .ss-panel:nth-of-type(1) .ss-panel-content{height:var(--active-panel-height);width:100%}
  .ss-container .ss-panel .ss-panel-content{width:100%}
  .ss-panel:not(:nth-of-type(1)) .slide__content{padding-left:var(--panel-padding);padding-top:calc((var(--rad) * 2) + var(--panel-padding))}
}
@media(max-width:1023px){
  /* нижний плавающий таб-бар не должен накрывать кнопки последнего слайда */
  slideshow-stack{height:calc(100svh - 28px - 88px)}
}
@media(max-width:560px){
  /* Телефон: баннер на ВСЮ ШИРИНУ, первый слайд тянется до САМОГО ВЕРХА
     экрана (full-bleed под плавающим хедером), низ — над стеклянным
     таб-баром, чтобы последний слайд не залезал под него и сайт листался.
     «Корешки» тонкие. Жест: свайп листает; на последнем слайде свайп
     вверх отдаётся странице (см. ekkso-hero.js, touch-action). */
  .hero{padding:0}
  slideshow-stack{display:block;max-height:none;
    height:calc(100svh - 82px - env(safe-area-inset-bottom,0px));
    margin-top:0}
  .ss-container{--button-width:1.6rem;border-radius:0 0 18px 18px}
  /* первый слайд: контент опущен ниже плавающего хедера, чтобы не прятался */
  .ss-panel:nth-of-type(1) .slide__content{padding-top:calc(64px + var(--panel-padding))}
  /* текст и кнопки — на всю ширину баннера с безопасными отступами */
  .slide-text{max-width:100%}
  .slide-text h2{max-width:100%;font-size:clamp(26px,7cqi,40px)}
  .slide-text p{max-width:100%}
  .slide-actions{flex-wrap:nowrap;width:100%}
  .slide-actions .btn{flex:1;min-width:0;justify-content:center;white-space:nowrap;padding-left:14px;padding-right:14px}
}

/* ============================================================
   Плавающий «Dynamic Island» хедер над баннером (только главная)
   В покое — скруглённая плашка с безопасными отступами поверх
   баннера; при прокрутке плавно растягивается в фул-ширину бар.
   ============================================================ */
.nav#nav{
  top:30px;left:50%;right:auto;transform:translateX(-50%);
  width:min(1180px,calc(100% - 36px));
  border-radius:22px;
  box-shadow:0 12px 36px rgba(12,20,8,.20),inset 0 1px 0 rgba(255,255,255,.5);
  transition:top .55s cubic-bezier(.22,1,.36,1),width .55s cubic-bezier(.22,1,.36,1),
    border-radius .55s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,background .3s ease;
  animation:navDrop .7s cubic-bezier(.22,1,.36,1) both;
  will-change:top,width;
}
@keyframes navDrop{from{opacity:0;transform:translate(-50%,-14px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.nav#nav.scrolled{
  top:0;width:100%;border-radius:0;
  box-shadow:0 1px 0 var(--hairline),0 8px 30px rgba(20,40,30,.07);
}
@media(prefers-reduced-motion:reduce){.nav#nav{animation:none;transition:none}}
@media(max-width:560px){
  .nav#nav{top:18px;width:calc(100% - 24px);border-radius:18px}
  .nav#nav.scrolled{top:0;width:100%;border-radius:0}
}