/* ============================================================
   FTA Category Sliders (porto_child)
   Чистовик
   ============================================================
   Логика:
   1) Основной слайдер:
      - на всю ширину блока
      - пропорция кадра 851 / 420
   2) Миниатюры:
      - до 5 шт. = статичный ряд
      - больше 5 шт. = Owl carousel
   3) Mobile:
      - убрана пустота под миниатюрами
      - возвращены стрелки у миниатюр
      - стрелки не мешают свайпу
   4) Подпись серии:
      - компактная светлая подложка
      - перебивает глобальный Porto line-height для h2
   5) Стрелки миниатюр:
      - выровнены по центру карусели
   ============================================================ */


/* ============================================================
   Общая обёртка
   ============================================================ */
.fta-kontinent-slider {
  width: 100%;
}


/* ============================================================
   Основной слайдер
   ============================================================ */
.fta-main-slider {
  width: 100%;
}

.fta-main-slider .item,
.fta-main-slider .fta-slide {
  position: relative;
}

/*
   Держим пропорцию основного кадра 851 / 420,
   чтобы контейнер соответствовал целевой геометрии.
*/
.fta-main-slider .fta-slide {
  aspect-ratio: 851 / 420;
  overflow: hidden;
}

.fta-main-slider .fta-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Подпись на слайде */
.fta-slide-caption {
  position: absolute;
  left: 3.5%;
  top: 10%;
  z-index: 2;
  text-align: left;
}

/*
   Porto задаёт .page-main h2 { line-height: 42px; }
   Поэтому line-height перебиваем адресно и жёстко.
*/
.page-main .fta-main-slider .fta-slide-caption h2 {
  margin: 0;
  font-weight: 400;
  line-height: 1.1 !important;
  display: inline-block;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}


/* ============================================================
   Блок миниатюр
   ============================================================ */
.fta-thumb-slider-wrap {
  width: 100%;
}

.fta-thumb-slider {
  position: relative;
}

.fta-thumb-slider .item {
  padding-top: 10px;
  box-sizing: border-box;
}

/*
   Базовый вид карточки.
   Для desktop/static оставляем стартовый размер 150x150.
   Для Owl и mobile ниже переопределяем в адаптивный квадрат.
*/
.fta-thumb-card {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  background: #ededed;
  margin: 0 auto;
}

.fta-thumb-card img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* Заголовок на миниатюре */
.fta-thumb-card h4 {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Варианты цвета текста на миниатюрах */
.fta-thumb-card h4.thumb-dark {
  color: #222;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.fta-thumb-card h4.thumb-white,
.fta-thumb-card .thumb-light {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}


/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 768px) {

  /* ------------------------------------------------------------
     Статичный режим миниатюр (до 5 шт.)
     ------------------------------------------------------------ */
  .fta-thumb-slider.fta-thumb-static {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }

  .fta-thumb-slider.fta-thumb-static .item {
    width: calc((100% - 40px) / 5);
    padding-top: 10px;
  }

  .fta-thumb-slider.fta-thumb-static .fta-thumb-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .fta-thumb-slider.fta-thumb-static .fta-thumb-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  /* ------------------------------------------------------------
     Owl carousel для миниатюр
     ------------------------------------------------------------ */
  .fta-thumb-slider.owl-carousel {
    position: relative;
  }

  .fta-thumb-slider.owl-carousel .owl-item {
    display: block;
  }

  .fta-thumb-slider.owl-carousel .owl-item .item {
    width: 100% !important;
    padding-top: 10px;
  }

  .fta-thumb-slider.owl-carousel .fta-thumb-card {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .fta-thumb-slider.owl-carousel .fta-thumb-card img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  /* Контейнер стрелок миниатюр */
  .fta-thumb-slider.owl-carousel .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0;
    margin: 0 !important;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
  }

  /* Стрелки миниатюр по центру карусели */
  .fta-thumb-slider.owl-carousel .owl-nav button,
  .fta-thumb-slider.owl-carousel .owl-prev,
  .fta-thumb-slider.owl-carousel .owl-next {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    margin: 0 !important;
    pointer-events: auto;
  }

  .fta-thumb-slider.owl-carousel .owl-nav button.owl-prev,
  .fta-thumb-slider.owl-carousel .owl-prev {
    left: 0;
  }

  .fta-thumb-slider.owl-carousel .owl-nav button.owl-next,
  .fta-thumb-slider.owl-carousel .owl-next {
    right: 0;
  }

  /* На desktop делаем заголовки миниатюр чуть компактнее */
  .fta-thumb-card h4 {
    -webkit-line-clamp: 2;
  }
}


/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 767px) {

  /* Подпись серии на мобильном */
  .fta-slide-caption {
    left: 4%;
    top: 8%;
  }

.page-main .fta-main-slider .fta-slide-caption h2 {
  font-size: 15px;
  line-height: 1.2 !important;
  padding: 4px 10px;
  background: rgba(255,255,255,0.75);
  border-radius: 2px;
  display: inline-block;

  white-space: nowrap;
  max-width: none;
}

  /* ------------------------------------------------------------
     Убираем пустоту под миниатюрами:
     сбрасываем высоту служебных обёрток Owl
     ------------------------------------------------------------ */
  .fta-thumb-slider-wrap,
  .fta-thumb-slider,
  .fta-thumb-slider .owl-wrapper-outer,
  .fta-thumb-slider .owl-wrapper,
  .fta-thumb-slider .owl-stage-outer,
  .fta-thumb-slider .owl-stage {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Общая геометрия миниатюр на mobile */
  .fta-thumb-slider {
    position: relative;
  }

  .fta-thumb-slider .item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .fta-thumb-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .fta-thumb-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

.fta-thumb-card h4 {
  top: 8px;
  left: 8px;
  right: 8px;
  font-size: 6px;
  line-height: 1.15;
  -webkit-line-clamp: 3;
}

  /* ------------------------------------------------------------
     Статичный режим миниатюр на mobile (до 5 шт.)
     Показываем 5 карточек в одну линию
     ------------------------------------------------------------ */
  .fta-thumb-slider.fta-thumb-static {
    display: flex;
    flex-wrap: nowrap;
  }

  .fta-thumb-slider.fta-thumb-static .item {
    width: 20%;
    padding: 0 3px !important;
    box-sizing: border-box;
  }

  .fta-thumb-slider.fta-thumb-static .fta-thumb-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .fta-thumb-slider.fta-thumb-static .fta-thumb-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
  }

  /* ------------------------------------------------------------
     Возвращаем стрелки у карусели миниатюр на mobile.
     Porto их скрывает мобильными стилями.
     pointer-events:
     - контейнер не мешает свайпу
     - кнопки остаются кликабельны
     ------------------------------------------------------------ */
  .fta-thumb-slider .owl-nav {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0 !important;
    margin: 0 !important;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
  }

  .fta-thumb-slider .owl-nav button,
  .fta-thumb-slider .owl-prev,
  .fta-thumb-slider .owl-next {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    margin: 0 !important;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
  }

  .fta-thumb-slider .owl-nav button.owl-prev,
  .fta-thumb-slider .owl-prev {
    left: 0;
  }

  .fta-thumb-slider .owl-nav button.owl-next,
  .fta-thumb-slider .owl-next {
    right: 0;
  }
}