/* =====================  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 --- */
.moments__strip {
  /* Το .moments είναι flex με gap 97 ανάμεσα σε ΟΛΑ τα παιδιά. Στο Figma όμως
     τα 97 ισχύουν μόνο τίτλος→gallery· μέσα στο «05 - Gallery» το κενό
     εικόνες→reels είναι 74. Αφαιρούμε τη διαφορά αντί να προσθέσουμε δεύτερο
     margin (που έδινε 97+74=171). */
  margin-top: calc(clamp(28px, 3.85vw, 74px) - clamp(40px, 5.05vw, 97px));
  width: 100%;
}
.moments__strip::-webkit-scrollbar { display: none; }
.moments__track {
  display: flex; gap: 31px; list-style: none; margin: 0; padding: 0;
}
.reel__btn {
  display: block; position: relative; padding: 0; border: 0; cursor: pointer;
  background: #101010;
  aspect-ratio: 60 / 107;                /* μετρημένο στο Figma (Frame 53) */
  overflow: clip;
}

/* --- Desktop: χωράνε και τα 6 ---------------------------------------------
   Το Figma δίνει λωρίδα 1920 με 6 reels 309×551 και gap 31. Το άθροισμα όμως
   βγαίνει 6×309 + 5×31 = 2009 — 89px πάνω από το πλάτος του frame, γι' αυτό
   στο mockup το ένα reel είναι κομμένο (με justify-content: flex-end κόβεται
   το πρώτο, αριστερά).
   Δεν αντιγράφω την υπερχείλιση: τα reels μοιράζονται ισομερώς το πλάτος και
   χωράνε ακριβώς. 309→294 και 551→525, διαφορά 5% που δεν φαίνεται δίπλα στο
   mockup, και κανένα δεν κόβεται. */
@media (min-width: 900px) {
  .moments__track { width: 100%; }
  .reel { flex: 1 1 0; min-width: 0; }
  .reel__btn { width: 100%; height: auto; }
}

/* --- Κινητό: οριζόντια λωρίδα με snap ------------------------------------
   Εδώ η υπερχείλιση είναι σκόπιμη: φαίνονται ~2,5 κάρτες και οι υπόλοιπες
   έρχονται σέρνοντας. */
@media (max-width: 899px) {
  .moments__strip {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--page-margin);
  }
  .moments__track { width: max-content; }
  .reel { scroll-snap-align: center; }
}
.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;
  }
  /* Στο mobile η δεύτερη εικόνα είναι η πιο δυνατή — μπαίνει πρώτη. */
  .moments__big--b { order: -1; }
  .moments__big img { aspect-ratio: 16 / 11; }
  .moments__big--b img { aspect-ratio: 16 / 11; }
  .moments__track { gap: 14px; }
  .reel__btn { height: 62vw; max-height: 420px; width: auto; }
  .reel__play { width: 46px; height: 46px; }
}