/* projects-grid.css — Η ΔΙΑΤΑΞΗ ΤΟΥ ΚΑΤΑΛΟΓΟΥ ΕΡΓΩΝ (/erga).
   ---------------------------------------------------------------------------
   Η ΚΑΡΤΑ δεν ορίζεται εδώ: έρχεται αυτούσια από το home-sections.css
   (.nq-project / .nq-project-media / .nq-project-meta / hover / αναλογίες).
   Εδώ μπαίνει ΜΟΝΟ ό,τι διαφέρει: η αρχική έχει σκόπιμα κλιμακωτή, editorial
   σύνθεση έξι έργων· ο κατάλογος θέλει ομοιόμορφο πλέγμα που μεγαλώνει. */

/* ΤΑ TOKENS ΤΗΣ ΠΑΛΕΤΑΣ WEBBOX ΞΑΝΑ, ΕΔΩ.
   ΓΙΑΤΙ: στο home-sections.css δηλώνονται πάνω στο `#nq-home-proof` — το κουτί
   που φτιάχνει το JS ΜΟΝΟ στην αρχική. Εκτός αυτού είναι ΑΟΡΙΣΤΑ, οπότε κανόνες
   όπως `.nq-section-head > p{color:var(--wb-muted)}` έβγαιναν άκυροι και το
   κείμενο κληρονομούσε λάθος χρώμα (σχεδόν λευκό πάνω σε λευκό).
   Ίδιες τιμές, όχι νέα παλέτα — η ενότητα κουβαλά τη δική της βάση χρώματος. */
.nq-erga {
  --wb-ink: #080d1a;
  --wb-ink-soft: #0e1527;
  --wb-paper: #f7f7fa;
  --wb-white: #fff;
  --wb-text: #0d1321;
  --wb-muted: #667085;
  --wb-line: #dfe3ea;
  --wb-accent: var(--nq-accent, #5548f7);
  padding: clamp(70px, 8vw, 118px) 0 clamp(92px, 10vw, 150px);
  color: var(--wb-text);
  background: var(--wb-white);
}

/* Η κεφαλίδα ενότητας είναι semantic <header> — και το theme.css έχει ΚΑΘΟΛΙΚΟ
   `header, .nq-header, .nq-sticky { color: var(--nq-header-fg) }` για την μπάρα
   του site (#e8ebf3, ανοιχτό). Ο κανόνας «χτυπά» και εδώ, και επειδή το
   `.nq-section-head h2` είναι `color: inherit`, ο τίτλος έβγαινε σχεδόν λευκός
   πάνω σε λευκό. Επαναφορά στο χρώμα κειμένου της ενότητας.
   ΣΗΜ: το ΙΔΙΟ συμβαίνει ήδη στην ενότητα «Selected work» της αρχικής — δεν το
   αγγίζω από εδώ, είναι εγκεκριμένο markup άλλης ενότητας. */
.nq-erga-head {
  margin-bottom: clamp(34px, 4vw, 54px);
  color: var(--wb-text);
}

/* ΚΡΙΣΙΜΟ: οι κανόνες .nq-project:nth-child(4)/(5) του home-sections.css ΔΕΝ
   είναι κλειδωμένοι κάτω από .nq-projects — θα «χτυπούσαν» και εδώ, πετώντας
   την 4η και 5η κάρτα σε δικές τους στήλες με έξτρα κενό από πάνω. */
.nq-erga-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 72px) 28px;
}

.nq-erga-grid .nq-project,
.nq-erga-grid .nq-project:nth-child(4),
.nq-erga-grid .nq-project:nth-child(5) {
  grid-column: span 6;
  margin-top: 0;
}

/* Φίλτρα κατηγορίας: pill controls — το εγκεκριμένο σχήμα για κουμπιά/μεταδεδομένα. */
.nq-erga-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(30px, 3.5vw, 46px);
}

.nq-erga-filter {
  padding: 8px 16px;
  border: 1px solid var(--wb-line, rgba(12, 16, 28, .14));
  border-radius: 999px;
  background: transparent;
  color: var(--wb-muted, #5b6478);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.nq-erga-filter:hover {
  border-color: var(--wb-accent, #5548f7);
  color: var(--wb-accent, #5548f7);
}

.nq-erga-filter.is-on {
  border-color: var(--wb-ink, #0b1020);
  background: var(--wb-ink, #0b1020);
  color: #fff;
}

.nq-erga-filter:focus-visible {
  outline: 2px solid var(--wb-accent, #5548f7);
  outline-offset: 2px;
}

/* Η περιγραφή υπάρχει μόνο στον κατάλογο — στην αρχική τα μεταδεδομένα μένουν ήσυχα. */
.nq-erga-excerpt {
  max-width: 46ch;
  margin: 10px 0 0;
  color: var(--wb-muted, #5b6478);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.nq-erga-empty {
  padding: 40px 0;
  color: var(--wb-muted, #5b6478);
}

/* Έργο χωρίς σύνδεσμο: η εικόνα δεν είναι κλικαρίσιμη — να μη δείχνει «χέρι». */
.nq-erga-grid div.nq-project-media {
  cursor: default;
}

/* Μία στήλη = ΟΝΤΩΣ μία στήλη. Αν μείνουν οι 12 στήλες και αλλάξει μόνο το span,
   τα 11 column-gaps αθροίζονται και σπρώχνουν την κάρτα έξω από την οθόνη —
   ακριβώς αυτό συνέβαινε στην αρχική (11 × 46px = 506px σε container 328px). */
@media (max-width: 900px) {
  .nq-erga-grid {
    grid-template-columns: 1fr;
  }

  .nq-erga-grid .nq-project,
  .nq-erga-grid .nq-project:nth-child(4),
  .nq-erga-grid .nq-project:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nq-erga-filter {
    transition: none;
  }
}