/* =====================  05 - Kallitexnes «ΜΟΝΑΔΙΚΕΣ ΣΤΙΓΜΕΣ»  =====================
   Μετρημένο (node 109:3396):
     section 1920×1457 · #080808 · padding 64 / 96 · flex column center · gap 97
     Gallery: flex column center · gap 74
     media   728×678 + 1032×678 · gap 33 · page margin 63  → 63+728+33+1032+64 = 1920
     strip   κάθετα reels, κοινό ύψος ~551
   ================================================================================== */

.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; }

/* --- Η λωρίδα με τα reels (autoscroll) --- */
.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: 31px; list-style: none; margin: 0; padding: 0;
  width: max-content;
  animation: moments-scroll 55s linear infinite;
  will-change: transform;
}

/* Παύση στο hover και όταν παίζει video */
.moments__strip:hover .moments__track,
.moments__strip:has(.is-playing) .moments__track {
  animation-play-state: paused;
}

/* Χωρίς κίνηση αν ο χρήστης το προτιμά */
@media (prefers-reduced-motion: reduce) {
  .moments__track { animation: none; }
}

.reel__btn {
  display: block; position: relative; padding: 0; border: 0; cursor: pointer;
  background: #101010;
  aspect-ratio: 60 / 107;
  overflow: clip;
}

/* --- Desktop: fixed-width reels (Figma: 309×551) --- */
@media (min-width: 900px) {
  .reel { flex: none; }
  .reel__btn { width: clamp(200px, 16.1vw, 309px); height: auto; }
}

/* --- Κινητό: μικρότερες κάρτες, ίδια animation --- */
@media (max-width: 899px) {
  .moments__track { gap: 14px; }
  .reel { flex: none; }
  .reel__btn { width: 35vw; height: auto; }
  .moments__track { animation-duration: 38s; }
}
.reel__btn img, .reel__btn video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.reel__btn video { position: absolute; inset: 0; }
.reel__play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgb(0 0 0 / .45); backdrop-filter: blur(4px);
  border: 1px solid rgb(255 255 255 / .5);
  transition: background-color var(--dur) var(--ease), scale var(--dur) var(--ease), opacity .35s var(--ease);
}
.reel__play::after {
  content: ""; position: absolute; inset: 50% auto auto 54%; translate: -50% -50%;
  border-left: 14px solid var(--c-white);
  border-block: 9px solid transparent;
}
.reel__btn:hover .reel__play { background: var(--c-gold); scale: 1.06; }
.reel__btn:hover .reel__play::after { border-left-color: var(--c-black); }
.reel.is-playing .reel__play { opacity: 0; pointer-events: none; }

/* --- 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; }
  .reel__play { width: 46px; height: 46px; }
}