/* Фотолента (/hybrid, /delivery, /projects) — Swiper: власна пропорція
   кадру, фіксована висота, наступний слайд обрізає край контейнера */
.photo-strip.swiper {
    width: 100%;
    overflow: hidden;
}

.photo-strip .swiper-wrapper {
    align-items: flex-start;
}

.photo-strip .swiper-slide {
    width: auto;
    height: 260px;
}

.photo-strip .swiper-slide a {
    display: block;
    height: 100%;
    cursor: zoom-in;
}

.photo-strip .swiper-slide img {
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
}

/* ТЗ №72. Висота ленти — частка ширини контейнера, а не кругле число на
   кожну ширину. Контейнер — min(1120px, 92vw), і 34vw зі стелею 416
   дають горизонтальному кадру рівно дві третини контейнера на будь-якій
   ширині: 740 px із 1120 на 1440, 621 із 942 на 1024, 497 із 754
   на планшеті.

   Так задано розмір активного кадру: він має бути великим, а сусіди —
   прилягати впритул і обрізатися краями контейнера. Ширина слайда при
   цьому дорівнює ширині картинки: жодних мінімумів і жодного повітря
   навколо вузьких кадрів (це була помилка ТЗ №71 — вертикальні кадри
   стояли в широких слайдах із білими полями, а активний губився).
   Вертикальний кадр просто виходить вузьким, і це нормально.

   Висота від активного кадру не залежить узагалі, тому блок під лентою
   не рухається за жодного перемикання.

   Стеля 416 px узята по вертикалі: на 1440×900 лента разом із заголовком
   блока й рядом мініатюр укладається в екран із запасом. */
@media (min-width: 768px) {
    .photo-strip .swiper-slide {
        height: min(416px, 34vw);
    }
}

.photo-strip .swiper-button-prev,
.photo-strip .swiper-button-next {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text);
    top: 50%;
}

.photo-strip .swiper-button-prev::after,
.photo-strip .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
}

/* Вимкнена кнопка (доїхали до початку чи кінця, або гортати нічого) —
   лишається на місці, просто не діє */
.photo-strip .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Коли гортати нічого зовсім, Swiper ховає кнопки повністю, а нам
   потрібен вигляд вимкненої */
.photo-strip .swiper-button-lock {
    display: flex !important;
}

/* Вступ на /projects — самостійний блок, а не підпис до першого об'єкта:
   даємо йому більше повітря, ніж загальне правило .section--intro +
   .section. Відступів між самими об'єктами це не торкається. */
.section--intro + .section--object {
    padding-top: 64px;
}

/* ===== Мініатюри під фотолентою (ТЗ №25) =====
   Вигляд той самий, що в галереї карточки товару: квадратні комірки,
   активна обведена. Але там мініатюра підмінює кадр у вікні, а тут
   лентою керує Swiper — тому код свій, спільний із карточкою лише
   малюнок. Розмітку дає includes/photo-strip.php.

   Туман зобов'язаний збігатися з тлом смуги, а ленти стоять на трьох
   різних: білій (/delivery), сірій (/hybrid) і чергованій (/projects).
   Колір береться зі смуги, а не прописується на сторінці. */
.photo-gallery {
  --thumbs-bg: 255 255 255;   /* --bg-light */
}
.section--gray .photo-gallery,
.section--gray-bg .photo-gallery {
  --thumbs-bg: 230 230 230;  /* --bg-gray */
}
.section--gray-light .photo-gallery {
  --thumbs-bg: 241 241 241;  /* --bg-gray-light */
}

/* Поправка на шапку: до блока повертаємося після згортання списку.
   ТЗ №106: висота шапки зі змінної, значення колишнє (64 + 16). */
.photo-gallery {
  scroll-margin-top: calc(var(--hdr-h, 64px) + 16px);
}
.photo-thumbs-wrap {
  position: relative;
  margin-top: 10px;
}
/* Ряд стоїть по центру під лентою. Стовпці тому фіксованої ширини,
   а не 1fr: з auto-fill порожні колонки залишаються й займають місце,
   і центрувати було б нічого. auto-fit їх згортає, і по центру
   стають самі мініатюри. */
.photo-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, 86px);
  justify-content: center;
  gap: 8px;
}
.photo-thumbs::-webkit-scrollbar {
  display: none;
}
/* Згорнутий стан: повний рядок і під ним половина другого, що йде
   в туман. Межу ставить скрипт за фактичною висотою рядів — скільки їх
   вийшло за цієї ширини, стільки й міряємо. Якщо все вмістилося в один
   рядок, класу немає і згортати нічого. */
.photo-thumbs-wrap.is-clamped .photo-thumbs {
  max-height: var(--thumbs-clamp);
  overflow: hidden;
}
/* ТЗ №68. Розкриття і згортання йдуть рухом, а не стрибком.
   Півсекунди з різким початком і м'яким під'їздом — та сама крива, що
   у виїзду заголовка на герої: рух читається, але не затримує.

   Анімувати max-height можна лише між двома числами, тому розкритому
   стану скрипт задає --thumbs-full — фактичну висоту ряду. По закінченні
   руху межу знімаємо зовсім (is-settled): інакше при повороті екрана ряд
   залишився б обрізаний учорашнім числом.

   .is-measuring — на час замірювання. Скрипт міряє повну висоту, зокрема
   й розкритий стан, і без цього класу замір потрапив би в середину
   ще не початого переходу. */
.photo-thumbs-wrap {
  /* Тривалість руху. Ручка одна на обидва стани, її ж читає ui.js,
     щоб знати, коли рух скінчився. */
  --thumbs-open-time: 0.45s;
}
.photo-thumbs {
  transition: max-height var(--thumbs-open-time, 0.45s) cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-thumbs-wrap.is-open .photo-thumbs {
  max-height: var(--thumbs-full, none);
  overflow: hidden;
}
.photo-thumbs-wrap.is-settled .photo-thumbs {
  max-height: none;
}
.photo-thumbs-wrap.is-measuring .photo-thumbs {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .photo-thumbs {
    transition: none;
  }
}
.photo-thumbs__more {
  display: none;
}
.photo-thumbs-wrap.is-clamped .photo-thumbs__more {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--thumbs-fade, 44px);
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(
    to bottom,
    rgb(var(--thumbs-bg) / 0) 0%,
    rgb(var(--thumbs-bg) / 0.55) 45%,
    rgb(var(--thumbs-bg) / 1) 100%
  );
}
/* Одного туману мало: на світлих інтер'єрних кадрах він не читається.
   Кружок із тінню тримає значок на будь-якому тлі. */
.photo-thumbs__chevron {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(11, 12, 15, 0.18);
  transition: box-shadow 0.2s ease;
}
.photo-thumbs__more .photo-thumbs__chevron {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
}
.photo-thumbs__more:hover .photo-thumbs__chevron,
.photo-thumbs__less:hover .photo-thumbs__chevron {
  box-shadow: 0 3px 14px rgba(11, 12, 15, 0.28);
}
/* Кнопка згортання стоїть у потоці під останнім рядом: поверх кадрів
   їй нема потреби, там вільно. */
.photo-thumbs__less {
  all: unset;
  display: none;
}
.photo-thumbs-wrap.is-open .photo-thumbs__less {
  display: block;
  width: 34px;
  margin: 12px auto 0;
  cursor: pointer;
}

/* Вузькі екрани: мініатюри йдуть одним рядком зі свайпом — складати
   нічого. Замість туману знизу туман по краях, і лише з того боку,
   куди ряд ще можна прокрутити. */
@media (max-width: 900px) {
  .photo-thumbs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    max-height: none;
    /* safe center: поки ряд уміщається — по центру, як тільки перестає —
       притискається вліво. Звичайний center у прокручуваного блока
       заводить початок ряду за лівий край, звідки його вже не дістати. */
    justify-content: flex-start;
    justify-content: safe center;
  }
  .photo-thumbs__item {
    flex: 0 0 auto;
    width: 68px;
  }
  .photo-thumbs-wrap.is-clamped .photo-thumbs {
    max-height: none;
    overflow-x: auto;
  }
  .photo-thumbs-wrap.is-clamped .photo-thumbs__more,
  .photo-thumbs-wrap.is-open .photo-thumbs__less {
    display: none;
  }
  .photo-thumbs-wrap::before,
  .photo-thumbs-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .photo-thumbs-wrap::before {
    left: 0;
    background: linear-gradient(to right, rgb(var(--thumbs-bg) / 1), rgb(var(--thumbs-bg) / 0));
  }
  .photo-thumbs-wrap::after {
    right: 0;
    background: linear-gradient(to left, rgb(var(--thumbs-bg) / 1), rgb(var(--thumbs-bg) / 0));
  }
  .photo-thumbs-wrap.has-left::before,
  .photo-thumbs-wrap.has-right::after {
    opacity: 1;
  }
}