/* =========================================================
   LU-SLIDER — упрощённый слайдер на Swiper 11
   Стили подключаются глобально через шаблон сайта.

   Зависимости:
   - Swiper 11 CSS — подключается на странице, где есть слайдер
     (через HTML-блок или глобально).
   - lu-cards.css — желательно, чтобы был подключён первым
     (используются токены --lu-card-bg, --lu-card-radius и т.п.).

   Структура слайдера в разметке:
     .lu-programs                    — корневая обёртка блока
       .lu-programs__grid            — ПК-сетка (lu-vw-cards)
       .lu-programs__slider          — мобильная версия
         .lu-slider                  — корневой контейнер инстанса
           .swiper
             .swiper-wrapper
               .swiper-slide
                 .lu-slider__card    — карточка-плашка
   ========================================================= */


/* =========================================================
   ВИДИМОСТЬ: ПК-сетка vs мобильный слайдер
   ========================================================= */
.lu-programs__grid   { display: block; }
.lu-programs__slider { display: none;  }

@media (max-width: 767px){
  .lu-programs__grid   { display: none;  }
  .lu-programs__slider { display: block; }
}


/* =========================================================
   ПК: lu-vw-cards — кликабельная версия (без эмодзи)
   ========================================================= */
.lu-programs__grid .lu-vw-card-link{
  display: block;
  text-decoration: none !important;
  color: inherit;
}
.lu-programs__grid .lu-vw-card-link .lu-vw-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
.lu-programs__grid .lu-vw-card-link:hover .lu-vw-card{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Без эмодзи — освобождаем правое поле, зарезервированное в lu-cards.css.
   Перебиваем ТОЛЬКО внутри нашего блока. */
.lu-programs__grid .lu-vw-cards .lu-vw-card__content,
.lu-programs__grid .lu-vw-cards .lu-vw-card.lu-vw-card--with-photo .lu-vw-card__content{
  padding-right: 0 !important;
}

/* Иерархия текста на ПК (3 уровня) */
.lu-programs__grid .lu-vw-card__eyebrow{
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(17,17,17,.55);
}
.lu-programs__grid .lu-vw-cards .lu-vw-card__title{
  /* основной заголовок — название программы (главный акцент) */
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: #111;
}
.lu-programs__grid .lu-vw-cards .lu-vw-card__text{
  font-size: 15px;
  line-height: 1.45;
  color: rgba(17,17,17,.78);
}


/* =========================================================
   МОБАЙЛ: «карточка-плашка»
   - цветной прямоугольник (фон)
   - изображение с отступами и закруглением только сверху
   - текстовая часть прижата к левому верху (под фото)
   - 3 уровня иерархии: eyebrow → title → desc
   ========================================================= */
.lu-slider{
  /* Размер слайда */
  --lu-sl-card-w: clamp(180px, 32vw, 260px);
  --lu-sl-gap: 14px;

  /* Цветовая схема плашки. Чтобы изменить на конкретном инстансе,
     переопредели токены прямо в HTML:
       <div class="lu-slider" style="--lu-sl-panel-bg: #355F73; ...">
  */
  --lu-sl-panel-bg:         #f5f5f5;
  --lu-sl-panel-text:       #111;
  --lu-sl-panel-text-muted: rgba(17,17,17,.62);
  --lu-sl-panel-eyebrow:    rgba(17,17,17,.5);

  /* Типографика — выровнена с базовым <p> 16px на сайте */
  --lu-sl-eyebrow-size: 14px;
  --lu-sl-title-size:   20px;
  --lu-sl-title-lh:     1.18;
  --lu-sl-desc-size:    16px;
  --lu-sl-desc-lh:      1.4;

  /* Геометрия */
  --lu-sl-radius:     22px;
  --lu-sl-img-radius: 14px;
  --lu-sl-pad:        10px;   /* отступ изображения от края карточки */
  --lu-sl-text-pad-x: 14px;
  --lu-sl-text-pad-y: 14px;

  position: relative;
  margin: 0 0 20px;
}
.lu-slider, .lu-slider *{ box-sizing: border-box; }

/* Swiper-контейнер */
.lu-slider .swiper{ overflow: hidden; }
.lu-slider .swiper-wrapper{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
}
.lu-slider .swiper-slide{
  flex: 0 0 var(--lu-sl-card-w) !important;
  width: var(--lu-sl-card-w) !important;
  height: auto;
}

/* ---------- Карточка ---------- */
.lu-slider__card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  background: var(--lu-sl-panel-bg);
  color: var(--lu-sl-panel-text);

  border-radius: var(--lu-sl-radius);
  overflow: hidden;

  text-decoration: none !important;
  cursor: pointer;
  aspect-ratio: 2/3;
}
.lu-slider__card.is-disabled{ cursor: default; pointer-events: none; }

/* Медиа-обёртка: даёт отступы со всех сторон сверху */
.lu-slider__card-media{
  flex: 0 0 auto;
  padding: var(--lu-sl-pad) var(--lu-sl-pad) 0;
  height: 50%;
}
/* Внутренний блок: маска для закругления только верхних углов */
.lu-slider__card-media-inner{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: var(--lu-sl-img-radius);
  border-top-right-radius: var(--lu-sl-img-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgba(0,0,0,.08);
}
.lu-slider__card-media-inner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}

/* Текстовая часть — прижата к ЛЕВОМУ ВЕРХНЕМУ углу своего контейнера */
.lu-slider__card-body{
  flex: 1 1 auto;
  padding: var(--lu-sl-text-pad-y) var(--lu-sl-text-pad-x);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  align-items: start;
  align-content: start;
}
.lu-slider__card-text{
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

/* 3 уровня иерархии */
.lu-slider__card-eyebrow{
  display: block;
  margin: 0 0 6px;
  font-size: var(--lu-sl-eyebrow-size);
  line-height: 1.25;
  font-weight: 500;
  color: var(--lu-sl-panel-eyebrow);
}
.lu-slider__card-title{
  /* ГЛАВНОЕ — название программы */
  display: block;
  margin: 0 0 6px;
  font-size: var(--lu-sl-title-size);
  line-height: var(--lu-sl-title-lh);
  font-weight: 700;
  color: var(--lu-sl-panel-text);
  word-break: break-word;
}
.lu-slider__card-desc{
  display: block;
  margin: 0;
  font-size: var(--lu-sl-desc-size);
  line-height: var(--lu-sl-desc-lh);
  font-weight: 400;
  color: var(--lu-sl-panel-text-muted);
  word-break: break-word;
}

/* Стрелка — справа сверху, на одной линии с eyebrow */
.lu-slider__card-arrow{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--lu-sl-panel-text);
  transition: transform .22s ease;
  align-self: start;
  justify-self: end;
}
.lu-slider__card:hover .lu-slider__card-arrow{
  transform: translate(2px, -2px);
}

/* Мобайл: 1 карточка + ~1/3 следующей.
   На узких экранах работает формула 75% от ширины.
   На широких мобильных/планшетных экранах (≥~440px) срабатывает
   потолок 280px — слайды перестают раздуваться, видно больше карточек. */
@media (max-width: 767px){
  .lu-slider{
    --lu-sl-gap: 12px;
    --lu-sl-card-w: clamp(
      180px,
      calc((100vw - 30px - var(--lu-sl-gap)) * 0.75),
      280px
    );
  }
}


/* iPhone fix: сохраняем старую пропорцию карточки, но изолируем img от расчёта размеров */
.lu-slider__card{
  aspect-ratio: 2 / 3;
  height: auto !important;
}

.lu-slider__card-media{
  flex: 0 0 50% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.lu-slider__card-media-inner{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.lu-slider__card-media-inner img{
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}