/* =====================  05 - Gallery «ΜΟΝΑΔΙΚΕΣ ΣΤΙΓΜΕΣ»  ========================
   Δομή (ακριβώς όπως votanikos):
     section  1920×auto · #080808 · padding 64/96 · flex column center · gap 97
     pair     2 μεγάλες εικόνες: 728fr + 1032fr, gap 33
     strip    κάθετες φωτογραφίες · ύψος 551px · auto-scroll CSS animation
   ================================================================================== */

.moments {
  background: var(--c-black);
  padding-block: clamp(40px, 3.33vw, 64px) clamp(56px, 5vw, 96px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(40px, 5.05vw, 97px);
  overflow: clip;
}

.moments__head { text-align: center; }
.moments__head .section__title { margin-top: .3em; }

/* --- Δύο μεγάλες εικόνες (ζεύγος) --- */
.moments__pair {
  display: grid; gap: 33px;
  grid-template-columns: 728fr 1032fr;  /* αναλογία Figma */
  width: 100%;
}
.moments__big { margin: 0; overflow: clip; }
.moments__big img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; aspect-ratio: 728 / 678;
  transition: scale .9s var(--ease);
}
.moments__big--b img { aspect-ratio: 1032 / 678; }
[data-richness="2"] .moments__big:hover img { scale: 1.04; }

/* --- Αυτόματη λωρίδα εικόνων --- */
.moments__strip {
  margin-top: calc(clamp(28px, 3.85vw, 74px) - clamp(40px, 5.05vw, 97px));
  width: 100%;
  overflow: hidden;
}

@keyframes moments-scroll {
  to { transform: translateX(-50%); }
}

.moments__track {
  display: flex; gap: 12px; list-style: none; margin: 0; padding: 0;
  width: max-content;
  animation: moments-scroll 50s linear infinite;
  will-change: transform;
}

.moments__strip:hover .moments__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .moments__track { animation: none; }
}

/* --- Κάθε εικόνα στη λωρίδα --- */
.gallery__item {
  flex: none;
  aspect-ratio: var(--img-w) / var(--img-h);
  height: clamp(280px, 38.6vw, 551px);
  width: auto;
  overflow: clip;
  border-radius: 4px;
  transition: scale .7s var(--ease, ease);
}
[data-richness="2"] .gallery__item:hover { scale: 1.025; }

.gallery__item picture,
.gallery__item img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- Mobile --- */
@media (max-width: 899px) {
  .moments__pair {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .moments__big--b { order: -1; }
  .moments__big img  { aspect-ratio: 16 / 11; }
  .moments__big--b img { aspect-ratio: 16 / 11; }
  .moments__track { gap: 10px; animation-duration: 35s; }
  .gallery__item { height: clamp(200px, 55vw, 380px); }
}