/* =========================================================================
   ΣΠΦΣΚ — design system
   Κάθε απόφαση (μεγέθη, αποστάσεις, γωνίες, ταχύτητες) είναι μεταβλητή εδώ
   πάνω. Αλλάζεις την τιμή μία φορά, αλλάζει παντού — δεν κυνηγάς νούμερα
   μέσα στο αρχείο.
   ========================================================================= */

:root{
  color-scheme: light;

  /* Κλίμακα τυπογραφίας: κάθε βήμα ~1.25x το προηγούμενο. Τα clamp()
     κάνουν τα μεγάλα μεγέθη να συρρικνώνονται μόνα τους στο κινητό. */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --t-2xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.5rem);
  --t-3xl: clamp(3rem, 1.8rem + 5.5vw, 6.5rem);

  /* Αποστάσεις, σε βήματα 4px. --s-8/9/10 μειώθηκαν (ζητήθηκε ρητά "λίγο πιο
     κοντά, λιγότερο scroll") — ήταν 4rem/6rem/8rem, χρησιμοποιούνται σε
     .section padding + μεγάλα margins/gaps παντού στο site, άρα η μείωση
     εδώ σφίγγει ομοιόμορφα ΟΛΕΣ τις σελίδες χωρίς να αλλάξει περιεχόμενο. */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 3rem;
  --s-9: 4.5rem; --s-10: 6rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 12px 40px rgba(0,0,0,.45);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.6);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;

  --wrap: 1180px;
  --wrap-narrow: 720px;
  --wrap-wide: 1560px;

  /* Παράγωγα χρώματα. Το color-mix γλιτώνει το να ορίζουμε δεκάδες
     παραλλαγές με το χέρι — αν αλλάξει το --accent, ακολουθούν όλα. */
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--text) 24%, transparent);
  --text-dim: color-mix(in srgb, var(--text) 92%, transparent);
  --text-faint: color-mix(in srgb, var(--text) 74%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
}

*,*::before,*::after{ box-sizing: border-box; }

/* scroll-behavior ΟΧΙ smooth: παίζει κακό με το ανά-καρέ scrollTo του
   smooth-scroll.js (βλ. σχόλιο εκεί) — οι δύο ταυτόχρονες ομαλοποιήσεις
   πάλευαν μεταξύ τους και "έτρωγαν" εντελώς τα anchor links (#contact κ.λπ.
   δεν έκαναν καθόλου scroll). Το smooth-scroll.js αναλαμβάνει μόνο του το
   animated scroll για τα anchor clicks· η αρχική (πλοήγηση από άλλη σελίδα ή
   απευθείας hash) μένει instant, που είναι σωστό/λειτουργικό αντί για σπασμένο. */
/* background και στο html (όχι μόνο στο body): χωρίς αυτό, το elastic/
   rubber-band bounce του trackpad πέρα από κάθε άκρη της σελίδας άφηνε να
   φανεί το προεπιλεγμένο λευκό του browser για μια στιγμή — ζητήθηκε ρητά
   να διορθωθεί. */
html{ scroll-behavior: auto; scroll-padding-top: 90px; background: var(--ink); }

body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip (όχι hidden): κόβει το οριζόντιο ξεχείλισμα χωρίς να κάνει το
     body ξεχωριστό scroll container — το hidden έσπαγε το κλείδωμα
     scroll στο modal σε παλιότερο project. */
  overflow-x: clip;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
button{ font: inherit; color: inherit; }

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -.01em;
}

::selection{ background: var(--accent); color: #14110A; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--accent); color:#14110A; padding: var(--s-3) var(--s-5);
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{ width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow{ width: min(100% - 2.5rem, var(--wrap-narrow)); }
.wrap-wide{ width: min(100% - 2.5rem, var(--wrap-wide)); }
.muted{ color: var(--text-faint); }

/* ---------- Επαναλαμβανόμενα δομικά ---------- */

.section{ padding: var(--s-10) 0; position: relative; }

.section-head{ max-width: 46rem; margin-bottom: var(--s-8); }

.eyebrow{
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--accent);
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
}

.section-title{
  font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: -.015em;
}
.section-title-sm{ font-size: var(--t-xl); }

.section-intro{ color: var(--text-dim); font-size: var(--t-md); margin: var(--s-4) 0 0; max-width: 42rem; }
.section-intro-lead{ font-size: var(--t-lg); color: var(--text); }

/* ---------- Κουμπιά ---------- */

/* :not([hidden]) — χωρίς αυτό, ένα <button class="btn" hidden> (π.χ. το
   "Επόμενο" στο quiz/education πριν απαντήσεις) παρέμενε ορατό: το
   display:inline-flex εδώ νικούσε το UA display:none του [hidden]. */
.btn:not([hidden]){
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:active{ transform: scale(.96); }
.btn-sm{ padding: var(--s-2) var(--s-4); font-size: var(--t-xs); }
.btn-lg{ padding: var(--s-4) var(--s-6); font-size: var(--t-base); }
.btn-block{ width:100%; }

.btn-accent{ background: var(--accent); color:#000; }
.btn.btn-accent{ font-weight:700; }
.btn-accent:hover{ background: color-mix(in srgb, var(--accent) 85%, white); }

.btn-ghost{ border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- Nav ---------- */

.site-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display:flex; align-items:center; gap: var(--s-5);
  padding: var(--s-4) clamp(1rem, 4vw, 2.5rem);
  transition: background-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              padding var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
/* Πάνω από τη φωτογραφία του hero το nav είναι διάφανο· μόλις αρχίσει το
   scroll γίνεται συμπαγές ώστε να διαβάζεται πάνω από κείμενο. */
.site-nav.is-scrolled{
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: var(--s-3);
}

.brand{ display:flex; align-items:center; gap: var(--s-3); text-decoration:none; margin-right:auto; }
.brand img{ width:70px; height:70px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0,0,0,.28)); transition: width var(--dur) var(--ease), height var(--dur) var(--ease); }
.site-nav.is-scrolled .brand img{ width:56px; height:56px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-abbr{ font-family: var(--font-display); font-weight:600; font-size: var(--t-md); letter-spacing:.06em; }
.brand-full{ margin-top:5px; font-size: var(--t-xs); color: var(--text-faint); letter-spacing:.04em; }
/* Κέρσορας πληκτρολογίου όσο "γράφεται" ένα στοιχείο στο load — βλ.
   typewriter.js. Η κλάση .is-typing μπαίνει/φεύγει από το JS, γενικό
   ώστε να ισχύει και για το brand-full και για τον τίτλο του hero. Το
   animation κόβεται σε reduced-motion πιο κάτω. */
.is-typing::after{
  content:""; display:inline-block; width:2px; height:.85em;
  margin-left:.05em; background: currentColor; vertical-align:-.08em;
  animation: brand-caret-blink 1s steps(1) infinite;
}
@keyframes brand-caret-blink{ 50%{ opacity:0; } }

/* align-items:center (αντί για το default stretch) — χρειάστηκε όταν
   μπήκε το ψηλότερο .nav-quiz chip (padding), αλλιώς τα άλλα links
   έμεναν κολλημένα πάνω-πάνω στη σειρά αντί να είναι στην ίδια "ευθεία"
   (κάθετο κέντρο) με το chip. */
.nav-links{ display:flex; align-items:center; gap: var(--s-5); }
.nav-links a{
  position: relative;
  font-size: var(--t-base);
  font-weight: 700;
  text-decoration:none;
  color: var(--text-dim);
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-6px; height:1px;
  background: var(--accent);
  transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a:hover::after{ left:0; right:0; }

/* "Ποντιακό Κουίζ" = το gamify στοιχείο του site, ζητήθηκε ρητά να
   "χτυπάει στο μάτι" σαν χρωματιστό chip — ίδιο font-size με τα άλλα nav
   items, καμία αλλαγή μεγέθους κειμένου, μόνο χρώμα/φόντο. Οι κανόνες
   `a.nav-quiz` πρέπει να μένουν ΜΕΤΑ τα `.nav-links a`/`.mobile-nav a`
   παραπάνω/παρακάτω στο αρχείο — ίδια ειδικότητα CSS, κερδίζει με σειρά.
   Χρώμα ΕΠΙΤΗΔΕΣ διαφορετικό από το χρυσό `--accent`/`.btn-accent` (ΓΙΝΕ
   ΜΕΛΟΣ) — ο χρήστης το βρήκε πρώτη φορά πολύ κοντά σε "δύναμη"/χρώμα με
   το κουμπί μέλους, ζήτησε ρητά να ξεχωρίζει αλλά να ΜΗΝ του μοιάζει.
   Βάση το γαλάζιο-πράσινο της θάλασσας (`site.json` → `brand.seaColor`,
   #1F4B57 — ήδη μέρος της ταυτότητας "Εύξεινος Πόντος", απλά δεν είχε
   ξαναχρησιμοποιηθεί πουθενά σε CSS) προς μωβ, ψυχρή παλέτα αντίθετη από
   το ζεστό χρυσό/πορτοκαλί της CTA. */
a.nav-quiz{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.3em .85em;
  white-space:nowrap;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #1F4B57, #6C4F9E);
  color: var(--surface);
  animation: nav-quiz-glow 2.4s ease-in-out infinite;
}
a.nav-quiz::after{ display:none; }
a.nav-quiz:hover{ color: var(--surface); filter:brightness(1.15); }
@keyframes nav-quiz-glow{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, #6C4F9E 35%, transparent); }
  50%{ box-shadow:0 0 12px 2px color-mix(in srgb, #6C4F9E 55%, transparent); }
}
/* Κουίζ "παγωμένο" (site.education.comingSoon): γκρι chip, όχι link. */
.nav-quiz.is-soon{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.3em .85em; white-space:nowrap;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text-faint);
  font-weight:700; cursor:not-allowed; user-select:none;
}
.mobile-nav .nav-quiz.is-soon{ align-self:flex-start; margin: var(--s-1) 0 var(--s-2); }
.soon-tag{
  font-size:.7em; letter-spacing:.06em; text-transform:uppercase;
  padding:.1em .5em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
.mobile-nav a.nav-quiz{
  align-self: flex-start;
  margin-top: var(--s-1);
  padding:.3em .85em;
  border-bottom:0;
  color: var(--surface);
}

.nav-actions{ display:flex; align-items:center; gap: var(--s-3); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding: var(--s-2); cursor:pointer;
}
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--text); transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: 72px var(--s-4) auto; z-index: 99;
  display:flex; flex-direction:column; gap: var(--s-2);
  padding: var(--s-5);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mobile-nav a{ padding: var(--s-3) var(--s-2); text-decoration:none; color: var(--text-dim); border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border:0; margin-top: var(--s-2); }
.mobile-nav a.btn-accent{ color:#000; }
.mobile-nav[hidden]{ display:none !important; }

/* ---------- Hero (στατικό, χωρίς φωτογραφία — βλ. hero.njk) ----------
   Αντικατέστησε το παλιό "orbit" 3D ring με scroll-pin (πολλά περάσματα
   ρύθμισης — μέγεθος/ταχύτητα/απόσταση κουτακιών, βλ. git log — μέχρι που
   ζητήθηκε ρητά να αντικατασταθεί εξ ολοκλήρου: "δεν μου αρέσει καθόλου το
   [πράγμα] που έχουμε να κάνει κύκλο και να δείχνει τα κουτάκια"). Καμία
   pinned/scroll-hijacked ενότητα πια — απλή, κανονική ροή σελίδας.
   Η φωτογραφία-φόντο (πρώτη εκδοχή αυτού του hero) αφαιρέθηκε ρητά ξανά —
   "να σβήσει η φωτογραφία... να φαίνεται ο αετός από πίσω": το hero δεν
   έχει πια δικό του background, οπότε το ήδη υπάρχον global watermark
   `.blood-bg-eagle` (theme-spfskav.css, πίσω από ΟΛΗ τη σελίδα) φαίνεται
   πλέον και εδώ, ίδιο με κάθε άλλη ενότητα. */
.hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-block: var(--s-10) var(--s-7);
}
.hero-content{
  position:relative; z-index:1;
  width: min(100% - 2.5rem, var(--wrap));
  display:flex; flex-direction:column; align-items:center; gap: var(--s-5);
  text-align:center;
}
.hero-eyebrow{ color: var(--text-faint); }
.hero-title{
  font-size: clamp(1.9rem, 1.3rem + 3.6vw, 4.5rem);
  font-weight:700; text-transform: uppercase; letter-spacing:-.02em;
  color: var(--text);
}
.hero-line{ display:block; }
.hero-line-accent{ color: var(--accent); }
.hero-tagline{ font-size: var(--t-lg); color: var(--text-dim); max-width: 34rem; margin: var(--s-5) 0 0; }

/* Κάθε γραμμή του τίτλου μπαίνει σαν να μην υπήρχε, γλιστρώντας από
   έξω-αριστερά της οθόνης (όχι απλά λίγα px, ολόκληρη η γραμμή ξεκινάει
   εκτός viewport) — ζητήθηκε ρητά αντί για typewriter (γράμμα-γράμμα). */
.hero-line-slidein{
  opacity:0; transform: translateX(-100vw);
  animation: heroSlideInLeft .8s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 200ms + .1s);
}
@keyframes heroSlideInLeft{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-line-slidein{ animation:none; opacity:1; transform:none; }
}

/* Entrance animation στο load — ζητήθηκε ρητά "να εμφανίζεται animated"
   μόλις μπαίνεις στη σελίδα. Διαδοχική καθυστέρηση ανά στοιχείο μέσω --d
   (ίδιο τέχνασμα με το reveal.js/.reveal, εδώ όμως τρέχει αμέσως στο load
   αντί να περιμένει IntersectionObserver — το hero είναι ήδη ορατό από την
   πρώτη στιγμή, άρα δεν χρειάζεται scroll-trigger). */
.hero-anim{
  opacity:0; transform: translateY(22px);
  animation: heroFadeUp .8s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 140ms + .1s);
}
@keyframes heroFadeUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-anim{ animation:none; opacity:1; transform:none; }
}

/* Λίγο πιο στενό από το κοινό .wrap-wide (1560px) — τα κουτάκια ζητήθηκε
   ρητά να μικρύνουν "για πάρα πολύ λίγο", οπότε στενεύει μόνο εδώ το
   container αντί να αγγίξουμε το κοινό --wrap-wide token (χρησιμοποιείται
   και αλλού, π.χ. /pontos/). */
.category-wrap{ position:relative; z-index:2; margin-top: var(--s-5); width: min(100% - 2.5rem, 1420px); }
.category-grid{
  display:grid; gap: var(--s-6);
  grid-template-columns: repeat(4, 1fr);
}
.category-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  text-decoration:none;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Τα κουτάκια εμφανίζονται το ένα μετά το άλλο (--d = σειρά κάρτας) λίγο
   αφού ολοκληρωθεί το slide-in του τίτλου (2 γραμμές × 200ms + .8s
   διάρκεια ≈ .9s) — σταθερή καθυστέρηση αντί να περιμένουν event από JS.
   Δοκιμάστηκαν και αναιρέθηκαν ρητά 2 συνεχή idle animations μετά την
   είσοδο (κάθετο "κυμάτισμα", μετά οριζόντιο sway, μετά "ανέμισμα" με
   περιστροφή) — ο χρήστης δεν ήθελε τίποτα από αυτά ("σβήσε ό,τι
   κυματισμό/ανέμισμα υπάρχει"). Μένει μόνο το εφάπαξ fade-up στην
   είσοδο, καμία idle κίνηση μετά. Αν ζητηθεί ξανά κάποιο idle animation
   στο μέλλον, να μη ξαναδοκιμαστεί καμία από τις 3 ήδη απορριφθείσες
   μορφές χωρίς νέα κατεύθυνση από τον χρήστη. */
.category-card-anim{
  opacity:0; transform: translateY(20px) scale(.96);
  animation: heroFadeUp .6s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 140ms + .9s);
}
@media (prefers-reduced-motion: reduce){
  .category-card-anim{ animation:none; opacity:1; transform:none; }
}
.category-card-primary{ box-shadow: var(--shadow-lg); }
.category-card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform var(--dur-slow) var(--ease);
}
.category-card-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg,
    transparent 40%,
    color-mix(in srgb, var(--text) 30%, transparent) 70%,
    color-mix(in srgb, var(--text) 80%, transparent) 100%);
}
/* Διακριτικά γωνιακά "τσιτάκια" σε hover — ίδιο πνεύμα με το ελληνικό
   διακοσμητικό πλαίσιο που είχαν τα παλιά 3D κουτάκια, εδώ σκέτο CSS. */
.category-card-corner{
  position:absolute; width:22px; height:22px;
  border-color: var(--accent);
  opacity:0; transition: opacity var(--dur) var(--ease);
}
.category-card-corner-tl{ top:10px; left:10px; border-top:2px solid; border-left:2px solid; }
.category-card-corner-br{ bottom:10px; right:10px; border-bottom:2px solid; border-right:2px solid; }
.category-card-label{
  position:absolute; left: var(--s-2); right: var(--s-2); bottom: var(--s-3);
  text-align:center; line-height:1.15;
  font-family: var(--font-display); font-weight:700;
  /* clamp αντί για σταθερό --t-md: σε στενές κάρτες (2 στήλες σε κινητό) το
     κείμενο "ΓΙΝΕ ΜΕΛΟΣ"/"Ο ΠΟΝΤΟΣ" έκοβε πάνω στις άκρες της κάρτας —
     clamp το μικραίνει αυτόματα ανάλογα με το πλάτος του viewport. */
  font-size: clamp(.7rem, .55rem + 1.4vw, var(--t-md));
  letter-spacing:.04em; text-transform:uppercase; color: var(--surface);
  transition: letter-spacing var(--dur) var(--ease);
}
.category-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.category-card:hover .category-card-img{ transform: scale(1.06); }
.category-card:hover .category-card-corner{ opacity:1; }
.category-card:hover .category-card-label{ letter-spacing:.08em; }
.category-card:active{ transform: translateY(-2px) scale(.99); }
/* Κουτάκι "Σύντομα" (π.χ. Ποντιακό Κουίζ όσο είναι παγωμένο): γκρι, χωρίς
   hover/κλικ. Μπαίνει μετά τα :hover ώστε να τα ακυρώνει. */
.category-card.is-soon{ cursor:not-allowed; }
.category-card.is-soon .category-card-img{ filter: grayscale(1) brightness(.85); }
.category-card.is-soon:hover,
.category-card.is-soon:active{ transform:none; box-shadow: var(--shadow-md); }
.category-card.is-soon:hover .category-card-img{ transform:none; }
.category-card.is-soon:hover .category-card-corner{ opacity:0; }
.category-card.is-soon:hover .category-card-label{ letter-spacing:.04em; }
.category-card-soon{
  position:absolute; top: var(--s-3); left:50%; transform: translateX(-50%);
  padding:.25em .8em; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text) 75%, transparent);
  color: var(--surface);
  font-size: var(--t-xs); font-weight:800; letter-spacing:.1em;
}

/* Δύο στήλες πλάι-πλάι: τίτλος αριστερά, τα 4 κουτάκια (2x2) δεξιά —
   ζητήθηκε ρητά. Κάτω από 900px μένει η παλιά στοιβαγμένη μορφή
   (τίτλος πάνω, κουτάκια από κάτω, όλα κεντραρισμένα). */
@media (min-width: 900px){
  .hero{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap: var(--s-7);
    width: min(100% - 2.5rem, var(--wrap-wide));
    margin-inline:auto;
    /* Το πάνω padding ΔΕΝ μπορεί να κατέβει κάτω από το ύψος του fixed
       .site-nav (~82px, βλ. style.css .site-nav) — αλλιώς ο τίτλος/τα
       κουτάκια ξεκινούν κάτω από το μενού και κόβονται πίσω του. Η
       πραγματική εξοικονόμηση ύψους (ώστε όλο το hero να χωράει σε ένα
       τυπικό ύψος οθόνης) έρχεται από τις πιο κοντές κάρτες (4:3
       παρακάτω) — ο τίτλος ανεβαίνει αυτόματα μαζί τους επειδή το
       align-items:center κεντράρει τις δύο στήλες στο (πλέον μικρότερο)
       ύψος του πλέγματος. */
    padding-block: 8rem var(--s-5);
  }
  .hero-content{ width:100%; text-align:left; align-items:flex-start; }
  .hero-title{ font-size: clamp(2.1rem, 1.1rem + 3.2vw, 4rem); }
  /* Μικρή μετατόπιση μόνο των 4 φωτογραφιών προς τα κάτω σε σχέση με τον
     τίτλο (ζητήθηκε ρητά "πολύ λίγο πιο κάτω") — δεν αγγίζει το
     .hero padding-block, άρα ο τίτλος μένει ακριβώς εκεί που είναι. */
  .category-wrap{ width:100%; margin-top: var(--s-4); }
  .category-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  /* Πιο κοντές κάρτες (4:3 αντί για 3:4) — μικρότερο συνολικό ύψος του
     2x2 πλέγματος ώστε να μην κόβονται οι κάτω δύο φωτογραφίες. */
  .category-card{ aspect-ratio: 4 / 3; }
}

@media (max-width: 900px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .hero{ padding-block: var(--s-8) var(--s-6); }
  .category-wrap{ margin-top: var(--s-4); }
  .category-grid{ grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* ---------- Χρονολόγιο ---------- */

.timeline{ list-style:none; margin:0; padding:0; position:relative; }
/* Η κάθετη γραμμή που ενώνει τα γεγονότα. Σταματάει λίγο πριν το τέλος
   ώστε να μη "κρέμεται" κάτω από το τελευταίο στοιχείο. */
.timeline::before{
  content:""; position:absolute; left:0; top:8px; bottom:40px; width:1px;
  background: linear-gradient(to bottom, var(--accent), var(--line) 70%, transparent);
}
.timeline-item{ position:relative; padding: 0 0 var(--s-7) var(--s-6); }
.timeline-item::before{
  content:""; position:absolute; left:-4px; top:10px;
  width:9px; height:9px; border-radius:50%;
  background: var(--ink); border:2px solid var(--accent);
}
.timeline-year{
  font-family: var(--font-display); font-weight:600;
  font-size: var(--t-sm); letter-spacing:.14em; color: var(--accent);
  margin-bottom: var(--s-2);
}
.timeline-body h3{ font-size: var(--t-lg); margin-bottom: var(--s-2); }
.timeline-body p{ margin:0; color: var(--text-dim); max-width: 48rem; }

/* ---------- Χάρτης ---------- */

.map-stage{
  position: relative;
  width: min(100% - 1rem, 1400px);
  margin: 0 auto var(--s-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.map-image{ width:100%; height:auto; aspect-ratio: 3 / 2; object-fit:cover; display:block; }

/* Σελίδα «Ο Πόντος»: χάρτης αριστερά, κουμπιά-πόλεις δεξιά. Ο χάρτης
   ΠΡΕΠΕΙ να κρατάει τη φυσική αναλογία 3:2 του — τα mapX/mapY % των
   σημείων (.map-point, παρακάτω) είναι βαθμονομημένα πάνω σε αυτή την
   αναλογία, αλλιώς πέφτουν σε λάθος θέση πάνω στην εικόνα. Άρα δεν μπαίνει
   σταθερό ύψος εδώ (θα ζόραγε/έκοβε την εικόνα) — το ύψος του
   .region-panel συγχρονίζεται αντ' αυτού με JS (region-modal.js) ώστε να
   ταιριάζει οπτικά με ό,τι ύψος βγάλει ο χάρτης. */
.pontos-layout{
  display:grid;
  grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  gap: var(--s-8);
  margin-bottom: var(--s-7);
  align-items:start;
}
.pontos-layout .map-stage{ width:auto; margin:0; }

.region-panel{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s-4);
  overflow-y:auto;
}

@media (max-width: 900px){
  .pontos-layout{ grid-template-columns: 1fr; }
  .region-panel{ height: min(60vh, 480px); }
}

.map-points{ position:absolute; inset:0; }
.map-point{
  position:absolute; transform: translate(-50%,-50%);
  display:flex; flex-direction:column-reverse; align-items:center; gap: var(--s-1);
  background:none; border:0; margin:0; padding: var(--s-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.map-point-halo{
  position:absolute; top:50%; left:50%; width:26px; height:26px;
  transform: translate(-50%,-50%); border-radius:50%;
  background: var(--accent); opacity:0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Η ίδια η εικόνα έχει ήδη τυπωμένη μαύρη κουκκίδα σε κάθε πόλη — δεν
   ζωγραφίζουμε δική μας από πάνω εδώ. Το .map-point-dot μένει αόρατο και
   χρησιμεύει μόνο σαν σταθερό click target. */
.map-point-dot{
  position:relative; width:14px; height:14px; border-radius:50%; box-sizing:border-box;
  background: transparent; border: 0;
}
.map-point-label{
  font-family: var(--font-display); font-size:14px; font-weight:600;
  color: var(--text); letter-spacing:.03em; white-space:nowrap;
  text-shadow: 0 1px 3px var(--ink), 0 0 8px var(--ink);
  transition: color var(--dur-fast) var(--ease);
  display:none;
}

.map-point:hover .map-point-halo,
.map-point:focus-visible .map-point-halo,
.map-point.is-active .map-point-halo{ opacity:.32; }
.map-point:hover .map-point-label,
.map-point:focus-visible .map-point-label,
.map-point.is-active .map-point-label{ color: var(--accent); display:block; }

.region-list{
  display:grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  align-content:start;
}
.region-card{
  display:flex; flex-direction:column; gap: 2px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align:left; cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.region-card:hover, .region-card:focus-visible{
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-2px);
}
.region-card-name{ font-family: var(--font-display); font-size: var(--t-sm); font-weight:600; text-transform:uppercase; color: var(--text); }
.region-card-today{ font-size: 11px; color: var(--accent); letter-spacing:.03em; }

/* Ιστορικό περιοχής — περιεχόμενο του modal που ανοίγει από .region-card */
.region-detail h3{ font-size: var(--t-xl); text-transform:uppercase; }
.region-detail .region-today-line{ color: var(--accent); font-size: var(--t-sm); margin: var(--s-2) 0 var(--s-5); letter-spacing:.08em; }
.region-detail p{ color: var(--text-dim); }
.region-detail h4{
  font-family: var(--font-display); font-size: var(--t-xs); letter-spacing:.2em;
  text-transform:uppercase; color: var(--accent); margin: var(--s-6) 0 var(--s-3);
}
.fact-list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3); }
.fact-list li{ padding-left: var(--s-5); position:relative; color: var(--text-dim); }
.fact-list li::before{ content:""; position:absolute; left:0; top:.7em; width:10px; height:1px; background: var(--accent); }
.region-dances{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.region-dance-tag{
  padding: var(--s-1) var(--s-3); border:1px solid var(--line-strong);
  border-radius: var(--radius-pill); font-size: var(--t-xs); color: var(--text-dim);
}

.section-404{ text-align:center; padding-top: var(--s-10); padding-bottom: var(--s-10); }
.error-404-actions{ margin: var(--s-6) 0; }
.error-404-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-6); border-top:1px solid var(--line);
}
.error-404-links a{ color: var(--text-dim); text-decoration: underline; text-underline-offset:.2em; }
.error-404-links a:hover{ color: var(--text); }

.schedule-box{
  margin-top: var(--s-9); margin-bottom: var(--s-9);
}
.schedule-list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-2); }
.schedule-list li{ display:flex; gap: var(--s-4); padding: var(--s-2) 0; border-bottom:1px solid var(--line); }
.schedule-day{ font-family: var(--font-display); min-width:7em; }
.schedule-time{ color: var(--accent); min-width:7em; }

/* Το --accent (χρυσαφί) περνάει σε λευκό φόντο εδώ, όχι σε σκούρο κουτί
   όπως αλλού — μόνο του δεν έχει αρκετή αντίθεση (αίτημα ρητό: "δύσκολο
   να διαβαστεί"). Σκουραίνει προς το --text ώστε να μείνει αναγνωρίσιμα
   χρυσαφί αλλά ευανάγνωστο. */
.section-schedule .eyebrow{ color: color-mix(in srgb, var(--accent) 55%, var(--text) 45%); }

.pending-message{ margin:0; font-family: var(--font-display); font-size: var(--t-lg); }
.pending-note{ margin: var(--s-2) 0 0; color: var(--text-dim); font-size: var(--t-sm); }
.pending-card{
  margin-top: var(--s-5); padding: var(--s-7);
  background: var(--surface);
  border:1px solid var(--line-strong); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  text-align:center;
}

/* ---------- Πλέγμα φωτογραφιών (Στιγμές) ---------- */

/* Σπάει έξω από το .wrap και πιάνει όλο το πλάτος του viewport — οι
   φωτογραφίες "γεμίζουν" τη σελίδα καθώς φτάνεις ως εδώ σκρολάροντας
   (αίτημα ρητό), αντί να μένουν μέσα στο συνηθισμένο max-width column. */
.wrap-full{ max-width:none; width:100vw; margin-left: calc(50% - 50vw); padding-inline: var(--s-3); }

/* Ίδιο πλέγμα σε κάθε οθόνη — καμία εκδοχή "καμβά που σέρνεται" πλέον
   (το drag αφαιρέθηκε ρητά, βλ. Blueprint). Αριστερό κλικ σε μια
   φωτογραφία τη μεγαλώνει σε modal, βλ. photo-wall.js. */
/* Masonry-lite με CSS grid μόνο (ίδιο τέχνασμα με το .home-album παρακάτω,
   χωρίς JS layout): σταθερό grid-auto-rows + μερικά κουτάκια πιάνουν
   παραπάνω σειρές/στήλες σε επαναλαμβανόμενο μοτίβο (nth-child), αντί για
   ένα ομοιόμορφο "κατάλογο" ίδιων τετραγώνων — πιο ζωντανή, άλμπουμ αίσθηση
   (αίτημα ρητό). grid-auto-flow:dense γεμίζει τα κενά που αφήνουν τα spans. */
.photo-grid{
  display:grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
  margin-bottom: var(--s-7);
}
.photo-grid-item{ margin:0; border-radius: var(--radius-sm); overflow:hidden; cursor: zoom-in; box-shadow: var(--shadow-md); }
.photo-grid-item img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform var(--dur) var(--ease); }
.photo-grid-item:hover img{ transform: scale(1.04); }
.photo-grid-item:active img{ transform: scale(.97); }
.photo-grid-item:nth-child(6n+1){ grid-row: span 2; }
.photo-grid-item:nth-child(9n+4){ grid-column: span 2; }
.photo-grid-item:nth-child(11n+7){ grid-row: span 2; grid-column: span 2; }

/* ---------- CTA "Γίνε μέλος" κάτω από τις Στιγμές ---------- */
.photos-cta{ text-align:center; padding-block: var(--s-6); }
.photos-cta-text{
  font-family: var(--font-display); font-size: var(--t-lg);
  max-width: 34rem; margin: 0 auto var(--s-5);
}

/* ---------- Σελίδα Εκδηλώσεις ---------- */
.event-list{
  display:grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  margin-top: var(--s-7);
}
.event-card{
  display:flex; flex-direction:column;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.event-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.event-card-media{ display:block; aspect-ratio: 4/3; overflow:hidden; }
.event-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform var(--dur) var(--ease); }
.event-card:hover .event-card-media img{ transform: scale(1.04); }
.event-card-body{ padding: var(--s-5); display:flex; flex-direction:column; gap: var(--s-2); flex:1; }
.event-card-date{ font-size: var(--t-xs); letter-spacing:.08em; color: var(--accent); font-weight:700; margin:0; text-transform:uppercase; }
.event-card-title{ font-family: var(--font-display); font-size: var(--t-lg); margin:0; }
.event-card-excerpt{ color: var(--text-dim); font-size: var(--t-sm); margin:0; }
.event-card-link{ font-size: var(--t-sm); font-weight:700; color: var(--text); text-decoration:none; margin-top: var(--s-2); }
.event-card-link:hover{ color: var(--accent); }
.events-cta{ text-align:center; padding-block: var(--s-8) var(--s-4); }

/* Links προς YouTube/Instagram στις κάρτες: pill με τα χρώματα κάθε brand. */
/* margin-top:auto + flex:1 στο .event-card-body: τα κουμπιά κάθονται πάντα
   στο κάτω μέρος της κάρτας, ώστε σε μια σειρά καρτών να είναι στην ίδια
   ευθεία όσο κι αν διαφέρει το μήκος του κειμένου. */
.event-card-links{ display:flex; flex-wrap:wrap; gap: var(--s-2); margin-top:auto; padding-top: var(--s-3); }
.event-card-links .event-card-link{
  display:inline-flex; align-items:center; gap: .4em; margin:0;
  padding: .35em .65em; border-radius: var(--radius-pill);
  color:#fff; font-size: .8125rem; font-weight:700;
  transition: background-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.event-card-links .event-card-link svg{ width:16px; height:16px; flex:none; }
.event-card-links .event-card-link:hover{ color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.event-card-link-yt{ background:#FF0000; }
.event-card-link-yt:hover{ background:#CC0000; }
/* Instagram: gradient αντί για ένα χρώμα — το hover σκουραίνει με filter,
   αφού background-color δεν αλλάζει ένα gradient. */
.event-card-link-ig{ background: linear-gradient(45deg, #F56040, #E1306C 40%, #C13584 70%, #833AB4); }
.event-card-link-ig:hover{ filter: brightness(.9); }
.event-card-link-ext{ font-size:.95em; transition: transform var(--dur-fast) var(--ease); }
.event-card-link:hover .event-card-link-ext{ transform: translate(2px,-2px); }

/* ---------- Άλμπουμ του Συλλόγου (αρχική σελίδα) ---------- */
/* Συνεχές κυλιόμενο marquee (αίτημα ρητό, "σαν διαφημίσεις"): μία σειρά,
   ίδιο μέγεθος, κινείται αργά συνέχεια προς τα δεξιά σε άπειρο loop (η
   κατεύθυνση αντιστράφηκε ρητά στο 2ο πέρασμα — αρχικά πήγαινε αριστερά,
   ζητήθηκε "η αντίθετη πλευρά"). .home-album-marquee κόβει
   (overflow:hidden) ό,τι ξεφεύγει + βάζει απαλό fade στις δύο άκρες
   (mask-image) ώστε οι φωτογραφίες να μη "κόβονται" απότομα.
   .home-album-track περιέχει τη λίστα ΔΙΠΛΗ (ίδιο markup 2 φορές, βλ.
   home-photos.njk) και το animation ξεκινάει από -50% και πάει σε 0 —
   στο μισό της διαδρομής η δεύτερη αντιγραφή ευθυγραμμίζεται τέλεια με
   την αρχική θέση, οπότε το loop δεν "κόβει". */
.home-album-marquee{
  overflow:hidden;
  padding-block: var(--s-2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.home-album-track{
  display:flex; gap: var(--s-4); width:max-content;
  padding-inline: var(--s-3);
  animation-name: home-album-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes home-album-scroll{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}
.home-album-item{
  flex: 0 0 auto; width:400px; height:290px;
  margin:0; border-radius: var(--radius-md); overflow:hidden; cursor: zoom-in;
  border:1px solid var(--line);
}
.home-album-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform var(--dur-slow) var(--ease);
}
.home-album-item:hover img{ transform: scale(1.08); }
.home-album-item:active img{ transform: scale(1.02); }
@media (max-width: 640px){
  .home-album-item{ width:280px; height:200px; }
}
/* Δεν σταματάει σε hover (αίτημα ρητό) — μόνο prefers-reduced-motion το
   απενεργοποιεί, ίδιο μοτίβο με τον υπόλοιπο κίνηση του site (reveal.js). */
@media (prefers-reduced-motion: reduce){
  .home-album-track{ animation:none; overflow-x:auto; }
}

/* ---------- Εκπαίδευση: τραγούδια (πρώην ξεχωριστό "Παιχνίδι") ---------- */

/* Δοκιμάστηκε πρώτα μωβ/τιρκουάζ κουτάκι (ίδιο gradient με το chip
   "Ποντιακό Κουίζ" του nav) πάνω στον τίτλο "Παίξε το αγαπημένο σου
   παιχνίδι" — ο χρήστης το είδε ξανά και ζήτησε ρητά να αφαιρεθεί
   ("να μην βρίσκεται σε αυτό το μοβ κουτάκι, να είναι απλά μαύρο"). Ο
   τίτλος γύρισε στο απλό, προεπιλεγμένο μαύρο κείμενο (κανένα δικό του
   background/color πια, κληρονομεί το σκούρο var(--text) όπως κάθε άλλος
   .section-title στο site) — μένει μόνο η κεντραρισμένη στοίχιση πιο κάτω. */
.section-education .section-head{
  text-align:center;
  margin-inline:auto;
}
.section-education .section-intro{
  margin-inline:auto;
}

/* Όσο παίζεις (artist-select/round/result — ΟΧΙ η ίδια η οθόνη επιλογής
   κατηγορίας), το section-head (τίτλος+υπότιτλος) κρύβεται εντελώς
   (`[hidden]`, βλ. quiz.js) και μαζί μαζεύει και το πάνω padding του ίδιου
   του section (`.is-playing`, ορίζεται από το quiz.js σε κάθε αλλαγή
   οθόνης) — ζητήθηκε ρητά, ώστε το ίδιο το παιχνίδι να "ανέβει" ψηλά και
   να μη χρειάζεται scroll ούτε σε mobile ούτε σε desktop. Μόνο το
   padding-top αλλάζει, το κάτω μένει ίδιο με κάθε άλλο section.
   ΠΡΟΣΟΧΗ - bug βρέθηκε αμέσως μετά ("υποσκιάζουν πάρα πολλά πράγματα"):
   ένα πρώτο πέρασμα έριξε το padding-top σε var(--s-5)=24px, πολύ λιγότερο
   από το πραγματικό ύψος του fixed `.site-nav` σε desktop χωρίς scroll
   (~103px, logo 70px + padding) - το nav κάλυπτε τα πρώτα ~50-80px της
   κάρτας. Σε mobile δεν φάνηκε το bug γιατί ήδη κερδίζει το γενικό
   προστατευτικό `main > .section:first-child{ padding-top:8.5rem }`
   (state.css, μεγαλύτερη ειδικότητα λόγω `:first-child`) - το δικό μου
   mobile override εδώ δεν εφαρμοζόταν ΠΟΤΕ στην πράξη, γι' αυτό αφαιρέθηκε.
   8rem (128px) καλύπτει με άνεση το ύψος του desktop nav + λίγο κενό, ενώ
   παραμένει πολύ μικρότερο από το αρχικό var(--s-10)=96px+header(~190px). */
.section-education.is-playing{ padding-top: 8rem; }
.section-education.is-playing .quiz{ padding-top: var(--s-5); }
@media (max-width:767px){
  .section-education.is-playing .quiz{ padding-top: var(--s-4); }
}
/* Ο χρήστης διευκρίνισε ότι δεν ήθελε στενότερο κουτί αριστερά/δεξιά (βλ.
   πιο κάτω - αναιρέθηκε), ήθελε να φύγει το λίγο αχρείαστο λευκό κάτω από
   τις επιλογές - εκεί μαζεύεται ήδη κενό ύψος (κενό feedback πριν
   απαντήσεις + το padding-bottom της ίδιας της κάρτας). Μικρή, σκόπιμα
   μέτρια μείωση ("πολύ μικρό βαθμό") μόνο στο κάτω padding, όχι αριστερά/
   δεξιά/πάνω. */
.section-education.is-playing .quiz{ padding-bottom: var(--s-5); }

.quiz{
  max-width: 680px; margin-inline:auto;
  background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-7) var(--s-6);
  text-align:center;
  box-shadow: var(--shadow-sm);
}
/* Στην πρώτη οθόνη (επιλογή κατηγορίας) το .quiz γίνεται αόρατο κουτί —
   ζητήθηκε ρητά οι 3 κάρτες να ΜΗΝ κάθονται μέσα σε λευκό κουτάκι, μόνο σε
   αυτή τη συγκεκριμένη οθόνη. Οι επόμενες οθόνες (artist-select/round/
   result) δεν ταιριάζουν στο :has() selector, άρα κρατάνε κανονικά το
   λευκό κουτί όπως πριν. Το max-width (680/760px, βλ. media query πιο
   κάτω) ΠΡΕΠΕΙ να φύγει κι αυτό εδώ — αλλιώς το εσωτερικό
   `.edu-choice--modes` (max-width:1100px) περιοριζόταν σιωπηλά στα
   760px του ήδη-άκυρου γονικού κουτιού (bug που βρέθηκε όταν ο χρήστης
   ζήτησε μεγαλύτερες κάρτες — το πλάτος δεν άλλαζε καθόλου). */
.quiz:has(> [data-quiz-mode-select]:not([hidden])){
  background:none; border:0; box-shadow:none; padding:0; max-width:none;
}
@media (min-width:720px){
  .quiz{ max-width: 760px; padding: var(--s-8) var(--s-7); }
}
.join-check,.modal-close svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.quiz-rules{ color: var(--text-dim); margin: 0 0 var(--s-6); }
.quiz-badge{ font-size: var(--t-xs); letter-spacing:.15em; color: var(--accent); text-transform:uppercase; margin: 0 0 var(--s-2); }

.quiz-progress{ font-family: var(--font-display); font-size: var(--t-xs); letter-spacing:.2em; color: var(--text-faint); margin-bottom: var(--s-5); }
[data-quiz-audio]{ display:none; }

/* "Βινύλιο" γύρω από το play/pause κουμπί. Αρχικά γύριζε σαν πραγματικό
   πικάπ (`vinyl-spin`, rotate 360deg) — αφαιρέθηκε ρητά ("ζαλίζει" όταν
   γυρίζει μια φωτογραφία προσώπου, όχι συμμετρική ετικέτα δίσκου).
   Αντί γι' αυτό, όσο παίζει ο ήχος ένα ήσυχο "φωτοστέφανο" (χρυσό glow,
   `vinyl-glow`) φουσκώνει/ξεφουσκώνει γύρω από το βινύλιο — καμία
   περιστροφή/μετατόπιση της ίδιας της εικόνας, μόνο ένταση φωτισμού. */
.quiz-vinyl{ position:relative; width:132px; height:132px; margin: 0 auto var(--s-4); }
.quiz-vinyl::after{
  content:""; position:absolute; inset:-6px; border-radius:50%; pointer-events:none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: vinyl-glow 2.2s ease-in-out infinite;
  animation-play-state: paused;
}
.quiz:not(.is-paused) .quiz-vinyl::after{ animation-play-state: running; }
@keyframes vinyl-glow{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50%{ box-shadow: 0 0 10px 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .quiz-vinyl::after{ animation: none; } }
.quiz-vinyl-disc{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at center, var(--surface) 0 14%, transparent 14.5%),
    repeating-radial-gradient(circle at center, #1c1812 0px, #1c1812 3px, #322a1e 4px, #322a1e 7px);
  box-shadow: var(--shadow-md), inset 0 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Όταν ο τρέχων γύρος έχει καλλιτέχνη με φωτογραφία (`artist.photo`), η
   φωτογραφία του καλύπτει ολόκληρο το βινύλιο αντί για το σκέτο σκούρο
   groove pattern — ζητήθηκε ρητά ("να φαίνεται η φωτό αντί για το μαύρο
   background"). Ίδιο μέγεθος/κύκλος/χρυσό δαχτυλίδι με το
   `.quiz-vinyl-disc`, εναλλάσσονται μέσω `hidden` στο quiz.js. Χωρίς
   φωτογραφία (π.χ. "Παραδοσιακό"), μένει το παλιό groove pattern. */
.quiz-vinyl-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%;
  box-shadow: var(--shadow-md), inset 0 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent);
}
.quiz-vinyl-photo[hidden]{ display:none; }

/* Μεγάλο κυκλικό play/pause κουμπί πάνω στο βινύλιο — ο ήχος είναι
   τοπικό αρχείο, οπότε δεν χρειάζεται να κρύβει κανείς video, μόνο έναν
   καθαρό έλεγχο αναπαραγωγής. */
.quiz-playbtn{
  position:absolute; inset:0; margin:auto; width:60px; height:60px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent); color:#14110A; border:0; border-radius:50%;
  cursor:pointer; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease);
}
.quiz-playbtn:hover{ transform: scale(1.05); }
.quiz-playbtn:active{ transform: scale(.95); }
.quiz-playbtn svg{ width:24px; height:24px; fill:currentColor; }
.quiz-playbtn .icon-pause{ display:none; }
.quiz.is-paused .quiz-playbtn .icon-play{ display:block; }
.quiz.is-paused .quiz-playbtn .icon-pause{ display:none; }
.quiz:not(.is-paused) .quiz-playbtn .icon-play{ display:none; }
.quiz:not(.is-paused) .quiz-playbtn .icon-pause{ display:block; }

.quiz-visual{ margin-bottom: var(--s-6); }
.quiz-eq{ display:flex; gap:5px; justify-content:center; align-items:flex-end; height:24px; }
.quiz-eq i{
  width:4px; border-radius:3px; background: var(--accent);
  height:8px;
  animation: eq 1s var(--ease) infinite alternate;
}
.quiz-eq i:nth-child(2){ animation-delay:.15s } .quiz-eq i:nth-child(3){ animation-delay:.3s }
.quiz-eq i:nth-child(4){ animation-delay:.45s } .quiz-eq i:nth-child(5){ animation-delay:.6s }
@keyframes eq{ from{ height:6px; opacity:.5 } to{ height:22px; opacity:1 } }
.quiz.is-paused .quiz-eq i{ animation-play-state: paused; }
.quiz-playing{ margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--text-faint); letter-spacing:.1em; }

/* Mode 3 "Από την εικόνα": σταθερό aspect-ratio container ώστε το ύψος του
   quiz να μην πηδάει από ερώτηση σε ερώτηση ανεξάρτητα από την αναλογία της
   κάθε φωτογραφίας. object-fit:contain (όχι cover) για να μην κόβεται ποτέ
   σημαντικό μέρος της εικόνας — το σκούρο φόντο απορροφά το ενδεχόμενο
   letterboxing χωρίς να "χτυπάει". */
.quiz-image-wrap{
  width:100%; max-width:480px; aspect-ratio:4/3; margin: 0 auto var(--s-6);
  background: var(--ink); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm);
  border: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.quiz-image{ width:100%; height:100%; object-fit:contain; display:block; }

.quiz-options{ display:grid; gap: var(--s-3); }
.quiz-option{
  display:flex; align-items:center; gap: var(--s-3);
  padding: var(--s-4); cursor:pointer; text-align:left;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  border:1px solid var(--line); border-radius: var(--radius-md);
  font-size: var(--t-md);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.quiz-option-letter{
  flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line-strong);
  font-family: var(--font-display); font-size: var(--t-xs); font-weight:600; color: var(--text-faint);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.quiz-option-text{ flex:1 1 auto; }
.quiz-option:hover:not(:disabled){ border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quiz-option:hover:not(:disabled) .quiz-option-letter{ border-color: var(--accent); color: var(--accent); }
.quiz-option:active:not(:disabled){ transform: scale(.97); }
.quiz-option.is-correct{ border-color:#5FBF7F; background: color-mix(in srgb,#5FBF7F 18%, transparent); }
.quiz-option.is-correct .quiz-option-letter{ background:#5FBF7F; border-color:#5FBF7F; color:#fff; }
/* Λάθος απάντηση: απαλή απόχρωση, όχι κόκκινο "λάθος". Το παιχνίδι είναι
   για να ξαναπαίξεις, όχι για να νιώσεις άσχημα. */
.quiz-option.is-wrong{ border-color: color-mix(in srgb, var(--accent) 60%, transparent); opacity:.75; animation: nudge .3s var(--ease); }
@keyframes nudge{ 25%{ transform: translateX(-5px) } 75%{ transform: translateX(5px) } }

.quiz-feedback{ min-height:2.5em; margin-top: var(--s-5); font-size: var(--t-sm); color: var(--text-dim); }
.quiz-feedback strong{ color: var(--text); }

/* Μπάρα φόρτωσης "επόμενη ερώτηση" — πριν, το πέρασμα σε επόμενο γύρο
   γινόταν εντελώς σιωπηλά μετά από 1.5" (`ADVANCE_DELAY`), χωρίς καμία
   ένδειξη ότι κάτι θα αλλάξει· ζητήθηκε ρητά κάτι πιο ομαλό/κατανοητό.
   Το γέμισμα διαρκεί ακριβώς όσο και το `ADVANCE_DELAY` (η διάρκεια
   περνάει inline από το quiz.js μέσω `transitionDuration`, ίδια πηγή
   αλήθειας — όχι δύο ξεχωριστά νούμερα που θα μπορούσαν να ξεσυγχρονιστούν). */
.quiz-advance-bar{
  margin-top: var(--s-4); height:4px; width:100%; border-radius:999px;
  background: var(--line); overflow:hidden;
}
.quiz-advance-bar[hidden]{ display:none; }
.quiz-advance-fill{
  height:100%; width:0%; border-radius:999px;
  background: var(--accent);
  transition-property: width; transition-timing-function: linear;
}

/* Οθόνη αποτελέσματος — ξαναφτιάχτηκε ολόκληρη (ζητήθηκε ρητά, ήταν "πολύ
   βαρετή": μικρό εικονίδιο + απλό κείμενο σκορ). Τώρα: δαχτυλίδι προόδου
   (SVG circle, γεμίζει animated με το πραγματικό ποσοστό σκορ) με το
   εικονίδιο+νούμερο μέσα του, χρώμα ανά ζώνη σκορ (`[data-tier]` στο ίδιο
   το `[data-quiz-result]`, γράφεται από το `finish()` στο quiz.js),
   confetti burst μόνο στο trophy tier, "quote card" verdict αντί για
   σκέτο γκρι κείμενο, κουμπιά με εικονίδια. Είσοδος με σκάσιμο
   (pop-in, ίδιο cubic-bezier overshoot με τα quiz-mode-card πιο πάνω)
   σε κάθε κομμάτι, ελαφρώς διαδοχικό — retrigger-άρεται αυτόματα κάθε
   φορά που το [hidden] φεύγει από το quiz-result (ίδιο μοτίβο με τα
   mode-select κάρτες). */
.quiz-result-label{ text-align:center; }

@keyframes quiz-result-pop-in{
  from{ opacity:0; transform: scale(.85) translateY(14px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
.quiz-result-label,
.quiz-result-ring,
.quiz-verdict,
.quiz-result-actions{
  animation: quiz-result-pop-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
.quiz-result-ring{ animation-delay: .06s; }
.quiz-verdict{ animation-delay: .16s; }
.quiz-result-actions{ animation-delay: .26s; }

.quiz-result-ring{
  position:relative; width:150px; height:150px; margin: var(--s-4) auto var(--s-5);
}
.quiz-result-ring-svg{ width:100%; height:100%; transform: rotate(-90deg); display:block; }
.quiz-result-ring-track{ fill:none; stroke: var(--line); stroke-width:8; }
.quiz-result-ring-fill{
  fill:none; stroke: var(--accent); stroke-width:8; stroke-linecap:round;
  stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1s var(--ease), stroke var(--dur) var(--ease);
}
.quiz-result-ring-inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap: var(--s-1);
}
.quiz-result-icon{
  width:40px; height:40px; margin-bottom: var(--s-1);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; color: var(--accent); background: var(--accent-soft);
}
.quiz-result-icon[hidden]{ display:none; }
.quiz-result-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.quiz-result-score{ font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); color: var(--text); line-height:1; }

.quiz-result[data-tier="trophy"] .quiz-result-ring-fill{ stroke: var(--accent); }
.quiz-result[data-tier="star"] .quiz-result-ring-fill,
.quiz-result[data-tier="star"] .quiz-result-score{ stroke:#5FBF7F; color:#5FBF7F; }
.quiz-result[data-tier="retry"] .quiz-result-ring-fill{ stroke: var(--text-faint); }
.quiz-result[data-tier="retry"] .quiz-result-icon{ color: var(--text-faint); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* Confetti burst — μόνο στο trophy tier (ratio >= .8), 10 σημεία γύρω από
   το δαχτυλίδι, καθένα με δική του γωνία (--a, inline style στο njk) πάνω
   σε κλασικό rotate+translateY "burst" τέχνασμα. Κρυμμένο εντελώς στα
   άλλα δύο tiers (display:none), όχι απλά αόρατο. */
.quiz-confetti{ position:absolute; inset:-36px; pointer-events:none; display:none; }
.quiz-result[data-tier="trophy"] .quiz-confetti{ display:block; }
.quiz-confetti span{
  position:absolute; top:50%; left:50%; width:7px; height:10px; border-radius:2px;
  background: var(--accent); opacity:0;
  animation: quiz-confetti-burst .85s var(--ease) both;
  transform: translate(-50%,-50%) rotate(var(--a));
}
.quiz-confetti span:nth-child(even){ background:#5FBF7F; width:6px; height:6px; border-radius:50%; }
.quiz-confetti span:nth-child(3n){ animation-delay:.08s; }
.quiz-confetti span:nth-child(3n+1){ animation-delay:.16s; }
@keyframes quiz-confetti-burst{
  0%{ opacity:1; transform: translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(1); }
  100%{ opacity:0; transform: translate(-50%,-50%) rotate(var(--a)) translateY(-64px) scale(.4); }
}

.quiz-verdict{
  max-width:32rem; margin: 0 auto; padding: var(--s-4) var(--s-5);
  background: var(--ink); border-left: 3px solid var(--accent); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-md); font-style:italic; color: var(--text); text-align:left;
}
.quiz-verdict[hidden]{ display:none; }

.quiz-result-actions{
  display:flex; flex-direction:column; align-items:stretch; gap: var(--s-3);
  margin-top: var(--s-6);
}
.quiz-result-btn{ width:100%; }
.quiz-result-btn-icon{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:560px){
  .quiz-result-actions{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; }
  .quiz-result-btn{ width:auto; }
}

/* Ο "χώρος επιλογής" της Εκπαίδευσης: μέχρι πρότινος διάλεγες ΤΡΑΓΟΥΔΙΑ ή
   ΧΑΡΤΗΣ — το παιχνίδι του χάρτη αφαιρέθηκε εξ ολοκλήρου (ζητήθηκε ρητά,
   βλ. CLAUDE.md), οπότε μένει μόνο η κάρτα Τραγούδια. Grid με auto-fit
   ώστε μια ακόμη κάρτα στο μέλλον να χωρέσει χωρίς αλλαγή CSS. */
.edu-choice{
  display:grid; gap: var(--s-5); max-width:680px; margin-inline:auto;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Οι 3 κάρτες-κατηγορίες (mode-select): πάντα σε ΜΙΑ οριζόντια σειρά, η
   μία δίπλα στην άλλη — ζητήθηκε ρητά, το γενικό auto-fit από πάνω έσπαγε
   την "Από την εικόνα" σε δική της δεύτερη γραμμή στα συνηθισμένα πλάτη
   (680px max-width δεν χωράει 3×220px+2 gaps). Ρητό repeat(3,...) αντί για
   auto-fit + μεγαλύτερο max-width ώστε να μη σπάσουν ξανά σε 2+1 σε
   ενδιάμεσα πλάτη. Σπάει σε 1 στήλη μόνο κάτω από 767px (μαζί με το
   γενικό μοτίβο mobile breakpoint του αρχείου). */
.edu-choice--modes{
  grid-template-columns: repeat(3, minmax(0,1fr));
  max-width: 1100px;
  gap: var(--s-6);
}
.edu-choice-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--s-3);
  padding: var(--s-7) var(--s-5); cursor:pointer; text-decoration:none;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.edu-choice-card:hover{ border-color: var(--accent); transform: translateY(-2px); background: color-mix(in srgb, var(--surface) 80%, var(--accent-soft)); box-shadow: var(--shadow-sm); }
.edu-choice-card:active{ transform: scale(.98); }
.edu-choice-card:disabled{ cursor:not-allowed; opacity:.45; }
.edu-choice-card:disabled:hover{ border-color: var(--line); transform:none; background: var(--surface); box-shadow:none; }
.edu-choice-icon{ width:40px; height:40px; color: var(--accent); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.edu-choice-title{ font-family: var(--font-display); font-size: var(--t-lg); text-transform:uppercase; color: var(--text); }
.edu-choice-desc{ color: var(--text-dim); font-size: var(--t-sm); }
.edu-choice-badge{
  font-size: var(--t-xs); letter-spacing:.08em; color: var(--text-faint);
  border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--s-1) var(--s-2);
}

/* Κάρτες τρόπου παιχνιδιού (mode 1/2/3) με φωτογραφία-φόντο αντί για απλό
   λευκό κουτί+εικονίδιο — ζητήθηκε ρητά πιο εντυπωσιακή εμφάνιση ("θέλω
   υπερπαραγωγή"). Ίδιο σκελετό .edu-choice-card (padding/radius/hover),
   μόνο το φόντο/χρώματα κειμένου αλλάζουν πάνω σε φωτογραφία. */
/* Είσοδος: έρχονται από τα αριστερά της οθόνης και "σκάνε" στη θέση τους
   (ελαφρύ overshoot μέσω cubic-bezier, όχι δεύτερο keyframe) — ζητήθηκε
   ρητά, αντί για το γενικό .reveal (fade+translateY) που έχει το header
   από πάνω. Μικρή διαδοχική καθυστέρηση (αριστερά→δεξιά) ώστε να φαίνεται
   σαν σειρά που "σκάει" μία-μία, όχι σαν ένα κολλητό μπλοκ. Το sitewide
   prefers-reduced-motion block πιο κάτω στο αρχείο μηδενίζει ήδη αυτόματα
   το animation-duration, δεν χρειάζεται ξεχωριστό override εδώ. */
.quiz-mode-card{
  min-height:220px; justify-content:flex-end; color:#fff;
  animation: quiz-mode-fly-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
.quiz-mode-card:nth-child(2){ animation-delay:.12s; }
.quiz-mode-card:nth-child(3){ animation-delay:.24s; }
@keyframes quiz-mode-fly-in{
  from{ opacity:0; transform: translateX(-60vw) scale(.85); }
  to{ opacity:1; transform: translateX(0) scale(1); }
}
.quiz-mode-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition: transform var(--dur-slow) var(--ease);
}
.quiz-mode-card:hover:not(:disabled) .quiz-mode-img{ transform: scale(1.06); }
.quiz-mode-scrim{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(15,13,9,.1) 0%, rgba(15,13,9,.55) 60%, rgba(15,13,9,.85) 100%);
}
.quiz-mode-card .edu-choice-icon-wrap,
.quiz-mode-card .edu-choice-title,
.quiz-mode-card .edu-choice-desc,
.quiz-mode-card .edu-choice-badge{ position:relative; z-index:2; }
.edu-choice-icon-wrap{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background: color-mix(in srgb, #14110A 45%, transparent);
  backdrop-filter: blur(4px);
}
.quiz-mode-card .edu-choice-icon{ color: var(--accent); width:24px; height:24px; }
.quiz-mode-card .edu-choice-title{ color:#fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
/* min-height σταθερό (χωράει μέχρι 4 γραμμές) — χωρίς αυτό, η περιγραφή
   κάθε κάρτας τυλίγει σε διαφορετικό αριθμό γραμμών (π.χ. 3 vs 4) ανάλογα
   με το μήκος του κειμένου· επειδή το .quiz-mode-card είναι flex column με
   justify-content:flex-end (όλο το μπλοκ εικονίδιο+τίτλος+περιγραφή
   κολλάει στον πάτο της κάρτας), μια κοντύτερη περιγραφή αφήνει το
   εικονίδιο/τίτλο να "ανέβουν" ψηλότερα από τις άλλες κάρτες — ζητήθηκε
   ρητά να στοιχιθούν όλοι οι τίτλοι στο ίδιο ύψος. */
.quiz-mode-card .edu-choice-desc{ color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.5); min-height:5.7em; }
.quiz-mode-card:disabled .quiz-mode-img{ filter: grayscale(.5); }
.quiz-mode-card .edu-choice-badge{ color:#fff; border-color: rgba(255,255,255,.4); background: color-mix(in srgb, #14110A 45%, transparent); }

/* Κάρτες καλλιτεχνών (mode 2): όσοι δεν έχουν ακόμα φωτογραφία παίρνουν
   ένα κυκλικό avatar με τα αρχικά του ονόματός τους (χρυσό gradient)·
   όσοι έχουν (`artist.photo`) παίρνουν την πραγματική φωτογραφία τους σε
   ΟΛΟΚΛΗΡΗ την κάρτα (ίδιο μοτίβο φωτογραφία-φόντο+scrim με τα
   `.quiz-mode-card` παραπάνω), όχι πια μικρό κυκλάκι. */
.quiz-artist-card{ padding: var(--s-6) var(--s-4); }
.quiz-artist-avatar{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-family: var(--font-display); font-weight:600; font-size: var(--t-md);
  color:#14110A;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #fff) 0%, var(--accent) 100%);
}
.quiz-artist-card--photo{
  min-height:180px; justify-content:flex-end; color:#fff; padding: var(--s-5) var(--s-4);
}
.quiz-artist-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition: transform var(--dur-slow) var(--ease);
}
.quiz-artist-card--photo:hover:not(:disabled) .quiz-artist-photo{ transform: scale(1.06); }
.quiz-artist-card--photo .edu-choice-title,
.quiz-artist-card--photo .edu-choice-badge{ position:relative; z-index:2; }
.quiz-artist-card--photo .edu-choice-title{ color:#fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.quiz-artist-card--photo:disabled .quiz-artist-photo{ filter: grayscale(.5); }
.quiz-artist-card--photo .edu-choice-badge{ color:#fff; border-color: rgba(255,255,255,.4); background: color-mix(in srgb, #14110A 45%, transparent); }

/* Λίστα 12 καλλιτεχνών: πιο πυκνό grid από το γενικό .edu-choice (2 κάρτες)
   ώστε να χωράνε περισσότερες κάρτες ανά σειρά χωρίς να στριμώχνονται. */
.quiz-artist-grid{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.quiz-inline-back{ border:0; background:transparent; appearance:none; }

/* Teaser κάτω από το quiz widget, για τα επόμενα παιχνίδια που ετοιμάζονται —
   κείμενο πάνω, έντονο SOON badge από κάτω (ζητήθηκε ρητά πιο εμφανές από
   το προηγούμενο διακριτικό outline pill: γεμάτο χρυσό φόντο αντί για
   λεπτό περίγραμμα, plus μια "loading" κουκκίδα-κουκκίδα-κουκκίδα που
   εμφανίζεται/εξαφανίζεται σε βρόχο). */
.quiz-teaser{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--s-3); margin: var(--s-7) 0 0; text-align:center;
}
.quiz-teaser-text{ color: var(--text); font-size: var(--t-md); font-weight:600; }
.quiz-teaser-badge{
  display:inline-flex; align-items:center;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#14110A;
  background: var(--accent); border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  box-shadow: var(--shadow-sm);
}
.quiz-teaser-dots{ display:inline-flex; gap:3px; margin-left: var(--s-1); }
.quiz-teaser-dots i{
  width:4px; height:4px; border-radius:50%; background:#14110A;
  opacity:.2; animation: teaser-dot 1.4s ease-in-out infinite;
}
.quiz-teaser-dots i:nth-child(2){ animation-delay:.2s; }
.quiz-teaser-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes teaser-dot{ 0%,80%,100%{ opacity:.2; } 40%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .quiz-teaser-dots i{ animation:none; opacity:.6; }
}

/* Χρησιμοποιείται πλέον μόνο ως "← Πίσω" μέσα στο quiz widget (mode 2,
   επιστροφή από τη λίστα καλλιτεχνών στις 3 κατηγορίες) — JS toggle
   (`data-quiz-artist-back`), όχι πραγματικό link. width:fit-content (όχι
   shrink-wrap ενός form control) ώστε margin:auto να κεντράρει αξιόπιστα
   το πραγματικό clickable κουτί πάνω στο ορατό κείμενο. */
.edu-back{
  display:block; width:fit-content; margin: 0 auto var(--s-5); padding: var(--s-2) var(--s-3);
  text-decoration:none; white-space:nowrap;
  color: var(--text-faint); font-size: var(--t-sm);
  transition: color var(--dur-fast) var(--ease);
}
.edu-back:hover{ color: var(--accent); }

/* ---------- Φόρμα ---------- */

.join-form{ display:grid; gap: var(--s-5); }
.field{ display:grid; gap: var(--s-2); }
.field-row{ display:grid; gap: var(--s-5); grid-template-columns:1fr; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }

.field label,.field legend{
  font-family: var(--font-display); font-size: var(--t-xs); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color: var(--text);
  padding:0;
}
.field-optional{
  font-weight:400; letter-spacing:normal; text-transform:none;
  color: var(--text-faint);
}
.field input,.field select{
  width:100%; padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--text);
  border:1px solid var(--line); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--t-base);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field input:focus,.field select:focus{ outline:none; border-color: var(--accent); background: color-mix(in srgb, var(--surface) 70%, var(--accent-soft)); }
/* Λάθος συμπλήρωση: κόκκινο περίγραμμα + ροζ φόντο, ίδιο κόκκινο (#B3261E)
   με το .form-status--error μήνυμα. Μένει κόκκινο και όσο έχει focus. */
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:#B3261E; box-shadow: 0 0 0 1px #B3261E;
  background: color-mix(in srgb, var(--surface) 90%, #B3261E);
}
.phone-input:has(input[aria-invalid="true"]) .phone-prefix{ border-color:#B3261E; color:#B3261E; }.field-instruments{ border:0; margin:0; padding:0; }

.dance-choice{ display:flex; flex-wrap:wrap; gap: var(--s-4) var(--s-3); margin-top: var(--s-3); }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding: var(--s-2) var(--s-4);
  border:1px solid var(--line); border-radius: var(--radius-pill);
  font-size: var(--t-sm); cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip span:hover{ border-color: var(--accent); }
.chip input:checked + span{ background: var(--accent); border-color: var(--accent); color:#14110A; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* Το τηλέφωνο δέχεται μόνο ελληνικούς αριθμούς — το "+30" είναι πάντα
   ορατό, σταθερό πρόθεμα (όχι επιλογή χώρας), ώστε να μην μπερδεύεται ο
   χρήστης να το πληκτρολογήσει ο ίδιος μπροστά στο δεκαψήφιο νούμερό του. */
.phone-input{ display:flex; }
.phone-prefix{
  display:flex; align-items:center; flex-shrink:0;
  padding: var(--s-3) var(--s-3);
  background: color-mix(in srgb, var(--surface) 85%, var(--ink) 15%);
  color: var(--text-faint);
  border:1px solid var(--line); border-right:0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-family: var(--font-body); font-size: var(--t-base); font-weight:600;
}
.phone-input input{ border-radius:0 var(--radius-md) var(--radius-md) 0; }

.field-instrument-other,.field-select-other{ margin-top: var(--s-3); max-width:320px; }
.field-instrument-other[hidden],.field-select-other[hidden]{ display:none !important; }

/* Το honeypot φεύγει εντελώς από τη ροή, αλλά όχι με display:none —
   κάποια bots αγνοούν ό,τι είναι display:none. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Cloudflare Turnstile + κουμπί αποστολής στο ίδιο grid cell της φόρμας:
   το widget είναι συνήθως αόρατο (interaction-only, ύψος 0), οπότε δεν
   πρέπει να πιάνει δικό του κελί με gap ούτε να έχει δικό του margin —
   αλλιώς η φόρμα θα αποκτούσε ένα άδειο κενό. Αν εμφανιστεί (ύποπτη
   επίσκεψη), το join-form.js βάζει .is-visible και κεντράρεται πάνω από
   το κουμπί με μικρό κενό. */
.join-submit{ display:grid; }
.join-submit .cf-turnstile{ display:flex; justify-content:center; }
.join-submit .cf-turnstile.is-visible{ margin-bottom: var(--s-3); }

.form-status{ margin:0; min-height:1.5em; font-size: var(--t-sm); color: var(--accent); text-align:center; }
/* Μηνύματα λάθους (λάθος πεδίο, διπλή αίτηση): κόκκινο υπογραμμισμένο,
   σκούρο κόκκινο για αρκετό contrast σε μικρό κείμενο. */
.form-status--error{ color:#B3261E; text-decoration:underline; }
.form-privacy-note{ margin: calc(-1 * var(--s-3)) 0 0; font-size: var(--t-sm); color: var(--text-dim); text-align:center; }
.form-privacy-note a{ color: var(--text); text-decoration: underline; }
.join-success{ text-align:center; padding: var(--s-8) var(--s-5); }
.join-check{ width:64px; height:64px; color:#5FBF7F; margin-inline:auto; stroke-width:2; }
.join-success h2{ font-size: var(--t-2xl); margin: var(--s-5) 0 var(--s-3); text-transform:uppercase; }
.join-success p{ color: var(--text-dim); margin:0; }
.join-success[hidden]{ display:none !important; }

/* ---------- Νομικές σελίδες (Πολιτική Απορρήτου) ---------- */
.legal-content{ margin-top: var(--s-7); max-width: 46rem; }
.legal-content h2{ font-size: var(--t-lg); margin: var(--s-7) 0 var(--s-3); }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color: var(--text-dim); line-height:1.7; margin:0; }

/* ---------- Κοινότητα / επικοινωνία ---------- */

.board{ margin-top: var(--s-9); margin-bottom: var(--s-9); }
.board-grid{ list-style:none; margin: var(--s-5) 0 0; padding:0; display:grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); }
.board-member img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius: var(--radius-md); margin-bottom: var(--s-3); }
.board-name{ font-family: var(--font-display); margin:0; }
.board-role{ margin:0; font-size: var(--t-sm); color: var(--accent); }

.contact-split{ display:grid; gap: var(--s-7); grid-template-columns:1fr; }
@media (min-width:900px){ .contact-split{ grid-template-columns: 1fr 1fr; align-items:start; } }

.contact-list{ list-style:none; margin: var(--s-6) 0; padding:0; display:grid; gap: var(--s-4); }
.contact-list li{ display:grid; gap:2px; padding-bottom: var(--s-4); border-bottom:1px solid var(--line); }
.contact-label{ font-family: var(--font-display); font-size: var(--t-xs); letter-spacing:.16em; text-transform:uppercase; color: var(--text-faint); }
.contact-value a{ text-decoration:none; border-bottom:1px solid var(--line-strong); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.contact-value a:hover{ color: var(--accent); border-color: var(--accent); }
.social-cta{ display:flex; gap: var(--s-3); flex-wrap:wrap; }

.contact-map{
  position:relative;
  border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow: var(--shadow-sm);
}
/* Με το Google Maps JavaScript API (community.njk, mapTypeControl:false)
   το κουτάκι εναλλαγής προβολής δεν χτίζεται καν στο DOM — οπότε δεν
   χρειάζεται πια κανένα δικό μας overlay/patch από πάνω του. Το ίδιο CSS
   filter βάφει είτε το #contact-map-canvas (JS API, όταν υπάρχει
   googleMapsApiKey) είτε το παλιό iframe (fallback χωρίς key) σε ζεστούς
   χρυσαφί/σέπια τόνους, σαν παλιός ζωγραφισμένος χάρτης. Ελαφρύ hover
   zoom+ζωντάνεμα των χρωμάτων για να μη μοιάζει στατικό. */
.contact-map iframe,
.contact-map #contact-map-canvas{
  width:100%; height:420px; border:0; display:block;
  filter: sepia(.55) saturate(1.7) hue-rotate(-8deg) brightness(1.02) contrast(1.05);
  transition: filter var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.contact-map:hover iframe,
.contact-map:hover #contact-map-canvas{
  filter: sepia(.35) saturate(1.85) hue-rotate(-8deg) brightness(1.05) contrast(1.08);
  transform: scale(1.03);
}

/* Λογότυπο-σφραγίδα πάνω στη γωνία του iframe fallback (βλ. community.njk):
   κύκλος μεγαλύτερος από το κουτάκι εναλλαγής προβολής του Google ώστε να
   το καλύπτει εξ ολοκλήρου, ελαφρώς "ξεχειλισμένος" έξω από τη γωνία — το
   .contact-map έχει ήδη overflow:hidden + στρογγυλεμένη γωνία, οπότε κόβεται
   μόνο του σε ωραίο σχήμα, σαν κηρομολυβδοσφραγίδα σε παλιό χάρτη. */
.contact-map-badge{
  position:absolute; left:6px; bottom:6px; z-index:1;
  width:68px; height:68px; padding: var(--s-2);
  border-radius:50%; display:block;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  object-fit:contain;
}

/* ---------- Ιστορία (αρχική σελίδα) ---------- */
/* Fluid responsive fix (2026-09-27): πριν, οι πλευρικές στήλες είχαν
   ΣΤΑΘΕΡΟ max `minmax(0,400px)` — ένα fixed-length max σε grid track
   παίρνει προτεραιότητα στη διανομή χώρου έναντι του `1fr` του κειμένου,
   οπότε οι φωτογραφίες κρατούσαν έως 400px ο καθένας ΑΚΟΜΑ κι όταν δεν
   υπήρχε αρκετός χώρος, στραγγαλίζοντας το `.history-text` σε ό,τι
   περίσσευε (π.χ. σε 1000px viewport: 2×400px φωτό + gaps ≈ 896px,
   άφηναν μόνο ~104px για το κείμενο). Fix: το max των πλευρικών στηλών
   έγινε `clamp(140px, 24vw, 400px)` — ένα πραγματικά ρευστό μέγεθος
   που ακολουθεί το πλάτος του viewport (το `.history-layout` είναι ήδη
   100vw, άρα το `vw` εδώ αντιστοιχεί ακριβώς στο πλάτος του container).
   Πάνω από ~1667px παραμένει σταθερό στο cap (400px, ίδιο με πριν σε
   μεγάλα desktop), κάτω από αυτό μικραίνει σταδιακά ως το floor (140px)
   γύρω στα ~583px — πάντα αφήνοντας στο κεντρικό `minmax(0,1fr)` ό,τι
   περισσεύει, ποτέ το αντίστροφο. Το `.history-text` κρατάει το δικό
   του cap `width:700px` (αμετάβλητο πάνω από ~1600px) αλλά τώρα λαμβάνει
   ρεαλιστικά μεγαλύτερο μερίδιο σε ενδιάμεσα πλάτη αφού οι φωτογραφίες
   δεν διεκδικούν πια σταθερά 400px η καθεμία. */
.history-layout{
  display:grid;
  grid-template-columns: minmax(0, clamp(140px, 24vw, 400px)) minmax(0,1fr) minmax(0, clamp(140px, 24vw, 400px));
  gap: clamp(1rem, 3vw, var(--s-8)); align-items:start;
  width:100vw; margin-left: calc(50% - 50vw);
}
.history-side{ display:grid; gap: 70px; min-width:0; width:100%; }
.history-side-left{ justify-self:start; }
.history-side-right{ justify-self:end; }
/* Ημιδιάφανο, θολωμένο "πλαίσιο" πίσω από το κείμενο — ζητήθηκε ρητά ώστε
   να διαβάζεται πιο εύκολα πάνω από το κινούμενο φόντο-αετό
   (.blood-bg-eagle) χωρίς να εξαφανίζεται εντελώς ("να μην πολυφαίνεται",
   όχι "να μη φαίνεται καθόλου") — γι' αυτό alpha .88 (όχι πλήρως αδιαφανές)
   και backdrop-filter:blur, όχι απλά συμπαγές φόντο. Γκρι απόχρωση
   (#86847e) αντί για το ζεστό --surface του θέματος, ζητήθηκε ρητά. */
.history-text{
  width:700px; max-width:100%; min-width:0; justify-self:center;
  background: color-mix(in srgb, color-mix(in srgb, #86847e 22%, var(--surface) 78%) 88%, transparent);
  backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 3vw, 3rem);
  box-shadow: var(--shadow-sm);
}
.history-text .eyebrow{ color: var(--accent); }

/* Φωτογραφίες: ίδιο .photo-grid-item hook με τη σελίδα Στιγμές/άλμπουμ
   αρχικής (photo-wall.js) — κλικ ανοίγει μεγέθυνση σε modal, καμία αλλαγή
   χρειάστηκε εκεί. */
.history-photo-item{ aspect-ratio: 4/3; min-width:0; }

/* Κάτω από ~840px (tablet portrait και μικρότερα) το fluid 3-στηλο grid θα
   ανάγκαζε τις φωτογραφίες κοντά στο floor τους (140px) — καλύτερο καθαρό
   stacking αντί για τρεις πολύ στενές στήλες (ζητήθηκε ρητά, βλ. σημείωση
   πάνω στο `.history-layout`). Οι φωτογραφίες ΠΑΡΑΜΕΝΟΥΝ ορατές σε κάθε
   πλάτος — καμία απόκρυψη περιεχομένου. */
@media (max-width:840px){
  .history-layout{
    grid-template-columns: 1fr;
    width: min(100% - 2.5rem, var(--wrap));
    margin-left:auto; margin-right:auto;
  }
  .history-text{ order:1; width:auto; max-width:none; justify-self:stretch; }
  .history-side{ width:auto; justify-self:stretch; gap: var(--s-4); }
  .history-side-left{ order:2; grid-template-columns: repeat(2,1fr); }
  .history-side-right{ order:3; grid-template-columns: repeat(2,1fr); }
}

/* Mobile only (ζητήθηκε ρητά): οι 6 φωτογραφίες κάτω από το κείμενο της
   Ιστορίας κρύβονται εντελώς — tablet/desktop ανεπηρέαστα, μένουν όπως
   στο πέρασμα 2026-09-27 παραπάνω. */
@media (max-width:640px){
  .history-side{ display:none; }
}

.history-subheading{
  position:relative; padding-left: var(--s-4);
  font-family: var(--font-display); font-size: var(--t-md); font-weight:700;
  letter-spacing:.04em; margin: var(--s-6) 0 0; color: var(--accent);
}
.history-subheading::before{
  content:""; position:absolute; left:0; top:.6em;
  width:12px; height:2px; background: var(--accent);
}
.history-paragraph{ margin: var(--s-3) 0 0; font-size: var(--t-md); font-weight:500; color: var(--text); }
.history-lede{ font-size: var(--t-lg); font-weight:600; color: var(--text); }

/* ---------- Footer ---------- */

.site-footer{
  border-top:1px solid var(--line); padding: var(--s-8) 0 var(--s-5);
  background: color-mix(in srgb, var(--surface) 60%, var(--ink));
}
.footer-inner{ width: min(100% - 2.5rem, var(--wrap)); margin-inline:auto; display:grid; gap: var(--s-7); grid-template-columns:1fr; }
@media (min-width:820px){ .footer-inner{ grid-template-columns: 1.4fr 1fr 1fr; } }
/* Το footer-name (όνομα συλλόγου) και τα footer-col h3 (ΕΠΙΚΟΙΝΩΝΙΑ,
   ΑΚΟΛΟΥΘΗΣΕ ΜΑΣ) έμεναν σε διαφορετική γραμματοσειρά/βάρος: το πρώτο έπαιρνε
   ρητά font-display, ενώ το h3 δεν όριζε font-family καθόλου — κληρονομούσε
   το font-body (Inter) στο προεπιλεγμένο έντονο βάρος του browser για h3.
   Ίδιο font-family + font-weight και στα δύο (αίτημα "ίδιο font, ίδιο έντονο
   στυλ"). Το ίδιο font-weight δεν έφτανε όμως ώστε να "δείχνει" εξίσου
   έντονο: το h3 έμενε σε var(--text-faint) (42% αδιαφάνεια) ενώ το
   footer-name κληρονομεί το πλήρες var(--text) — οπτικά πιο αχνό παρόλο το
   ίδιο βάρος. Ανέβηκε σε 800 + πλήρες var(--text) ώστε να ταιριάζει στην
   ένταση του ονόματος του συλλόγου. */
.footer-name{ font-family: var(--font-display); font-weight:600; margin: var(--s-4) 0 0; max-width:20rem; }
.footer-since{ margin: var(--s-1) 0 0; color: var(--accent); font-size: var(--t-sm); letter-spacing:.1em; }
.footer-col h3{ font-family: var(--font-display); font-weight:800; font-size: var(--t-xs); letter-spacing:.18em; text-transform:uppercase; color: var(--text); margin-bottom: var(--s-4); }
.footer-col p{ margin:0 0 var(--s-2); font-size: var(--t-sm); color: var(--text-dim); }
.footer-col a{ text-decoration:none; }
.footer-col a:hover{ color: var(--accent); }
.footer-social{ display:flex; align-items:center; gap: var(--s-3); }
.footer-social-icon{ display:flex; transition: transform var(--dur-fast) var(--ease); }
.footer-social-icon:hover{ transform: translateY(-2px); }
.footer-social-icon svg{ width:34px; height:34px; }
.footer-bottom{ width: min(100% - 2.5rem, var(--wrap)); margin: var(--s-7) auto 0; padding-top: var(--s-5); border-top:1px solid var(--line); }
.footer-bottom p{ margin:0; font-size: var(--t-xs); color: var(--text-faint); }
.footer-credit{ margin-top: var(--s-1) !important; }

/* ---------- Modal ---------- */

.modal{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding: var(--s-4); }
.modal[hidden]{ display:none !important; }
.modal-backdrop{ position:absolute; inset:0; background: color-mix(in srgb, #000 78%, transparent); backdrop-filter: blur(6px); animation: fade var(--dur) var(--ease); }
.modal-panel{
  position:relative; z-index:1;
  width: min(100%, 760px); max-height: min(86vh, 900px); overflow:auto;
  background: var(--surface); border:1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--s-7);
  box-shadow: var(--shadow-lg);
  animation: pop var(--dur) var(--ease);
}
.modal-panel.is-image{ background:none; border:0; padding:0; box-shadow:none; width:auto; max-width:min(96vw,1200px); }
.modal-panel.is-image img{ max-height:86vh; width:auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
@keyframes fade{ from{ opacity:0 } }
@keyframes pop{ from{ opacity:0; transform: scale(.96) translateY(10px) } }

.modal-close{
  position:absolute; top: var(--s-4); right: var(--s-4); z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  border:1px solid var(--line); border-radius:50%; cursor:pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.modal-close:hover{ border-color: var(--accent); color: var(--accent); }
.modal-close:active{ transform: scale(.92); }
.modal-close svg{ width:18px; height:18px; }

.event-detail h3{ font-size: var(--t-xl); }
.event-date{ color: var(--accent); font-size: var(--t-sm); letter-spacing:.08em; margin: var(--s-2) 0 var(--s-5); }
.event-detail p{ color: var(--text-dim); }
.event-where{ display:flex; gap: var(--s-2); align-items:baseline; margin-top: var(--s-5); font-size: var(--t-sm); }
.event-where span:first-child{ color: var(--text-faint); text-transform:uppercase; letter-spacing:.14em; font-size: var(--t-xs); font-family: var(--font-display); }

/* ---------- Εμφάνιση στο scroll ---------- */

/* Οι κλάσεις μπαίνουν από το reveal.js μόνο αν ο χρήστης ΔΕΝ έχει ζητήσει
   λιγότερη κίνηση. Αν τις πρόσθετε πάντα και τις αναιρούσε με media query,
   περιεχόμενο θα έμενε αόρατο σε κάποιες περιπτώσεις. */
.reveal.is-hidden,.reveal-scale.is-hidden,.reveal-side.is-hidden{ opacity:0; }
.reveal.is-hidden{ transform: translateY(28px); }
.reveal-scale.is-hidden{ transform: scale(.94); }
.reveal-side.is-hidden{ transform: translateX(-24px); }
.reveal.is-in,.reveal-scale.is-in,.reveal-side.is-in{
  opacity:1; transform:none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--d,0) * 70ms);
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 767px){
  :root{ --s-10: 4rem; --s-9: 3rem; }
  .brand-full{ display:none; }
  .nav-actions .btn-accent{ display:none; }
  .modal-panel{ padding: var(--s-5); }
  .contact-map iframe{ height:300px; }

  /* Το λογότυπο πάνω αριστερά ήταν πολύ μεγάλο σε mobile (70px, ίδιο με
     desktop) — ζητήθηκε ρητά να μικρύνει. Μικρότερο και στο scrolled state
     (ίδια αναλογία ~80% με το desktop 70→56px). */
  .brand img{ width:52px; height:52px; }

  /* Ζητήθηκε ρητά: σε mobile το header να ΜΗΝ κάνει ΚΑΝΕΝΑ interaction στο
     scroll — καμία αλλαγή φόντου/blur/padding/μεγέθους λογότυπου, μένει
     ακριβώς όπως είναι στην κορυφή σε κάθε scroll θέση (το JS συνεχίζει να
     προσθέτει την κλάση .is-scrolled, απλά δεν έχει πια κανένα οπτικό
     αποτέλεσμα σε mobile). Desktop δεν άλλαξε καθόλου, κρατάει όλο το
     scroll-behavior (συμπαγές φόντο + smaller λογότυπο) όπως πριν. */
  .site-nav.is-scrolled{
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
    padding-block: var(--s-4);
  }
  .site-nav.is-scrolled .brand img{ width:52px; height:52px; }

  /* Το .site-nav είναι fixed (βγαίνει από τη ροή) — σε mobile το ύψος του
     (λογότυπο + padding) ήταν μεγαλύτερο από το top padding του hero/των
     section headers, οπότε ο τίτλος/eyebrow κάθε σελίδας ξεκινούσε κάτω
     από το μενού και "υποσκιαζόταν" από αυτό (ζητήθηκε ρητά να κατέβουν
     όλα λίγο πιο κάτω — hero τίτλος αρχικής, "ΤΟ ΑΡΧΕΙΟ ΜΑΣ"/Στιγμές,
     Παίξε, χάρτης Ο Πόντος). Γενικός κανόνας αντί για ένα ξεχωριστό fix
     ανά σελίδα, αφού κάθε εσωτερική σελίδα ξεκινά με `main > .section`. */
  .hero{ padding-top: 8.5rem; }
  main > .section:first-child{ padding-top: 8.5rem; }

  /* Εκδηλώσεις: οι φωτογραφίες (η πρώτη, 6 Φεβρουαρίου, ήταν πολύ ψηλή/
     μεγάλη) μικραίνουν σε mobile — πιο πλατιά αναλογία αντί για 4/3. */
  .event-card-media{ aspect-ratio: 16/10; }

  /* Ποντιακό κουίζ (επιλογές απάντησης): τα <button> δεν είχαν δικό τους
     `color` (μόνο background/border) — σε mobile το μαύρο default κείμενο
     του button έμενε δυσανάγνωστο. Ρητό σκούρο φόντο + λευκό, πιο μεγάλο
     και έντονο κείμενο ώστε να φαίνεται καθαρά. */
  .quiz-option{
    background: var(--text);
    color: var(--surface);
    font-size: var(--t-lg);
    font-weight:700;
  }

  /* Οι 3 κάρτες-κατηγορίες (mode-select) σπάνε σε 1 στήλη μόνο εδώ,
     κάτω από το γενικό mobile breakpoint — πάνω από αυτό μένουν πάντα σε
     μία οριζόντια σειρά (βλ. .edu-choice--modes πιο πάνω). */
  .edu-choice--modes{ grid-template-columns: 1fr; }
}

/* ---------- Λιγότερη κίνηση ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}