/* ==========================================================================
   Selio · Showcase «Подивіться, який інтернет-магазин ви можете створити вже сьогодні»
   Розміщення: головна selio24.com, одразу після блоку «Характеристики».
   Значення шрифтів і кольорів узяті з /css/main.css сайту (див. коментарі).
   Без залежностей. Container queries: Chrome 105+, Safari 16+, Firefox 110+.
   ========================================================================== */

.sw {
  /* Кольори Selio (main.css) */
  --sw-ink: #212121;          /* .btn, .header, лінія .section-title, активна крапка пагінації */
  --sw-text: #000000;         /* body */
  --sw-panel: #f8f9f1;        /* .characteristics__slider, .partners */
  --sw-accent: #c4f32c;       /* .plans__switcher-right.active span */
  --sw-white: #ffffff;

  --sw-container: 1320px;     /* .characteristics .container: max-width 1350 − 2 × 15 padding */
  --sw-gutter: 15px;          /* .container padding: 0 15px */
  --sw-track-max: 1600px;
  --sw-radius: 20px;          /* радіус карток і панелей Selio */
  --sw-card-ratio: 4 / 5;     /* пропорція картки, як у референсі */
  --sw-ease: cubic-bezier(.22, .61, .36, 1);
  --sw-font: "Montserrat", sans-serif;

  container-type: inline-size;
  overflow-x: clip;
  background: var(--sw-white);
  color: var(--sw-text);
  font-family: var(--sw-font);
  font-weight: 500;
  padding-block: 70px;        /* як .how / .faq */
}

.sw *,
.sw *::before,
.sw *::after { box-sizing: border-box; }

/* ---------- Заголовок: стиль .section-title сайту ---------- */

.sw-head {
  margin-bottom: 60px;
}

.sw-title {
  position: relative;
  margin: 0;
  padding-left: 160px;
  font-size: 20px;
  font-weight: 600;
  line-height: 140%;
  color: var(--sw-text);
  text-wrap: balance;
}
.sw-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 130px;
  height: 2px;
  background: var(--sw-ink);
  transform: translateY(-50%);
}

.sw-nw { white-space: nowrap; }

@media (max-width: 800px) {
  .sw { padding-block: 50px; }
}
@container (max-width: 800px) {
  .sw-head { margin-bottom: 40px; }
  .sw-title { padding-left: 93px; padding-right: 30px; }
  .sw-title::before { width: 73px; }
}

/* ---------- Стрічка ---------- */

.sw-track {
  --sw-gap: 12px;
  --sw-edge: max(var(--sw-gutter), (min(100cqw, var(--sw-track-max)) - var(--sw-container)) / 2);

  position: relative;
  list-style: none;
  margin: -10px auto -14px;
  max-width: var(--sw-track-max);
  padding: 10px var(--sw-edge) 14px;     /* запас під фокус і hover */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;                /* mobile: 1 картка + край наступної */
  gap: var(--sw-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sw-edge);
  scrollbar-width: none;
}
.sw-track::-webkit-scrollbar { display: none; }

@container (min-width: 700px) {           /* tablet: 2 картки + край */
  .sw-track {
    --sw-gap: 20px;
    grid-auto-columns: calc((100% - var(--sw-gap)) / 2 - 28px);
  }
}

@container (min-width: 1100px) {          /* desktop: 3 картки + край наступної */
  .sw-track {
    --sw-gap: 28px;
    --sw-squeeze: max(0px, (112px - var(--sw-edge)) / 3);
    grid-auto-columns: calc((100% - 2 * var(--sw-gap)) / 3 - var(--sw-squeeze));
  }
}

.sw-slide {
  min-width: 0;
  list-style: none;
  scroll-snap-align: start;
  transition: opacity .45s var(--sw-ease);
}
.sw-slide.is-peek { opacity: .42; }

/* ---------- Картка (як у референсі) ---------- */

.sw-card {
  position: relative;
  display: block;
  aspect-ratio: var(--sw-card-ratio);
  border-radius: var(--sw-radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--sw-panel);
  color: var(--sw-white);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s var(--sw-ease);
}

/* Скріншот на всю картку */
.sw-shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sw-shot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform .6s var(--sw-ease);
  -webkit-user-drag: none;
  user-select: none;
}

/* Full-page скрін: при hover плавно прокручується вниз */
.sw-shot.is-tall img {
  bottom: auto;
  height: auto;
  object-fit: fill;
  transition: transform .8s var(--sw-ease);
}

/* Темний градієнт знизу під текстом */
.sw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(0 0 0 / .72) 0%,
    rgb(0 0 0 / .45) 22%,
    rgb(0 0 0 / .12) 42%,
    rgb(0 0 0 / 0) 56%);
  transition: opacity .5s var(--sw-ease);
}

.sw-info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 0 24px 22px;
}

.sw-niche {
  margin: 0;
  font-size: 24px;            /* .how__title / .benefits__item-title */
  font-weight: 700;
  line-height: 120%;
  color: var(--sw-white);
}

.sw-url {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  color: var(--sw-white);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* «Переглянути» проявляється при hover; на сенсорних екранах видно завжди */
.sw-cta-row {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s var(--sw-ease), opacity .35s var(--sw-ease);
}
.sw-cta-row > span {
  min-height: 0;
  overflow: hidden;
}
.sw-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  margin-top: 16px;
  padding: 0 6px 0 18px;
  border-radius: 50px;        /* .btn */
  background: var(--sw-white);
  color: var(--sw-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.sw-cta-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sw-accent);
  color: var(--sw-ink);
}
.sw-cta-ic svg { width: 13px; height: 13px; }

@container (max-width: 1440px) {
  .sw-niche { font-size: 22px; }  /* .benefits__item-title @1440 */
}
@container (max-width: 800px) {
  .sw-info { padding: 0 20px 18px; }
  .sw-niche { font-size: 18px; }  /* .benefits__item-title @800 */
  .sw-url { font-size: 13px; }
}

/* ---------- Hover (миша), фокус, дотик ---------- */

@media (hover: hover) and (pointer: fine) {
  .sw-card:hover { transform: scale(1.012); }
  .sw-card:hover .sw-shot:not(.is-tall) img { transform: scale(1.02); }
  .sw-card:hover .sw-shot.is-tall img {
    transform: translateY(calc(-1 * var(--sw-pan, 0px)));
    transition-duration: 2.6s;
  }
  .sw-card:hover .sw-cta-row { grid-template-rows: 1fr; opacity: 1; }
}

@media (hover: none) {
  .sw-cta-row { grid-template-rows: 1fr; opacity: 1; }
}

.sw-card:focus-visible {
  outline: 2px solid var(--sw-ink);
  outline-offset: 3px;
}
.sw-card:focus-visible .sw-cta-row { grid-template-rows: 1fr; opacity: 1; }

.sw-card:active { transform: scale(.992); }

/* ---------- Гортання вручну ---------- */

.sw-carousel { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .sw-track { cursor: grab; }
}
.sw.is-dragging .sw-track { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.sw.is-dragging .sw-card { cursor: grabbing; }

.sw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Менше руху ---------- */

@media (prefers-reduced-motion: reduce) {
  .sw *,
  .sw *::before,
  .sw *::after { transition-duration: .01ms !important; }
  .sw-card:hover .sw-shot.is-tall img { transform: none !important; }
}