/* ============================================================
   07-КЕЙСЫ (горизонтальные ленты проектов)

   Семь блоков подряд, у каждого своя лента слайдов с
   презентациями. Лента - это Swiper в свободном режиме:
   тащится мышью и пальцем, без «прилипания» к слайдам.

   ЧЕТЫРЕ ЦВЕТНЫХ БЛОКА И ТРИ СВЕТЛЫХ.
   Цвет задаётся дополнительным классом на самом блоке:
     case-scroller_sunlight_energy  тёмно-серый
     case-scroller_faropoint        сине-серый
     case-scroller_davinci          тёмно-синий
     case-scroller_kle              фиолетовый
   Остальные (tagaurbanic, bldr, apexus) остаются светлыми.

   Чтобы добавить новый кейс - скопируй в index.html целый блок
   case-scroller, поменяй название, подпись и картинки. Если
   нужен свой цвет - добавь сюда правило по образцу ниже.

   ВАЖНО про ширину слайдов: она НЕ задаётся в стилях. Скрипт
   05-кейсы.js измеряет каждую картинку и подставляет её ширину
   слайду. Так лента подстраивается под картинки любых пропорций.
   ============================================================ */


/* ------------------------------------------------------------
   ОБЩАЯ ОБЁРТКА ВСЕХ КЕЙСОВ
   ------------------------------------------------------------ */

.case-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(40 / var(--device-size) * 100vw);
  padding: calc(40 / var(--device-size) * 100vw);
  background-color: #fff;
}

/* На мобильном блоки идут вплотную, без полей и зазоров */
@media (max-width: 767px) {
  .case-section {
    gap: 0;
    padding: 0;
  }
}


/* ------------------------------------------------------------
   ОДИН КЕЙС
   ------------------------------------------------------------ */

.case-scroller {
  padding: calc(100 / var(--device-size) * 100vw)
           calc(80 / var(--device-size) * 100vw);
  border-radius: calc(10 / var(--device-size) * 100vw);
  background-color: #efefef;
  color: #5a5a5a;
  overflow: hidden;
}

@media (max-width: 767px) {
  .case-scroller {
    padding: calc(30 / var(--device-size) * 100vw)
             calc(16 / var(--device-size) * 100vw)
             calc(50 / var(--device-size) * 100vw);
    border-radius: 0;
  }
}


/* --- заголовок кейса --- */

.case-scroller__header {
  margin-bottom: calc(60 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .case-scroller__header {
    margin-bottom: calc(50 / var(--device-size) * 100vw);
  }
}

/* Название клиента - латиницей, капслоком */
.case-scroller__label {
  margin-bottom: calc(16 / var(--device-size) * 100vw);
  color: #878787;
  font-family: Montserrat, serif;
  font-size: calc(24 / var(--device-size) * 100vw);
  font-weight: 500;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .case-scroller__label {
    margin-bottom: calc(12 / var(--device-size) * 100vw);
    font-size: calc(16 / var(--device-size) * 100vw);
  }
}


/* --- лента слайдов --- */

@media (max-width: 767px) {
  /* место снизу под полоску прокрутки */
  .case-scroller__content {
    padding-bottom: calc(62 / var(--device-size) * 100vw);
  }
}

.case-scroller__swiper {
  position: relative;
}

/* Свои стрелки и полоску прокрутки мы ставим по краям ленты
   через position: absolute - значит, самой ленте нужна точка
   отсчёта. Библиотека Swiper этого не делает, добавляем сами. */
.swiper {
  position: relative;
}

/* overflow: visible - чтобы соседние слайды выглядывали
   за край блока, а не обрезались по нему */
.case-scroller__swiper .swiper {
  height: calc(440 / var(--device-size) * 100vw);
  overflow: visible;
}

.case-scroller__swiper .swiper-slide {
  display: flex;
  gap: calc(16 / var(--device-size) * 100vw);
}

/* flex-shrink: 0 - картинка не сжимается под размер слайда,
   наоборот, слайд подстраивается под картинку */
.case-scroller__image {
  flex-shrink: 0;
  height: 100%;
}

.case-scroller__image picture,
.case-scroller__image img {
  display: block;
  height: 100%;
}


/* --- круглые стрелки по краям (только десктоп) --- */

.case-scroller__button {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  margin: auto;              /* так кнопка встаёт ровно по центру
                                высоты ленты */
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 / var(--device-size) * 100vw);
  height: calc(60 / var(--device-size) * 100vw);
  border: calc(1 / var(--device-size) * 100vw) solid #5a5a5a;
  border-radius: 50%;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.case-scroller__button_prev { left: 0; }
.case-scroller__button_next { right: 0; }

/* Одна и та же иконка, вторая просто перевёрнута */
.case-scroller__button_next .icon {
  transform: scale(-1);
}

@media (max-width: 767px) {
  .case-scroller__button { display: none; }
}


/* --- полоска прокрутки (только мобильный) --- */

.case-scroller__scrollbar {
  position: relative;
  left: 0;
  right: 0;
  bottom: calc(-60 / var(--device-size) * 100vw);
  height: calc(6 / var(--device-size) * 100vw);
  border-radius: calc(3 / var(--device-size) * 100vw);
  background-color: rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .case-scroller__scrollbar { display: none; }
}

.case-scroller__scrollbar .swiper-scrollbar-drag {
  height: inherit;
  border-radius: calc(3 / var(--device-size) * 100vw);
  background: #000;
}


/* --- кнопка под лентой --- */

.case-scroller__footer {
  display: flex;
  justify-content: center;
  margin-top: calc(100 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .case-scroller__footer { display: none; }
}


/* ------------------------------------------------------------
   ЦВЕТНЫЕ БЛОКИ
   ------------------------------------------------------------ */

.case-scroller_sunlight_energy { background-color: #272727; color: #cfcfcf; }
.case-scroller_faropoint       { background-color: #334050; color: #cfcfcf; }
.case-scroller_davinci         { background-color: #001f34; color: #cfcfcf; }
.case-scroller_kle             { background-color: #310042; color: #cfcfcf; }

/* На тёмном фоне полоска прокрутки светлая, а бегунок белый */
.case-scroller_sunlight_energy .case-scroller__scrollbar,
.case-scroller_faropoint .case-scroller__scrollbar,
.case-scroller_davinci .case-scroller__scrollbar,
.case-scroller_kle .case-scroller__scrollbar {
  background-color: rgba(255, 255, 255, 0.1);
}

.case-scroller_sunlight_energy .case-scroller__scrollbar .swiper-scrollbar-drag,
.case-scroller_faropoint .case-scroller__scrollbar .swiper-scrollbar-drag,
.case-scroller_davinci .case-scroller__scrollbar .swiper-scrollbar-drag,
.case-scroller_kle .case-scroller__scrollbar .swiper-scrollbar-drag {
  background-color: #fff;
}

/* На тёмном фоне кнопка «заказать презентацию» белеет при наведении */
@media (min-width: 768px) and (hover: hover) {
  .case-scroller_sunlight_energy .button-arrow,
  .case-scroller_faropoint .button-arrow,
  .case-scroller_davinci .button-arrow,
  .case-scroller_kle .button-arrow {
    transition: 0.3s ease-out;
  }

  .case-scroller_sunlight_energy .button-arrow:hover,
  .case-scroller_faropoint .button-arrow:hover,
  .case-scroller_davinci .button-arrow:hover,
  .case-scroller_kle .button-arrow:hover {
    color: #fff;
  }
}