/*!
 * slider.css — v29 (2026-02-19)
 * FEA / KPI (Drupal 11): Slider на Paragraphs + Media + Swiper
 *
 * Что исправлено по сравнению с v22:
 * - Убрана глобальная "растяжка" height:100% для всех .field/.field__item внутри слайда.
 *   Она делала field_slide_caption и field_slide_link высотой 100%, из‑за чего bottom "работал наоборот"
 *   (элементы улетали вверх и исчезали, а с минусом внезапно становились видимыми).
 * - Якорь для оверлея стабильный: .contextual-region растянут на весь слайд (inset:0),
 *   картинка занимает весь слайд (object-fit:cover), подпись и кнопка позиционируются снизу.
 *
 * ДВИГАТЬ подпись/кнопку: см. переменные в :root.
 */

:root{
  /* Геометрия слайда */
  --fea-hero-radius: 14px;
  --fea-hero-ratio: 21 / 9;

  /* KPI Brandbook (Web HEX) */
  --kpi-blue-900: #1c396e; /* основной тёмно-синий */
  --kpi-blue-600: #1062a3;
  --kpi-blue-700: #0d5690;
  --kpi-cyan-500: #008acf; /* акцентный голубой */
  --kpi-cyan-700: #004f7f;

  --kpi-white: #ffffff;
  --kpi-black: #000000;

  /* УМНЫЕ размеры/отступы: clamp(min, fluid, max) */
  --fea-hero-gap: clamp(12px, 2.2vw, 28px);                 /* пробел между левым меню и слайдером */
  --fea-slide-pad: clamp(14px, 2.2vw, 28px);                /* общий отступ от краёв оверлея */
  --fea-slide-cta-bottom: clamp(12px, 1.8vw, 26px);         /* кнопка: отступ от низа */
  --fea-slide-caption-bottom: clamp(12px, 1.8vw, 26px);     /* подпись: отступ от низа (выше кнопки) */
  --fea-slide-caption-reserve: clamp(0px, 18vw, 260px);     /* резерв ширины под кнопку справа (на узких экранах → 0) */

  /* Визуал оверлея */
  --fea-overlay-grad-height: 54%;
  --fea-overlay-grad-strong: rgba(28,57,110,0.92);
  --fea-overlay-grad-mid: rgba(28,57,110,0.42);
  --fea-overlay-grad-zero: rgba(28,57,110,0.00);

  /* Типографика (Exo 2 по брендбуку) */
  --fea-font: "Exo 2", "Exo2", "Exo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Умная типографика */
  --fea-caption-size: clamp(16px, 0.9vw + 10px, 22px);
  --fea-caption-line: 1.25;
  --fea-caption-weight: 650;

  --fea-cta-size: clamp(13px, 0.55vw + 10px, 16px);
  --fea-cta-weight: 700;

  /* Компоненты */
  --fea-pill-radius: 999px;
  --fea-pill-shadow: 0 10px 22px rgba(0,0,0,0.22);

  --fea-card-radius: clamp(10px, 0.6vw + 8px, 12px);
  --fea-card-pad-y: clamp(8px, 0.7vw + 6px, 10px);
  --fea-card-pad-x: clamp(10px, 1.0vw + 8px, 14px);

  --fea-text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  --fea-trans: 180ms ease;

  /* Навигация */
  --fea-arrow-size: clamp(38px, 3.2vw, 46px);
  --fea-arrow-icon: clamp(16px, 1.3vw, 18px);
}



/* ============================================================
   (A) Старые полезные фиксы v12 для главного блока (если есть)
   ============================================================ */

.fea-hero-row .layout,
.fea-hero-row .row,
.fea-hero-row .layout__container{
  align-items: flex-start !important;
}

.fea-hero-row .layout__region--first,
.fea-hero-row .layout__region--second{
  align-self: flex-start !important;
}

/* Если нужно "подтянуть" правую колонку вверх (как у тебя было) */
.fea-hero-row .layout__region--second { margin-top: -15px !important; }


/* Пробел между левой колонкой (меню/список кафедр) и правой (слайдер) */
.fea-hero-row .layout__region--first{
  padding-right: var(--fea-hero-gap) !important;
  box-sizing: border-box;
}
.fea-hero-row .layout__region--second{
  padding-left: var(--fea-hero-gap) !important;
  box-sizing: border-box;
}

/* На узких экранах пробел уменьшаем, чтобы не съедать ширину */
/* ============================================================
   (B) SWIPER: базовый контейнер
   ============================================================ */

.swiper-container.fea.slide-single{
  width: 100%;
}

/* Слайд — это наша рамка/маска со скруглением */
.swiper-container.fea.slide-single .swiper-slide{
  position: relative !important;
  overflow: hidden;
  border-radius: var(--fea-hero-radius);
  aspect-ratio: var(--fea-hero-ratio);
  height: auto !important;
}

/* ============================================================
   (C) СТАБИЛЬНЫЙ ЯКОРЬ: растягиваем contextual-region на весь слайд
   ============================================================ */

.swiper-container.fea.slide-single .swiper-slide .contextual-region{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ============================================================
   (D) Картинка на весь слайд (ТОЛЬКО image wrapper растягиваем)
   ============================================================ */

.swiper-container.fea.slide-single .swiper-slide .field--name-field-media-image-1,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-media-image-1 .field__items,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-media-image-1 .field__item,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-media-image-1 a{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
}

.swiper-container.fea.slide-single .swiper-slide .field--name-field-media-image-1 img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ============================================================
   (E) Градиент снизу для читаемости
   ============================================================ */

.swiper-container.fea.slide-single .swiper-slide::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--fea-overlay-grad-height) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  background: linear-gradient(to top,
    var(--fea-overlay-grad-strong) 0%,
    var(--fea-overlay-grad-mid) 52%,
    var(--fea-overlay-grad-zero) 100%
  ) !important;
}

/* ============================================================
   (F) ВАЖНОЕ: caption/link НЕ должны быть высотой 100%
   ============================================================ */

.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption .field__items,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link .field__items,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption .field__item,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link .field__item{
  height: auto !important;
  width: auto !important;
}

/* ============================================================
   (G) Подпись (field_slide_caption) — снизу слева
   ============================================================ */

.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption{
  position: absolute !important;
  left: var(--fea-slide-pad) !important;
  bottom: var(--fea-slide-caption-bottom) !important;
  top: auto !important;
  right: auto !important;
  z-index: 20 !important;
  margin: 0 !important;
  transform: none !important;
  max-width: calc(100% - var(--fea-slide-pad) - var(--fea-slide-pad) - var(--fea-slide-caption-reserve));

  font-family: var(--fea-font);
}

/* “карточка” подписи */
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption .field__item,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption p{
  margin: 0 !important;
  color: var(--kpi-white) !important;
  font-size: var(--fea-caption-size) !important;
  line-height: var(--fea-caption-line) !important;
  font-weight: var(--fea-caption-weight) !important;
  text-shadow: var(--fea-text-shadow) !important;
}

/* Фон/акцент для подписи: лёгкая "плашка" + голубая полоса слева */
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption{
  padding: var(--fea-card-pad-y) var(--fea-card-pad-x);
  border-radius: var(--fea-card-radius);
  background: rgba(28,57,110,0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: var(--kpi-cyan-500);
  opacity: 0.95;
}


/* ============================================================
   (H) Кнопка/ссылка (field_slide_link) — снизу справа
   ============================================================ */

.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link{
  position: absolute !important;
  right: var(--fea-slide-pad) !important;
  bottom: var(--fea-slide-cta-bottom) !important;
  top: auto !important;
  left: auto !important;
  z-index: 20 !important;
  margin: 0 !important;
  transform: none !important;

  font-family: var(--fea-font);
}

/* На случай, если тема позиционирует .field__item или <a> */
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link .field__item,
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link a{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
}

/* Кнопка по брендбуку: акцентный голубой + белый текст */
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link a{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;

  padding: clamp(10px, 1.1vw, 12px) clamp(14px, 1.6vw, 18px) !important;
  border-radius: var(--fea-pill-radius) !important;

  text-decoration: none !important;
  font-weight: var(--fea-cta-weight) !important;
  font-size: var(--fea-cta-size) !important;
  letter-spacing: 0.2px;

  background: var(--kpi-cyan-500) !important;
  color: var(--kpi-white) !important;
  border: 1px solid rgba(255,255,255,0.25);

  box-shadow: var(--fea-pill-shadow) !important;
  transition: transform var(--fea-trans), background var(--fea-trans), box-shadow var(--fea-trans);
}

/* Лёгкая “стрелка” после текста (если мешает — удалишь) */
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link a::after{
  content: "→";
  font-weight: 800;
  line-height: 1;
  opacity: 0.95;
}

/* Hover/Focus */
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link a:hover{
  background: var(--kpi-blue-600) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.26) !important;
}
.swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link a:focus-visible{
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}


/* Стрелки — KPI style */
.swiper-container.fea.slide-single .swiper-button-prev,
.swiper-container.fea.slide-single .swiper-button-next{
  z-index: 30;
  width: var(--fea-arrow-size);
  height: var(--fea-arrow-size);
  border-radius: 50%;
  background: rgba(28,57,110,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  transition: background var(--fea-trans), transform var(--fea-trans);
}
.swiper-container.fea.slide-single .swiper-button-prev:hover,
.swiper-container.fea.slide-single .swiper-button-next:hover{
  background: rgba(0,138,207,0.65);
  transform: translateY(-1px);
}

/* Цвет стрелок */
.swiper-container.fea.slide-single .swiper-button-prev::after,
.swiper-container.fea.slide-single .swiper-button-next::after{
  font-size: var(--fea-arrow-icon);
  font-weight: 900;
  color: #fff;
}

/* Pagination bullets */
.swiper-container.fea.slide-single .swiper-pagination-bullet{
  opacity: 1;
  background: rgba(255,255,255,0.55);
}
.swiper-container.fea.slide-single .swiper-pagination-bullet-active{
  background: var(--kpi-cyan-500);
}

/* ============================================================
   (I) Мобильный: кнопку под подпись
   ============================================================ */

/* ============================================================
   Mobile-тюнинг v29 (не ломая десктоп)
   ============================================================ */

/* 1) На телефонах делаем слайд чуть выше (16:9 вместо 21:9), чтобы подписи/кнопке было где жить */
@media (max-width: 768px){
  :root{
    --fea-hero-ratio: 16 / 9;
  }

  /* Когда две колонки становятся в одну (стеком) — добавляем вертикальный зазор */
  .fea-hero-row .layout__region--first{
    margin-bottom: clamp(10px, 2vw, 16px) !important;
  }

  /* Ограничиваем высоту левого "меню кафедр" и делаем прокрутку,
     чтобы оно не съедало весь первый экран */
  .fea-hero-row .layout__region--first .block,
  .fea-hero-row .layout__region--first .block__content,
  .fea-hero-row .layout__region--first .content{
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2) Узкие телефоны: подпись на всю ширину, кнопку переносим под подпись слева */
@media (max-width: 560px){
  .swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption{
    max-width: calc(100% - var(--fea-slide-pad) - var(--fea-slide-pad)) !important;
  }
  .swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-link{
    left: var(--fea-slide-pad) !important;
    right: auto !important;
  }

  /* Подпись не должна разрастаться на пол-экрана: ограничим до 3 строк */
  .swiper-container.fea.slide-single .swiper-slide .field--name-field-slide-caption p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}

/* 3) Ландшафт на телефоне: ещё компактнее типографику и отступы, чтобы всё помещалось */
@media (max-height: 430px){
  :root{
    --fea-caption-size: 15px;
    --fea-cta-size: 13px;
    --fea-slide-caption-bottom: 48px;
    --fea-slide-cta-bottom: 14px;
  }
}