/* =========================================================
   LU-STORY — переиспользуемый «сторис»-слайдер на Swiper 11
   Работает на ВСЕХ ширинах (в отличие от lu-slider.js, который
   только мобильный). Инициализируется файлом lu-story.js.

   Зависимости:
   - Swiper 11 (bundle CSS + JS) должен быть подключён на странице
     (как и для остальных слайдеров сайта).
   - lu-cards.css желательно подключить раньше (берём --lu-card-radius).

   Разметка (минимум):
     .lu-story[.lu-story--inert]
       .swiper
         .swiper-wrapper
           .swiper-slide
             .lu-story__media > img
             .lu-story__scrim
             .lu-story__cap ( eyebrow / title / sub )
             [.lu-story__link]        — опционально, для кликабельных инстансов
         .lu-story__bars              — контейнер, полоски строит JS
         .lu-story__corner            — диагональная стрелка (svg)
         .lu-story__more              — ссылка «Подробнее» (опционально)
         .lu-story__nav
           .lu-story__btn.lu-story__btn--prev
           .lu-story__btn.lu-story__btn--next

   Настройка инстанса — переопредели токены в style="" на .lu-story
   или задай data-lu-delay="4200" (мс) для скорости автопрокрутки.
   ========================================================= */

.lu-story{
  /* Геометрия/тема — переопределяемые токены */
  --lu-story-aspect:      1 / 1;                 /* форма кадра слайда */
  --lu-story-radius:      var(--lu-card-radius, 28px);
  --lu-story-shadow:      0 20px 44px rgba(45,36,24,.20);
  --lu-story-cap-color:   #fff;

  position: relative;
}
.lu-story, .lu-story *{ box-sizing: border-box; }

/* Swiper-контейнер = сам кадр слайда */
.lu-story .swiper{
  border-radius: var(--lu-story-radius);
  overflow: hidden;
  aspect-ratio: var(--lu-story-aspect);
  box-shadow: var(--lu-story-shadow);
}
.lu-story .swiper-slide{ position: relative; }

/* Медиа */
.lu-story__media{ position: absolute; inset: 0; }
.lu-story__media img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  margin: 0 !important;                          /* глушим базовые отступы img */
  transition: transform .6s ease;
}
.lu-story .swiper-slide:hover .lu-story__media img{ transform: scale(1.04); }

/* Затемнение под тексты (сверху и снизу) */
.lu-story__scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.60) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,0) 50%),
    linear-gradient(to top,    rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%);
}

/* Подпись слайда (3 уровня) */
.lu-story__cap{
  position: absolute; left: 22px; right: 22px; top: 40px;
  color: var(--lu-story-cap-color);
  text-shadow: 0 1px 4px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.30);
}
.lu-story__eyebrow{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.lu-story__title{ font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.lu-story__sub{ font-size: 14px; opacity: .9; margin-top: 2px; }

/* Кликабельность (для переиспользования в других блоках).
   В этом блоке ссылок нет — реагирует только hover выше. */
.lu-story__link{ position: absolute; inset: 0; z-index: 3; display: block; text-decoration: none !important; }
.lu-story--inert .lu-story__link{ cursor: default; pointer-events: none; }

/* Диагональная стрелка */
.lu-story__corner{
  position: absolute; top: 20px; right: 20px; z-index: 4;
  width: 32px; height: 32px; color: #fff; opacity: .9;
  transition: transform .22s ease; pointer-events: none;
}
.lu-story:hover .lu-story__corner{ transform: translate(2px,-2px); }
.lu-story__corner .lu-icon{ width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

/* Полоски-сторис (строятся из JS: .lu-story__bar > .lu-story__bar-fill) */
.lu-story__bars{
  position: absolute; top: 16px; left: 20px; right: 60px; z-index: 5;
  display: flex; gap: 6px; pointer-events: none;
}
.lu-story__bar{
  flex: 1 1 0; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.34); overflow: hidden;
}
.lu-story__bar-fill{
  display: block; height: 100%; width: 0%;
  background: #fff; border-radius: 3px;
}

/* Стрелки перелистывания */
.lu-story__nav{ position: absolute; right: 18px; bottom: 18px; z-index: 6; display: flex; gap: 8px; }
.lu-story__btn{
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center;
  transition: background .2s ease;
}
.lu-story__btn:hover{ background: rgba(255,255,255,.32); }
.lu-story__btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.lu-story__btn .lu-icon{ width: 18px; height: 18px; }

/* «Подробнее» */
.lu-story__more{
  position: absolute; left: 22px; bottom: 24px; z-index: 6;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px;
}
.lu-story__more:hover{ border-bottom-color: #fff; }