/* insta.css — Αρχική · ενότητα 10: Ροή Instagram (κυλιόμενη λωρίδα) */
.insta { background: var(--bg-alt); padding-block: var(--space-2xl); overflow: hidden; }

.insta-head { text-align: center; margin-bottom: var(--space-xl); }
.insta-head .eyebrow { justify-content: center; }
.insta-title { margin-top: var(--space-2xs); }
.insta-head .link-arrow { margin-top: var(--space-sm); }

.insta-marquee {
  display: flex;
  overflow-x: hidden; overflow-y: visible;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.insta-track {
  display: flex; gap: var(--space-sm); width: max-content;
  animation: instaScroll 80s linear infinite;
}
.insta-marquee:hover .insta-track { animation-play-state: paused; }
@keyframes instaScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.insta-item {
  position: relative; flex: none;
  width: clamp(180px, 22vw, 280px); aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  transition: transform .4s var(--ease);
}
.insta-item:hover { transform: scale(1.03); }
.insta-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* overlay με εικονίδιο IG στο hover */
.insta-item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(16,14,10,.0); transition: background .4s var(--ease);
}
.insta-item:hover::after { background: rgba(16,14,10,.35); }

/* placeholder πλακίδιο */
.insta-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-700); color: var(--accent);
  background: radial-gradient(circle at 30% 25%, #241f14, #100d08);
}

@media (prefers-reduced-motion: reduce) {
  .insta-marquee { overflow-x: auto; -webkit-mask: none; mask: none; }
  .insta-track { animation: none !important; }
}

/* ============================================================
   review #5: στατικό grid 4 φωτό (χωρίς κίνηση)
   ============================================================ */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 48em) { .insta-grid { grid-template-columns: repeat(4, 1fr); } }
.insta-grid .insta-item { width: 100%; aspect-ratio: 1 / 1; }