/* ====== ВТОРОЙ БЛОК — САМЫЙ НАДЁЖНЫЙ ВАРИАНТ НА CSS ====== */
.rules-section {
  padding: 0px 20px 120px;
  margin-top: -100px;
  padding-top: 40px;
  background: transparent;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: relative;
  z-index: 2;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.rules-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(50px, 8vw, 96px);
  color: #000000;
  margin: 0 0 20px 0;
  line-height: 1;
}

.rules-subtitle {
  font-size: clamp(20px, 4vw, 30px);
  color: #000000;
  margin: 0 0 60px 0;
  line-height: 1.6;
}

.rules-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* Мобильная адаптация для rules-section */
@media (max-width: 768px) {
  .rules-section {
    padding: 0px 15px 80px;
    margin-top: -70px;
    padding-top: 70px;
    overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container {
    padding: 0 15px;
  }

  .rules-title {
    font-size: clamp(32px, 8vw, 56px);
    margin: 0 0 20px 0;
  }

  .rules-subtitle {
    font-size: clamp(16px, 4vw, 24px);
    margin: 0 0 30px 0;
  }

  .rules-grid {
    gap: 30px;
    flex-direction: column;
  }

  .rule-card-img {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .rules-section {
    padding: 0px 12px 60px;
    margin-top: -60px;
    padding-top: 60px;
    overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container {
    padding: 0 12px;
  }

  .rules-title {
    font-size: clamp(28px, 8vw, 48px);
    margin: 0 0 12px 0;
  }

  .rules-subtitle {
    font-size: clamp(14px, 4vw, 20px);
    margin: 0 0 25px 0;
  }

  /* Скрываем обычную сетку на мобильных */
  .rules-grid {
    display: none;
  }

  /* Показываем слайдер на мобильных */
  .rules-slider-mobile {
    display: block;
  }
}

/* Карточки — чистые SVG */
.rule-card-img {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: 32px;
  box-shadow: none !important;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: transparent !important;
  position: relative;
  z-index: 2;
  /* Оптимизация производительности */
  transform: translateZ(0);
  backface-visibility: hidden;

  /* Начальное состояние — скрыто */
  opacity: 0;
  transform: translateY(120px) rotate(12deg) scale(0.82) translateZ(0);
  filter: blur(8px);
}

/* Анимация появления — включается через класс .visible */
.rule-card-img.visible {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1) translateZ(0);
  filter: blur(0);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* По очереди: 1-я, 2-я, 3-я - задержка только при появлении */
.rule-card-img.visible:nth-child(1) { transition-delay: 0s; }
.rule-card-img.visible:nth-child(2) { transition-delay: 0.35s; }
.rule-card-img.visible:nth-child(3) { transition-delay: 0.7s; }

/* После появления убираем задержки для hover эффектов - медленная плавная анимация */
.rule-card-img.visible:not(:hover) {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transition-delay: 0s !important;
}

/* Hover - медленная плавная анимация вверх (работает для всех видимых карточек) */
.rule-card-img.visible:hover {
  transform: translateY(-30px) scale(1.06) !important;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transition-delay: 0s !important;
}

/* Слайдер для правил на мобильных */
.rules-slider-mobile {
  display: none;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.rules-slider-container {
  position: relative;
  width: 100%;
  min-height: 300px; /* Увеличиваем высоту для большего центрального изображения */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Скрываем переполнение, но видим края через padding */
  touch-action: pan-y;
  padding: 0 45px; /* Еще больше увеличиваем отступы, чтобы фоновые картинки не обрезались */
  box-sizing: border-box;
  margin: 0 auto;
}

.rules-slide {
  position: absolute;
  width: 80%; /* Возвращаем исходную ширину */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px; /* Возвращаем исходный padding */
  box-sizing: border-box;
  opacity: 0; /* По умолчанию скрыты */
  transform: translateX(0) scale(0.85);
  transition: transform 0.4s ease-out, 
              opacity 0.4s ease-out;
  pointer-events: none;
  z-index: 0;
}

.rules-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1.15); /* Увеличиваем центральное изображение */
  position: relative;
  pointer-events: auto;
  z-index: 2;
  transition: transform 0.4s ease-out, 
              opacity 0.4s ease-out;
}

.rules-slide.prev {
  transform: translateX(-40%) scale(0.7); /* Уменьшаем фоновые изображения, чтобы не обрезались */
  opacity: 0.4;
  transition: transform 0.4s ease-out, 
              opacity 0.4s ease-out;
  z-index: 1;
}

.rules-slide.next {
  transform: translateX(40%) scale(0.7); /* Уменьшаем фоновые изображения, чтобы не обрезались */
  opacity: 0.4;
  transition: transform 0.4s ease-out, 
              opacity 0.4s ease-out;
  z-index: 1;
}

.rules-slider-img {
  width: 100%;
  max-width: 180px; /* Уменьшаем размер, чтобы помещались на экран */
  max-height: 240px; /* Уменьшаем высоту */
  height: auto;
  border-radius: 20px;
  box-shadow: none !important;
  display: block;
  margin: 0 auto;
  object-fit: contain; /* Сохраняем пропорции, не обрезаем */
  object-position: center center;
  box-sizing: border-box;
}

.rules-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 5px; /* Еще ближе к картинкам */
  padding: 0 20px;
}

.rules-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(29, 118, 59, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.rules-dot.active {
  background: #1D763B;
  width: 28px;
  border-radius: 6px;
}

/* Мобильная адаптация для слайдера правил */
@media (max-width: 768px) {
  .rules-grid {
    display: none;
  }

  .rules-slider-mobile {
    display: block;
  }
}

@media (max-width: 480px) {
  .rules-section {
    padding-top: 60px;
  }
  
  .rules-slider-container {
    min-height: 260px; /* Уменьшаем высоту */
    padding: 0 35px; /* Увеличиваем отступы */
  }

  .rules-slider-img {
    border-radius: 16px;
    max-width: 150px; /* Уменьшаем размер для маленьких экранов */
    max-height: 200px; /* Уменьшаем высоту */
  }
}

@media (max-width: 360px) {
  .rules-slider-container {
    min-height: 240px; /* Уменьшаем высоту */
    padding: 0 30px; /* Увеличиваем отступы */
  }
  
  .rules-slider-img {
    max-width: 130px; /* Уменьшаем размер для очень маленьких экранов */
    max-height: 180px; /* Уменьшаем высоту */
  }
}