/* assets/css/styles_slider.css */
/* Слайдер-карточки — стили строго внутри .cards-slider-wrapper (ничего на сайте не ломаем) */

.cards-slider-wrapper {
  /* локальные переменные только для слайдера */
  --cs-gap: 8px;
  --cs-base: clamp(32px, 6vw, 80px);
  --cs-speed: 0.6s;
  --cs-easing: linear(
    0 0%,
    0.1538 4.09%,
    0.2926 8.29%,
    0.4173 12.63%,
    0.5282 17.12%,
    0.6255 21.77%,
    0.7099 26.61%,
    0.782 31.67%,
    0.8425 37%,
    0.8887 42.23%,
    0.9257 47.79%,
    0.9543 53.78%,
    0.9752 60.32%,
    0.9883 67.11%,
    0.9961 75%,
    1 100%
  );
  padding: 24px 0 64px;     /* сверху / снизу */
  background: #fff;         /* чтобы фон был ровный белый */
}

/* Сам список-слайдер */
.cards-slider-wrapper .cards-slider {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* будет перезаписываться JS-ом */
  gap: var(--cs-gap);
  list-style: none;
  padding: 0;
  margin: 0;

  width: 100%;
  max-width: 820px;
  height: clamp(300px, 40dvh, 474px);

  transition: grid-template-columns var(--cs-speed) var(--cs-easing);
}

/* Элементы */
.cards-slider-wrapper .cards-slider > li {
  position: relative;
  overflow: hidden;
  min-width: var(--cs-base);

  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
}

/* Контент карточки */
.cards-slider-wrapper .cards-slider article {
  width: 100%;          /* ✅ растягиваем на всю карточку */
  height: 100%;

  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;

  padding: 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


/* Заголовок сбоку (как в оригинале) */
.cards-slider-wrapper .cards-slider article h3 {
  position: absolute;
  top: 16px;
  left: 16px;

  transform-origin: 0 50%;
  rotate: 90deg;

  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.65;
  white-space: nowrap;
}

/* Описание */
.cards-slider-wrapper .cards-slider article p {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  opacity: 0;                 /* появится на активной */
  transition: opacity calc(var(--cs-speed) * 1.2) var(--cs-easing);
}

/* Ссылка */
.cards-slider-wrapper .cards-slider article a {
  position: absolute;
  bottom: 16px;
  left: 16px;

  color: inherit;
  text-decoration: none;
  opacity: 0;                 /* появится на активной */
  transition: opacity calc(var(--cs-speed) * 1.2) var(--cs-easing);
}

.cards-slider-wrapper .cards-slider article a span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Фоновая картинка */
.cards-slider-wrapper .cards-slider article img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  pointer-events: none;

  filter: grayscale(1) brightness(1.25);
  transform: scale(1.05);

  transition:
    filter calc(var(--cs-speed) * 1.2) var(--cs-easing),
    transform calc(var(--cs-speed) * 1.2) var(--cs-easing);
}

/* Активное состояние */
.cards-slider-wrapper .cards-slider [data-active="true"] :is(p, a, h3) {
  opacity: 1;
}

.cards-slider-wrapper .cards-slider [data-active="true"] article img {
  filter: grayscale(0) brightness(1);
  transform: scale(1);
}

/* Чуть мягче на мобиле */
@media (max-width: 768px) {
  .cards-slider-wrapper .cards-slider {
    max-width: 100%;
  }
}

/* Центрируем заголовок "Наши работы" по вертикали между верхом секции и слайдером */
.cards-slider-wrapper {
  padding: 28px 0 64px; /* верх / низ секции (низ можешь оставить как тебе нравится) */
  background: #fff;
}

.cards-slider-wrapper .section-header {
  min-height: 64px;          /* зона под заголовок */
  display: flex;
  align-items: center;        /* ✅ вертикальный центр */
  margin: 0 0 16px;           /* отступ до картинок слайдера */
}

.cards-slider-wrapper .section-title {
  margin: 0;                  /* убираем стандартный margin-bottom:16px */
}