/* =========================================================
   carousel.css — свайпаемая карусель для секций «эмоция», «логика»
   и портфолио. Механику (свайп, перетаскивание мышью, инерция,
   якорение к слайду) даёт Swiper (css/vendor/swiper-bundle.min.css +
   js/vendor/swiper-bundle.min.js) — здесь только визуальный слой
   поверх его разметки (.swiper/.swiper-wrapper/.swiper-slide) и
   собственные стрелки/полоса прогресса, которые подключает
   js/carousel.js.

   Раньше карусель была самописной (overflow-x + scroll-snap +
   Pointer Events для протягивания мышью) — на своём коде накопилось
   слишком много пограничных багов (резкий снап при отпускании,
   залипающее состояние протягивания, дёрганая ручная автопрокрутка),
   и решили не чинить их по одному дальше, а взять готовую,
   проверенную библиотеку. ========================================================= */

.carousel { margin-top: clamp(28px, 4vh, 44px); }

/* Swiper сам ставит overflow:hidden на .swiper — без запаса сверху
   он обрезает приподнимающиеся при наведении карточки
   (.portfolio-card: translateY(-5px)). Паддинг с компенирующим
   отрицательным отступом даёт карточке место, не сдвигая саму секцию.

   margin-top тут — не просто «минус паддинг»: .carousel.swiper как
   селектор специфичнее .carousel и полностью перебивает его
   margin-top, а не складывается с ним. Без явного вычитания паддинга
   именно из общего отступа секции карусель в 1-й и 2-й секциях (где
   нет обёртки вроде .portfolio-sub) прилипала прямо к тексту над ней. */
.carousel.swiper {
  padding: 8px 4px 10px;
  margin-top: calc(clamp(28px, 4vh, 44px) - 8px);
  margin-left: -4px;
  margin-right: -4px;
  margin-bottom: 0;
}

/* Все слайды карусели растягиваются на высоту самого высокого —
   без этого у .swiper-slide остаётся его собственный height:100%
   из базового CSS Swiper, а в контейнере без явной высоты 100%
   считается за «100% от auto», то есть по факту тем же самым, что
   и просто auto — но именно значение auto (а не 100%, даже равное
   ему по итогу) запускает растягивание элементов флекс-контейнера
   по умолчанию (align-items: stretch). Без этой строки карточки
   портфолио с разным количеством текста остаются каждая своей
   высоты. */
.swiper-slide { height: auto; }

/* ---------- Управление: стрелки + полоса прогресса ----------
   Полоса — родной scrollbar-модуль Swiper, а не самодельная заливка
   0→100%: у него ползунок сразу имеет свою ширину (пропорционально
   видимой части относительно всех слайдов) и стоит у левого края
   с самого начала, а не пустует до первого движения. */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}
.carousel__dots.swiper-scrollbar {
  position: relative;
  left: auto; right: auto; top: auto; bottom: auto; z-index: auto;
  width: min(160px, 30vw);
  height: 3px;
  border-radius: 999px;
  background: var(--line-2);
}
.carousel__dots .swiper-scrollbar-drag {
  background: linear-gradient(90deg, var(--cyan), var(--blue-lt));
  border-radius: inherit;
}

.carousel__arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.carousel__arrow:hover {
  border-color: rgb(var(--blue-lt-rgb) / .5);
  background: rgb(var(--blue-rgb) / .12);
}
/* Swiper дизейблит стрелки у концов дорожки не нативным атрибутом
   disabled, а своим классом — сам решает, когда до конца доехать
   уже некуда, включая случай, когда слайдов меньше, чем помещается
   в контейнер (watchOverflow в js/carousel.js). */
.carousel__arrow.swiper-button-disabled {
  opacity: .32;
  cursor: default;
  background: none;
  border-color: var(--line);
}
.carousel__arrow svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Стрелки только там, где есть чем управлять помимо пальца —
   на телефоне карусель листают свайпом, кнопки лишние. */
@media (max-width: 640px) {
  .carousel__arrow { display: none; }
}

/* =========================================================
   01 · Слайды «эмоция» — готовая карточка-фото.
   Заголовок и текст уже впечатаны в изображение (так проще было
   сделать в генераторе), поэтому в разметке остаётся только <img>
   с описательным alt — он же держит доступность и SEO вместо
   реального текста на карточке.

   Ширина — flex-basis на самом .swiper-slide: Swiper в режиме
   slidesPerView:'auto' меряет реальную отрисованную ширину слайда,
   а не считает её сам, поэтому обычный CSS-размер работает без
   специальных опций библиотеки. */
.slide-emotion {
  flex: 0 0 min(400px, 80vw);
  overflow: hidden;
  /* Без рамки вообще: фото само по себе законченная карточка с
     впечатанным текстом, обводка поверх него — лишняя деталь, а не
     полезная граница (как у карточек с фоном var(--fill-1) без фото). */
  border-radius: 20px;
  background: var(--fill-1);
}
.slide-emotion img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* draggable="false" в разметке уже гасит нативное перетаскивание
     картинки, это дублирующая подстраховка на случай, если атрибут
     где-то потеряется при копипасте разметки. */
  -webkit-user-drag: none;
  user-select: none;
}

/* =========================================================
   02 · Слайды «логика» — механика решения
   ========================================================= */
.slide-logic {
  flex: 0 0 min(460px, 84vw);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(130% 110% at 0% 0%, var(--fill-3), transparent 55%),
    var(--fill-1);
}
.slide-logic__num {
  font-size: 11.5px;
  letter-spacing: .26em;
  color: var(--accent);
}
.slide-logic h3 {
  margin: 12px 0 10px;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.slide-logic > p {
  color: var(--ink-dim);
  font-size: 14.5px;
}
.slide-logic ul {
  list-style: none;
  margin: 18px 0 22px;
  display: grid;
  gap: 9px;
}
.slide-logic li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-soft);
}
.slide-logic li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.slide-logic__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-bright);
  transition: gap .35s var(--ease);
}
.slide-logic__link i { font-style: normal; }
.slide-logic__link:hover { gap: 14px; }

@media (min-width: 1700px) {
  .slide-logic h3   { font-size: 28.8px; }
  .slide-logic > p,
  .slide-logic li,
  .slide-logic__link { font-size: 16.1px; }
}