/* ---------- PROJECTS GALLERY ---------- */
.projects-gallery-section {
  background: linear-gradient(180deg, #070C0F, #06080A);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

/* Заголовок */
.projects-gallery-section .section-header {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.projects-gallery-section .section-title {
  font-family: "Rothek", sans-serif;
  font-weight: 250;
  font-size: 48px;
  color: #fff;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Контейнер для бегущей ленты */
.gallery-track-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  ); /* Плавные края */
}

/* Бегущая лента */
.gallery-track {
  display: flex;
  gap: 20px;
  animation: slideInfinite 80s linear infinite; /* Увеличиваем время анимации */
  width: max-content;
}

/* Контейнер для изображения */
.gallery-image-container {
  flex: 0 0 300px;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  background: #1a1a1a;
  transition: transform 0.3s ease;
}

.gallery-image-container:hover {
  transform: translateY(-5px);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Анимация бесконечного движения - сдвигаем на ширину ВСЕХ фото */
@keyframes slideInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-300px * 19 - 20px * 19)); /* Сдвигаем на ширину 19 фото + отступы */
  }
}

/* Пауза при наведении */
.gallery-track-container:hover .gallery-track {
  animation-play-state: paused;
}

/* Адаптивность */
@media (max-width: 1200px) {
  .projects-gallery-section .section-title {
    font-size: 42px;
  }
  
  .gallery-image-container {
    flex: 0 0 280px;
    height: 180px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-280px * 19 - 20px * 19));
    }
  }
}

@media (max-width: 992px) {
  .projects-gallery-section .section-title {
    font-size: 36px;
    
  }
  
  .gallery-image-container {
    flex: 0 0 240px;
    height: 160px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-240px * 19 - 20px * 19));
    }
  }
}

@media (max-width: 768px) {
  .projects-gallery-section {
    padding: 3rem 0;
  }
  
  .projects-gallery-section .section-header {
    flex-direction: column;
    align-items: center; /* Центрируем заголовок */
    gap: 1rem;
    margin-bottom: 2rem;
    text-align: center; /* Центрируем текст */
  }
  
  .projects-gallery-section .section-title {
    font-size: 24px;
    white-space: normal; /* Разрешаем перенос текста */
    text-align: center;
    font-family: "Rothek", sans-serif;
    margin-bottom: -45px;
    margin-top: -30px;

  }
  
  .projects-gallery-section .title-line {
    width: 80%; /* Уменьшаем линию для мобильных */
    margin: 0 auto; /* Центрируем линию */
  }
  

  /* КНИЖНАЯ ОРИЕНТАЦИЯ - вертикальные картинки */
  .gallery-image-container {
    flex: 0 0 200px; /* Уменьшаем ширину */
    height: 300px; /* Увеличиваем высоту для книжной ориентации */
    aspect-ratio: 3/4; /* Соотношение книжной ориентации */
  }
  
  .gallery-track {
    gap: 15px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-140px * 19 - 15px * 19)); /* Подстраиваем под новую ширину */
    }
  }
}

/* iPhone 14/15 Pro Max (430px и меньше) */
@media (max-width: 430px) {
  .projects-gallery-section .section-title {
    font-size: 24px;
    font-family: "Rothek", sans-serif;
  }
  
  /* КНИЖНАЯ ОРИЕНТАЦИЯ */
  .gallery-image-container {
    flex: 0 0 180px; /* Уже */
    height: 280px; /* Выше */
    aspect-ratio: 3/4;
  }
  
  .gallery-track {
    gap: 12px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-130px * 19 - 12px * 19));
    }
  }
}

/* iPhone 12/13/14/15 (390px и меньше) */
@media (max-width: 390px) {
  .projects-gallery-section {
    padding: 2.5rem 0;
  }
  
  .projects-gallery-section .section-title {
    font-size: 20px;
    font-family: "Rothek", sans-serif;
    margin-bottom: -30px;
    margin-top: -30px;
  }
  
  .projects-gallery-section .title-line {
    width: 70%;
  }
  
  /* КНИЖНАЯ ОРИЕНТАЦИЯ */
  .gallery-image-container {
    flex: 0 0 120px;
    height: 160px;
    aspect-ratio: 3/4;
    border-radius: 10px;
  }
  
  .gallery-track {
    gap: 10px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-120px * 19 - 10px * 19));
    }
  }
}

/* iPhone SE и мелкие (375px и меньше) */
@media (max-width: 375px) {
  .projects-gallery-section .section-title {
    font-size: 18px;
    font-family: "Rothek", sans-serif;
    margin-bottom: -30px;
    margin-top: -30px;
  }
  
  /* КНИЖНАЯ ОРИЕНТАЦИЯ */
  .gallery-image-container {
    flex: 0 0 110px;
    height: 150px;
    aspect-ratio: 3/4;
  }
  
  .gallery-track {
    gap: 8px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-110px * 19 - 8px * 19));
    }
  }
}

/* Очень мелкие устройства (320px и меньше) */
@media (max-width: 320px) {
  .projects-gallery-section {
    padding: 2rem 0;
  }
  
  .projects-gallery-section .section-title {
    font-size: 18px;
    font-family: "Rothek", sans-serif;
  }
  
  .projects-gallery-section .title-line {
    width: 60%;
    height: 1px;
  }
  
  /* КНИЖНАЯ ОРИЕНТАЦИЯ */
  .gallery-image-container {
    flex: 0 0 100px;
    height: 140px;
    aspect-ratio: 3/4;
    border-radius: 8px;
  }
  
  .gallery-track {
    gap: 6px;
  }
  
  @keyframes slideInfinite {
    100% {
      transform: translateX(calc(-100px * 19 - 6px * 19));
    }
  }
}

/* Отключаем hover эффекты на мобильных */
@media (max-width: 768px) {
  .gallery-image-container:hover {
    transform: none;
  }
  
  .gallery-track-container:hover .gallery-track {
    animation-play-state: running;
  }
}