/* marquee.css — κυλιόμενη λωρίδα λέξεων («ticker»).
   Το ζητά το block «Marquee — λωρίδα». Χρησιμεύει σε δύο πράγματα ταυτόχρονα:
   δίνει κίνηση και ρυθμό στη σελίδα, και επαναλαμβάνει φυσικά τις λέξεις που
   θέλουμε για την τοπική αναζήτηση (Λευκίμμη, Κάβος, Κέρκυρα).

   ΠΩΣ ΔΟΥΛΕΥΕΙ: το περιεχόμενο υπάρχει ΔΥΟ φορές στο markup και η ταινία
   μετακινείται κατά -50%. Όταν τελειώσει, το δεύτερο αντίγραφο βρίσκεται
   ακριβώς εκεί που ήταν το πρώτο — η επανάληψη δεν φαίνεται ποτέ.
   Χωρίς JS, χωρίς μέτρηση πλάτους. */

.nq-mq { overflow: hidden; border-block: 1px solid var(--nq-line); background: #fff;
  padding: 22px 0; }
.nq-mq-track { display: flex; width: max-content; animation: nq-mq 38s linear infinite; }
.nq-mq-group { display: flex; align-items: center; flex: 0 0 auto; }

.nq-mq-item { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em;
  color: var(--nq-fg); white-space: nowrap; }
/* Διαχωριστικό: μικρό τετράγωνο — η ίδια «box» υπογραφή με το hero. */
.nq-mq-item::after { content: ""; width: 9px; height: 9px; border-radius: 2px;
  background: var(--nq-accent); flex: 0 0 auto; }
/* Κάθε δεύτερη λέξη μόνο με περίγραμμα: δίνει ρυθμό αντί για συμπαγή τοίχο. */
.nq-mq-item:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(17, 24, 39, .32); }

@keyframes nq-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Σκούρα παραλλαγή, για να κουμπώνει κάτω από σκούρο hero. */
.nq-mq-dark { background: #0b0f1a; border-color: rgba(255, 255, 255, .1); }
.nq-mq-dark .nq-mq-item { color: #fff; }
.nq-mq-dark .nq-mq-item:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .38); }

/* Σεβασμός στη ρύθμιση του συστήματος: χωρίς κίνηση, η λωρίδα μένει ακίνητη. */
@media (prefers-reduced-motion: reduce) { .nq-mq-track { animation: none; } }