/* ═══════════════════════════════════════════════════════════════════════
   ΕΝΟΤΗΤΕΣ ΚΑΤΗΓΟΡΙΩΝ — τυπογραφια & χρωμα      (βημα 034 - 30/09/2026)

   ΑΓΓΙΖΕΙ ΜΟΝΟ: color, font-*, letter-spacing, line-height, text-transform.
   ΔΕΝ αγγιζει: width, height, grid, position, display, margin.
   Αρα οι θεσεις των banner και τα μεγεθη των φωτογραφιων μενουν ΑΚΡΙΒΩΣ
   οπως ειναι. Μονη εξαιρεση: padding-left στον τιτλο ενοτητας, για να
   χωρεσει η πλαγια γραμμη.

   Οι αντιπαλοι και η βαρυτητα τους σημειωνονται σε καθε ομαδα.
   ═══════════════════════════════════════════════════════════════════════ */

html:root {
  /* ── Η κλιμακα. Ενα σημειο αλλαγης. ───────────────────────────── */
  --pg-h-section: clamp(1.875rem, 3.4vw, 2.875rem);    /* 28→43px  (root 15px) */
  --pg-h-lead:    clamp(1.8rem, 2.4vw, 2.2rem);       /* 27→33px  (root 15px) */
  --pg-h-card:    1.6rem;                             /* 24px — ΤΟ ΑΡΧΙΚΟ     */
  --pg-meta:      0.9333rem;                          /* 14px  κατηγορια/footer/search */
  /* ΒΗΜΑ 244 — ΞΕΧΩΡΙΣΤΟ ΤΟΚΕΝ ΓΙΑ ΣΥΝΤΑΚΤΗ + ΗΜΕΡΟΜΗΝΙΑ.
     Ηταν και αυτα στο --pg-meta. Δεν χωριστηκαν για γουστο: το
     --pg-meta το διαβαζουν ΕΠΤΑ αλλα πραγματα — .article__category,
     .search-result__info, .siteFooter__social/__links/__bottom και
     τεσσερις κανονες των rvw. Αλλαγη του τοκεν θα μικραινε ΚΑΙ
     αυτα, που δεν ζητηθηκαν.                                      */
  --pg-meta-byline: 0.8666rem;                        /* 13px  συντακτης/ημ/νια */
  --pg-meta-gap:  16px;                               /* τιτλος → συντακτης    */

  /* ── Η ΑΝΑΛΟΓΙΑ ΤΩΝ ΕΙΚΟΝΩΝ ΣΤΙΣ ΛΙΣΤΕΣ — ΒΗΜΑ 282 ──────────────
     ΜΙΑ ΠΗΓΗ ΓΙΑ ΔΥΟ ΣΕΛΙΔΕΣ: τη σελιδα ορου (ενοτητα 24) και την
     πυλη γονικης κατηγοριας (ενοτητα 26). Ειναι οι δυο σελιδες που
     ο αναγνωστης βλεπει η μια μετα την αλλη — διαφορετικη αναλογια
     διαβαζεται ως δυο διαφορετικα sites.

     1.26 ΕΙΝΑΙ Η ΤΙΜΗ ΤΗΣ ΠΥΛΗΣ, και ειναι αυτη που επιλεχθηκε:
     η πυλη δεν ειχε ΚΑΝΕΝΑΝ δικο της κανονα — επαιρνε το
     .article__image figure { aspect-ratio: 1.26 } του mainMag. Δηλαδη
     «σωστη» ηταν κατα τυχη. Τωρα γραφεται ΡΗΤΑ και στις δυο, ωστε
     μια αλλαγη στο βασικο θεμα να μην τις ξεσυγχρονισει.          */
  --pg-list-img-ratio: 1.26;

  /* ── Η γραμματοσειρα του τιτλου ενοτητας ──────────────────────
     ΑΛΛΑΖΕΙ ΕΔΩ. Ολες ειναι ηδη φιλοξενουμενες τοπικα με ελληνικα:
       'Commissioner'  variable 100-900   ← τωρα
       Inter           variable 100-900
       'Sofia Sans'    variable 100-1000
       Geologica · 'Roboto Condensed' · Akt                        */
  /* βημα 102 — ιδια εικονα με την επικεφαλιδα των κριτικων:
     Geologica, ΠΕΖΟΚΕΦΑΛΑΙΑ, με γραμμη πανω και κατω.
     Διαβαζει το --pg-font-display, το ιδιο με το hero carousel —
     αρα αν αλλαξει εκει, ακολουθουν ολες οι επικεφαλιδες.        */
  --pg-h-section-font: var(--pg-font-display, Geologica, Arial, sans-serif);
  --pg-h-section-wght: 700;
  --pg-h-section-rule: var(--pg-border, #2e2e2e);
  /* ΚΛΙΣΗ ΕΠΙΚΕΦΑΛΙΔΩΝ (βημα 112). Η Geologica εχει ΠΡΑΓΜΑΤΙΚΟ αξονα
     κλισης — στο tokens.css δηλωνεται  font-style: oblique 0deg 12deg.
     Αρα δεν ειναι συνθετικη γερση: ο browser ζηταει τη γωνια απο τον
     ιδιο τον σχεδιασμο, και τα ελληνικα κρατανε σωστο σχημα. Αυτο
     ακριβως ελειπε απο τη Literata και γι' αυτο «επεφτε».

     ΟΧΙ σκετο italic: θα αφηνε τον browser να διαλεξει γωνια.
       0deg ορθια · 10deg τωρα · 12deg το μεγιστο της οικογενειας   */
  --pg-h-section-style: oblique 10deg;

  /* ── Η ΤΥΠΟΓΡΑΦΙΑ ΤΗΣ ΕΝΟΤΗΤΑΣ ΚΡΙΤΙΚΩΝ ───────────────────────
     ΤΡΕΙΣ ΓΡΑΜΜΕΣ, ΕΝΑ ΜΠΛΟΚ. Σβησε το ενεργο, ξεσχολιασε το αλλο.

     ΓΙΑΤΙ ΑΛΛΑΞΕ (βημα 100): η Literata ειναι λατινικη οικογενεια με
     ελληνικα προσθετα. Τα ΠΛΑΓΙΑ της ιδιως υστερουν — στα λατινικα το
     italic ειναι χωριστη παραδοση αιωνων, στα ελληνικα συχνα ειναι
     απλως γερμενο το ορθιο. Γι' αυτο «εσκαγε» στα αγγλικα και επεφτε
     στα ελληνικα.

     Η GFS Didot ειναι σχεδιασμενη ΠΡΩΤΑ για ελληνικα. Δινει τον ιδιο
     Didone χαρακτηρα — ΟΡΘΙΑ, γιατι πλαγια δεν εχει (και στα ελληνικα
     δεν λειπει οσο θα ελειπε στα λατινικα).                        */
  --pg-rvw-font:      var(--pg-font-display, Geologica, Arial, sans-serif);
  --pg-rvw-style:     normal;   /* τιτλοι αρθρων: ΟΡΘΙΟΙ */
  --pg-rvw-head-wght: 700;      /* επικεφαλιδα ενοτητας */
  --pg-rvw-wght:      600;      /* τιτλοι αρθρων — ενα σκαλι πιο κατω */
  --pg-rvw-feature-ratio: 1 / 1;   /* η μεγαλη εικονα αριστερα */

  /* Εναλλακτικα, αν ξαναθελησεις serif:
  --pg-rvw-font:      'GFS Didot', Georgia, serif;   (μονο 400)
  --pg-rvw-font:      'Literata', Georgia, serif;    (+ style: italic) */

  /* ── Χρωματα ───────────────────────────────────────────────────
     Το γκρι του RA ειναι #666 = 3.18:1 και ΚΟΒΕΤΑΙ στο AA.
     Το #8a8a8a δινει 5.29:1 και διαβαζεται ακομα ως δευτερευον.   */
  --pg-meta-ink:  #8a8a8a;
  /* Μελανι περιληψης (βημα 114). Οταν τιτλος και περιληψη εχουν ΤΟ
     ΙΔΙΟ χρωμα, η καρτα διαβαζεται σαν ενα μπλοκ. Ενα σκαλι πιο
     σβηστα δινει ιεραρχια ΧΩΡΙΣ διαφορα μεγεθους.
     #c9c9c9 σε #121212 = 11,4:1 — ανετα AAA.                      */
  --pg-dek-ink:   #c9c9c9;
  --pg-title-ink: #f2f2f2;

  /* Το κοκκινο των ενοτητων. ΞΕΧΩΡΙΣΤΟ απο το --pg-brand-on-dark:
     επιλεχθηκε ρητα το rgb(255,72,72). 5.45:1 σε #151515 — περναει AA.
     Αλλαζε ΕΔΩ, η πλαγια γραμμη το ακολουθει με currentColor.       */
  --pg-section-accent: rgb(255, 72, 72);

  /* Η πλαγια γραμμη παιρνει currentColor απο την επικεφαλιδα —
     ενα χρωμα, ποτε δυο. Αλλαζε το --pg-brand-on-dark και
     αλλαζουν μαζι.                                                 */
  /* Η γραμμη οριζεται απο το ΚΑΘΕΤΟ υψος της, οχι απο το μηκος.
     Το μηκος το υπολογιζει το CSS: L = υψος / cos(γωνια).
     Ετσι αν αλλαξεις γωνια, το υψος ΔΕΝ αλλαζει — παραμενει ισο με
     τα κεφαλαια γραμματα.                                           */
  --pg-slash-h:     .655em;   /* ΜΕΤΡΗΜΕΝΟ: OS/2 sCapHeight = 655/1000 */
  --pg-slash-ang:   42deg;
  --pg-slash-w:     .04em;
  --pg-slash-x:     .1em;     /* ποσο μεσα ξεκιναει η γραμμη        */
  --pg-slash-gap:   .27em;    /* ΤΟ ΚΕΝΟ ως τα γραμματα — αυτο ρυθμιζεις */
  --pg-slash-nudge: -.055em;  /* τα κεφαλαια δεν ειναι κεντραρισμενα
                                 στο line box — καθονται λιγο ψηλοτερα */
}

/* ═══ 1. ΤΙΤΛΟΣ ΕΝΟΤΗΤΑΣ ═══════════════════════════════════════════
   Αντιπαλος: .lookLayout .category__title            (0,2,0)
   Δικο μας:  .category__title ×3                     (0,3,0)            */
.category__title.category__title.category__title {
  position: relative;
  /* Το οριζοντιο ανοιγμα της στραμμενης γραμμης ειναι h·tan(γωνια).
     Το CSS εχει tan() απο το 2022, οπως και το cos(). Πρωτα σταθερη
     τιμη ως εφεδρικο, μετα ο υπολογισμος.
     Ετσι το --pg-slash-gap σημαινει ΠΡΑΓΜΑΤΙΚΑ «κενο ως τα γραμματα»
     και δεν ξαναϋπολογιζεται οταν αλλαζει γωνια ή υψος.            */
  /* βημα 092 · 06/10/2026 — νεα εικονα, απο reference του χρηστη.
     ΗΤΑΝ: Sofia Sans Condensed 850, ΚΟΚΚΙΝΟ, με πλαγια καθετο
            αριστερα και padding-left για να της ανοιξει χωρο.
     ΕΙΝΑΙ: Inter 800, ΛΕΥΚΟ (το μελανι της ενοτητας), χωρις καθετο.

     Inter και οχι condensed: στο reference τα γραμματα ειναι ΦΑΡΔΙΑ
     και βαρια, οχι στενα. Το Inter ειναι ηδη φιλοξενουμενο τοπικα ως
     variable 100-900 ΜΕ ελληνικο subset (tokens.css:17) — αρα το 800
     ειναι ΠΡΑΓΜΑΤΙΚΟ σχεδιο, οχι συνθετικο bold. Δεν χρειαζεται
     τιποτα νεο.                                                     */
  padding-left: 0;
  font-family: var(--pg-h-section-font, Geologica, Arial, sans-serif);
  font-size: var(--pg-h-section);
  font-weight: var(--pg-h-section-wght, 700);
  font-style: var(--pg-h-section-style, normal);
  /* Οι αξονες της Geologica. Χωρις αυτους βγαινει με ΣΤΡΟΓΓΥΛΕΜΕΝΕΣ
     γωνιες (SHRP 0 ειναι η προεπιλογη) και δεν θα εμοιαζε ουτε με το
     hero ουτε με τις κριτικες, που τρεχουν και τα δυο SHRP 100.    */
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  line-height: 1.1;
  letter-spacing: -.01em;
  /* ΠΕΖΟΚΕΦΑΛΑΙΑ (βημα 102). Ηταν uppercase. Προσοχη: αν ενας ορος
     ειναι ΓΡΑΜΜΕΝΟΣ με κεφαλαια στο taxonomy, θα βγει κεφαλαιος —
     το CSS δεν μπορει να τον κανει πεζο. Αυτο διορθωνεται στον ορο. */
  text-transform: none;
  /* Γραμμη πανω και κατω, οπως στην επικεφαλιδα των κριτικων */
  padding-block: 14px;
  border-inline: 0;
  border-top: 1px solid var(--pg-h-section-rule, #2e2e2e);
  border-bottom: 1px solid var(--pg-h-section-rule, #2e2e2e);
  /* Το μελανι της ενοτητας, οχι ο τονος: λευκο σε σκουρο, #141414 σε
     χαρτι. Ακολουθει μονο του και στις αναποδες ενοτητες.           */
  color: var(--pg-title-ink, #f2f2f2);
  /* ΔΕΝ ξαναμπαινει `border: 0` εδω.
     Ηταν καταλοιπο απο το βημα 092, οταν ο τιτλος δεν ειχε γραμμες και
     το χρειαζομασταν για να σβησει το `h1..h6 { border-top: 2px solid
     #171717 }` του mainsite. Απο το βημα 102 βαζουμε ΔΙΚΕΣ μας γραμμες
     λιγο πιο πανω — και το shorthand, οντας ΠΙΟ ΚΑΤΩ στον ιδιο κανονα,
     τις εσβηνε και τις δυο. Τα border-top/bottom πιο πανω καλυπτουν
     ηδη τον αντιπαλο.                                                */
  /* Ανασα πριν το πλεγμα — στο reference ειναι γενναιοδωρη */
  margin-bottom: clamp(20px, 2.2vw, 34px);
}

/* Η ΠΛΑΓΙΑ ΚΑΘΕΤΟΣ ΒΓΑΙΝΕΙ.
   Ο κανονας που τη ζωγραφιζει μενει πιο κατω — ΔΕΝ σβηστηκε, μονο
   ακυρωνεται εδω. Για να ΕΠΙΣΤΡΕΨΕΙ, σβησε αυτο το μπλοκ.
   ×4 ωστε να νικαει το ×3 που την οριζει.                           */
.category__title.category__title.category__title.category__title::before {
  content: none;
}

.category__title.category__title.category__title a {
  color: inherit;
  text-decoration: none;
}
.category__title.category__title.category__title a:hover {
  color: var(--pg-title-hover, #fff);
}

/* Η ΠΛΑΓΙΑ ΓΡΑΜΜΗ.
   Αντιπαλος: .lookLayout .category__title:before  (0,2,0)
   — εβαζε ΟΡΙΖΟΝΤΙΑ μπαρα 4px σε #000 κατω απο τον τιτλο, δηλαδη
   μαυρο πανω σε σχεδον μαυρο: αορατη. Την ξαναχρησιμοποιουμε.      */
.category__title.category__title.category__title::before {
  content: "";
  display: block;
  position: absolute;
  left: .37em;
  left: calc(var(--pg-slash-x)
             + (var(--pg-slash-h) * tan(var(--pg-slash-ang)) - var(--pg-slash-w)) / 2);
  right: auto;
  top: calc(50% + var(--pg-slash-nudge));
  bottom: auto;
  /* Το max() ειναι ΜΟΝΟ δικλειδα να μην εξαφανιστει — οχι σχεδιαστικη
     τιμη. Ηταν 2.5px, που στα μικρα μεγεθη ΥΠΕΡΙΣΧΥΕ του .04em και
     εκανε τη γραμμη διπλασια απ' οσο ζηταμε. Τωρα 1px.            */
  width: max(1px, var(--pg-slash-w));
  /* Εφεδρικο για browser χωρις cos(), μετα ο υπολογισμος. */
  height: .88em;
  height: calc(var(--pg-slash-h) / cos(var(--pg-slash-ang)));
  border-radius: 1px;
  /* currentColor, ΟΧΙ δικο της token: κληρονομει το χρωμα του τιτλου,
     αρα δεν γινεται ποτε να αποκλινουν. Αν αλλαξεις το χρωμα της
     επικεφαλιδας, η γραμμη ακολουθει μονη της.                      */
  background: currentColor;
  transform: translateY(-50%) rotate(var(--pg-slash-ang));
  z-index: 0;
}

/* ═══ 2. ΤΙΤΛΟΙ ΑΡΘΡΩΝ ═════════════════════════════════════════════
   Αντιπαλοι: a { color:#fff } (0,0,1) · διαφορα .type* (εως 0,4,0)
   Δικο μας:  .article__title ×3 + παραλλαγη                          */
.article__title.article__title.article__title {
  /* PF Spekk SemiBold — η αρχικη γραμματοσειρα του site.
     Ορiζεται στο tokens.css (--pg-font-title). Η Geologica
     μενει αποκλειστικα στο hero.                                 */
  font-family: var(--pg-font-title, Geologica, Arial, sans-serif);
  /* ΟΙ ΑΞΟΝΕΣ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟΙ ΑΠΟ ΤΟ ΒΗΜΑ 113.
     Με τη Roboto Condensed δεν χρειαζονταν — δεν εχει τετοιους αξονες.
     Η Geologica ομως εχει προεπιλογη SHRP 0, δηλαδη ΣΤΡΟΓΓΥΛΕΜΕΝΕΣ
     γωνιες. Χωρις αυτη τη γραμμη οι τιτλοι των καρτων θα εβγαιναν με
     αλλα «κοψιματα» απο το carousel και τις επικεφαλιδες — ακριβως η
     ασυνεπεια που θελαμε να φυγει.                                  */
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  font-size: var(--pg-h-card);
  /* font-synthesis: none — δικλειδα. Η Roboto Condensed ειναι
     μεταβλητη 100-900, αρα καθε βαρος ειναι ΠΡΑΓΜΑΤΙΚΟ σχεδιο και
     δεν χρειαζεται συνθεση. Το κραταμε ωστε αν καποτε μπει
     γραμματοσειρα με λιγοτερα βαρη, να μη φτιαχτει ψευτικο bold. */
  font-weight: var(--pg-title-wght, 700);
  font-synthesis: none;
  line-height: 1.16;
  /* Tracking 0. Οι στενες γραμματοσειρες εχουν ηδη σφιχτα
     διαστηματα απο σχεδιασμο — αρνητικο tracking θα τις εκλεινε. */
  letter-spacing: 0;
  color: var(--pg-title-ink, #f2f2f2);
  text-decoration: none;
  transition: color .18s ease;
}


/* Τα μεγαλα — (0,4,0), νικαει και τα .type* */
/* Χρειαζεται (0,5,0): το .type2 .article--book.portraitImage .article__title
   ειναι κι αυτο (0,4,0) και θα εκρινε η σειρα φορτωσης — οχι αξιοπιστο. */
.article--mgWideFull.article--mgWideFull             .article__title.article__title.article__title,
.article--mgWideFullInline.article--mgWideFullInline .article__title.article__title.article__title,
.article--mgWide.article--mgWide                     .article__title.article__title.article__title,
.article--wideLarge.article--wideLarge               .article__title.article__title.article__title,
.article--wideMedium.article--wideMedium             .article__title.article__title.article__title {
  font-size: var(--pg-h-lead);
  line-height: 1.08;
  letter-spacing: -.015em;
}

/* ═══ 3. ΗΜΕΡΟΜΗΝΙΑ & ΣΥΝΤΑΚΤΗΣ ════════════════════════════════════
   Αντιπαλοι: .article__info          rgb(102,102,102)  (0,1,0)
              .article__info a.dark   rgb(102,102,102)  (0,2,1)
   Δικο μας:  ×3 + απογονος                            (0,4,0)+        */
.article__info.article__info.article__info {
  /* Sofia Sans Condensed — ΜΕΤΡΗΜΕΝΑ 18% στενοτερη απο την PF Spekk.
     Ιδια οικογενεια με το .article__category, αρα ολη η «σκαλωσια»
     της καρτας ειναι μια στενη φωνη και ο τιτλος η αλλη.
     Μετρηση με fontTools στο «ΜΑΡΙΑ ΔΗΜΟΥ 28.09.2026», greek+ψηφια,
     instanced στο 600 — οχι εντυπωση:
         PF Spekk Regular (ηταν)  11.02em   154.3px στα 14px
         Roboto Condensed         10.98em   153.7px   -0.4%  ← ΙΔΙΟ!
         Sofia Sans Condensed      9.04em   126.6px  -18.0%  ← αυτη
     Η Roboto Condensed, παρα το ονομα της, ΔΕΝ ειναι στενοτερη απο
     την PF Spekk — θα ηταν αλλαγη χωρις ορατο αποτελεσμα.          */
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  /* ΒΗΜΑ 244 — ηταν var(--pg-meta) (14px). Δικο της τοκεν τωρα.   */
  font-size: var(--pg-meta-byline, .8666rem);

  /* ΒΗΜΑ 244 — ΗΤΑΝ 600. Το 400 ειναι ΠΡΑΓΜΑΤΙΚΟ σχεδιο της Fira
     Sans (fonts/fira-greek-400.woff2), οχι συνθεση. ΚΟΣΤΟΣ: +9KB
     στο κινητο — ο επισκεπτης κατεβαζε μονο 600 και 700 μεχρι τωρα
     (tokens.css:155), αρα το 400 ειναι ΝΕΟ αρχειο.                */
  font-weight: 400;

  /* ── ΠΛΑΓΙΑ — ΒΗΜΑ 244 ─────────────────────────────────────────
     ΤΟ font-synthesis: none ΗΤΑΝ Ο ΑΝΤΙΠΑΛΟΣ, ΟΧΙ ΤΟ font-style.
     Η Fira Sans ΔΕΝ εχει αρχειο πλαγιων (fonts/fira-*: μονο
     400/500/600/700, ολα font-style: normal). Με font-synthesis:
     none ο browser ΑΠΑΓΟΡΕΥΕΤΑΙ να φτιαξει κλιση — το
     font-style: italic θα εμενε ΑΟΡΑΤΟ, χωρις σφαλμα. Το «style»
     ανοιγει ΜΟΝΟ τη συνθεση κλισης· η συνθεση ΒΑΡΟΥΣ μενει
     κλειστη, που ηταν και ο αρχικος λογος του none.

     Η ΣΥΝΘΕΤΙΚΗ ΚΛΙΣΗ ΕΙΝΑΙ ΑΣΦΑΛΗΣ ΕΔΩ, ΓΙΑ ΕΝΑΝ ΣΥΓΚΕΚΡΙΜΕΝΟ
     ΛΟΓΟ: το text-transform: uppercase πιο κατω. Η βασικη ενσταση
     κατα της ψευτικης κλισης στα ελληνικα ειναι οτι μουτζουρωνει
     τους τονους — αλλα το uppercase ΤΟΥΣ ΑΦΑΙΡΕΙ (ά → Α). Μενει
     μια καθαρη λοξη σε κεφαλαια.                                 */
  font-style: italic;
  font-synthesis: style;

  /* ΒΗΜΑ 250 — ηταν .07em. ΤΟ ΑΡΑΙΟ ΔΙΑΣΤΗΜΑ ΗΤΑΝ ΓΙΑ ΤΑ ΚΕΦΑΛΑΙΑ:
     σε μικρα κεφαλαια το tracking ειναι αυτο που τα κανει να
     διαβαζονται ως ΕΤΙΚΕΤΑ (ιδιο σκεπτικο με το .article__category,
     βημα 114). Σε πεζα το ιδιο νουμερο ξεκολλαει τα γραμματα και
     σπαει τη λεξη. Μενει ενα ιχνος, οχι μηδεν — τα πλαγια στα 13px
     θελουν λιγο αερα.                                             */
  letter-spacing: .01em;

  /* ΒΗΜΑ 250 — ηταν uppercase. ΓΡΑΜΜΕΝΟ ΡΗΤΑ ΩΣ none, οχι σβησμενο:
     μια γραμμη κοστος, αλλα ανοσια αν καποτε μπει uppercase σε
     ευρυτερο κανονα. Τα παιδια το ακολουθουν — εχουν
     text-transform: inherit πιο κατω.

     ΠΡΟΣΟΧΗ, ΑΛΛΑΖΕΙ ΤΗ ΣΥΛΛΟΓΙΣΤΙΚΗ ΤΟΥ ΒΗΜΑΤΟΣ 244:
     εκει η συνθετικη κλιση κριθηκε ασφαλης ΕΠΕΙΔΗ το uppercase
     αφαιρουσε τους ελληνικους τονους (ά → Α), αρα δεν ειχε τι να
     μουτζουρωσει. Με πεζα οι τονοι ΕΠΑΝΕΡΧΟΝΤΑΙ και η κλιση ειναι
     ψευτικη (η Fira Sans δεν εχει αρχειο πλαγιων). Στα 13px μπορει
     να φανει. ΑΝ ΦΑΝΕΙ, τρεις δρομοι:
       1. font-style: normal        — φευγουν τα πλαγια
       2. font-family: var(--pg-font-serif)  + font-synthesis: none
          — Literata italic, ΑΛΗΘΙΝΑ πλαγια με ελληνικα, ηδη στο
            θεμα (fonts/literata-*-italic.woff2). Σεριφ ομως.
       3. μενει ως εχει                                            */
  text-transform: none;
  color: var(--pg-meta-ink, #8a8a8a);
  transition: color .18s ease;
}
/* Τα παιδια του info ΔΕΝ κληρονομουν γραμματοσειρα — τους επιβαλλεται.
   mainsite.css:5355   .article__info a { font-family: PFSpekkVARMedium  !important }
   mainsite.css:13449  .article__info a { font-family: PFSpekkVARRegular !important }
   Και τα δυο στο (0,1,1) ΜΕ !important. Γι' αυτο αλλαξαν μονο τα
   ψηφια: η ημερομηνια ειναι <span> και κληρονομει, ο συντακτης ειναι
   <a> και ηταν κλειδωμενος στην PF Spekk Regular — την ιδια που ειχε
   και ο γονεας πριν, αρα φαινοταν «ιδιος».

   Το !important εδω ειναι αναγκαιο, οχι τεμπελια: !important νικιεται
   μονο απο !important, καμια ποσοτητα κλασεων δεν αρκει.
   Ριζα (0,4,0): τρεις .article__info + ενα για το :is(), που παιρνει
   την ειδικοτητα του βαρυτερου ορισματος του, δηλαδη του .dark.

   inherit και οχι το token: η πηγη της αληθειας μενει ΕΝΑ σημειο, ο
   γονεας .article__info.                                            */
.article__info.article__info.article__info :is(a, span, time, .dark) {
  color: var(--pg-meta-ink, #8a8a8a);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  /* ΒΗΜΑ 244 — ρητο, οπως ολα τα αλλα εδω. Το font-style κληρονομειται
     απο μονο του, αλλα ο <a> του συντακτη ειναι το σημειο που το
     mainsite διεκδικει με !important (δυο φορες, γρ. 5355/13449):
     οταν καποτε προστεθει font-style σε εκεινους τους κανονες, αυτη
     η γραμμη ειναι ηδη εδω.                                       */
  font-style: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.article__info.article__info.article__info a:hover {
  color: var(--pg-meta-hover, var(--pg-text, #e8e8e8));
}

/* ═══ 4. ΤΟ ΚΟΥΜΠΙ MORE ════════════════════════════════════════════
   Αντιπαλος: .lookLayout .button:not(…)×9            (0,11,0)
   Εβαζε border: 4px solid #000 ΚΑΙ color: #000 — μαυρο σε μαυρο.
   Εδω χρειαζεται !important: (0,11,0) δεν πιανεται με βαρυτητα.
   Αλλαζει ΜΟΝΟ χρωμα — το 4px και το min-width: 225px μενουν.       */
.button.button.button,
a.button.button.button {
  color: var(--pg-btn-ink, var(--pg-text, #e8e8e8)) !important;
  border-color: var(--pg-btn-border, var(--pg-border, #3a3a3a)) !important;
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif) !important;
  letter-spacing: .12em !important;
}
.button.button.button:hover,
a.button.button.button:hover {
  color: var(--pg-btn-ink-hover, #fff) !important;
  border-color: var(--pg-btn-accent, var(--pg-brand, #dc2833)) !important;
}
/* Το σαρωτικο ::before ηταν #000 — αορατο. Γινεται brand. */
.button.button.button::before,
a.button.button.button::before {
  background-color: var(--pg-btn-accent, var(--pg-brand, #dc2833)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ΣΤΟΙΧΙΣΗ ΜΕ ΤΗΝ ΕΙΚΟΝΑ
   Το mainsite.css:13285 εχει .article__content { padding: 0 16px }.
   Η εικονα ειναι ΑΔΕΛΦΟ στοιχειο, οχι μεσα στο content — αρα η
   εικονα κολλαει στην ακρη της καρτας και το κειμενο μπαινει 16px
   μεσα. Αυτη ειναι η μετατοπιση.

   Το :not() εξαιρει ΜΟΝΟ τις 8 παραλλαγες που οριζουν δικο τους
   padding (τις μετρησα στο mainsite, δεν τις μαντεψα):
   heroMag · mgWideFullInline · inlineSquare · opinion · slide ·
   fullWideAbsolute · fullWideLargeAbsolute · fullWideMediumAbsolute
   Εκει η εικονα ειναι στο πλαι ή το κειμενο ειναι absolute πανω της,
   αρα το «κατω απο την εικονα» δεν εχει νοημα.

   Ειδικοτητα: 1 + 8(:not) + 1 = (0,10,0). Δεν αλλαζει ΚΑΝΕΝΑ
   πλατος: το padding ηταν μεσα στην καρτα, το grid μενει ιδιο.    */
.article:not(.article--heroMag):not(.article--mgWideFullInline):not(.article--inlineSquare):not(.article--opinion):not(.article--slide):not(.article--fullWideAbsolute):not(.article--fullWideLargeAbsolute):not(.article--fullWideMediumAbsolute) .article__content {
  padding-inline: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Η ΚΑΤΗΓΟΡΙΑ ΣΤΗΝ ΚΑΡΤΑ — γκρι σαν τα υπολοιπα μετα, κοκκινη στο hover

   Το mainsite.css:13257 την εκανε ΜΑΥΡΗ ΠΑΣΤΙΛΙΑ:
       background-color: #000;  padding: 0 16px;  color: #fff;
   Σε σκουρο φοντο ειναι μαυρο κουτι πανω σε μαυρο — και το 16px
   padding της σπρωχνει το κειμενο ακομα πιο δεξια, αρα ηταν ΚΑΙ
   δευτερη αιτια της κακης στοιχισης.

   Ειδικοτητα: (0,3,0) νικα το (0,1,0) της παστιλιας και το
   a { color: #ffffff } που αλλιως θα εβαφε το link λευκο.         */
.article__category.article__category.article__category {
  /* ΜΕΝΕΙ ΣΤΗ ΡΟΗ — βημα 136 · 09/10/2026.
     mainsite.css, ΜΕΣΑ σε @media (max-width: 766px):
         .article__category { margin: 0; position: absolute;
                              left: 0; top: 0;
                              transform: translateY(-100%) }
     Σε στενο πλατος η ΙΔΙΑ η κατηγορια βγαινει εκτος ροης και
     κολλαει στο top:0 left:0 του πρωτου τοποθετημενου προγονου. Με
     τις καρτες σε μια στηλη, ΟΛΕΣ προσγειωνονται στο ιδιο σημειο:
     «ΣΕΙΡΕΣΔΙΑΦΟΡΑLIFESTYLE» τυπωμενα το ενα πανω στο αλλο.

     ΤΡΙΤΗ ΦΟΡΑ Ο ΙΔΙΟΣ ΕΝΟΧΟΣ, ΤΡΙΤΗ ΜΕΤΑΜΦΙΕΣΗ:
       βημα 123  .article__category a        (γρ. 14162, παντου)
       βημα 128  .article__parentCategory    (γρ. 13304, παντου)
       βημα 136  .article__category          (γρ. ~20980, ΜΟΝΟ mobile)
     Καθε φορα διορθωσα ΤΟ ΣΤΟΙΧΕΙΟ ΠΟΥ ΕΙΧΑ ΜΠΡΟΣΤΑ ΜΟΥ αντι να
     ψαξω ολους τους κανονες που τοποθετουν κατηγορια. Ο σωστος
     ελεγχος ηταν ενα grep για «article__category» μαζι με
     «position», ΜΕ τα media queries — τον εκανα στο βημα 123 αλλα
     κοιταξα μονο τους unmedia κανονες.

     Το inset και το transform μπαινουν ΚΑΙ ΤΑ ΔΥΟ: το position
     μονο του δεν ακυρωνει το translateY(-100%).                  */
  position: static;
  inset: auto;
  transform: none;
  background-color: transparent;
  padding: 0;
  margin-top: 0;
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta);        /* ιδιο token με ημ/νια + συντακτη */
  font-weight: 700;
  line-height: 1.3;
  /* βημα 114 — ητανε .07em. Σε ΜΙΚΡΑ ΚΕΦΑΛΑΙΑ το αραιο διαστημα ειναι
     αυτο που τα κανει να διαβαζονται ως ΕΤΙΚΕΤΑ και οχι ως κολλημενο
     κειμενο. Η φθηνοτερη αλλαγη του συνολου, απο τις πιο ορατες.   */
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--pg-meta-ink, #8a8a8a);
  text-decoration: none;
  transition: color .18s ease;
}

.article__category.article__category.article__category a {
  color: inherit;                   /* ακολουθει τη γραμματοσειρα/χρωμα */
  background-color: transparent;
  padding: 0;
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
  /* ΒΗΜΑ 123 — ΤΟ ΚΟΜΜΑΤΙ ΠΟΥ ΕΛΕΙΠΕ.
     mainsite.css:14162, ΧΩΡΙΣ media query, ισχυει παντου:
         .article__parentCategory a,
         .article__category a { position: absolute;
                                left: 0; bottom: 0; z-index: 6 }
     Ειναι το «μαυρο πλακιδιο πανω στην εικονα». Ο κανονας απο πανω
     εσβηνε χρωμα, φοντο και padding — αλλα ΟΧΙ ΤΗ ΘΕΣΗ. Οσο η
     κατηγορια ηταν σκετο κειμενο δεν φαινοταν τιποτα: ο κανονας
     ζηταει <a> και δεν υπηρχε. Μολις η κατηγορια εγινε ΣΥΝΔΕΣΜΟΣ
     (block_1, βημα 122), ο συνδεσμος βγηκε ΕΚΤΟΣ ΡΟΗΣ, το
     .article__category κατερρευσε σε μηδενικο υψος και το κειμενο
     της κατηγοριας τυπωθηκε ΠΑΝΩ στον τιτλο.
     Το ιδιο ειχε συμβει στο block_12 και ειχε λυθει ΤΟΠΙΚΑ, με
     position: static μεσα στο .rvw__kicker. Εδω μπαινει στον ΚΟΙΝΟ
     κανονα, αρα λυνεται για καθε μπλοκ — υπαρχον και μελλοντικο. */
  position: static;
  inset: auto;
  z-index: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   .article__parentCategory — Η ΚΑΤΗΓΟΡΙΑ ΒΓΑΙΝΕΙ ΑΠΟ ΜΕΣΑ ΑΠΟ ΤΗ ΦΩΤΟ
   βημα 128 · 09/10/2026

   Καποια μπλοκ (block_10) ΔΕΝ χρησιμοποιουν .article__category αλλα
   .article__parentCategory. Δεν ειναι συνωνυμα: στο mainsite ειναι
   ΔΙΑΦΟΡΕΤΙΚΟ ΣΧΕΔΙΟ — μαυρο πλακιδιο καρφωμενο ΜΕΣΑ στην εικονα:

       mainsite.css:13304
       .article__parentCategory { background-color: #000; color: #fff;
                                  padding: 0 16px; position: absolute;
                                  left: 0; bottom: 0; z-index: 6 }

   Σε σκουρο θεμα ειναι μαυρο κουτι πανω σε φωτογραφια — και πανω απο
   ολα, ΑΣΥΜΦΩΝΟ με τα υπολοιπα μπλοκ, που δειχνουν την κατηγορια ως
   γκρι κειμενο κατω απο τη φωτο.

   ΓΙΑΤΙ ΔΕΝ ΤΟ ΕΠΙΑΣΕ Η ΔΙΟΡΘΩΣΗ ΤΟΥ ΒΗΜΑΤΟΣ 123: εκεινη προσθεσε
   position: static στο «.article__category a». Ο κανονας του mainsite
   ομως ειναι διπλος —
       .article__parentCategory a,  .article__category a
   — και εδω το parentCategory ειναι ΤΟ ΙΔΙΟ ΤΟ <a>, οχι περιεκτης
   του. Αρα χρειαζεται δικο του reset, στο ιδιο το στοιχειο.

   ΕΙΔΙΚΟΤΗΤΑ: ×3 = (0,3,0). Νικαει και το σκετο (0,1,0) της γρ. 13304
   και το .mgSidebar .article__parentCategory (0,2,0) της γρ. 13657,
   που το κεντραρει και το κατεβαζει με translateY(100%).

   Η ΕΜΦΑΝΙΣΗ ειναι ΑΝΤΙΓΡΑΦΟ του .article__category πιο πανω — ιδια
   tokens, οχι νεα νουμερα. Αν αλλαξει εκεινο, αλλαξε και εδω· δεν
   ενωθηκαν σε μια λιστα selectors γιατι αυτο εδω χρειαζεται ΚΑΙ το
   reset θεσης, που το .article__category δεν το θελει.             */
.article__parentCategory.article__parentCategory.article__parentCategory {
  /* ΒΓΑΙΝΕΙ απο τη φωτογραφια: χωρις position, επιστρεφει στη ροη και
     καθεται ΚΑΤΩ απο το <figure>, εκει ακριβως που βρισκεται η
     κατηγορια στα υπολοιπα μπλοκ.                                   */
  position: static;
  inset: auto;
  z-index: auto;
  /* βημα 136 — το .mgSidebar .article__parentCategory (mainsite
     γρ. 13657) το κατεβαζει με translateY(100%). Το position μονο
     του ΔΕΝ ακυρωνει transform.                                   */
  transform: none;
  background-color: transparent;
  padding: 0;
  /* Δεν ειναι μεσα σε flex container με gap (ειναι παιδι του
     .article__image), αρα το κενο απο τη φωτο το δινει margin.      */
  margin: 12px 0 0;

  display: block;
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--pg-meta-ink, #8a8a8a);
  text-decoration: none;
  transition: color .18s ease;
}


/* ═══════════════════════════════════════════════════════════════════
   ΟΛΑ ΤΑ HOVER ΜΑΖΙ — ενα κοκκινο, ενα σημειο

   Μεσα σε @media (hover: hover) and (pointer: fine), οπως τα εχει και
   το mainsite. Σε κινητο δεν υπαρχει hover: χωρις το media query, ενα
   tap κολλαει το κοκκινο πανω στο στοιχειο μεχρι να πατησεις αλλου.

   Το media query ΔΕΝ προσθετει ειδικοτητα (ευρημα Β15) — την
   ειδικοτητα τη δινουν μονο οι επαναλαμβανομενες κλασεις.

   Τι νικαμε — ολα μεσα στο ιδιο media query του mainsite:
     .article__info a:hover                            #171717  (0,3,1)
     .categorySection--black .article__info a:hover    #e5e5e5  (0,3,1)  ← ΑΥΤΟ
     .categorySection--darkWithBg .article__info a:hover        (0,3,1)
     .article__title:hover                             #171717  (0,2,0)
     .categorySection--black .article__title:hover     λευκο    (0,3,0)
   Οι δικες μας ριζες ειναι (0,4,x) — το :hover μετραει ως κλαση.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

  /* Τιτλοι αρθρων */
  .article__title.article__title.article__title:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
    text-decoration: none;
  }

  /* Κατηγορια στην καρτα — και οι δυο κλασεις (βημα 128) */
  .article__category.article__category.article__category:hover,
  .article__category.article__category.article__category a:hover,
  .article__parentCategory.article__parentCategory.article__parentCategory:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
    text-decoration: none;
  }

  /* Συντακτης — ΜΟΝΟ τα <a>. Η ημερομηνια ειναι <span>, δεν ειναι
     συνδεσμος, αρα δεν εχει λογο να κοκκινιζει: το χρωμα δηλωνει
     «πατα με», οχι διακοσμηση.                                     */
  .article__info.article__info.article__info a:hover,
  .article__info.article__info.article__info a.dark:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
    text-decoration: none;
  }
}

/* Πληκτρολογιο: ιδιο κοκκινο, ΕΞΩ απο το media query — το Tab
   δουλευει και σε συσκευες χωρις ποντικι.                          */
.article__title.article__title.article__title:focus-visible,
.article__category.article__category.article__category a:focus-visible,
.article__info.article__info.article__info a:focus-visible {
  color: var(--pg-section-accent, rgb(255, 72, 72));
}

/* ═══════════════════════════════════════════════════════════════════
   ΣΕΙΡΑ ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΑ
       κατηγορια  →  ΤΙΤΛΟΣ  →  συντακτης · ημερομηνια

   Γιατι το γκρι ηταν ΠΑΝΩ απο τον τιτλο:
   το mainsite.css:13315 εχει .article__title { order: 2 } ενω το
   .article__info δεν εχει καθολου order, αρα μενει στο 0 και παει
   πρωτο. Το flex ταξινομει πρωτα κατα order, μετα κατα σειρα DOM.

   Αυτο αποδεικνυει και κατι χρησιμο: ο τιτλος ΕΙΝΑΙ flex item, αρα
   ειναι απευθειας παιδι του .article__content και το order δουλευει.
   Δεν χρειαζεται να μαντεψουμε το markup.

   Δηλωνουμε κ α ι  τ α  τ ρ ι α  ρητα, ωστε η σειρα να μην εξαρταται
   ουτε απο το DOM ουτε απο το ποιος ξεχασε να βαλει order.        */
.article__category.article__category.article__category { order: 1; }
.article__title.article__title.article__title           { order: 2; }
.article__info.article__info.article__info              { order: 3; }

/* ΣΥΝΤΑΚΤΗΣ ΑΠΟ ΠΑΝΩ, ΗΜΕΡΟΜΗΝΙΑ ΑΠΟ ΚΑΤΩ — ΒΗΜΑ 247.

   ΙΣΤΟΡΙΑ ΤΗΣ ΕΙΔΙΚΟΤΗΤΑΣ (0,5,0), ΓΙΑΤΙ ΔΙΑΒΑΖΕΤΑΙ ΑΝΑΠΟΔΑ ΤΩΡΑ:
   το mainsite εχει
       .categorySection--black.type12 .article--wide .article__info
       { flex-direction: column }                           (0,4,0)
   ΧΩΡΙΣ media query. Το βημα 054 εγραψε αυτον τον κανονα με ΠΕΝΤΕ
   κλασεις ακριβως για να τον νικησει και να βαλει row. Σημερα
   ζηταμε column — δηλαδη ο,τι ηθελε εξ αρχης το mainsite — αλλα οι
   πεντε κλασεις ΜΕΝΟΥΝ: ο κανονας του mainsite ισχυει μονο σε ΜΙΑ
   ενοτητα (type12), αρα χωρις εμας οι αλλες θα εμεναν row. Η
   αφαιρεση του κανονα ΔΕΝ ειναι ισοδυναμη με το column.

   align-items: flex-start ΚΑΙ ΟΧΙ baseline: σε flex column ο
   οριζοντιος αξονας ειναι το align-items. Το baseline (που ηταν
   σωστο για row — στοιχιζε ονομα και ημερομηνια στην ιδια γραμμη
   βασης) θα στοιχιζε τωρα ΤΙΣ ΔΥΟ ΣΕΙΡΕΣ ΣΤΗ ΜΕΣΗ. Ιδιο μοτιβο με
   το βημα 245 στο καρουζελ.

   column-gap: 0 ρητα: το 14px δεν χωριζει τιποτα πια, και αν μεινει
   θα ξαναεμφανιστει σιωπηλα οταν καποιος βαλει flex-wrap.         */
.article__info.article__info.article__info.article__info.article__info {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: 0;
  row-gap: 3px;
}
/* Τα margin-right: 24px / 12px του mainsite γινονται gap — ενα
   νουμερο, οχι δυο που διαφωνουν.                                  */
.article__info.article__info.article__info :is(a, span, time) {
  margin-right: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   ΤΟ ΚΕΝΟ ΤΙΤΛΟΣ → ΣΥΝΤΑΚΤΗΣ · ΗΜΕΡΟΜΗΝΙΑ

   Ηταν 8px, απο το margin-bottom του mainsite στον τιτλο. Πολυ σφιχτο.

   Τα margin των flex items ΔΕΝ καταρρεουν, αρα το κενο ηταν
   margin-bottom τιτλου + margin-top info. Αν αυξανα μονο το δευτερο,
   το κενο θα ηταν αθροισμα δυο αριθμων σε δυο διαφορετικα αρχεια —
   το ιδιο λαθος με το --pg-slash-gap του βηματος 041.

   Γι' αυτο: μηδενιζεται το margin-bottom του τιτλου και ΟΛΟ το κενο
   το δινει το --pg-meta-gap. Ενας αριθμος, ενα ορατο πραγμα.      */
.article__title.article__title.article__title { margin-bottom: 0; }
.article__info.article__info.article__info    { margin-top: var(--pg-meta-gap, 16px); }

/* ΕΝΑΛΛΑΚΤΙΚΑ: με margin-top: auto (οπως το ειχε το mainsite) ολα τα
   «συντακτης · ημερομηνια» στοιχιζονται στη ΒΑΣΗ των καρτων, οσες
   σειρες και να πιανει καθε τιτλος. Πιο τακτικο σε πλεγμα, αλλα τοτε
   το κενο δεν ειναι σταθερο.                                       */

/* Το κενο κατηγορια → τιτλος μενει στα 8px του mainsite, ΣΚΟΠΙΜΑ
   μικροτερο: η κατηγορια ανηκει στον τιτλο, ο συντακτης ειναι
   ξεχωριστη μοναδα. Σφιχτα πανω, ανετα κατω — ετσι φαινεται η
   ομαδοποιηση χωρις γραμμες και πλαισια.                          */


/* ═══════════════════════════════════════════════════════════════════
   ΡΥΘΜΟΣ Δ — «ΚΟΛΛΗΜΕΝΟ»            (βημα 058 - 01/10/2026)

   Αριστερα ενα αρθρο που ΜΕΝΕΙ οσο σκρολαρεις, δεξια μικρα που
   κατεβαινουν. Οταν τελειωσουν, ξεκολλαει και παει στην επομενη.

   Η ΠΡΑΓΜΑΤΙΚΗ δομη, διαβασμενη απο τη σελιδα (οχι μαντεψια):

     div.view ... view-display-id-block_N categorySection sectionMargin type45
       div.view-content.row
         div.categorySection__wrapper.wrapper
           div.row                    ← Bootstrap, margin: 0 -12px
             div.col.col-12.flexColumn
               div.grid               ← ΕΔΩ ειναι το grid
                 article.article      ← απευθειας παιδια, ΧΩΡΙΣ .views-row

   Ο αντιπαλος ειναι μονο ενας:
       .grid { display:grid; grid-template-columns:repeat(3,1fr);
               grid-gap:24px }                              (0,1,0)
   Το .r-sticky .grid ειναι (0,2,0). Δεν υπαρχει κανενας κανονας
   .type45 .grid, αρα καμια ισοβαθμια. Χωρις !important.

   ΕΝΕΡΓΟΠΟΙΗΣΗ: στο CSS class του display ΠΡΟΣΘΕΤΕΙΣ το r-sticky στα
   υπαρχοντα — ΔΕΝ τα αντικαθιστας:
       categorySection sectionMargin type45 r-sticky
   ═══════════════════════════════════════════════════════════════════ */

/* Ποσο ψηλα κολλαει: μπαρα admin + header (logo 50 + padding 28) + αερας */
html:root {
  --pg-header-h:   78px;
  --pg-sticky-top: calc(var(--pg-admin-offset, 0px) + var(--pg-header-h) + 20px);
}

.r-sticky .grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  /* row-gap: 0 ΚΡΙΣΙΜΟ — δες το span 50 πιο κατω */
  row-gap: 0;
  align-items: start;
}

/* ── Το αριστερο ─────────────────────────────────────────────────────
   ΓΙΑΤΙ span 50: το sticky θελει η περιοχη του στο grid να ειναι
   ΨΗΛΟΤΕΡΗ απ' αυτο, αλλιως δεν εχει πουθενα να ταξιδεψει. Το
   grid-row: 1 / -1 ΔΕΝ δουλευει — το -1 δειχνει στο τελος του ΡΗΤΟΥ
   grid, που εδω ειναι μια σειρα.
   Το span 50 φτιαχνει 50 σειρες· οσες μεινουν κενες εχουν υψος 0,
   ΑΡΚΕΙ το row-gap να ειναι 0, αλλιως θα προσθετε 49 κενα. Γι' αυτο
   η αποσταση των μικρων δινεται απο border-top + padding-top.
   Ετσι δεν χρειαζεται ουτε JS ουτε να ξερουμε ποσα αρθρα ειναι.    */
.r-sticky .grid > .article:nth-child(1) {
  grid-column: 1 / span 5;
  grid-row: 1 / span 50;
  position: sticky;
  top: var(--pg-sticky-top);
  align-self: start;
  flex-direction: column;
}
.r-sticky .grid > .article:nth-child(1) .article__title {
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  line-height: 1.07;
}

/* ── Η εικονα του αριστερου: ΤΕΤΡΑΓΩΝΗ ──────────────────────────────
   Το πρωτο αρθρο ειναι .article--mgWide, και το mainsite του δινει
       .article--mgWide .article__image figure { aspect-ratio: 464/356 }
   στο (0,2,1) — δηλαδη 1,30:1, εξ ου το ορθογωνιο.

   Η δικη μας ριζα:
       .r-sticky .grid > .article:nth-child(1) .article__image figure
   = r-sticky + grid + article + :nth-child + article__image = 5 κλασεις
   + figure = (0,5,1). Το :nth-child() μετραει ως κλαση.

   Το padding-top: 0 δεν ειναι περιττο: καποιες παραλλαγες
   (.mgArticles, .mgSidebar, .thumbsSlider__thumbs) δινουν αναλογια με
   padding-top: calc(...) αντι για aspect-ratio. Αν η ενοτητα βρεθει
   ποτε μεσα σε τετοιο περιβαλλον, το μηδενισμενο padding κραταει το
   τετραγωνο καθαρο.                                                */
.r-sticky .grid > .article:nth-child(1) .article__image { width: 100%; }
.r-sticky .grid > .article:nth-child(1) .article__image figure {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  padding-top: 0;
  margin: 0;
}
.r-sticky .grid > .article:nth-child(1) .article__image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.r-sticky .grid > .article:nth-child(1) .article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Τα δεξια: μικρα, οριζοντια, στοιβαγμενα ─────────────────────── */
.r-sticky .grid > .article:nth-child(n+2) {
  grid-column: 7 / span 6;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  border-top: 1px solid var(--pg-border, #2e2e2e);
  padding-top: 18px;
  margin-top: 18px;
}
.r-sticky .grid > .article:nth-child(2) {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.r-sticky .grid > .article:nth-child(n+2) .article__image { flex: 0 0 124px; }
.r-sticky .grid > .article:nth-child(n+2) .article__content { flex: 1; }
.r-sticky .grid > .article:nth-child(n+2) .article__title {
  font-size: 1.2667rem;   /* 19px στο root 15px */
}

/* Το μπανερ, αν υπαρχει μεσα στο grid, κρατα ολο το πλατος */
.r-sticky .grid > .banner { grid-column: 1 / -1; }

/* ── Tablet και κινητο: το sticky φευγει ─────────────────────────
   Σε μια-δυο κολωνες δεν εχει νοημα, και σε κινητο θα εκρυβε
   περιεχομενο κατω απο το header.                                  */
@media (max-width: 1023px) {
  .r-sticky .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }
  .r-sticky .grid > .article:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
  }
  .r-sticky .grid > .article:nth-child(n+2) {
    grid-column: auto;
    flex-direction: column;
    gap: 0;
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .r-sticky .grid > .article:nth-child(n+2) .article__image { flex: none; }
  /* Σε μια-δυο κολωνες το τετραγωνο τρωει ολη την οθονη — πισω στο
     αρχικο 464/356 του mainsite.                                     */
  .r-sticky .grid > .article:nth-child(1) .article__image figure {
    aspect-ratio: 464 / 356;
  }
}
@media (max-width: 620px) {
  .r-sticky .grid { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════
   ΤΟ «|» ΣΒΗΝΕΙ ΠΑΝΤΟΥ — ΒΗΜΑ 247

   mainsite.css:13504  .article__info span:before { content: '|' }  (0,1,2)

   ΗΤΑΝ: ο ιδιος κανονας με > :first-child::before, δηλαδη σβησιμο
   ΜΟΝΟ στο πρωτο παιδι. Λογος: ο διαχωριστης μπαινει σε ΚΑΘΕ span,
   και οταν το αρθρο δεν εχει συντακτη — συνηθες σε παλια μεταφερμενα
   αρθρα — το span της ημερομηνιας ηταν πρωτο και η γραμμη ξεκιναγε
   με «| 25.05.2019». Ο διαχωριστης αναμεσα στα δυο εμενε, σωστα.

   ΤΩΡΑ ΕΙΝΑΙ ΔΥΟ ΣΕΙΡΕΣ, αρα δεν υπαρχει «αναμεσα»: ο διαχωριστης
   καθεται στην ΑΡΧΗ της δευτερης γραμμης, πριν την ημερομηνια. Δεν
   χωριζει τιποτα — φευγει ολοκληρος.

   Ο ΕΠΙΛΟΓΕΑΣ ΕΓΙΝΕ > *::before ΑΠΟ > :first-child::before, δηλαδη
   ΧΑΝΕΙ μια κλαση (το :first-child μετραει ως κλαση): (0,3,1) αντι
   (0,4,2). Νικαει ακομα ανετα το (0,1,2) του mainsite — η συγκριση
   ξεκινα απο τις κλασεις, 3 εναντι 1, και τα στοιχεια δεν κρινονται
   καν.                                                              */
.article__info.article__info.article__info > *::before {
  content: none;
}


/* ═══ 9. ΑΝΑΠΟΔΕΣ ΕΝΟΤΗΤΕΣ — ΛΕΥΚΟ ΦΟΝΤΟ ══════════════════════════
   βημα 083 · 06/10/2026

   ┌────────────────────────────────────────────────────────────────┐
   │  ΓΙΑ ΝΑ ΓΙΝΕΙ ΕΝΑ ΜΠΛΟΚ ΛΕΥΚΟ:                                 │
   │  προσθεσε pg-paper στο .categorySection__wrapper του,          │
   │  μεσα στο unformatted template του. ΜΙΑ λεξη.                  │
   │     <div class="categorySection__wrapper wrapper pg-paper">    │
   └────────────────────────────────────────────────────────────────┘

   ΒΗΜΑ 122 — ΓΙΑΤΙ ΔΕΝ ΕΙΝΑΙ ΠΙΑ ΔΕΜΕΝΟ ΣΤΟ block_1
   Ηταν γραμμενο ως :is(.view-display-id-block_1), δηλαδη «το λευκο
   ΕΙΝΑΙ το block_1». Οταν το block_1 ξαναμπηκε σε χρηση ως κανονικη
   σκουρα ενοτητα 4 στηλων, ολοκληρη η ενοτητα 9 θα το εβαφε λευκο —
   σιωπηλα, χωρις κανεις να το εχει ζητησει.
   Τωρα ειναι .pg-paper: ΕΠΙΛΟΓΗ, οχι ταυτοτητα. Κανενα μπλοκ δεν την
   εχει σημερα, αρα η ενοτητα 9 ειναι ΑΝΕΝΕΡΓΗ αλλα ΕΤΟΙΜΗ — ο κωδικας
   και η αιτιολογηση του μενουν ακεραια.

   ΓΙΑΤΙ ΑΡΚΕΙ ΕΝΑΣ ΚΑΝΟΝΑΣ
   Καθε χρωμα του αρχειου περναει απο ΜΕΤΑΒΛΗΤΗ, και οι μεταβλητες
   ΚΛΗΡΟΝΟΜΟΥΝΤΑΙ. Ξαναοριζοντας τες στον περιεκτη της ενοτητας,
   αλλαζουν ΟΛΑ τα παιδια μαζι — τιτλοι, κατηγοριες, υπογραφες,
   κουμπια, η πλαγια γραμμη (currentColor), καθε hover.

   Τα τεσσερα σημεια που ηταν καρφωτα (#fff στο hover του τιτλου, το
   χρωμα του κουμπιου MORE κ.λπ.) εγιναν var() με fallback στη σημερινη
   τιμη. Οποτε η συμπεριφορα των αλλων ενοτητων ΔΕΝ αλλαξε καθολου —
   απλως εγινε παρακαμψιμη.

   Η ειδικοτητα του :is() ισουται με του βαρυτερου ορισματος = μια
   κλαση. Ο,τι και να προσθεσεις στη λιστα, το βαρος μενει (0,1,0).  */
:is(.pg-paper) {

  /* ┌──────────────────────────────────────────────────────────────┐
     │  ΤΟ ΧΡΩΜΑ ΑΛΛΑΖΕΙ ΕΔΩ — ΜΙΑ ΓΡΑΜΜΗ.                           │
     │  Σβησε το ενεργο --pg-paper και ξεσχολιασε οποιο θες.         │
     └──────────────────────────────────────────────────────────────┘

     ΓΙΑΤΙ ΟΧΙ ΚΑΘΑΡΟ ΛΕΥΚΟ
     Πανω σε #121212 το #ffffff ειναι το μεγιστο δυνατο αλμα. Δυο
     πρακτικα προβληματα, οχι γουστου:
       · φωτογραφιες με λευκο φοντο ΛΙΩΝΟΥΝ μεσα στη ζωνη — χανεται
         το περιγραμμα τους
       · η ζωνη μοιαζει με «δεν φορτωσε το φοντο» παρα με επιλογη
     Ενα χαρτι-off-white κραταει την ανασα αλλα δινει στις εικονες
     ορατη ακρη. Γι' αυτο ειναι το προεπιλεγμενο.                   */

  --pg-paper:       #efece6;   /* χαρτι, ζεστη κλιση — ΠΡΟΕΠΙΛΟΓΗ   */
  /* --pg-paper:    #ffffff; */  /* καθαρο λευκο                     */
  /* --pg-paper:    #f1eceb; */  /* ωχρο ροζ-γκρι, δενει με το κοκκινο */
  /* --pg-paper:    #e7e4dd; */  /* πιο σκουρο χαρτι, πιο ηπιο αλμα  */

  /* Αντιθεσεις πανω στο χαρτι, κατα WCAG 2.1 (ισχυουν και στα τεσσερα):
       #141414  ≥17:1  AAA  — τιτλοι & σωμα
       #5f5f5f  ≥6.1:1 AA   — συντακτης / ημερομηνια
       #c81e28  ≥5.4:1 AA   — ο τονος
     Το rgb(255,72,72) των σκουρων ενοτητων δινει 3.0:1 σε λευκο και
     ΚΟΒΕΤΑΙ. Ενα θεμα που αντιστρεφεται θελει ΔΙΚΗ του παλετα, οχι
     τις ιδιες τιμες αναποδα.                                       */
  --pg-title-ink:      #141414;
  --pg-meta-ink:       #5f5f5f;
  --pg-section-accent: #c81e28;

  --pg-title-hover:    #141414;
  --pg-meta-hover:     #c81e28;
  --pg-btn-ink:        #141414;
  --pg-btn-border:     #141414;
  --pg-btn-accent:     #c81e28;
  --pg-btn-ink-hover:  var(--pg-paper);

  background-color: var(--pg-paper);
  color: #141414;

  /* ΑΠΟ ΑΚΡΗ ΣΕ ΑΚΡΗ.
     Το λευκο σταματουσε 80px πριν απο καθε πλευρα, γιατι το body ειναι
     .withSkin και το mainsite δινει  .withSkin .mainContainer .main
     { padding: 0 80px }.  Το αρνητικο margin ακυρωνει ΟΠΟΙΟ padding κι
     αν εχει ο γονεας, χωρις να ξερουμε τον αριθμο: το 50% ειναι μισος
     γονεας, το 50vw μιση οθονη.

     ΑΣΦΑΛΕΣ: το mainsite εχει ηδη html { overflow-x: hidden } — γι'
     αυτο λειτουργουν και τα δικα του 100vw (.gallery, .videoComponent).
     ΔΕΝ αγγιζουμε overflow πουθενα: η αλλαγη του στο html/body ειναι
     που ειχε σπασει το hero carousel στο βημα 051.

     Το περιεχομενο ΔΕΝ μετακινειται: το .wrapper μεσα ειναι
     max-width:1568px με margin:0 auto, αρα κεντραρεται στην οθονη
     ειτε ο γονεας του ειναι 100vw ειτε 100vw-160px.                  */
  /* ΑΠΟ ΑΚΡΗ ΣΕ ΑΚΡΗ — ΧΩΡΙΣ ΝΑ ΑΓΓΙΞΟΥΜΕ ΤΗ ΔΙΑΤΑΞΗ
     βημα 088 · τριτη και τελευταια προσπαθεια.

     Δοκιμασαμε δυο φορες να ΜΕΓΑΛΩΣΟΥΜΕ το στοιχειο:
       1. margin-inline: calc(50% - 50vw)   → το εκοβε το .wrapper
       2. + width: 100vw                    → ΜΕΤΑΤΟΠΙΣΤΗΚΕ δεξια

     Και οι δυο πειραζουν ΔΙΑΤΑΞΗ, αρα εξαρτωνται απο το ποιος ειναι ο
     περιεκτης, τι padding εχει, αν ειναι grid item. Καθε παραδοχη ενα
     ρισκο.

     Η λυση: ΜΗΝ αλλαξεις το κουτι καθολου. Αλλαξε μονο ΤΙ ΒΑΦΕΤΑΙ.

       box-shadow με spread 100vmax  →  βαφει παντου γυρω, χωρις να
                                        καταλαμβανει χωρο
       clip-path: inset(0 -100vmax)  →  επιτρεπει τη βαφη ΟΡΙΖΟΝΤΙΑ,
                                        την κοβει ΚΑΘΕΤΑ στο κουτι,
                                        ωστε να μη μπει στις ενοτητες
                                        απο πανω και απο κατω

     Το στοιχειο μενει ΑΚΡΙΒΩΣ οπου ηταν — ιδιο πλατος, ιδια θεση,
     καμια μετατοπιση. Αλλαζει μονο η ζωγραφικη.                     */
  box-shadow: 0 0 0 100vmax var(--pg-paper);
  clip-path: inset(0 -100vmax);

  /* display: flow-root αντι για padding.
     Το .sectionMargin μεσα εχει margin: 80px 0. Χωρις αυτο, τα margins
     ΔΡΑΠΕΤΕΥΟΥΝ απο τον περιεκτη (margin collapse) και το λευκο κοβει
     ακριβως πανω στο περιεχομενο. Το flow-root φτιαχνει νεο BFC και
     τα κραταει μεσα — αρα τα 80px του υπαρχοντος σχεδιασμου γινονται
     μονα τους το εσωτερικο κενο, χωρις να προσθεσουμε δικο μας.      */
  display: flow-root;
}


/* ═══ 10. ΚΑΘΕΤΟΣ ΧΩΡΙΣ ΤΙΤΛΟ ══════════════════════════════════════
   βημα 084 · 06/10/2026

   Η πλαγια γραμμη ειναι ::before του .category__title και ζωγραφιζοταν
   ΠΑΝΤΑ — ακομα κι οταν η ενοτητα δεν εχει τιτλο. Αποτελεσμα: μια
   κοκκινη καθετος να αιωρειται μονη της.

   Το :empty του Selectors Level 4 πιανει και στοιχειο που εχει ΜΟΝΟ
   κενα/αλλαγες γραμμης — που ειναι ακριβως τι βγαζει το Twig για αδειο
   τιτλο. (Το παλιο :empty απαιτουσε κυριολεκτικα τιποτα· ολοι οι
   σημερινοι browsers εχουν το νεο.)

   ΟΡΙΟ: αν ο τιτλος περιεχει &nbsp; η κατι αορατο αλλα υπαρκτο, δεν
   μετραει ως κενος και η γραμμη θα μεινει. Τοτε το σωστο ειναι να
   σβηστει ο τιτλος απο το Views, οχι να κυνηγησουμε CSS.

   ×3 + :empty = (0,4,0), νικαει το ×3 = (0,3,0) που τη ζωγραφιζει.   */
.category__title.category__title.category__title:empty::before {
  content: none;
}
/* Και ο ιδιος ο αδειος τιτλος να μην κρατα χωρο/περιθωριο. */
.category__title.category__title.category__title:empty {
  display: none;
}


/* ═══ 11. ΒΕΛΑΚΙ ΔΙΠΛΑ ΣΤΟΝ ΤΙΤΛΟ, ΑΝΤΙ ΓΙΑ ΚΟΥΜΠΙ MORE ════════════
   βημα 085 · 06/10/2026

   Το «MORE» εφευγε σε δικη του γραμμη κατω απο την ενοτητα. Τωρα ο
   συνδεσμος προς ολη την κατηγορια ειναι ΕΝΑ ΒΕΛΑΚΙ στην ακρη δεξια,
   στην ιδια ευθεια με τον τιτλο.

   ΔΕΝ ΦΤΙΑΧΝΟΥΜΕ ΝΕΟ ΕΙΚΟΝΙΔΙΟ. Το mainsite εχει ηδη ακριβως αυτο:

       .category__title a:after { content: '\e059' }        ← iconfont
       @media (min-width:767px) { … { content: unset } }     ← το εσβηνε

   Δηλαδη το βελακι υπηρχε ΜΟΝΟ σε κινητο. Το ξαναναβουμε παντου και
   το σπρωχνουμε δεξια. Κανενα νεο asset, καμια νεα γραμματοσειρα.

   ΓΙΑΤΙ ΔΟΥΛΕΥΕΙ ΜΟΝΟ ΤΟΥ: το ::after μπαινει στο <a> του τιτλου, που
   ηδη δειχνει στην κατηγορια. Αν μια ενοτητα ΔΕΝ εχει συνδεσμο, δεν
   υπαρχει <a>, αρα δεν βγαινει βελακι — σωστο, αφου δεν εχει πουθενα
   να παει. Μηδεν ειδικες περιπτωσεις.                               */
.category__title.category__title.category__title {
  display: flex;
  align-items: center;
}
/* Το {{ top_category }} ειναι rendered field του Views. Μπορει να
   βγει σκετο <a>, μπορει και τυλιγμενο σε <span class="field-content">.
   Δεν το ελεγχουμε — αρα το CSS πρεπει να δουλευει και στις δυο
   περιπτωσεις. Γι' αυτο ΑΠΟΓΟΝΟΣ `a` και οχι παιδι `> a`, και το
   ενδιαμεσο wrapper γινεται κι αυτο flex ωστε να τεντωνεται.        */
/* βημα 104 — ΤΟ ΒΕΛΑΚΙ ΚΟΛΛΑΕΙ ΣΤΟΝ ΤΙΤΛΟ, ΔΕΝ ΠΑΕΙ ΣΤΗΝ ΑΚΡΗ.

   ΗΤΑΝ στην ακρη δεξια με margin-left: auto. Το προβλημα δεν ηταν
   αισθητικο: ενα εικονιδιο μονο του στην αλλη ακρη της γραμμης
   ΥΠΟΣΧΕΤΑΙ ΔΕΥΤΕΡΟ ΠΡΟΟΡΙΣΜΟ. Εδω ομως ειναι ::after ΜΕΣΑ στον ιδιο
   <a> με τον τιτλο — ιδιο link, ιδια σελιδα. Δηλαδη το σχημα ελεγε
   ψεματα για τη λειτουργια.

   ΓΙΑΤΙ ΔΕΝ ΤΟ ΣΒΗΝΟΥΜΕ ΤΕΛΕΙΩΣ: μια μεγαλη επικεφαλιδα δεν δειχνει
   οτι ειναι συνδεσμος. Το βελακι ΑΜΕΣΩΣ μετα τη λεξη το λεει, χωρις
   να υπονοει ξεχωριστο κουμπι — οπως το «→» σε τελος προτασης.

   Αν το θες να φυγει εντελως: σβησε το ::after πιο κατω.           */
.category__title.category__title.category__title > * {
  /* ΟΧΙ flex:1 — αν τεντωσει, το βελακι ξαναφευγει στην ακρη */
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.category__title.category__title.category__title a {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .3em;
}
/* ΤΟ ΒΕΛΑΚΙ ΤΟΥ ΤΙΤΛΟΥ ΑΦΑΙΡΕΘΗΚΕ — βημα 105 · 08/10/2026.

   Ηταν ::after ΜΕΣΑ στον ιδιο <a> με τον τιτλο, αρα δεν ηταν ποτε
   δευτερος προορισμος. Οσο κι αν το μετακινουσαμε, εμενε σχημα που
   υπονοει ξεχωριστη ενεργεια χωρις να την εχει.

   Τη δουλεια του την κανει τωρα ΡΗΤΟΣ συνδεσμος με ΕΤΙΚΕΤΑ στο ΤΕΛΟΣ
   της ενοτητας (ενοτητα 14) — εκει που ο αναγνωστης τελειωσε και οντως
   αναρωτιεται «εχει κι αλλα;».                                     */


/* ΤΟ ΚΟΥΜΠΙ MORE — ΔΕΝ ΕΙΝΑΙ ΔΟΥΛΕΙΑ ΤΟΥ CSS
   βημα 090 · 06/10/2026 — αφαιρεση δικου μας μπαλωματος.

   ΕΙΧΑ εδω κανονα που το εκρυβε. Πρωτα με εναν προγονο, μετα — οταν
   δεν επιασε — με ΤΕΣΣΕΡΙΣ προγονους επι ΤΡΙΑ ονοματα κλασης, με την
   ελπιδα να πετυχει ενας συνδυασμος. Αυτο δεν ειναι λυση, ειναι
   σκοποβολη στο σκοταδι: δεν ηξερα το markup και το αντικατεστησα με
   πλατος διχτυου.

   ΤΟ MORE ΤΟ ΠΑΡΑΓΕΙ ΤΟ VIEWS, οχι το θεμα. Σωστο ειναι να μη
   μπαινει καν στο markup:

       Structure → Views → First Page Layout → [το display]
       μεσαια στηλη → More link → ξετσεκαρε «Create more link»

   Κερδη εναντι του CSS:
     · δεν μενει αδειο wrapper να πιανει χωρο
     · δεν βασιζεται σε ονοματα κλασεων που δεν ελεγχουμε
     · φαινεται σε οποιον ανοιξει το Views, αντι να ειναι κρυμμενο
       σε 51KB CSS
     · ενα λιγοτερο :has() σε καθε φορτωση σελιδας

   Το ΒΕΛΑΚΙ (ενοτητα 11) μενει — εκεινο ειναι οντως δουλεια του CSS. */



/* ═══ 12. ΝΑ ΜΗΝ ΚΟΒΟΥΝ ΟΙ ΓΟΝΕΙΣ ΤΗ ΖΩΝΗ ═════════════════════════
   βημα 087 · 06/10/2026

   Ακομα κι οταν το στοιχειο ειναι σωστα 100vw, ΑΡΚΕΙ ενας γονεας με
   overflow:hidden για να το κοψει. Το mainsite βαζει overflow-x:hidden
   σε αρκετα σημεια (.categorySection--dark, --black, .type14).

   Ανοιγουμε ΜΟΝΟ την αλυσιδα πανω απο τη συγκεκριμενη ενοτητα, με
   :has(). ΔΕΝ αγγιζουμε html/body — η αλλαγη overflow εκει ειναι που
   ειχε σπασει το hero carousel στο βημα 051, και το μαθημα ηταν:
   ποτε καθολικη αλλαγη για τοπικο προβλημα.                         */
body.path-frontpage .wrapper:has(.pg-paper),
body.path-frontpage .main:has(.pg-paper),
body.path-frontpage .mainContent:has(.pg-paper),
body.path-frontpage .region-content:has(.pg-paper),
body.path-frontpage .region-content > *:has(.pg-paper),
body.path-frontpage .views-element-container:has(.pg-paper) {
  overflow: visible;
}

/* ΤΟ .wrapper ΕΙΝΑΙ Ο ΕΝΟΧΟΣ — επιβεβαιωθηκε στον inspector:

       .wrapper { margin: 0 auto; padding: 0 64px; max-width: 1568px }

   Ειναι ΠΑΝΩ απο την ενοτητα, οχι μεσα. Το overflow:visible αρκει για
   να μην κοβει, αλλα χρειαζεται και το max-width να μη μετραει: το
   παιδι μας ειναι ηδη ρητα 100vw, αρα ξεφευγει μονο του ΜΟΛΙΣ παψει
   να κοβεται. Γι' αυτο εδω δεν πειραζουμε καθολου το .wrapper — μονο
   του αφαιρουμε το ψαλιδι, και ΜΟΝΟ στο wrapper που περιεχει το
   ενοτητα .pg-paper. Ολα τα αλλα wrappers μενουν ως εχουν.
   (Βημα 122: ηταν .view-display-id-block_1 — δες ενοτητα 9.)  */


/* ═══ 13. ΕΝΟΤΗΤΑ ΚΡΙΤΙΚΩΝ (block_16) ══════════════════════════════
   βημα 096 · 07/10/2026 — απο reference τυπου Pitchfork «Reviews».

   Η ΙΔΕΑ ΠΟΥ ΤΗ ΣΤΗΡΙΖΕΙ: ΔΥΟ ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ΣΕ ΑΝΤΙΠΑΡΑΘΕΣΗ.
     serif σε ΠΛΑΓΙΑ  →  επικεφαλιδα ενοτητας + τιτλοι αρθρων
     sans             →  κατηγορια, περιληψη, υπογραφη
   Αυτη η εναλλαγη ειναι που δινει την αισθηση περιοδικου· ολα τα
   υπολοιπα (γραμμες, πλεγμα) ειναι δευτερευοντα.

   ΙΔΙΕΣ ΚΛΑΣΕΙΣ, ΟΧΙ ΟΙ ΚΟΙΝΕΣ: .rvw__heading και οχι .category__title,
   .rvw__title και οχι σκετο .article__title. Ετσι η ενοτητα εχει δικη
   της τυπογραφια ΧΩΡΙΣ να πειραχτει καμια αλλη — και χωρις πολεμο
   ειδικοτητας με την ενοτητα 1.                                     */

.rvw {
  --rvw-rule: var(--pg-border, #2e2e2e);
}

/* ── Η επικεφαλιδα: serif, ΠΕΖΟΚΕΦΑΛΑΙΑ, με γραμμη πανω και κατω ── */
.rvw__heading {
  /* ΙΔΙΑ tokens με τις υπολοιπες επικεφαλιδες (βημα 102) — μια
     αλλαγη τις μετακινει ολες μαζι.                                */
  font-family: var(--pg-h-section-font, Geologica, Arial, sans-serif);
  font-weight: var(--pg-h-section-wght, 700);
  font-style: var(--pg-h-section-style, normal);
  /* ΟΙ ΑΞΟΝΕΣ ΤΗΣ GEOLOGICA — χωρις αυτους βγαινει με ΣΤΡΟΓΓΥΛΕΜΕΝΕΣ
     γωνιες (SHRP 0 ειναι η προεπιλογη της) και δεν θα εμοιαζε με τον
     τιτλο του hero, που ηδη τρεχει SHRP 100.
       SHRP  0 στρογγυλες … 100 κοφτερες
       CRSV  0 ορθια α/ε/ν … 1 καλλιγραφικα
     Το wght ΔΕΝ μπαινει εδω: ειναι καταχωρημενη ιδιοτητα και το
     χειριζεται το font-weight πιο πανω.                            */
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  /* ΟΧΙ uppercase — στο reference ειναι «Reviews», οχι «REVIEWS».
     Εκει ειναι η μιση διαφορα απο τις αλλες ενοτητες μας.          */
  text-transform: none;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--pg-title-ink, #f2f2f2);
  margin: 0 0 28px;
  padding: 14px 0;
  border-top: 1px solid var(--rvw-rule);
  border-bottom: 1px solid var(--rvw-rule);
}

/* ── Το πλεγμα: μεγαλο αριστερα, λιστα δεξια ──────────────────── */
.rvw__grid {
  display: grid;
  /* minmax(0, …) — βημα 135, ιδιος λογος με το region-content */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 40px;
  align-items: start;
}

/* ── Το μεγαλο αρθρο ─────────────────────────────────────────── */
.rvw-feature .article__image figure {
  /* βημα 115 — ητανε 4/5 (ορθιο). Σε στηλη μισου πλατους εβγαινε
     μακροστενο και τραβουσε τη ματια καθετα, ενω η λιστα διπλα
     διαβαζεται οριζοντια.
     ΤΕΤΡΑΓΩΝΗ: αλλαζει εδω, μια τιμη.
       1 / 1    τετραγωνη            ← τωρα
       5 / 4    ελαφρως πλατια
       4 / 5    ορθια (το παλιο)                                   */
  aspect-ratio: var(--pg-rvw-feature-ratio, 1 / 1);
  overflow: hidden;
}
.rvw-feature .article__image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ΒΗΜΑ 291 — ΤΟ padding ΕΔΩ ΔΕΝ ΙΣΧΥΕ ΠΟΤΕ.
   Ηταν .rvw-feature .article__content (0,2,0), και 74 γραμμες πιο
   κατω ο ΔΙΚΟΣ ΜΑΣ .rvw .article__content (γρ.1289) δηλωνει
   padding: 0 με ΤΗΝ ΙΔΙΑ ειδικοτητα — σε ισοβαθμια νικαει ο
   τελευταιος. Ο αντιπαλος δεν ηταν το mainsite· ηταν το διπλανο
   μας σχολιο.

   ΜΕΤΡΗΘΗΚΕ ΣΤΟ SCREENSHOT (αποκωδικοποιηση PNG, προφιλ
   φωτεινοτητας ανα γραμμη, 2x οθονη):
       εικονα  → κατηγορια   11 px (2x)  =  5.5 CSS px
       κατηγορια → τιτλος    37 px (2x)  = 18.5 CSS px
   Τα 5.5 ειναι ΣΚΕΤΟ line-height του kicker — καμια συνεισφορα
   απο τα «20px». Αν ισχυε, θα μετραγαμε 25.5.

   ΤΟ ΝΟΥΜΕΡΟ: το ζητουμενο ειναι «ιδια αποσταση με απο κατω»,
   δηλαδη 18.5 ορατα. Το ορατο κενο ειναι padding + 5.5, αρα
   padding = 13px. ΟΧΙ 18.5: το line-height μετραει ηδη.

   ΕΙΔΙΚΟΤΗΤΑ: προστεθηκε .rvw μπροστα → (0,3,0), νικαει τη γρ.1289
   ΑΝΕΞΑΡΤΗΤΑ απο τη σειρα. Δεν μετακινηθηκε ο κανονας, γιατι η
   σειρα σπαει μολις μετακινηθει καποτε ενοτητα (μαθημα 277).     */
.rvw .rvw-feature .article__content {
  padding: var(--pg-rvw-feature-top, 13px) 0 0;
  /* ΚΕΝΤΡΑΡΙΣΜΕΝΑ ολα κατω απο τη μεγαλη εικονα (βημα 101).
     Τα παιδια ειναι block, αρα το text-align τα πιανει ολα μαζι —
     κατηγορια, τιτλο, περιληψη.                                    */
  text-align: center;
}

/* Η υπογραφη ΔΕΝ ειναι block: το mainsite την κανει flex. Το
   text-align δεν την αγγιζει — θελει justify-content.
   Ο αντιπαλος στην ενοτητα 3 ειναι .article__info ×5 = (0,5,0),
   αρα εδω ×5 + .rvw-feature = (0,6,0).                            */
.rvw-feature .article__info.article__info.article__info.article__info.article__info {
  /* ΒΗΜΑ 247 — ΤΟ justify-content ΔΕΝ ΚΕΝΤΡΑΡΕΙ ΠΙΑ ΟΡΙΖΟΝΤΙΑ.
     Με flex-direction: column (νεο global) ο κυριος αξονας ειναι ο
     κατακορυφος, αρα το justify-content ρυθμιζει ΥΨΟΣ. Το οριζοντιο
     κεντραρισμα — που ειναι το ζητουμενο σε κεντραρισμενη καρτα
     κριτικης — περναει στο align-items. Κρατιονται ΚΑΙ ΤΑ ΔΥΟ: το
     justify-content ειναι αβλαβες και κρατα το νοημα αν καποτε
     γυρισει σε row.                                                */
  justify-content: center;
  align-items: center;
}

/* Κεντραρισμενο κειμενο σε μεγαλο πλατος κουραζει: το ματι χανει
   την αρχη της επομενης γραμμης, γιατι δεν ειναι σε σταθερη θεση.
   Περιοριζουμε το μετρο και κεντραρουμε το ΚΟΥΤΙ, οχι μονο το
   κειμενο μεσα του.                                                */
.rvw-feature .rvw__dek {
  max-width: 48ch;
  margin-inline: auto;
}

/* Σε κεντραρισμενο τιτλο το balance μοιραζει τις λεξεις ισα στις
   γραμμες, αντι να αφησει μια λεξη μονη της στο τελος.             */
.rvw .rvw-feature .rvw__title.rvw__title.rvw__title {
  text-wrap: balance;
}

/* ── Η λιστα δεξια ───────────────────────────────────────────── */
.rvw__list {
  display: flex;
  flex-direction: column;
}
.rvw-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--rvw-rule);
}

/* ΡΗΤΗ ΤΟΠΟΘΕΤΗΣΗ, οχι αυτοματη.
   Η εικονα εβγαινε ΑΡΙΣΤΕΡΑ απο το κειμενο, ενω στο markup ειναι
   δευτερη. Καποιος κανονας του mainsite αλλαζει τη σειρα — δεν τον
   κυνηγαμε. Με ρητα grid-column/grid-row η θεση ΔΕΝ εξαρταται ουτε
   απο τη σειρα στο DOM ουτε απο καμια ιδιοτητα order: η αυτοματη
   τοποθετηση παυει να ισχυει.                                      */
.rvw-item > .article__content { grid-column: 1; grid-row: 1; }
.rvw-item > .rvw-item__thumb  { grid-column: 2; grid-row: 1; }

/* ΤΟ order ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΑ ΑΚΥΡΩΝΕΤΑΙ.
   Το mainsite κανει το .article__content flex column, και η ενοτητα 8
   δινει order σε κατηγορια/τιτλο/υπογραφη (1/2/3) για τις καρτες της
   αρχικης. Τα δικα μας .rvw__kicker και .rvw__dek ΔΕΝ εχουν order,
   αρα μετρουν 0 — και πεταγονταν ΠΡΙΝ τον τιτλο:

       ΚΑΤΗΓΟΡΙΑ / περιληψη / Τιτλος / Γραφει ο…      ← λαθος

   Αντι να δωσουμε order και στα δυο — που θα επρεπε να συντηρειται
   καθε φορα που μπαινει νεο στοιχειο — κανουμε το περιεχομενο block.
   Χωρις flex, το order ειναι ΑΝΕΝΕΡΓΟ και μετραει η σειρα στο markup,
   που ειναι και η μονη που διαβαζεται.                             */
.rvw .article__content {
  display: block;
  height: auto;
  padding: 0;
}
/* Το πρωτο δεν θελει κενο απο πανω — ευθυγραμμιζεται με την εικονα */
.rvw__list > .rvw-item:first-child { padding-top: 0; }

/* ΟΛΟ ΤΟ ΚΕΙΜΕΝΟ ΤΗΣ ΔΕΞΙΑΣ ΣΤΗΛΗΣ ΣΤΟ ΚΕΝΤΡΟ — βημα 121.
   Δουλευει με ΕΝΑ text-align επειδη το .rvw .article__content ειναι
   display: block (δες τον κανονα πιο πανω). Αν ηταν flex, το
   text-align δεν θα αγγιζε τη στοιχιση των items και θα χρειαζοταν
   align-items — αυτο ακριβως συμβαινει με την υπογραφη πιο κατω. */
.rvw-item .article__content {
  text-align: center;
}

/* Η υπογραφη ειναι flex (απο το mainsite), αρα το text-align ΔΕΝ την
   πιανει: θελει justify-content. Ιδιο ακριβως με το .rvw-feature.
   Αντιπαλος: .article__info ×5 = (0,5,0) στην ενοτητα 3.
   Εδω ×5 + .rvw-item = (0,6,0).                                    */
.rvw-item .article__info.article__info.article__info.article__info.article__info {
  /* ΒΗΜΑ 247 — ΤΟ justify-content ΔΕΝ ΚΕΝΤΡΑΡΕΙ ΠΙΑ ΟΡΙΖΟΝΤΙΑ.
     Με flex-direction: column (νεο global) ο κυριος αξονας ειναι ο
     κατακορυφος, αρα το justify-content ρυθμιζει ΥΨΟΣ. Το οριζοντιο
     κεντραρισμα — που ειναι το ζητουμενο σε κεντραρισμενη καρτα
     κριτικης — περναει στο align-items. Κρατιονται ΚΑΙ ΤΑ ΔΥΟ: το
     justify-content ειναι αβλαβες και κρατα το νοημα αν καποτε
     γυρισει σε row.                                                */
  justify-content: center;
  align-items: center;
}

/* Σε κεντραρισμενο τιτλο μια λεξη μονη στην τελευταια γραμμη
   φαινεται πολυ περισσοτερο απο οτι σε αριστερη στοιχιση, γιατι
   καθεται στη μεση του κενου. Ιδιο σκεπτικο με το .rvw-feature. */
.rvw .rvw-item .rvw__title.rvw__title.rvw__title {
  text-wrap: balance;
}

.rvw-item__thumb { width: 210px; }
.rvw-item__thumb figure {
  aspect-ratio: 1;
  overflow: hidden;
}
.rvw-item__thumb figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Η κατηγορια: μικρη, κεφαλαια, αραιη ─────────────────────── */
.rvw__kicker,
.rvw__kicker a {
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pg-meta-ink, #8a8a8a);
  text-decoration: none;
  /* Το mainsite δινει στο .article__category μαυρο πλακιδιο με padding.
     Εδω ειναι σκετο κειμενο — το μηδενιζουμε ρητα.                 */
  background: none;
  padding: 0;
  position: static;
}

/* ΤΟ ΚΟΥΤΙ ΤΗΣ ΣΕΙΡΑΣ — ΜΟΝΟ ΣΤΟΝ ΠΕΡΙΕΚΤΗ.
   ΒΗΜΑ 301: το display: block και το margin ηταν στον ΚΟΙΝΟ κανονα
   πιο πανω, αρα τα επαιρνε ΚΑΙ ο <a>. Με ενα αρθρο σε ΔΥΟ κατηγοριες
   το Views δινει
       <a>CELEBRITIES</a>, <a>Entertainment</a>
   — το κομμα ειναι ηδη εκει, σωστα τοποθετημενο. Ομως δυο block
   στοιχεια δεν καθονται ποτε διπλα-διπλα, και το κομμα, παγιδευμενο
   αναμεσα τους ως σκετος κομβος κειμενου, επαιρνε ΤΡΙΤΗ γραμμη:

       CELEBRITIES
            ,
       ENTERTAINMENT

   Καμια αλλαγη στο template δεν χρειαστηκε. Ο χωριστης ηταν παντα
   σωστος· το CSS τον εσπαγε.                                       */
.rvw__kicker {
  display: block;
  margin: 0 0 8px;
}

/* Ο συνδεσμος ΜΕΣΑ στη σειρα ειναι inline, ωστε οι οροι να ρεουν σε
   μια γραμμη με το κομμα. Το margin μηδενιζεται ρητα: χωρις αυτο
   καθε ορος θα κουβαλουσε 8px κατω, που σε inline στοιχειο δεν
   φαινεται μεν, αλλα θα ζωντανευε αν καποτε γινει inline-block.    */
.rvw__kicker a {
  display: inline;
  margin: 0;
}

/* ── Ο τιτλος: serif ΠΛΑΓΙΑ. Η καρδια του look. ──────────────── */
.rvw .rvw__title.rvw__title.rvw__title {
  display: block;
  font-family: var(--pg-rvw-font, Geologica, Arial, sans-serif);
  font-style: var(--pg-rvw-style, normal);
  font-weight: var(--pg-rvw-wght, 600);
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--pg-title-ink, #f2f2f2);
  text-decoration: none;
  margin: 0 0 10px;
}
.rvw .rvw-feature .rvw__title.rvw__title.rvw__title { font-size: clamp(1.7rem, 2.2vw, 2.15rem); }
.rvw .rvw-item    .rvw__title.rvw__title.rvw__title { font-size: 1.5rem; }

@media (hover: hover) and (pointer: fine) {
  .rvw .rvw__title.rvw__title.rvw__title:hover {
    color: var(--pg-section-accent, rgb(255 72 72));
  }
}

/* ── Η περιληψη ──────────────────────────────────────────────── */
.rvw__dek {
  font-family: var(--pg-font-body, PFSpekkVARRegular, Arial, sans-serif);
  font-size: 1.0666rem;
  line-height: 1.5;
  color: var(--pg-dek-ink, #c9c9c9);
  margin: 0 0 12px;
  padding: 0;
  /* Το mainsite δινει στο .article p ενα min-height 64px και
     -webkit-line-clamp: 3 — εδω το κειμενο οριζει το υψος.        */
  min-height: 0;
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* ── Στενη οθονη: μια στηλη ──────────────────────────────────── */
@media (max-width: 900px) {
  .rvw__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rvw-item  { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; }
  .rvw-item__thumb { width: 96px; }
  .rvw .rvw-item .rvw__title.rvw__title.rvw__title { font-size: 1.3rem; }
}


/* ═══ 14. «ΠΕΡΙΣΣΟΤΕΡΑ ›» ΣΤΟ ΤΕΛΟΣ ΤΗΣ ΕΝΟΤΗΤΑΣ ═════════════════
   βημα 108 · 08/10/2026

   Κειμενο και chevron ΜΑΖΙ, αριστερα. Στο hover ΜΟΝΟ χρωμα.

   ─── ΓΙΑΤΙ ΕΦΥΓΕ Η ΚΙΝΗΣΗ ───────────────────────────────────────
   Το chevron ειναι τετραγωνο στραμμενο 45°, αρα οι γωνιες του
   ΒΓΑΙΝΟΥΝ εξω απο το κουτι των 18×18. Οταν ολισθαινε δεξια, ερχοταν
   πανω στην ακρη του περιεκτη — και καποιος προγονος με overflow
   hidden το εκοβε. Το mainsite εχει overflow-x: hidden σε αρκετα
   σημεια (.categorySection--dark, --black, .type14).

   Θα μπορουσαμε να κυνηγησουμε ποιος κοβει. Δεν αξιζει: η κινηση ηταν
   διακοσμητικη, το χρωμα λεει το ιδιο πραγμα και δεν μπορει να κοπει
   απο κανεναν. Λιγοτερος κωδικας, μηδεν εξαρτησεις.

   ─── ΜΟΝΑΔΕΣ ────────────────────────────────────────────────────
   Ο γονεας εχει font-size: 0 (κρυβει το «MORE» του markup), αρα καθε
   em θα γινοταν μηδεν. Ολα εδω rem/px.                             */
.categorySection__wrapper .buttonWrapper {
  margin-top: 34px;
  border-top: 0;
  padding-top: 0;
  /* ΔΕΞΙΑ (βημα 109). Εβγαινε στο ΚΕΝΤΡΟ γιατι το mainsite εχει
     .buttonWrapper { width: 100%; text-align: center } — και ενα
     inline-flex παιδι υπακουει στο text-align του γονεα.

     Με flex + justify-content η θεση οριζεται ΡΗΤΑ και δεν εξαρταται
     πια απο το text-align, οποιος κι αν το εχει βαλει.             */
  display: flex;
  justify-content: flex-end;
}

.categorySection__wrapper .buttonWrapper .button.button.button {
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

  /* ΜΑΖΙ, αριστερα — οχι space-between */
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 13px;

  font-size: 0 !important;        /* κρυβει το «MORE» του markup */
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif) !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-transform: none;
  color: var(--pg-title-ink, #f2f2f2) !important;
  transition: color .2s ease;
}

/* ΤΟ ΚΕΙΜΕΝΟ — με !important, αλλιως το σβηνει το
   .lookLayout .button:not(…)×9::before { content: '' }  στα (0,12,0). */
.categorySection__wrapper .buttonWrapper .button.button.button::before {
  content: 'Περισσότερα' !important;
  font-size: 1.45rem !important;
  line-height: 1.1 !important;
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  background: none !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
}

/* ΤΟ CHEVRON — δυο borders σε τετραγωνο στραμμενο 45°.
   18px αντι 15: ψηλοτερο.  2px αντι 2.5: η γραμμη του ταιριαζει
   με το παχος των γραμματων στα 600, αντι να δειχνει πιο βαρια.   */
.categorySection__wrapper .buttonWrapper .button.button.button::after {
  content: '' !important;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  /* Οι στραμμενες γωνιες βγαινουν ~4px εξω απο το κουτι· το margin
     τους δινει τον χωρο ωστε να μην ακουμπανε τιποτα.              */
  margin-right: 4px;
}

@media (hover: hover) and (pointer: fine) {
  /* ΜΟΝΟ χρωμα. Το currentColor το παιρνει και το chevron μονο του. */
  .categorySection__wrapper .buttonWrapper .button.button.button:hover {
    color: var(--pg-section-accent, rgb(255 72 72)) !important;
  }
}


/* ═══ 15. ΜΕΛΑΝΙ ΠΕΡΙΛΗΨΗΣ ΣΤΙΣ ΚΑΡΤΕΣ ════════════════════════════
   βημα 114 · 08/10/2026

   Το mainsite αφηνει το <p> της καρτας να κληρονομησει το χρωμα του
   body — δηλαδη ΙΔΙΟ με τον τιτλο. Η καρτα διαβαζεται σαν ενα μπλοκ.
   Ενα σκαλι πιο σβηστα δινει ιεραρχια ΧΩΡΙΣ να αλλαξει μεγεθος.

   Αντιπαλοι: .categorySection--black .article p { color: #e5e5e5 }
   και .categorySection--darkWithBg .article p — και τα δυο (0,2,0),
   αρα .article ×3 = (0,3,0).

   Το :not(.rvw__dek) αφηνει εξω τις κριτικες, που εχουν ηδη δικο
   τους κανονα με το ιδιο token — οχι για να διαφερουν, αλλα για να
   μην παλευουν δυο κανονες για το ιδιο πραγμα.                     */
.article.article.article p:not(.rvw__dek) {
  color: var(--pg-dek-ink, #c9c9c9);
}


/* ═══ 16. ΠΙΟ ΤΕΤΡΑΓΩΝΕΣ ΕΙΚΟΝΕΣ ΣΤΙΣ ΠΛΑΤΙΕΣ ΚΑΡΤΕΣ ══════════════
   βημα 116 · 08/10/2026 — block_11, block_10, block_3.

   Το mainsite δινει στις «πλατιες» παραλλαγες πολυ μακροστενες
   αναλογιες — π.χ. .article--mgWideFull → 708/342, δηλαδη 2,07:1.
   Σε καρτα μισου πλατους αυτο γινεται λωριδα.

   ΔΕΝ οριζουμε ανα παραλλαγη: πιανουμε ΟΛΕΣ τις πλατιες μεσα στα
   τρια displays. Ετσι δεν χρειαζεται να ξερουμε ποια παραλλαγη εχει
   το καθε μπλοκ — κατι που μας εχει κοστισει ηδη δυο φορες.

   ΕΝΑΣ ΑΡΙΘΜΟΣ: --pg-sec-wide-ratio
     4 / 3   ← τωρα, σαφως πιο τετραγωνη απο 2,07
     1 / 1   τελειως τετραγωνη
     3 / 2   ενδιαμεσο
     16 / 9  πισω σε πλατια

   Ειδικοτητα: ο αντιπαλος ειναι .article--mgWideFull .article__image
   figure = (0,2,0)· εδω + η κλαση του display = (0,3,0).            */
html:root {
  --pg-sec-wide-ratio: 4 / 3;
}

:is(.view-display-id-block_11,
    .view-display-id-block_10,
    .view-display-id-block_3)
  :is(.article--mgWideFull,
      .article--mgWide,
      .article--mgWideFullInline,
      .article--wide,
      .article--wideLarge,
      .article--wideMedium,
      .article--wideSmall,
      .article--landscape)
  .article__image figure {
  aspect-ratio: var(--pg-sec-wide-ratio, 4 / 3);
}

/* Η εικονα πρεπει να ΓΕΜΙΣΕΙ τη νεα αναλογια, οχι να παραμορφωθει.
   Το mainsite βαζει object-fit: cover μονο σε καποιες παραλλαγες. */
:is(.view-display-id-block_11,
    .view-display-id-block_10,
    .view-display-id-block_3)
  .article__image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ═══ 17. ΕΝΟΤΗΤΑ 4 ΑΡΘΡΩΝ ΣΤΗ ΣΕΙΡΑ (block_1) ═════════════════════
   βημα 122 · 09/10/2026

   ΓΙΑΤΙ ΕΒΓΑΖΕ ΤΡΙΑ — βρεθηκε, δεν μαντευτηκε:

       mainsite.css:5618   .grid { grid-template-columns: repeat(3, 1fr) }

   Ειδικοτητα (0,1,0). Το .view-display-id-block_1 .grid ειναι (0,2,0),
   αρα κερδιζει χωρις !important και ΧΩΡΙΣ να πειραχτει το markup: το
   template συνεχιζει να βγαζει σκετο <div class="grid">, οπως ολες οι
   αλλες ενοτητες. Καμια αλλη ενοτητα δεν επηρεαζεται.

   Το minmax(0, 1fr) αντι για σκετο 1fr ειναι ΑΠΑΡΑΙΤΗΤΟ: το 1fr εχει
   min-width: auto, που σε grid item με μακρυ ανασπαστο κειμενο η
   εικονα το φουσκωνει πανω απο το μεριδιο του και ξεχειλωνει τη
   γραμμη. Το minmax(0, …) του επιτρεπει να συρρικνωθει.

   ΚΟΙΝΕΣ ΚΛΑΣΕΙΣ: οι καρτες χρησιμοποιουν .article__category /
   .article__title / .article__info, αρα παιρνουν ΑΥΤΟΜΑΤΑ ολη την
   τυπογραφια των ενοτητων 3 και 8 — Geologica στον τιτλο, Sofia
   Condensed στη σκαλωσια, τα ιδια χρωματα και hover. Εδω ρυθμιζεται
   ΜΟΝΟ η διαταξη. Αυτο ειναι και η διαφορα απο το block_12, που ηθελε
   δικη του φωνη (.rvw__*).                                           */
.view-display-id-block_1 {
  --pg-b1-cols:  4;
  --pg-b1-gap:   clamp(20px, 2vw, 32px);
  /* Η αναλογια της εικονας. Το mainsite δινει aspect-ratio: 1 σε καθε
     .article__image figure, δηλαδη ΤΕΤΡΑΓΩΝΟ. Εδω 4/3 — οριζοντιο,
     αλλα οχι μακροστενο. Εναλλακτικες: 1 / 1 (τετραγωνο),
     3 / 2 (πιο κινηματογραφικο), 16 / 9 (πολυ μακροστενο).
     ΠΡΟΣΩΡΙΝΟ: οταν κλειδωσει, η αναλογια πρεπει να παει σε image
     style του Views — αλλιως ο browser κατεβαζει μεγαλες εικονες και
     τις κοβει, αντι να κατεβαινουν ηδη κομμενες.                   */
  --pg-b1-ratio: 4 / 3;
}

.view-display-id-block_1 .grid {
  grid-template-columns: repeat(var(--pg-b1-cols, 4), minmax(0, 1fr));
  gap: var(--pg-b1-gap, 32px);
}

/* Το .article ειναι ηδη flex column απο το mainsite (γρ. 3995), αρα η
   εικονα καθεται ΠΑΝΩ απο το κειμενο μονη της. Προσθετουμε μονο το
   κενο αναμεσα τους — ενα gap, οχι margins που μετα διαφωνουν.      */
.b1-card {
  gap: 12px;
}

/* Αντιπαλος: .article__image figure { aspect-ratio: 1 } στο (0,1,1).
   Εδω .b1-card + .article__image + figure = (0,2,1).                */
.b1-card .article__image figure {
  aspect-ratio: var(--pg-b1-ratio, 4 / 3);
  overflow: hidden;
}
.b1-card .article__image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Το .article__content εχει height: 100% απο το mainsite. Σε καρτα
   σταθερου πλατους αυτο το κανει να τεντωνει και να σπρωχνει την
   υπογραφη στον πατο — αλλο υψος σε καθε καρτα, ανισες γραμμες.
   Με height: auto η καρτα εχει το υψος του περιεχομενου της.       */
.view-display-id-block_1 .article__content {
  height: auto;
  padding: 0;
}

/* ── Στενες οθονες ───────────────────────────────────────────────
   Τεσσερις στηλες κατω απο ~1000px δινουν τιτλο 1.6rem σε στηλη
   220px: δυο λεξεις ανα γραμμη. Κατεβαινουμε σε δυο, μετα σε μια. */
@media (max-width: 1000px) {
  .view-display-id-block_1 { --pg-b1-cols: 2; }
}
@media (max-width: 620px) {
  .view-display-id-block_1 { --pg-b1-cols: 1; --pg-b1-ratio: 3 / 2; }
}


/* ═══ 18. ΤΟ .view-content.row ΞΕΦΕΥΓΕΙ ΔΕΞΙΑ-ΑΡΙΣΤΕΡΑ ═════════════
   βημα 133 · 09/10/2026

   mainsite.css:1835
       .row { display: flex; flex-wrap: wrap; margin: 0 -12px; min-width: 0 }

   Ειναι συστημα πλεγματος τυπου Bootstrap: το .row «βγαινει» 12px απο
   καθε πλευρα και το .col το ακυρωνει με padding: 0 12px. Δουλευει
   ΜΟΝΟ οταν το .row καθεται μεσα σε .col.

   Το Views ομως δινει την κλαση row στο ΔΙΚΟ του .view-content:

       <div class="view-content row">          ← ΧΩΡΙΣ .col απο πανω
         <div class="categorySection__wrapper wrapper">
           <div class="row">                   ← δικο μας
             <div class="col col-12">          ← ΕΔΩ ακυρωνονται

   Το ΕΞΩΤΕΡΙΚΟ row δεν εχει τιποτα να ακυρωσει τα -12px του, αρα καθε
   ενοτητα βγαινει 24px φαρδυτερη απο τον περιεκτη της και σπρωχνεται
   εξω απο τα ορια. Σε φαρδια οθονη περναει απαρατηρητο· σε στενη
   γεννα οριζοντιο σκρολ και «σπρωξιμο δεξια».

   ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ TEMPLATE: η κλαση μπαινει απο τα
   views-view--*.html.twig, που ειναι τουλαχιστον δυο αρχεια (block_1,
   hero-block-1) και πιθανον περισσοτερα. Ενας κανονας τα πιανει ολα,
   και καθε μελλοντικο display.

   ΕΙΔΙΚΟΤΗΤΑ: (0,2,0) εναντι (0,1,0) του .row. Χωρις !important.

   ΑΣΦΑΛΕΙΑ: αν καποτε ενα view μπει ΟΝΤΩΣ μεσα σε .col, ο κανονας θα
   του αφαιρεσει μια αντισταθμιση που θα χρειαζοταν — το αποτελεσμα
   ειναι 12px παραπανω εσοχη, οχι σπασμενη διαταξη.                 */
.view-content.view-content.row {
  /* ΤΟ display ΕΙΝΑΙ ΤΟ ΚΥΡΙΟ — βημα 134.
     Το margin ητανε μονο το μισο προβλημα. Το .row ειναι ΚΑΙ
     display: flex, αρα το παιδι του γινεται FLEX ITEM: παυει να
     πιανει το 100% και παιρνει πλατος ΠΕΡΙΕΧΟΜΕΝΟΥ (flex-basis:
     auto, χωρις flex-grow).

     Για το block_1 αυτο σημαινει οτι το πλεγμα 4 στηλων υπολογιζει
     max-content — το αθροισμα των τεσσαρων τιτλων χωρις αναδιπλωση —
     και ξεχειλωνει.

     Για το hero ειναι χειροτερο: ο track ειναι
     grid-auto-columns: 100% και καθε slide min-width: 100%. Οταν ο
     γονεας δεν εχει ορισμενο πλατος, το «100%» λυνεται πανω σε
     πλατος περιεχομενου — πεντε slides στη σειρα. Γι' αυτο το
     carousel «φευγει δεξια και δεν φαινεται».

     Με display: block το παιδι ξαναγινεται block-level και πιανει
     κανονικα το 100% του γονεα του.                                */
  display: block;
  margin-left: 0;
  margin-right: 0;
}


/* ═══ 19. ΣΕΛΙΔΑ ΑΠΟΤΕΛΕΣΜΑΤΩΝ ΑΝΑΖΗΤΗΣΗΣ ═════════════════════════
   βημα 153 · 12/10/2026

   Η /search/node ΔΕΝ φορτωνει mainsite.css — ουτε χρειαζεται. Ειναι
   καθαρο markup του Drupal core, χωρις κανενα λειψανο του παλιου
   θεματος. Αρα δεν παλευουμε με τιποτα: γραφουμε απευθειας.

   ΓΙ' ΑΥΤΟ ΚΑΙ ΔΕΝ ΠΡΟΣΤΕΘΗΚΕ ΒΙΒΛΙΟΘΗΚΗ: το να φορτωναμε 404KB
   mainsite.css για μια σελιδα με λιστα συνδεσμων θα εφερνε ολη τη
   βαρυτητα του παλιου θεματος για να τη νικησουμε ξανα.

   ΚΑΜΙΑ ΚΛΑΣΗ ΣΤΟ body: οι κλασεις .search-form / .search-results
   υπαρχουν ΜΟΝΟ σε αυτη τη σελιδα, αρα ειναι απο μονες τους το scope.

   ΟΛΑ ΤΑ ΟΝΟΜΑΤΑ ΕΙΝΑΙ ΤΟΥ CORE — δεν τα διαλεξαμε εμεις:
     .search-form           η φορμα πανω
     .search-help-link      «About searching»
     .search-advanced       το πτυσσομενο «Advanced search»
     .search-results        η <ol> με τα αποτελεσματα
     .search-result__title  ο τιτλος καθε αποτελεσματος
     .search-result__snippet  το αποσπασμα, με <strong> στις λεξεις
     .search-result__info   η γραμμη μεταδεδομενων
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ο περιεκτης ─────────────────────────────────────────────────
   Το :has() πιανει ΜΟΝΟ την περιοχη που περιεχει φορμα αναζητησης, αρα
   καμια αλλη σελιδα δεν επηρεαζεται. Χωρις αυτο, το κειμενο ξεκιναει
   στο x=0 — το mainsite εδινε το padding μεσω .wrapper, και εδω δεν
   φορτωνει.                                                          */
.region-content:has(.search-form) {
  max-width: 820px;
  margin-inline: auto;
  /* ΤΟ ΠΑΝΩ ΚΕΝΟ ΕΙΝΑΙ ΥΠΟΛΟΓΙΣΜΕΝΟ, ΟΧΙ ΔΙΑΛΕΓΜΕΝΟ — βημα 155.
     Το header ειναι position: fixed, αρα ΔΕΝ πιανει χωρο στη ροη: το
     περιεχομενο ξεκιναει απο την κορυφη και περναει απο κατω του.

       --pg-admin-offset  η μπαρα του Drupal, 0 για τον επισκεπτη
       --hdr-row-h        η σειρα με λογοτυπο και burger
       --hdr-cats-h       η σειρα κατηγοριων
       + clamp(...)       ανασα, που μεγαλωνει σε ψηλες οθονες

     Ετσι αν αυριο αλλαξει το υψος του header, το κενο ακολουθει μονο
     του — δεν ξεμενει αριθμος σε δευτερο αρχειο.                    */
  padding-top: calc(var(--pg-admin-offset, 0px)
                  + var(--hdr-row-h, 96px)
                  + var(--hdr-cats-h, 52px)
                  + clamp(28px, 4vh, 56px));
  padding-inline: clamp(20px, 4vw, 40px);
  padding-bottom: clamp(60px, 10vh, 110px);
}

/* ── Η φορμα ─────────────────────────────────────────────────────── */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 10px;
}
.search-form .form-item { margin: 0; flex: 1 1 260px; }

.search-form label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta, .9333rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pg-meta-ink, #8a8a8a);
}

.search-form input[type="text"],
.search-form input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--pg-border, #2e2e2e);
  border-radius: 0;
  background: #1a1a1a;
  font-family: var(--pg-font-body, Arial, sans-serif);
  font-size: 1.05rem;
  color: var(--pg-text, #e8e8e8);
}
.search-form input[type="text"]:focus,
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--pg-section-accent, rgb(255, 72, 72));
}

/* Το κουμπι: ιδια φωνη με το «Περισσοτερα» των ενοτητων.
   ΠΡΟΣΟΧΗ στην ειδικοτητα — το core δινει .button στο ιδιο στοιχειο,
   και σε σελιδα χωρις mainsite δεν υπαρχει αντιπαλος. Αρκει (0,2,1). */
.search-form input[type="submit"],
.search-form .button {
  padding: 11px 24px;
  border: 1px solid var(--pg-text-muted, #a0a0a0);
  border-radius: 0;
  background: none;
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pg-text, #e8e8e8);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

/* «About searching» και «Advanced search»: δευτερευοντα, γκριζα. */
.search-help-link,
.search-advanced summary,
.search-advanced > summary {
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta, .9333rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pg-meta-ink, #8a8a8a);
  text-decoration: none;
}
.search-advanced { margin: 6px 0 0; }

/* ── Η επικεφαλιδα «Search results» ─────────────────────────────── */
.region-content:has(.search-form) h2 {
  margin: clamp(30px, 4vh, 48px) 0 0;
  padding-block: 14px;
  border-top: 1px solid var(--pg-border, #2e2e2e);
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: var(--pg-h-section, 2rem);
  font-weight: 700;
  font-style: var(--pg-h-section-style, oblique 10deg);
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--pg-title-ink, #f2f2f2);
}

/* ── Η λιστα ─────────────────────────────────────────────────────── */
.search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}
.search-results > li {
  padding: clamp(18px, 2.4vh, 26px) 0;
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
  list-style: none;
}
.search-results > li::before { content: none; }

.search-result__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.22;
  font-weight: 500;
}
.search-result__title a {
  font-family: var(--pg-font-title, Geologica, Arial, sans-serif);
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  /* ΟΧΙ μπλε με υπογραμμιση — ειναι η προεπιλογη του browser οταν
     κανενα stylesheet δεν μιλησε.                                    */
  color: var(--pg-title-ink, #f2f2f2);
  text-decoration: none;
}

.search-result__snippet {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--pg-dek-ink, #c9c9c9);
}
/* Το core τυλιγει τις λεξεις που ταιριαξαν σε <strong>. Αντι για
   εντονα — που σπαει τη ροη — τις βαφουμε.                          */
.search-result__snippet strong {
  font-weight: inherit;
  color: var(--pg-title-ink, #f2f2f2);
}

.search-result__info {
  margin: 9px 0 0;
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta, .9333rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pg-meta-ink, #8a8a8a);
}

@media (hover: hover) and (pointer: fine) {
  .search-result__title a:hover,
  .search-help-link:hover,
  .search-form input[type="submit"]:hover,
  .search-form .button:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
    border-color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}


/* ═══ 20. ΤΟ FOOTER ════════════════════════════════════════════════
   βημα 157 · 12/10/2026

   Δικο μας markup (_footer-site.html.twig), δικο μας στυλ. ΔΕΝ
   εξαρταται απο το mainsite — που ειχε 67 κανονες .footer* και δεν
   φορτωνει παντου, γι' αυτο το παλιο footer εβγαινε γυμνο στη σελιδα
   αναζητησης.

   ΔΗΛΩΝΟΝΤΑΙ ΟΛΑ ΤΑ ΘΕΜΕΛΙΩΔΗ (display, position οπου χρειαζεται) —
   ο κανονας που βγηκε απο το βημα 154: τιποτα δανεικο.
   ═══════════════════════════════════════════════════════════════════ */

.siteFooter {
  display: block;
  margin-top: clamp(50px, 8vh, 96px);
  border-top: 1px solid var(--pg-border, #2e2e2e);
  background: var(--pg-bg, #121212);
}

.siteFooter__inner {
  display: block;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(36px, 5vh, 64px) clamp(20px, 4vw, 48px) clamp(40px, 6vh, 72px);
}

/* ── Πανω σειρα: λογοτυπο αριστερα, social δεξια ─────────────────── */
.siteFooter__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.siteFooter__logo { display: block; }
.siteFooter__logo img {
  display: block;
  width: auto;
  height: clamp(24px, 2.4vw, 32px);
}

.siteFooter__social,
.siteFooter__links,
.siteFooter__cats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.siteFooter li { margin: 0; padding: 0; }
.siteFooter li::before { content: none; }

/* ── Οι κατηγοριες: η φωνη των ενοτητων, σε μικρογραφια ──────────── */
.siteFooter__cats {
  margin-top: clamp(26px, 3.5vh, 42px);
  padding-top: clamp(18px, 2.4vh, 28px);
  border-top: 1px solid var(--pg-border, #2e2e2e);
}
.siteFooter__cats a {
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  letter-spacing: -.004em;
  color: var(--pg-title-ink, #f2f2f2);
  text-decoration: none;
  border: 0;
}

/* ── Social και δευτερευοντες συνδεσμοι: μικρα, αραια, γκριζα ────── */
.siteFooter__social li,
.siteFooter__links li {
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta, .9333rem);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.siteFooter__social a,
.siteFooter__links a {
  color: var(--pg-text-muted, #a0a0a0);
  text-decoration: none;
  border: 0;
}

/* ΟΙ ΘΕΣΕΙΣ ΧΩΡΙΣ ΔΙΕΥΘΥΝΣΗ — βγαινουν ως <span>, οχι <a>.
   Πιο σβηστες ΚΑΙ με default cursor, ωστε να φαινεται οτι δεν
   πατιουνται. Μολις μπει url, γινονται <a> και φωτιζουν — καμια
   αλλαγη CSS.                                                       */
.siteFooter__social span,
.siteFooter__links span {
  color: var(--pg-text-faint, #6e6e6e);
  cursor: default;
}

.siteFooter__links {
  margin-top: clamp(20px, 2.6vh, 30px);
}

/* ── Κατω σειρα ──────────────────────────────────────────────────── */
.siteFooter__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(26px, 3.5vh, 42px);
  padding-top: clamp(16px, 2.2vh, 24px);
  border-top: 1px solid var(--pg-border, #2e2e2e);
  font-family: var(--pg-font-cond, 'Sofia Sans Condensed', Arial, sans-serif);
  font-size: var(--pg-meta, .9333rem);
  letter-spacing: .07em;
  color: var(--pg-text-faint, #6e6e6e);
}
.siteFooter__credit {
  color: var(--pg-text-faint, #6e6e6e);
  text-decoration: none;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .siteFooter__cats a:hover,
  .siteFooter__social a:hover,
  .siteFooter__links a:hover,
  .siteFooter__credit:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}

.siteFooter :is(a, button):focus-visible {
  outline: 2px solid var(--pg-section-accent, rgb(255, 72, 72));
  outline-offset: 3px;
}

@media (max-width: 766px) {
  .siteFooter__top { gap: 18px; }
  .siteFooter__cats ul { gap: 7px 18px; }
}


/* ═══ 21. Ο PAGER — ΔΥΟ MARKUP, ΕΝΑ ΣΤΥΛ ═══════════════════════════
   βημα 159 (αναζητηση) · ξαναγραφτηκε στο βημα 170 · 14/10/2026

   ── ΤΟ SITE ΕΧΕΙ ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΑ PAGER MARKUP ───────────────────
   Αυτο ηταν ολο το προβλημα των βηματων 168-169, οπου εγραψα κανονες
   για ονοματα που δεν υπηρχαν στη μια απο τις δυο σελιδες.

   Α) ΣΕΛΙΔΕΣ ΟΡΟΥ — ΔΙΚΟ ΜΑΣ TEMPLATE, ΔΙΚΑ ΤΟΥ ΟΝΟΜΑΤΑ
      templates/navigation/pager--first-page-layout--page-1.html.twig

        <nav class="soul-pager">
          <ul class="soul-pager__items">
            <li class="soul-pager__item is-active">
              <span class="soul-pager__link">1</span>     ← ΟΧΙ <a>
            <li class="soul-pager__item">
              <a class="soul-pager__link" href="…">2</a>

      ΔΥΟ παγιδες περαν των ονοματων:
        1. Η ΤΡΕΧΟΥΣΑ ΣΕΛΙΔΑ ΕΙΝΑΙ <span>. Καθε κανονας γραμμενος για
           `a` την προσπερναγε. Γι' αυτο στυλιζουμε τη ΚΛΑΣΗ
           .soul-pager__link, που τη φορανε και τα δυο.
        2. Το .is-active ειναι στο <li>, οχι στον συνδεσμο.

   Β) ΑΝΑΖΗΤΗΣΗ — TEMPLATE ΤΟΥ CORE
      Το θεμα ΔΕΝ εχει pager.html.twig, αρα η /search/node παιρνει το
      core: .pager / .pager__items / .pager__item, με <a> και στην
      τρεχουσα σελιδα.

   ── ΓΙΑΤΙ ΟΧΙ ΔΥΟ ΕΝΟΤΗΤΕΣ ──────────────────────────────────────
   Ομαδοποιημενοι επιλογεις, οχι δυο αντιγραφα: ενας pager πρεπει να
   δειχνει ΙΔΙΟΣ οπουδηποτε, και δυο μπλοκ θα αποκλιναν στην πρωτη
   αλλαγη. Καθε κανονας γραφεται μια φορα, για δυο ονοματολογιες.

   ── ΕΙΔΙΚΟΤΗΤΑ ──────────────────────────────────────────────────
   .soul-pager: ΚΑΝΕΝΑΣ ανταγωνιστης. Το μονο αρχειο που εστυλιζε αυτα
   τα ονοματα ηταν το css/pager.css (βιβλιοθηκη soul-pager), που
   αφαιρεθηκε στο 168 — ηταν για το ΑΝΟΙΧΤΟ θεμα, λευκοι κυκλοι με
   σκουρο κειμενο. Επιβεβαιωθηκε με grep: «soul-pager» εμφανιζεται
   ΜΗΔΕΝ φορες στο mainsite.css.

   .pager.pager: ΔΙΠΛΗ κλαση, γιατι εκει ΥΠΑΡΧΕΙ ανταγωνιστης — το
   css/components/pager.css του core, απο τη βιβλιοθηκη `base`, παντου.

   ── ΤΟ ΜΑΘΗΜΑ ──────────────────────────────────────────────────
   Τρια βηματα για εναν pager, και τα δυο πρωτα ηταν κανονες για markup
   που δεν υπηρχε. Λυθηκε μολις ηρθε screenshot του inspector. Ο
   κανονας του βηματος 142 δεν αφορα μονο γεωμετρια:
   ΠΡΙΝ ΓΡΑΨΕΙΣ ΕΠΙΛΟΓΕΑ, ΔΕΣ ΤΟ MARKUP.
   ═══════════════════════════════════════════════════════════════════ */

.soul-pager,
.pager.pager {
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: clamp(18px, 2.6vh, 28px);
  border-top: 1px solid var(--pg-border, #2e2e2e);
}

.soul-pager__items,
.pager.pager .pager__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  /* Στις σελιδες ορου ο pager βγαινει ΕΞΩ απο το .wrapper, αρα δεν
     κληρονομει το padding: 0 20px — κολλαγε στην ακρη της οθονης.
     Μπαινει στον ΙΔΙΟ τον pager ωστε να μην εξαρταται απο το που τον
     τοποθετει καθε σελιδα.                                          */
  padding: 0 clamp(20px, 4vw, 40px);
  list-style: none;
}

.soul-pager__item,
.pager.pager .pager__item {
  margin: 0;
  padding: 0;
  /* Τα «…» αναμεσα στα νουμερα ειναι ΣΚΕΤΟ ΚΕΙΜΕΝΟ μεσα στο <li>.
     Παιρνει χρωμα και γραμματοσειρα απο εδω.                        */
  color: var(--pg-text-faint, #6e6e6e);
  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.soul-pager__item::before,
.pager.pager .pager__item::before { content: none; }

/* Η ΚΛΑΣΗ, ΟΧΙ ΤΟ ΣΤΟΙΧΕΙΟ: τη φοραει και ο <a> και ο <span> της
   τρεχουσας σελιδας, ωστε τα δυο να εχουν ΑΚΡΙΒΩΣ ιδιο μεγεθος και
   θεση — αλλιως η σειρα χοροπηδαει αναλογα με το σε ποια σελιδα εισαι. */
.soul-pager__link,
.pager.pager .pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px: ελαχιστο μεγεθος στοχου για δαχτυλο (WCAG 2.5.8). Τα νουμερα
     ειναι μικρα· ο στοχος δεν πρεπει να ειναι.                       */
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  box-sizing: border-box;

  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .06em;
  /* ΟΧΙ μπλε, ΟΧΙ υπογραμμιση, ΟΧΙ κυκλοι. */
  color: var(--pg-text-muted, #a0a0a0);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  transition: color .18s ease, border-color .18s ease;
}

/* Η ΤΡΕΧΟΥΣΑ ΣΕΛΙΔΑ. Το .is-active ειναι στο <li> και στα δυο markup.
   ΔΥΟ ενδειξεις, οχι μια — χρωμα ΚΑΙ γραμμη — ωστε να ξεχωριζει και
   χωρις αντιληψη αποχρωσεων.                                        */
.soul-pager__item.is-active .soul-pager__link,
.pager.pager .pager__item.is-active a {
  color: var(--pg-title-ink, #f2f2f2);
  border-bottom-color: var(--pg-section-accent, rgb(255, 72, 72));
  cursor: default;
}

/* «Πρωτη / Προηγουμενη / Επομενη / Τελευταια»: μικροτερα, αραια. */
.soul-pager__item:is(
  .soul-pager__item--first, .soul-pager__item--previous,
  .soul-pager__item--next, .soul-pager__item--last) .soul-pager__link,
.pager.pager .pager__item:is(
  .pager__item--first, .pager__item--previous,
  .pager__item--next, .pager__item--last) a {
  font-size: .9333rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.soul-pager__item--ellipsis,
.pager.pager .pager__item--ellipsis {
  min-width: 28px;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  /* ΜΟΝΟ σε <a>: στις σελιδες ορου η τρεχουσα σελιδα ειναι <span> και
     μενει εξω απο μονη της — καμια :not() δεν χρειαζεται. */
  a.soul-pager__link:hover,
  .pager.pager .pager__item:not(.is-active) a:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}

a.soul-pager__link:focus-visible,
.pager.pager .pager__item a:focus-visible {
  outline: 2px solid var(--pg-section-accent, rgb(255, 72, 72));
  outline-offset: -2px;
}


/* ═══ 22. ΟΙ ΥΠΟΚΑΤΗΓΟΡΙΕΣ ΕΦΥΓΑΝ ΑΠΟ ΕΔΩ ═════════════════════════
   βημα 165 · 14/10/2026

   Η ενοτητα 22 οριζε .catSubnav — τη σειρα υποκατηγοριων ΜΕΣΑ ΣΤΗ ΡΟΗ
   της σελιδας ορου (βημα 161). Ζητηθηκε κεντραρισμενη και «σαν να
   ανηκει στον header», και μετακομισε ΜΕΣΑ στον header.

   ΤΑ ΣΤΥΛ ΕΙΝΑΙ ΤΩΡΑ ΣΤΟ header.css, ως .header__subcats.

   ΔΕΝ ΜΕΝΟΥΝ ΕΔΩ ΑΔΡΑΝΗ. Οι κανονες .catSubnav ΔΙΑΓΡΑΦΗΚΑΝ, δεν
   σχολιαστηκαν: markup .catSubnav δεν παραγεται πλεον απο πουθενα, και
   το μαθημα του βηματος 083 ειναι ακριβως αυτο — κανονες που εμειναν
   «ανενεργοι» ξαναζωντανεψαν 39 βηματα μετα και εβαψαν λαθος ενοτητα.
   Αν χρειαστουν ποτε, ειναι στο CHANGELOG βημα 161.               */


/* ═══ 23. ΤΟ ΚΕΦΑΛΙ ΤΗΣ ΣΕΛΙΔΑΣ ΟΡΟΥ ΔΕΝ ΕΙΧΕ ΠΑΝΩ ΚΕΝΟ ════════════
   βημα 164, ενημερωμενο στο 165

   ΜΕΤΡΗΘΗΚΕ ΣΤΟΝ BROWSER, ΔΕΝ ΥΠΟΛΟΓΙΣΤΗΚΕ:
       το περιεχομενο ξεκιναγε στο 79, ο header τελειωνει στο 202.
   Δηλαδη τα πρωτα 123px καθε σελιδας ορου ηταν ΜΕΣΑ στον header.

   Ο header ειναι position: fixed — δεν πιανει χωρο στη ροη, καθε
   σελιδα δινει μονη της το κενο. Η αναζητηση και η αρχικη το εκαναν
   (sections.css:1648 · front-grid.css:124)· η σελιδα ορου ποτε.

   ΔΕΝ ΤΟ ΕΦΕΡΕ ΤΟ ΒΗΜΑ 161 — ΤΟ ΑΠΟΚΑΛΥΨΕ: ο <h1 class="mainHeading">
   ηταν ΗΔΗ κρυμμενος, αλλα σκουρος πανω σε σκουρο, και εμφανιζοταν
   μολις κυλουσες.

   ── ΔΥΟ ΤΙΜΕΣ, ΓΙΑΤΙ Ο HEADER ΔΕΝ ΕΧΕΙ ΠΑΝΤΑ ΤΡΕΙΣ ΣΕΙΡΕΣ ────────
   Απο το βημα 165 η σειρα υποκατηγοριων ειναι ΜΕΣΑ στον header, αλλα
   ΜΟΝΟ οταν ο ορος εχει αδερφια/παιδια. Ορος χωρις → ο header εχει δυο
   σειρες, και κενο για τρεις θα αφηνε 34px τρυπα.

   Το :has() στο body το λυνει χωρις PHP: ρωταει αν ΥΠΑΡΧΕΙ η τριτη
   σειρα στη σελιδα. Χρησιμοποιειται ηδη στο front-grid.css:145 για το
   hero, αρα δεν εισαγει νεα απαιτηση browser.
   Ειδικοτητα: (0,3,1) εναντι (0,2,0) — κερδιζει καθαρα.

   ΧΩΡΙΣ --pg-admin-offset, ΣΚΟΠΙΜΑ: το toolbar βαζει ηδη padding-top
   στο <body> (μετρημενο 79px, και η κορυφη ηταν ακριβως 79). Για τον
   ανωνυμο επισκεπτη και τα δυο ειναι 0 και το κενο ειναι το ιδιο.

   ΤΑ TOKENS ΔΙΑΦΩΝΟΥΝ ΜΕ ΤΗ ΜΕΤΡΗΣΗ: 96 + 52 = 148, ο πραγματικος
   header ηταν 123. Τα 25px μενουν ως αερας αντι για clamp(). Υποπτο
   ειναι το --hdr-cats-h: 52px (βημα 155, δηλωμενο οχι μετρημενο).
   Οταν διορθωθει, αυτες οι γραμμες ακολουθουν χωρις να τις αγγιξει
   κανεις.                                                           */

.catHead.catHead {
  padding-top: calc(var(--hdr-row-h, 96px) + var(--hdr-cats-h, 52px));
}

body:has(.header__subcats) .catHead.catHead {
  padding-top: calc(var(--hdr-row-h, 96px)
                  + var(--hdr-cats-h, 52px)
                  + var(--hdr-subcats-h, 34px));
}

@media (max-width: 766px) {
  /* --hdr-row-h γινεται 80 μονο του στο header.css. */
  .catHead.catHead {
    padding-top: calc(var(--hdr-row-h, 80px) + var(--hdr-cats-h, 52px));
  }
  body:has(.header__subcats) .catHead.catHead {
    padding-top: calc(var(--hdr-row-h, 80px)
                    + var(--hdr-cats-h, 52px)
                    + var(--hdr-subcats-h, 34px));
  }
}


/* ═══ 24. ΣΕΛΙΔΑ ΚΑΤΗΓΟΡΙΑΣ: ΔΥΟ ΑΡΘΡΑ ΣΤΗ ΣΕΙΡΑ ══════════════════
   βημα 173 · 14/10/2026

   Ζητηθηκε: αντι για ενα αρθρο ανα σειρα, δυο — σαν το Pitchfork,
   με τη δεξια κολονα ελευθερη για διαφημισεις.

   ── Η ΔΕΞΙΑ ΚΟΛΟΝΑ ΥΠΑΡΧΕΙ ΗΔΗ. ΔΕΝ ΤΗΝ ΦΤΙΑΧΝΟΥΜΕ ─────────────
   Το markup της σελιδας ορου ειναι ηδη δυο στηλες:

     <div class="row largeWrap">
       <div class="col col--l12 col--xl8 col-9">   ← τα αρθρα
         <div class="mgArticles"> … </div>
       <div class="col col--l12 col--xl4 col-3">   ← οι διαφημισεις
         <div class="bannerCol"><div class="banner b300x250"
              data-bannertext="Advertisement"></div></div>  ×2

   Δυο θεσεις 300×250, και το col--l12 τις κατεβαζει απο κατω σε
   μικρες οθονες — ολα ετοιμα. Αν ειχα γραψει δικο μου sidebar, θα
   ειχαμε ΔΥΟ συστηματα διαφημισεων να συγχρονιζονται.

   ── ΤΙ ΑΛΛΑΖΕΙ ΠΡΑΓΜΑΤΙΚΑ ───────────────────────────────────────
   ΜΟΝΟ το .mgArticles. Το mainsite το εχει:
       .mgArticles        { display: flex; flex-direction: column }
       .mgArticles .article { flex-direction: row }
       .mgArticles .article__image { max-width: 464px; margin-right: 48px }
   Δηλαδη μια στηλη με ΟΡΙΖΟΝΤΙΕΣ καρτες. Γινεται πλεγμα 2 στηλων με
   ΚΑΘΕΤΕΣ καρτες.

   ΤΟ ΚΑΘΕΤΟ ΣΧΗΜΑ ΔΕΝ ΤΟ ΕΦΕΥΡΙΣΚΟΥΜΕ: το mainsite το εχει ηδη,
   στο @media (max-width: 766px) — flex-direction: column, εικονα
   πληρους πλατους, object-fit: cover. Εδω το κανουμε να ισχυει σε
   ΟΛΑ τα πλατη. Το .article ειναι εξαρχης flex-direction: column
   (mainsite:3995)· το .mgArticles ηταν που το γυριζε σε row.

   ── ΙΣΟ ΥΨΟΣ ΚΑΙ ΕΥΘΥΓΡΑΜΜΙΣΜΕΝΗ ΓΡΑΜΜΗ ────────────────────────
   Στο Pitchfork οι γραμμες κατω απο τις καρτες ευθυγραμμιζονται παρ'
   ολο που οι τιτλοι εχουν διαφορετικο μηκος. Χρειαζεται:
     1. align-items: stretch στο πλεγμα + height: 100% στην καρτα
     2. .article__content flex column που ΜΕΓΑΛΩΝΕΙ (flex: 1)
     3. margin-top: auto στο .article__info

   Το (3) αντικαθιστα το --pg-meta-gap, ΜΟΝΟ εδω. Η ενοτητα 6 το
   προβλεπει ρητα (γρ. ~592): «με margin-top: auto ολα τα συντακτης ·
   ημερομηνια στοιχιζονται στη ΒΑΣΗ των καρτων… πιο τακτικο σε
   πλεγμα, αλλα τοτε το κενο δεν ειναι σταθερο». Σε πλεγμα το
   τακτικο κερδιζει — αλλου μενει το σταθερο κενο.

   ── ΕΙΔΙΚΟΤΗΤΑ ──────────────────────────────────────────────────
   Διπλο .mgArticles παντου: ο αντιπαλος ειναι .mgArticles .article×
   (0,2,0) και .article--mgWide .article__image figure (0,3,0). Το
   .article__info θελει (0,5,0) γιατι η ενοτητα 6 το οριζει στο
   (0,3,0) και ειναι ΔΙΚΟΣ ΜΑΣ κανονας — δεν τον σβηνουμε, τον
   υπερισχυουμε ΜΟΝΟ μεσα στο πλεγμα.
   ═══════════════════════════════════════════════════════════════════ */

.mgArticles.mgArticles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* minmax(0, …) και οχι 1fr σκετο — το μαθημα του βηματος 142:
     το auto ελαχιστο ειναι min-content και μια μακρια λεξη τιτλου
     θα φουσκωνε τη στηλη εξω απο το container.                     */
  gap: clamp(30px, 3.4vw, 48px) clamp(20px, 2.2vw, 32px);
  align-items: stretch;
}

.mgArticles.mgArticles .article {
  flex-direction: column;
  margin-bottom: 0;          /* το gap το αναλαμβανει */
  height: 100%;
  padding-bottom: clamp(18px, 2.2vh, 26px);
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
}

/* Η εικονα: πληρους πλατους, σταθερη αναλογια. */
.mgArticles.mgArticles .article__image {
  width: 100%;
  max-width: none;
  margin: 0 0 14px;
  flex: 0 0 auto;
}
.mgArticles.mgArticles .article__image.article__image figure {
  /* ΒΗΜΑ 175 — ηταν 16/10. Ζητηθηκε μικροτερη εικονα.
     Το 16/9 κοβει ~11% υψος, αλλα ΜΟΝΟ ΤΟΥ ΔΕΝ ΦΤΑΝΕΙ: η αναλογια
     δινει υψος αναλογο του ΠΛΑΤΟΥΣ, και η στηλη των αρθρων ειναι
     col--xl8, δηλαδη 2/3 μιας .wrapper που απο το βημα 117 πιανει τις
     ακρες. Σε οθονη 1920 η καρτα βγαινει ~690px, αρα 16/9 = 388px
     εικονα. Γι' αυτο μπαινει ΚΑΙ οροφη.

     Με object-fit: cover η οροφη ΚΟΒΕΙ, δεν παραμορφωνει. Σε στενη
     οθονη η αναλογια ειναι μικροτερη απο την οροφη και την αγνοει —
     ενα νουμερο δουλευει, το αλλο κοιμαται.                        */
  /* ── ΒΗΜΑ 282 — ΙΔΙΑ ΕΙΚΟΝΑ ΜΕ ΤΗΝ ΠΥΛΗ ──────────────────────────
     ΗΤΑΝ: aspect-ratio 16/9 + max-height: clamp(160px, 18vw, 230px).

     ΤΟ max-height ΦΕΥΓΕΙ ΜΑΖΙ, ΟΧΙ ΞΕΧΩΡΙΣΤΑ. Ειχε μπει στο βημα 175
     ακριβως ΕΠΕΙΔΗ το 16/9 δινει υψος αναλογο του πλατους και σε
     οθονη 1920 η καρτα βγαινει ~690px, αρα 388px εικονα. Με αναλογια
     1.26 το ιδιο πλατος δινει ~548px — ακομα ψηλοτερα. Αν κρατουσα
     την οροφη, η εικονα θα κοβοταν στα 230px και η αναλογια δεν θα
     ισχυε ΠΟΤΕ σε desktop: θα ειχαμε αλλαξει το νουμερο χωρις να
     αλλαξει τιποτα στην οθονη.

     Η ΠΥΛΗ ΔΕΝ ΕΧΕΙ ΟΡΟΦΗ και η ιδια στηλη (col--xl8) της φαινεται
     σωστη στον χρηστη. Αρα η οροφη ηταν το λαθος κομματι.         */
  aspect-ratio: var(--pg-list-img-ratio, 1.26);
  max-height: none;
  padding-top: 0;            /* το mainsite χρησιμοποιει padding-top hack */
  width: 100%;
  position: relative;
  overflow: hidden;
}
.mgArticles.mgArticles .article__image figure :is(picture, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Το περιεχομενο μεγαλωνει, ωστε το info να πεφτει στη βαση. */
.mgArticles.mgArticles .article__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0;
  width: 100%;
}

/* ΕΙΔΙΚΟΤΗΤΑ (0,6,0) — ΒΗΜΑ 176, ΚΑΙ ΕΙΝΑΙ ΟΛΗ Η ΟΥΣΙΑ.
   Στο βημα 175 το εγραψα ως .mgArticles×2 .article__title = (0,3,0).
   ΔΕΝ ΕΦΑΡΜΟΣΤΗΚΕ ΠΟΤΕ. Η καρτα φοραει .article--mgWide, και η
   ενοτητα 2 ΑΥΤΟΥ ΤΟΥ ΑΡΧΕΙΟΥ (γρ. ~237) εχει ηδη:

       .article--mgWide×2 .article__title×3 { font-size: var(--pg-h-lead) }

   που ειναι (0,5,0). Αρα το μεγεθος στην οθονη ηταν ΠΑΝΤΑ το
   --pg-h-lead: clamp(1.8rem, 2.4vw, 2.2rem) = 27-33px. Και οι δυο
   «μειωσεις» των βηματων 173 και 175 ηταν γραμμενες σε κανονα που
   δεν εφτανε ποτε στην οθονη.

   Ο αντιπαλος ηταν ΔΙΚΟΣ ΜΑΣ κανονας, οχι του mainsite — γι' αυτο δεν
   τον ειχα ψαξει. Το σχολιο στη γρ. ~233 το ελεγε κιολας: «χρειαζεται
   (0,5,0) … αλλιως θα εκρινε η σειρα φορτωσης — οχι αξιοπιστο».

   ΓΙΑΤΙ (0,6,0) ΚΑΙ ΟΧΙ (0,5,0): με ισοβαθμια θα εκρινε η σειρα μεσα
   στο αρχειο — ισχυει σημερα, σπαει μολις μετακινηθει ενοτητα.

   ΔΕΝ πειραζουμε τη γρ. 237: εκεινη αφορα ΟΛΕΣ τις πλατιες καρτες σε
   ολο το site. Εδω μικραινουμε ΜΟΝΟ οσες ειναι μεσα σε .mgArticles. */
.mgArticles.mgArticles.mgArticles
  .article__title.article__title.article__title {
  margin-top: 0;
  /* ΤΡΙΤΗ ΡΥΘΜΙΣΗ — βημα 177.
       αρχικα   27-33px  (--pg-h-lead, για καρτα πληρους πλατους)
       βημα 176 16-19,5px → «πολυ μικρα»
       τωρα     20-25px   — στη μεση

     Το αλμα του 176 ηταν 40% μονομιας, επειδη ο στοχος ειχε τεθει
     οταν νομιζα οτι ξεκινουσαμε απο 19-23px. Ξεκινουσαμε απο 27-33. */
  font-size: clamp(1.35rem, 1.6vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* ── Η ΠΕΡΙΛΗΨΗ (βημα 175) ───────────────────────────────────────
   Το <p> ΥΠΑΡΧΕΙ ηδη στο markup, αναμεσα σε τιτλο και info — απλως
   βγαινει ΑΔΕΙΟ σε αυτη τη σελιδα. Το χρωμα του το οριζει ηδη η
   ενοτητα 15 (--pg-dek-ink). Εδω μπαινει μονο το μεγεθος και το
   κοψιμο στις 3 σειρες.

   ΤΟ ΚΟΨΙΜΟ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ ΣΕ ΠΛΕΓΜΑ: χωρις αυτο, μια μακρια
   περιληψη θα τεντωνε ΟΛΗ τη σειρα, γιατι το align-items: stretch
   δινει σε καθε καρτα το υψος της ψηλοτερης.                      */
.mgArticles.mgArticles .article__content > p {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ΑΔΕΙΟ <p> = καθολου <p>. Ειδικοτητα (0,4,0) ωστε να νικαει τον
   κανονα απο πανω, που ειναι (0,3,0) και θα το εκανε -webkit-box. */
.mgArticles.mgArticles .article__content > p:empty { display: none; }

/* ΣΤΗ ΒΑΣΗ ΤΗΣ ΚΑΡΤΑΣ. (0,5,0) ωστε να νικαει το --pg-meta-gap
   της ενοτητας 6, που ειναι (0,3,0).                               */
.mgArticles.mgArticles .article__info.article__info.article__info {
  margin-top: auto;
  padding-top: 14px;
}

/* ── ΟΙ ΘΕΣΕΙΣ ΔΙΑΦΗΜΙΣΗΣ ΔΕΝ ΑΓΓΙΖΟΝΤΑΙ ────────────────────────
   Ζητηθηκε ρητα να μεινει η δεξια κολονα ΑΚΡΙΒΩΣ οπως ηταν.

   Στο βημα 173 ειχα βαλει min-height: 250px, φοντο, πλαισιο και
   ετικετα «Advertisement» μεσω :empty::before — λογικη σκεψη (να μην
   πηδαει το περιεχομενο οταν φορτωνει η διαφημιση), αλλα ΔΕΝ ΕΙΧΕ
   ΖΗΤΗΘΕΙ. Αφαιρεθηκαν ολα στο βημα 174.

   ΓΙΑΤΙ ΔΕΝ ΤΟ ΚΡΑΤΗΣΑ «για καλο»: οι θεσεις διαφημισης τις οριζει ο
   ad server, οχι το θεμα. Δικο μας min-height η background μπορει να
   μαχεται με ο,τι βαλει αυριο το script των διαφημισεων — και η
   διαφορα θα φαινεται ΜΟΝΟ σε production, με πραγματικες διαφημισεις,
   οπου ειναι και το πιο ακριβο να τη βρεις.

   .bannerCol και .banner στυλιζονται απο το mainsite.css. Αν ποτε
   χρειαστει δεσμευση χωρου, γινεται ΕΚΕΙ η στον ad server, οχι εδω. */

@media (max-width: 766px) {
  /* Μια στηλη. Το mainsite εχει ηδη τους κανονες της καθετης καρτας
     εδω — δεν τους ακυρωνουμε, μονο το πλεγμα αλλαζει.             */
  .mgArticles.mgArticles {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vh, 34px);
  }
  .mgArticles.mgArticles .article__content { padding: 0; }
}


/* ═══ 25. ΣΕΛΙΔΑ ΚΟΜΒΟΥ: ΤΟ ΚΕΝΟ ΚΑΤΩ ΑΠΟ ΤΟΝ HEADER ══════════════
   βημα 179 · 14/10/2026

   Ο fixed header εκρυβε το πανω μερος της εικονας του αρθρου.

   ── ΤΟ ΙΔΙΟ ΠΡΟΒΛΗΜΑ, ΤΡΙΤΗ ΣΕΛΙΔΑ ──────────────────────────────
   Ο header ειναι position: fixed — δεν πιανει χωρο στη ροη, καθε
   σελιδα δινει μονη της το κενο:
       sections.css ενοτητα 19   η αναζητηση      (βημα 155)
       front-grid.css:124        η αρχικη         (βημα 063)
       sections.css ενοτητα 23   η σελιδα ορου    (βημα 164)
   Η σελιδα κομβου ηταν η τεταρτη και δεν το ειχε.

   ── ΓΙΑΤΙ ΔΕΝ ΦΑΙΝΟΤΑΝ ΟΣΟ ΗΤΑΝ ────────────────────────────────
   Συνδεδεμενος βλεπεις τα tabs (View/Edit/Delete) ΜΕΣΑ στο
   .region-content, που σπρωχνουν το περιεχομενο προς τα κατω κατα
   τυχη. Ο ΕΠΙΣΚΕΠΤΗΣ δεν τα βλεπει — γι' αυτον η εικονα κρυβοταν
   ΠΕΡΙΣΣΟΤΕΡΟ απ' οσο φαινεται στον διαχειριστη.

   ── ΤΟ ΣΗΜΕΙΟ: .layout-content, ΣΕ ΟΛΕΣ ΤΙΣ ΣΕΛΙΔΕΣ ΚΟΜΒΟΥ ──────
   Το page.html.twig ειναι το template ΚΑΘΕ κομβου — δεν υπαρχει
   page--node--article.html.twig (επιβεβαιωθηκε απο το THEME DEBUG:
   «✅ page.html.twig»). Αρα το ιδιο κενο χρειαζονται αρθρα, stories
   και σελιδες· το body.path-node τα πιανει ολα με ενα ονομα, χωρις
   λιστα τυπων που θα ξεχναγε τον επομενο.

   ΜΗΔΕΝ ΑΝΤΑΓΩΝΙΣΤΕΣ: το .layout-content δεν το αγγιζει ουτε το
   mainsite.css ουτε κανενα δικο μας αρχειο — ελεγμενο με grep πριν
   γραφτει ο κανονας (το μαθημα του βηματος 176). Γι' αυτο αρκει
   (0,2,1) χωρις διπλες κλασεις.

   ── ΔΥΟ ΤΙΜΕΣ, ΟΠΩΣ ΣΤΗ ΣΕΛΙΔΑ ΟΡΟΥ ────────────────────────────
   Η τριτη σειρα του header (υποκατηγοριες) υπαρχει ΜΟΝΟ οταν το
   αρθρο εχει κατηγορια με αδερφια. Το :has() στο body ρωταει αν
   οντως αποδοθηκε, αντι να υποθεσουμε.

   ΧΩΡΙΣ --pg-admin-offset: το toolbar βαζει ηδη padding-top στο
   <body>· για τον ανωνυμο επισκεπτη ειναι 0 και το κενο ειναι το ιδιο.
   ═══════════════════════════════════════════════════════════════════ */

/* ΒΗΜΑ 267 — ΕΝΑΣ ΚΑΝΟΝΑΣ ΑΝΤΙ ΓΙΑ ΤΕΣΣΕΡΙΣ.
   Το --hdr-real-h το γραφει το sticky-nav.js ΜΕΤΡΩΝΤΑΣ τον header.
   Περιλαμβανει ηδη τις υποκατηγοριες οταν υπαρχουν, αρα ΔΕΝ χρειαζεται
   πια ουτε το :has() ουτε ξεχωριστος κλαδος για κινητο: το μετρημενο
   νουμερο ειναι σωστο σε καθε πλατος απο μονο του.

   ΤΟ fallback ΕΙΝΑΙ ΤΟ ΠΑΛΙΟ ΑΘΡΟΙΣΜΑ: αν το JS δεν τρεξει, η σελιδα
   συμπεριφερεται ΑΚΡΙΒΩΣ οπως πριν — 21px παραπανω, οχι σπασμενη.
   Γι' αυτο μενει το calc() μεσα στο var().

   ΤΑ ΑΛΛΑ ΤΡΙΑ ΣΗΜΕΙΑ ΔΕΝ ΑΓΓΙΧΤΗΚΑΝ (ενοτητα 19 αναζητηση,
   ενοτητα 23 σελιδα ορου, front-grid:124 αρχικη). Εχουν το ιδιο
   προβλημα και την ιδια λυση — αλλα αλλαζουν ΜΟΝΟ αφου επιβεβαιωθει
   εδω. Μια σελιδα τη φορα.                                         */
body.path-node .layout-content {
  padding-top: var(--hdr-real-h,
                   calc(var(--hdr-row-h, 96px) + var(--hdr-cats-h, 52px)
                      + var(--hdr-subcats-h, 34px)));
}

/* ΒΗΜΑ 269 — ΤΟ FALLBACK ΤΟΥ ΚΙΝΗΤΟΥ ΓΙΝΕΤΑΙ ΜΕΤΡΗΜΕΝΟ.
   Το αθροισμα των tokens δινει στο κινητο 80 + 52 + 34 = 166px, ενω
   ο header ΜΕΤΡΗΘΗΚΕ 145px. Εικοσι ενα pixel που δεν αντιστοιχουν σε
   τιποτα.

   ΓΙΑΤΙ ΕΝΑ ΝΟΥΜΕΡΟ ΚΑΙ ΟΧΙ ΔΙΟΡΘΩΣΗ ΤΩΝ TOKENS: τα --hdr-row-h και
   --hdr-cats-h διαβαζονται απο 26 σημεια σε ολα τα αρχεια. Ξερουμε
   οτι το ΑΘΡΟΙΣΜΑ τους ειναι 22px μεγαλο, αλλα ΟΧΙ ποιο απο τα δυο
   φταιει. Διορθωση στα τυφλα θα εσπαγε αρχικη η σελιδα κατηγοριας —
   ακριβως το λαθος που κανουμε ολη μερα. Οταν μετρηθουν χωριστα, το
   νουμερο εδω σβηνεται και μενουν μονο τα tokens.

   ΤΟ --hdr-real-h ΠΑΡΑΜΕΝΕΙ ΠΡΩΤΟ: οταν τρεχει το sticky-nav.js
   (βημα 267) αυτο το 145 δεν το κοιταει κανεις. Ειναι το διχτυ, οχι
   η λυση — γι' αυτο γραφεται ΜΟΝΟ στο κινητο, οπου μετρηθηκε. Σε
   desktop μενει το αθροισμα, που δεν εχει μετρηθει ακομα.         */
@media (max-width: 766px) {
  body.path-node .layout-content {
    padding-top: var(--hdr-real-h, 145px);
  }
}

/* ═══ ΒΗΜΑ 271 — Η ΔΕΥΤΕΡΗ, ΚΡΥΦΗ ΠΗΓΗ ΚΕΝΟΥ ══════════════════════
   mainMag.css:28001, ΧΩΡΙΣ media query, στο τελος του αρχειου:

       body { padding-top: 92px; }

   Μπηκε απο προηγουμενη δουλεια ως «κενο για τον fixed header» —
   σωστη προθεση, αλλα ΔΕΥΤΕΡΗ πηγη για το ιδιο πραγμα. Η σελιδα
   κρατουσε:

       body             92px
       .layout-content 145px   (ο δικος μας, μετρημενος)
                      ──────
                       237px   για header που ειναι 145

   ΠΕΡΙΣΣΕΥΑΝ 92px. Αυτο ηταν ολο το «μεγαλο κενο αναμεσα σε μενου
   και αρθρο» — οχι ο δικος μας υπολογισμος, που ηταν σωστος.

   ── ΓΙΑΤΙ ΔΕΝ ΤΟ ΕΙΔΑΜΕ ΜΕ ΜΕΤΡΗΣΗ ─────────────────────────────
   Ολες οι μετρησεις ξεκινουσαν απο το .articleSingle__category και
   ανεβαιναν ΜΕΧΡΙ το .layout-content. Το padding του <body> ειναι
   ΕΞΩ απο αυτη τη διαδρομη: δεν μετακινει κανενα απο τα κουτια που
   κοιταγαμε ΜΕΤΑΞΥ τους — τα κατεβαζει ΟΛΑ μαζι. Ο πινακας εδειχνε
   σωστες σχεσεις και λαθος απολυτη θεση.

   ΤΟ ΜΑΘΗΜΑ: οταν ΟΛΑ τα top ειναι μετατοπισμενα κατα το ιδιο
   ποσο, η αιτια ειναι ΠΑΝΩ απο το σημειο που αρχισες να μετρας.

   ── ΓΙΑΤΙ ΜΗΔΕΝΙΖΟΥΜΕ ΤΟ body ΚΑΙ ΟΧΙ ΤΟ ΔΙΚΟ ΜΑΣ ──────────────
   Το δικο μας ειναι ΜΕΤΡΗΜΕΝΟ και προσαρμοζεται μονο του (βημα 267).
   Το 92px ειναι σταθερα γραμμενη στο βασικο θεμα, που δεν ξερει
   ποσο ψηλος ειναι ο header μας σημερα. Κραταμε την πηγη που ξερει.

   ΜΟΝΟ ΣΕ ΣΕΛΙΔΕΣ ΚΟΜΒΟΥ, ΣΚΟΠΙΜΑ: το ιδιο 92px μετραει και στην
   αρχικη, στις κατηγοριες και στην αναζητηση, που εχουν ΚΙ ΑΥΤΕΣ
   δικο τους αποθεμα — αρα πιθανοτατα εχουν το ιδιο σφαλμα. ΔΕΝ
   αλλαζουν εδω: καθε μια θελει τη δικη της επιβεβαιωση. Μια σελιδα
   τη φορα, οπως και στο βημα 267.

   ΕΙΔΙΚΟΤΗΤΑ: (0,1,0) εναντι (0,0,1) του σκετου body.            */
body.path-node {
  padding-top: 0;
}

.catLanding__section {
  margin-bottom: clamp(40px, 4.6vw, 64px);
}

/* ── Η ΛΩΡΙΔΑ ΤΟΥ ΤΙΤΛΟΥ — ΒΗΜΑ 248 ───────────────────────────────
   ΗΤΑΝ: flex με δυο παιδια (τιτλος αριστερα, «Περισσοτερα» δεξια)
   και ΜΟΝΟ border-bottom.
   ΤΩΡΑ: ενα παιδι, γραμμη ΠΑΝΩ ΚΑΙ ΚΑΤΩ, ολοκληρη.

   ΤΟ display: flex ΑΦΑΙΡΕΘΗΚΕ ΚΑΙ ΑΥΤΟ ΕΙΝΑΙ ΠΟΥ ΔΙΟΡΘΩΝΕΙ ΤΟ
   ΚΟΨΙΜΟ. Με flex, το <h2> ηταν flex item: παιρνει πλατος
   fit-content, οχι ολο το πλατος του γονεα. Ο γονεας (.catLanding__
   head) τραβουσε τη γραμμη σε ολο το πλατος, αλλα η ΚΛΙΚΑΜΠΛ περιοχη
   σταματουσε στο τελος των γραμματων — και σε καθε αλλαγη πλατους το
   <h2> αλλαζε μεγεθος αναπαντεχα. Σε block ροη το <h2> ειναι
   block-level εξ ορισμου: γεμιζει τη γραμμη.

   padding-block ΣΥΜΜΕΤΡΙΚΟ: με δυο γραμμες, 10px μονο απο κατω θα
   εδειχνε τον τιτλο κολλημενο στην πανω.                          */
.catLanding__head {
  margin-bottom: clamp(16px, 1.8vw, 24px);
  padding-block: 12px;
  border-top: 1px solid var(--pg-border, #2e2e2e);
  border-bottom: 1px solid var(--pg-border, #2e2e2e);
}

.catLanding__title {
  /* ── Η ΤΡΙΤΗ ΓΡΑΜΜΗ — ΒΗΜΑ 249 ────────────────────────────────────
     ΑΙΤΙΑ: mainsite.css:2929
         h1, h2, h3, h4, h5, h6 {
           margin: 0 0 40px;
           padding-top: 20px;
           border-top: 2px solid …;          ← Η ΕΞΤΡΑ ΓΡΑΜΜΗ
         }
     ΚΑΘΕ επικεφαλιδα του site κουβαλαει δικη της γραμμη 2px. Μεσα
     στη λωριδα εβγαιναν ΤΡΕΙΣ:

         ─────────  1px   .catLanding__head  border-top  (δικη μας)
         ─────────  2px   h2                 border-top  (mainsite)
           ΣΙΝΕΜΑ
         ─────────  1px   .catLanding__head  border-bottom (δικη μας)

     Γι' αυτο «η πανω και η κατω δεν ειχαν ιδιο παχος»: η ΟΡΑΤΗ πανω
     γραμμη ηταν η 2px του h2, η κατω η 1px η δικη μας. Οι δυο δικες
     μας ηταν ΠΑΝΤΑ ιδιες — απλα η μια ηταν κρυμμενη πισω απο ξενη.

     ΤΟ margin: 0 ΗΤΑΝ ΗΔΗ ΕΔΩ και κρυβε το προβλημα: ακυρωνε το
     margin-bottom: 40px, αρα η επικεφαλιδα εμοιαζε «καθαρη» και δεν
     ψαχτηκε τι αλλο φερνει ο ιδιος κανονας. Οταν ακυρωνεις ΜΙΑ
     ιδιοτητα ενος ξενου κανονα, διαβασε ΟΛΟΚΛΗΡΟ τον κανονα.

     ΤΟ padding-top: 20px ΦΕΥΓΕΙ ΜΑΖΙ, οχι ως επιπλεον: με το
     padding-block: 12px της λωριδας, ο τιτλος ειχε 32px απο πανω και
     12px απο κατω — η λωριδα εδειχνε στραβη ακομα και χωρις γραμμες.

     ΕΙΔΙΚΟΤΗΤΑ: (0,1,0) εναντι (0,0,1). Μια κλαση αρκει.         */
  margin: 0;
  padding: 0;
  border-top: 0;
  font-family: var(--pg-h-section-font, Geologica, Arial, sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--pg-h-section-wght, 700);
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* ΟΛΗ Η ΛΩΡΙΔΑ ΕΙΝΑΙ Ο ΣΥΝΔΕΣΜΟΣ — ΒΗΜΑ 248.
   display: block ωστε το <a> να γεμιζει το <h2>, αρα ΟΛΟ το πλατος
   αναμεσα στις δυο γραμμες να ειναι στοχος κλικ — οχι μονο τα
   γραμματα. Σε κινητο ειναι η διαφορα αναμεσα σε στοχο 90px και
   στοχο ολοκληρης της οθονης.                                     */
.catLanding__title a {
  display: block;
  color: var(--pg-title-ink, #f2f2f2);
  text-decoration: none;
}

/* ΤΟ «ΠΕΡΙΣΣΟΤΕΡΑ» ΔΕΝ ΥΠΑΡΧΕΙ ΕΔΩ — ΒΗΜΑ 248.
   Δοκιμαστηκε (ιδια οψη με την ενοτητα 14, κατω δεξια) και
   απορριφθηκε: ηταν ΔΕΥΤΕΡΟΣ συνδεσμος προς το ΙΔΙΟ url με τον
   τιτλο, δυο εκατοστα πιο κατω. Ο τιτλος αρκει.
   Οι κλασεις .catLanding__foot και .catLanding__more δεν υπαρχουν
   πια ουτε στο template ουτε εδω.                                 */

/* ΚΑΜΙΑ ΚΙΝΗΣΗ ΣΤΟ HOVER — μονο χρωμα. Ζητηθηκε ρητα δυο φορες
   (βηματα 112 και 146): κινηση σε στοιχειο ελεγχου μετακινει τον
   στοχο κατω απο το δαχτυλο.                                        */
@media (hover: hover) and (pointer: fine) {
  .catLanding__title a:hover {
    color: var(--pg-section-accent, rgb(255 72 72));
  }
}

/* ── ΤΟ ΠΛΕΓΜΑ ─────────────────────────────────────────────────────
   Το markup το παραγει το view 'category_landing'. Δεν ελεγχουμε τι
   κλασεις βαζει ο χρηστης στο display, αλλα το .view-content το βαζει
   ΠΑΝΤΑ το Views — εκει πιανουμε.

   minmax(0, 1fr) και οχι 1fr σκετο: το auto ελαχιστο ειναι min-content
   και ενας μακρυς τιτλος φουσκωνει τη στηλη εξω απο το container
   (μαθημα βηματος 142).                                             */
/* ── Η ΕΙΚΟΝΑ ΔΕΝ ΕΙΧΕ ΚΑΝΟΝΑ — ΒΗΜΑ 282 ──────────────────────────
   Η πυλη επαιρνε σιωπηλα το .article__image figure { aspect-ratio:
   1.26 } του mainMag. Δουλευε, αλλα ΚΑΤΑ ΤΥΧΗ: μια αλλαγη στο βασικο
   θεμα θα την ξεσυγχρονιζε απο τη σελιδα ορου χωρις προειδοποιηση.

   Τωρα διαβαζει το ΙΔΙΟ token με την ενοτητα 24. Η τιμη ειναι η ιδια
   που ειχε ηδη — καμια οπτικη αλλαγη εδω, μονο η εγγυηση οτι οι δυο
   σελιδες θα μενουν ιδιες.                                        */
.catLanding__top .article__image figure,
.catLanding__section .article__image figure {
  aspect-ratio: var(--pg-list-img-ratio, 1.26);
  max-height: none;
  padding-top: 0;
  width: 100%;
  overflow: hidden;
}

.catLanding__top .article__image figure :is(picture, img),
.catLanding__section .article__image figure :is(picture, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catLanding__top .view-content,
.catLanding__section .view-content {
  display: grid;
  gap: clamp(24px, 2.6vw, 36px) clamp(16px, 1.8vw, 24px);
  align-items: start;
}

/* ── Η ΠΑΝΩ ΖΩΝΗ: 2 ΣΕΙΡΕΣ x 2 ΑΡΘΡΑ, ΜΕ ΤΗΝ ΠΡΩΤΗ ΜΕΓΑΛΗ ────────
   ΒΗΜΑ 202.

       σειρα 1   [  ΜΕΓΑΛΟ  ][μικρο]      4 + 2 = 6
       σειρα 2   [ μικρο ][ μικρο ]        3 + 3 = 6

   ΓΙΑΤΙ 6 ΣΤΗΛΕΣ: ειναι ο μικροτερος αριθμος που χωραει ΚΑΙ την
   αναλογια 2:1 της πανω σειρας ΚΑΙ το 1:1 της κατω, με ακεραια
   κομματια. Με 4 στηλες η κατω σειρα θα εβγαινε 2+2 σωστα, αλλα η
   πανω 3+1 — πολυ ανισο. Με 3 στηλες η κατω θα ηθελε 1.5+1.5.

   ⚠ ΤΟ VIEW ΠΡΕΠΕΙ ΝΑ ΔΙΝΕΙ 4 ΑΡΘΡΑ. Το block_1 ηταν 5. Με 5, το
   πεμπτο πεφτει σε τριτη σειρα μονο του, πιανοντας 4 στηλες.      */
.catLanding__top .view-content {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.catLanding__top .views-row:nth-child(1) { grid-column: span 4; }
.catLanding__top .views-row:nth-child(2) { grid-column: span 2; }
.catLanding__top .views-row:nth-child(3) { grid-column: span 3; }
.catLanding__top .views-row:nth-child(4) { grid-column: span 3; }

/* Η ΜΕΓΑΛΗ ΚΑΡΤΑ — ΧΩΡΙΣ ΜΑΧΗ ΕΙΔΙΚΟΤΗΤΑΣ.
   Το μεγεθος του τιτλου το οριζει ο κανονας .article__title x3 στη
   γραμμη 110, ειδικοτητα (0,3,0), και διαβαζει var(--pg-h-card).
   Αντι να γραψουμε νεο font-size που θα επρεπε να τον νικησει,
   αλλαζουμε ΤΗ ΜΕΤΑΒΛΗΤΗ πανω στην καρτα: ο ΥΠΑΡΧΩΝ κανονας δινει
   αλλη τιμη. Καμια νεα δηλωση, κανενας ανταγωνισμος.
   1.6rem (24px) → η κλιμακα «lead» του ιδιου αρχειου (γρ. 16).    */
.catLanding__top .views-row:nth-child(1) {
  /* ΒΗΜΑ 203 — ηταν clamp(1.8rem, 2.4vw, 2.2rem), μεγεθος φτιαγμενο
     για ολο το πλατος. Μεσα σε col--xl8 η μεγαλη καρτα ειναι ~620px,
     οχι ~960. Κραταμε την ΑΝΑΛΟΓΙΑ μεγαλου προς μικρο, οχι το νουμερο.

     ΒΗΜΑ 298 — ανεβηκε μαζι με τις μικρες, ΜΕ ΤΗΝ ΙΔΙΑ ΑΝΑΛΟΓΙΑ:
         ηταν  1.45 / 1.8vw / 1.8   εναντι μικρης 1.1 / 1.25 / 1.3
         τωρα  1.8  / 2.3vw / 2.3   εναντι μικρης 1.35 / 1.6 / 1.65
     λογος ~1.38 στο max, αμεταβλητος. Αν ΔΕΝ ανεβαινε, η μεγαλη
     καρτα (1.8) και οι μικρες (1.65) θα ηταν σχεδον ιδιες και η
     ιεραρχια της πανω ζωνης θα εμοιαζε με λαθος, οχι με σχεδιο.
     Για να μεινει στο παλιο: ξαναγραψε clamp(1.45rem,1.8vw,1.8rem). */
  --pg-h-card:   clamp(1.8rem, 2.3vw, 2.3rem);
  --pg-b1-ratio: 16 / 9;
}

.catLanding__section .view-content {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ── Στενες οθονες ───────────────────────────────────────────────
   Κατω απο 1000px η ανισοτητα δεν εχει νοημα: σε στηλη ~300px το
   «μεγαλο» και το «μικρο» διαφερουν ελαχιστα. Ολα ισα, και η μεγαλη
   καρτα γυρναει στο κανονικο μεγεθος τιτλου.                      */
@media (max-width: 1000px) {
  .catLanding__top .view-content,
  .catLanding__section .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catLanding__top .views-row:nth-child(1),
  .catLanding__top .views-row:nth-child(2),
  .catLanding__top .views-row:nth-child(3),
  .catLanding__top .views-row:nth-child(4) {
    grid-column: auto;
  }
  .catLanding__top .views-row:nth-child(1) {
    /* ΒΗΜΑ 298 — ΟΧΙ ξαναγραμμενη τιμη αλλα το token των μικρων
       καρτων. Η προθεση ηταν παντα «ολα ισα»· τωρα το λεει ο κωδικας.
       ΔΕΝ ΑΡΚΕΙ ΝΑ ΣΒΗΣΤΕΙ Η ΓΡΑΜΜΗ: ο κανονας της μεγαλης καρτας
       ειναι ΕΞΩ απο το @media και εξακολουθει να ισχυει εδω — το
       @media δεν ακυρωνει κανονες, μονο προσθετει. Χωρις αυτη τη
       δηλωση η μεγαλη καρτα θα κρατουσε το μεγαλο μεγεθος σε στενη
       οθονη.                                                       */
    --pg-h-card:   var(--pg-cl-card);
    --pg-b1-ratio: 4 / 3;
  }
}

@media (max-width: 620px) {
  .catLanding__top .view-content,
  .catLanding__section .view-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Η ΚΑΡΤΑ ───────────────────────────────────────────────────────
   Το template βγαζει .article + .b1-card, αρα κληρονομει ΟΛΗ την
   τυπογραφια και τα χρωματα της ενοτητας 17 και του mainsite. Εδω
   μενουν μονο δυο πραγματα.

   1. Η ΑΝΑΛΟΓΙΑ. Το --pg-b1-ratio το οριζει η ενοτητα 17 πανω στο
      .view-display-id-block_1. ΤΟ ΔΙΚΟ ΜΑΣ view εχει ΚΙ ΑΥΤΟ display
      block_1 — συμπτωση ονοματος, οχι σχεδιασμος. Αρα η πανω ζωνη θα
      επαιρνε την τιμη ΚΑΤΑ ΛΑΘΟΣ και οι ενοτητες (block_2) οχι, και
      θα διεφεραν. Την οριζουμε ΡΗΤΑ και στις δυο.

   2. ΤΟ ΥΨΟΣ ΤΟΥ ΠΕΡΙΕΧΟΜΕΝΟΥ. Ιδια ιστορια: το
      .view-display-id-block_1 .article__content { height: auto }
      της ενοτητας 17 θα επιανε μονο την πανω ζωνη.                  */
.catLanding__top,
.catLanding__section {
  --pg-b1-ratio: 4 / 3;
  /* ΒΗΜΑ 203 — ηταν η καθολικη 1.6rem (24px). Απο το βημα 203 η πυλη
     ζει σε col--xl8, δηλαδη 2/3 του πλατους: τεσσερις καρτες σε ~936px
     δινουν στηλη ~215px, οπου 24px τιτλος ειναι τεραστιος. Αλλαζουμε
     ΤΗ ΜΕΤΑΒΛΗΤΗ, οχι το font-size — ο κανονας της γρ. 110 τη διαβαζει
     και δινει αλλη τιμη, χωρις νεα δηλωση και χωρις ανταγωνισμο.

     ΒΗΜΑ 298 — ΤΟ ΙΔΙΟ ΜΕΓΕΘΟΣ ΜΕ ΤΗΝ ΥΠΟΚΑΤΗΓΟΡΙΑ.
     Ζητηθηκε: στο /showbiz οι τιτλοι ηταν μικροτεροι απο το
     /showbiz/celebrities. Η τιμη ειναι ΑΚΡΙΒΩΣ αυτη της ενοτητας 24
     (γρ.2467, .mgArticles — η σελιδα ορου), οχι καποια «κοντινη».

     ΜΠΑΙΝΕΙ ΣΕ ΔΙΚΟ ΤΗΣ TOKEN, ΓΙΑΤΙ ΤΗ ΔΙΑΒΑΖΟΥΝ ΤΡΙΑ ΣΗΜΕΙΑ:
     εδω, και ο κανονας της μεγαλης καρτας μεσα στο
     @media (max-width: 1000px) που την ΕΞΙΣΩΝΕΙ με τις μικρες. Αν
     εμενε γραμμενη δυο φορες, η επομενη αλλαγη θα ξεχναγε τη μια και
     σε στενη οθονη η «μεγαλη» καρτα θα εβγαινε ΜΙΚΡΟΤΕΡΗ απο τις
     διπλανες της — σιωπηλα.                                        */
  --pg-cl-card: clamp(1.35rem, 1.6vw, 1.65rem);
  --pg-h-card:  var(--pg-cl-card);
}

.catLanding__top .article__content,
.catLanding__section .article__content {
  height: auto;
  padding: 0;
}

@media (max-width: 620px) {
  .catLanding__top,
  .catLanding__section {
    --pg-b1-ratio: 3 / 2;
  }
}

/* ── Η ΣΤΗΛΗ ΤΩΝ ΔΙΑΦΗΜΙΣΕΩΝ (βημα 203) ────────────────────────────
   Δεσμευει τον χωρο ΚΑΙ οταν ειναι κενη — αυτο ειναι ολο το νοημα.
   Χωρις min-height, μια κενη region δινει στηλη υψους 0 και το
   πλεγμα την αγνοει οπτικα: το περιεχομενο θα εμοιαζε κεντραρισμενο
   λαθος αντι για αριστερα με κενο δεξια.                           */
.catLanding__aside {
  align-self: start;
}

@media (min-width: 1001px) {
  .catLanding__aside {
    min-height: 600px;
  }
}

/* ── ΤΟ ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΤΙΣ ΣΤΗΛΕΣ (βημα 205) ───────────────────────
   Το πλεγμα δουλευει σε ζευγαρι:
       .row  margin: 0 -12px      βγαινει 12px εξω
       .col  padding: 0 12px      το ακυρωνει
   Το αθροισμα των δυο paddings ειναι το κενο ΑΝΑΜΕΣΑ στις στηλες,
   ενω το margin κραταει τις ΕΞΩ ακρες στη θεση τους.

   Αν ανεβαινε μονο το padding σε 40, η εξω ακρη θα μετακινιοταν 28px
   μεσα και θα χαλουσε η ευθυγραμμιση των 40px του βηματος 204.
   Ανεβαινουν ΜΑΖΙ:
       εξω ακρη:  -40 + 40 = 0      αμετακινητη  ✅
       κενο:       40 + 40 = 80px

   ΜΟΝΟ στην πυλη: το .catLanding__row ειναι δικο μας αγκιστρι. Το
   σκετο .row το μοιραζεται ΟΛΟ το site.                           */
.catLanding__row {
  margin-left:  -40px;
  margin-right: -40px;
}

.catLanding__row > .col {
  padding-left:  40px;
  padding-right: 40px;
}

/* Σε στενες οθονες οι στηλες μπαινουν η μια κατω απο την αλλη, αρα
   το κενο γινεται περιττο πλαγιο padding — πισω στα 12.           */
@media (max-width: 1000px) {
  .catLanding__row {
    margin-left:  -12px;
    margin-right: -12px;
  }
  .catLanding__row > .col {
    padding-left:  12px;
    padding-right: 12px;
  }
}


/* ═══ 27. ΣΕΛΙΔΑ ΣΥΝΕΡΓΑΤΩΝ ═══════════════════════════════════════
   ΒΗΜΑ 225. Μεταφερθηκε εδω απο καρφωτο <style> μεσα στο
   page--contributors.html.twig, που ειχε ερθει αυτουσιο απο το
   soul_v1 (thessvoice).

   ΤΙ ΑΛΛΑΞΕ ΚΑΙ ΓΙΑΤΙ:

   ΧΡΩΜΑΤΑ — το αντιγραφο ειχε #171717 για ονοματα και #666 για
   περιγραφη: τιμες ΛΕΥΚΟΥ θεματος. Σε σκουρο φοντο ηταν σχεδον
   αορατες. Τωρα διαβαζουν τα tokens, αρα ακολουθουν οποτε αλλαξει
   η παλετα — οπως εγινε και ξαναεγινε στα βηματα 206 και 218.

   ΤΟΝΟΣ — ειχε #e60000, ενα κοκκινο που δεν υπαρχει πουθενα αλλου
   στο site. Το --pg-section-accent ειναι το δικο μας.

   ΓΡΑΜΜΑΤΟΣΕΙΡΑ — ζηταγε 'PFSpekkVAR-Bold', που ειναι του thessvoice
   και ΔΕΝ φορτωνεται εδω. Επεφτε σιωπηλα σε sans-serif του συστηματος.

   ΚΙΝΗΣΗ ΣΤΟ HOVER — ειχε transform: scale(1.05) στην εικονα.
   Αφαιρεθηκε: ο χρηστης το εχει ζητησει ΔΥΟ φορες ρητα (βηματα 112
   και 146) — στο hover αλλαζει ΜΟΝΟ χρωμα. Κινηση σε στοιχειο
   ελεγχου μετακινει τον στοχο κατω απο το δαχτυλο.

   ΔΙΠΛΟΓΡΑΦΙΑ — το αρχικο οριζε τα ιδια πραγματα ΔΥΟ φορες, μια με
   .page-contributors και μια με .contributorsPage. Κρατηθηκε μια.

   ΔΙΟΡΘΩΣΗ ΒΗΜΑΤΟΣ 255 — ΕΔΩ ΕΓΡΑΦΕ ΨΕΜΑ:
   «Μονο η δευτερη κλαση υπαρχει πραγματικα (την βαζει το
   popup_v1_preprocess_html)». ΔΕΝ ΙΣΧΥΕ. grep «contributors» σε ολο
   το popup_v1.theme → 0 ευρηματα. Η preprocess_html ειχε κλαδους
   μονο για αρχικη / ορο / κομβο, και η /contributors ειναι σελιδα
   Views: το <body> εβγαινε με μονο τις κλασεις του πυρηνα. Η
   προταση γραφτηκε απο ΥΠΟΘΕΣΗ, οχι απο ελεγχο, και κρατησε τη
   σελιδα αστυλιστη.

   ΤΩΡΑ ΔΥΟ ΔΙΧΤΥΑ, ΣΚΟΠΙΜΑ:
     .contributorsPage    — την βαζει πλεον ΟΝΤΩΣ η preprocess_html
     .path-contributors   — την βαζει ΠΑΝΤΑ ο πυρηνας του Drupal απο
                            το πρωτο κομματι της διαδρομης
   Το :is() κραταει την ειδικοτητα στο (0,1,0) — οσο ηταν και με μια
   κλαση — αρα καμια ισορροπια δεν μετακινηθηκε. Αν αυριο αλλαξει το
   .theme η το alias, η σελιδα ΔΕΝ ξεγυμνωνεται ξανα.               */

.contributorsHeading {
  font-family: var(--pg-h-section-font, Geologica, Arial, sans-serif);
  font-size: var(--pg-h-section);
  font-weight: var(--pg-h-section-wght, 700);
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--pg-title-ink, #f2f2f2);
  margin: 0;

  /* ── ΚΕΝΤΡΟ — ΒΗΜΑ 256 ───────────────────────────────────────────
     ΔΥΟ ΙΔΙΟΤΗΤΕΣ ΓΙΑ ΕΝΑ ΠΡΑΓΜΑ, ΚΑΙ ΟΙ ΔΥΟ ΧΡΕΙΑΖΟΝΤΑΙ:

       mainsite.css / mainMag.css
       .lookLayout h1.mainHeading { display: flex; align-items: flex-end }

     Σε flex container το text-align ΔΕΝ κεντραρει — τη στοιχιση στον
     κυριο αξονα τη ρυθμιζει το justify-content. Ιδιο ακριβως μοτιβο
     με το .article__info των βηματων 138 και 245.

     ΓΙΑΤΙ ΜΠΑΙΝΕΙ ΚΑΙ ΤΟ text-align: μεχρι χθες ο κανονας εκεινος ΔΕΝ
     ισχυε εδω — το <body> δεν ειχε lookLayout (βημα 255). Μολις μπηκε
     η κλαση, η επικεφαλιδα εγινε flex. Αν καποτε παψει να ειναι,
     το text-align ειναι ηδη εδω και το κεντρο κραταει.

     Ο τιτλος κεντραρεται ΜΑΖΙ με τις καρτες: το .views-row εχει ηδη
     align-items: center + text-align: center, και τα δυο .wrapper
     (του catHead και της region-content) εχουν το ΙΔΙΟ padding 20px
     μετα το βημα 233 — αρα ιδιο κεντρο, οχι «περιπου».            */
  justify-content: center;
  text-align: center;
}

/* ── ΤΟ ΠΛΕΓΜΑ ────────────────────────────────────────────────────
   auto-fill και οχι σταθερος αριθμος στηλων: οι συνεργατες αλλαζουν
   σε πληθος, και μια σταθερη τιμη θα αφηνε κενα η θα στριμωχνε.
   minmax(0, …) στο δευτερο ορισμα — μαθημα βηματος 142.           */
:is(.contributorsPage, .path-contributors) .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2vw, 26px);
  align-items: start;
}

:is(.contributorsPage, .path-contributors) .views-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Η ΕΙΚΟΝΑ: κυκλικη, σταθερη ──────────────────────────────────
   Το border-radius μπαινει στο ΠΕΡΙΕΧΟΝ ΚΑΙ στο <a>, οχι μονο στην
   <img>: αν η εικονα λειπει, το κουτι πρεπει να μενει κυκλικο αντι
   να γινεται τετραγωνο κενο.                                      */
:is(.contributorsPage, .path-contributors) .views-field-field-contributor-image,
:is(.contributorsPage, .path-contributors) .views-field-field-contributor-image a {
  display: block;
  width: 140px;
  height: 140px;
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pg-surface-1, #1a1a1a);
}

:is(.contributorsPage, .path-contributors) .views-field-field-contributor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── ΤΟ ΟΝΟΜΑ ────────────────────────────────────────────────── */
:is(.contributorsPage, .path-contributors) .views-field-name {
  margin-bottom: 8px;
}

:is(.contributorsPage, .path-contributors) .views-field-name a {
  font-family: var(--pg-font-display, Geologica, Arial, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  font-variation-settings: "SHRP" var(--pg-display-shrp, 100),
                           "CRSV" var(--pg-display-crsv, 0);
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pg-title-ink, #f2f2f2);
  transition: color .2s ease;
}

/* ── Η ΠΕΡΙΓΡΑΦΗ ─────────────────────────────────────────────── */
:is(.contributorsPage, .path-contributors) .views-field-description {
  max-width: 220px;
  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--pg-text-muted, #a0a0a0);
}

/* ΜΟΝΟ ΧΡΩΜΑ ΣΤΟ HOVER — καμια κινηση (βηματα 112, 146). */
@media (hover: hover) and (pointer: fine) {
  :is(.contributorsPage, .path-contributors) .views-field-name a:hover {
    color: var(--pg-section-accent, rgb(255, 72, 72));
  }
}

@media (max-width: 600px) {
  :is(.contributorsPage, .path-contributors) .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.contributorsPage, .path-contributors) .views-field-field-contributor-image,
  :is(.contributorsPage, .path-contributors) .views-field-field-contributor-image a {
    width: 110px;
    height: 110px;
  }
  :is(.contributorsPage, .path-contributors) .views-field-name a {
    font-size: .95rem;
  }
}


/* ── ΧΩΡΙΣ ΜΠΑΡΑ ΚΑΤΗΓΟΡΙΩΝ ΕΔΩ  (βημα 226) ──────────────────────────
   Στη σελιδα συνεργατων το header κραταει ΜΟΝΟ burger, λογοτυπο και
   αναζητηση. Η μπαρα κατηγοριων λεει «που εισαι μεσα στο περιεχομενο»
   — και εδω δεν εισαι σε καμια κατηγορια. Θα σημαδευε το τιποτα.

   ΕΙΔΙΚΟΤΗΤΑ: ο κανονας που τη δειχνει ειναι .header×4 .header__cats
   στο (0,5,0). Το σκετο :is(.contributorsPage, .path-contributors) .header__cats ειναι (0,2,0)
   και ΘΑ ΕΧΑΝΕ. Με html + body + την κλαση σελιδας + .header×4
   φτανουμε (0,6,2).                                                  */
html body:is(.contributorsPage, .path-contributors)
  .header.header.header.header :is(.header__cats, .header__subcats) {
  display: none;
}

/* ΚΑΙ ΤΟ ΚΕΝΟ ΜΑΖΕΥΕΙ ΜΑΖΙ ΤΟΥΣ.
   Η ενοτητα 23 δινει στο .catHead padding-top = --hdr-row-h (96px)
   + --hdr-cats-h (52px), γιατι υπολογιζει header ΔΥΟ σειρων. Χωρις τη
   μπαρα ο header εχει ΜΙΑ σειρα — αν εμενε το 148 θα αφηνε 52px τρυπα
   αναμεσα στον header και στον τιτλο.

   Ειδικοτητα (0,4,1) εναντι (0,3,1) του κανονα με το :has().        */
html body:is(.contributorsPage, .path-contributors) .catHead.catHead {
  padding-top: var(--hdr-row-h, 96px);
}


/* ── ΤΟ ΛΟΓΟΤΥΠΟ ATHENS VOICE ΣΤΟ FOOTER  (βημα 227) ─────────────────
   Κατηγοριες και συνδεσμοι αριστερα, λογοτυπο στη δεξια ακρη, στο υψος
   και των δυο σειρων μαζι.

   ΓΙΑΤΙ ΧΡΕΙΑΣΤΗΚΕ ΠΕΡΙΕΚΤΗΣ: το .siteFooter__cats και το
   .siteFooter__links ειναι ΔΥΟ ξεχωριστα αδερφια. Βαζοντας το λογοτυπο
   διπλα στο ενα, θα ευθυγραμμιζοταν με εκεινο μονο. Ο .siteFooter__mid
   τα κανει ενα αντικειμενο, και το space-between στελνει το λογοτυπο
   στην ακρη ο,τι υψος κι αν εχουν.                                   */
.siteFooter__mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);

  /* Η ΓΡΑΜΜΗ ΜΕΤΑΚΟΜΙΣΕ ΕΔΩ — βημα 230.
     Ηταν border-top στο .siteFooter__cats (γρ. 1062). Απο το βημα 227
     το .siteFooter__cats ζει μεσα στο .siteFooter__midLeft, που ειναι
     flex item: πιανει ΜΟΝΟ το πλατος του περιεχομενου του, αρα η
     γραμμη κοβοταν στη μεση της σελιδας.

     Ο .siteFooter__mid ειναι αμεσο παιδι του .siteFooter__inner, οπως
     και το .siteFooter__bottom που εχει την κατω γραμμη — γι' αυτο
     εκεινη δεν ειχε ποτε προβλημα. Τωρα οι δυο γραμμες ειναι αδερφια
     και ΔΕΝ μπορουν να διαφωνησουν σε πλατος.

     Μαζι μετακινηθηκαν και τα δυο κενα, ωστε η αποσταση απο τη γραμμη
     ως τις κατηγοριες να μεινει ιδια.                                */
  margin-top: clamp(26px, 3.5vh, 42px);
  padding-top: clamp(18px, 2.4vh, 28px);
  border-top: 1px solid var(--pg-border, #2e2e2e);
}

/* Και φευγουν απο τον παλιο τους ιδιοκτητη. Ιδια ειδικοτητα (0,1,0)
   με τον κανονα της γρ. 1062, αλλα ΠΙΟ ΚΑΤΩ στο αρχειο — κερδιζει. */
.siteFooter__cats {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* min-width: 0 — χωρις αυτο το αριστερο μερος δεν συρρικνωνεται κατω
   απο το min-content του και σε στενη οθονη σπρωχνει το λογοτυπο εξω.
   Το ιδιο μαθημα με το βημα 216.                                     */
.siteFooter__midLeft {
  min-width: 0;
}

.siteFooter__av {
  flex: 0 0 auto;
  display: block;
  opacity: .75;
  transition: opacity .2s ease;
}

.siteFooter__av img {
  display: block;
  width: auto;
  height: clamp(20px, 2vw, 28px);
  /* ΒΗΜΑ 229 — το filter αφαιρεθηκε: το αρχειο ειναι ηδη λευκο. */
}

/* ΜΟΝΟ ΔΙΑΦΑΝΕΙΑ ΣΤΟ HOVER, καμια κινηση (βηματα 112, 146). */
@media (hover: hover) and (pointer: fine) {
  .siteFooter__av:hover {
    opacity: 1;
  }
}

/* Σε στενη οθονη το λογοτυπο πεφτει απο κατω, αριστερα — δεν εχει
   νοημα να κρεμεται μονο του δεξια πανω απο στοιβαγμενες λιστες.    */
@media (max-width: 700px) {
  .siteFooter__mid {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}


/* ═══ 28. block_10 ΣΤΟ ΚΙΝΗΤΟ: Ο ΤΡΟΧΟΣ ΞΑΝΑΑΝΟΙΓΕΙ ══════════════
   βημα 253 · 26/10/2026  (αντικαθιστα ολοκληρο το βημα 252)

   ΜΕΤΡΗΜΕΝΟ, σε viewport 440px:
       div.grid.mobileInline        w 428   right 442
         article --mgWideFull       w 254   right 268
         article --book             w 254   right 538   ← ΕΞΩ ΑΠΟ ΤΗΝ ΟΘΟΝΗ

   ΤΟ ΜΠΛΟΚ ΕΙΝΑΙ ΟΡΙΖΟΝΤΙΟΣ ΤΡΟΧΟΣ ΠΟΥ ΔΕΝ ΜΠΟΡΟΥΣΕ ΝΑ ΣΚΡΟΛΑΡΕΙ.
   Το mainsite, ΜΕΣΑ στο ιδιο @media (max-width: 766px), γραφει τον
   ιδιο επιλογεα ΔΥΟ ΦΟΡΕΣ:

       mainsite.css:18557   .grid.mobileInline {
                              display: flex;  flex-wrap: nowrap;
                              overflow-x: auto;        ← ΤΡΟΧΟΣ
                              width: calc(100% + 16px);
                              padding-bottom: 12px; }
       mainsite.css:21074   .grid.mobileInline {
                              overflow: hidden; }      ← ΤΟΝ ΣΚΟΤΩΝΕΙ

   Ιδια ειδικοτητα (0,2,0), ιδιο media. Κερδιζει ο ΔΕΥΤΕΡΟΣ, γιατι
   ερχεται αργοτερα. Οι καρτες μενουν 254px σε σειρα που δεν
   τυλιγεται, και ο,τι δεν χωραει ΚΟΒΕΤΑΙ χωρις τροπο να το δεις.
   Το mainMag.css εχει ΑΚΡΙΒΩΣ το ιδιο ζευγαρι (23331 / 26581).

   ── ΓΙΑΤΙ ΟΧΙ «ΜΙΑ ΣΤΗΛΗ» — ΔΟΚΙΜΑΣΤΗΚΕ ΚΑΙ ΑΠΕΤΥΧΕ (βημα 252) ──
   Η πρωτη προσπαθεια εκανε τον περιεκτη grid μιας στηλης και εδωσε
   width: 100% στις καρτες. ΕΣΠΑΣΕ: η δευτερη καρτα ειναι
   .article--book.portraitImage — παραλλαγη με ΔΙΚΗ ΤΗΣ εσωτερικη
   διαταξη (εικονα διπλα στο κειμενο, δικα της πλατη). Μολις της
   δοθηκε ελευθερο πλατος, η εικονα πηρε ο,τι ηθελε και η στηλη του
   κειμενου συρρικνωθηκε σε min-content: ΕΝΑ ΓΡΑΜΜΑ ΑΝΑ ΓΡΑΜΜΗ.

   ΤΟ ΜΑΘΗΜΑ: το 254px ΔΕΝ ηταν αυθαιρετο — ηταν το πλατος για το
   οποιο σχεδιαστηκαν ΟΛΕΣ οι παραλλαγες μεσα στο mobileInline.
   Αλλαζοντας το, καθε .article--* κανει ο,τι θελει. Οι παραλλαγες
   ειναι τουλαχιστον δεκα· δεν διορθωνονται μια-μια.

   ── Η ΔΙΟΡΘΩΣΗ: ΜΙΑ ΓΡΑΜΜΗ, ΥΠΕΡ ΤΟΥ ΣΧΕΔΙΑΣΜΟΥ, ΟΧΙ ΕΝΑΝΤΙΑ ──
   Ξαναδινουμε ΜΟΝΟ το overflow. Ολα τα υπολοιπα του mainsite —
   display: flex, nowrap, 254px, τα 16px περιθωριο, το padding-bottom
   για τη μπαρα, ο ::before γεμιστηρας στο τελος — ΔΟΥΛΕΥΟΥΝ ΗΔΗ
   σωστα· τους ελειπε μονο ο τροπος να κυλησουν.

   overflow-y: hidden ΡΗΤΑ: το σκετο overflow-x: auto δεν αρκει, γιατι
   ο αντιπαλος ειναι το ΣΥΝΤΟΜΟ overflow: hidden, που εχει θεσει ΚΑΙ
   τους δυο αξονες. Αν αφηναμε το y στο visible, ο browser το
   μετατρεπει σιωπηλα σε auto οταν ο αλλος αξονας ειναι auto — και
   θα εβγαινε κατακορυφη μπαρα μεσα στο μπλοκ.

   ── ΓΙΑΤΙ ΜΟΝΟ ΣΤΟ block_10 ────────────────────────────────────
   Η κλαση .mobileInline μπαινει απο το template και μπορει να
   υπαρχει και σε αλλα displays. Πιανουμε ΜΟΝΟ αυτο που μετρηθηκε.
   Για να μπει κι αλλο, προσθεσε το στο :is().

   ΕΙΔΙΚΟΤΗΤΑ: (0,3,0) εναντι (0,2,0). Χωρις !important.          */
@media (max-width: 766px) {
  :is(.view-display-id-block_10) .grid.mobileInline {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Η μπαρα δεν χρειαζεται να φαινεται — η κινηση ειναι με το
       δαχτυλο. Το padding-bottom: 12px του mainsite μενει, αρα αν
       ο browser δειξει μπαρα, εχει ηδη χωρο.                     */
    scrollbar-width: none;
  }
  :is(.view-display-id-block_10) .grid.mobileInline::-webkit-scrollbar {
    display: none;
  }
}


/* ═══ 29. Η ΛΕΥΚΗ ΖΩΝΗ ΠΙΣΩ ΑΠΟ ΤΑ BANNER ═════════════════════════
   βημα 254 · 26/10/2026

   ΤΟ ΛΕΥΚΟ ΚΕΝΟ ΔΕΝ ΕΙΝΑΙ ΚΕΝΟ — ΕΙΝΑΙ ΒΑΜΜΕΝΗ ΖΩΝΗ:

       mainsite.css / mainMag.css
       body section .banner:not(.b1x1):before {
         background-color: #f2f2f2;      ← ΤΟ ΛΕΥΚΟ
         width: 100vw;                   ← ΟΛΟ ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΟΘΟΝΗΣ
         height: 100%;
       }

   Καθε διαφημιστικη θεση εχει ενα ::before που ζωγραφιζει ανοιχτογκριζα
   ΟΛΟ το πλατος του παραθυρου πισω της. Σε ΑΝΟΙΧΤΟ site ειναι διακριτικη
   λωριδα που ξεχωριζει τη διαφημιση. Σε ΣΚΟΥΡΟ ειναι φωτεινη πλακα.

   ΓΙΑΤΙ ΔΕΝ ΕΙΧΕ ΠΙΑΣΤΕΙ ΣΤΟ ΠΕΡΑΣΜΑ ΤΟΥ ΣΚΟΥΡΟΥ ΘΕΜΑΤΟΣ: το
   mainsite εχει ΗΔΗ ενα .banner:before { background: 0 0 } — δηλαδη
   μηδενισμο. Οποιος ελεγξε «υπαρχει κανονας που το σβηνει;» ειδε ΝΑΙ
   και προσπερασε. Ο μηδενισμος ομως ειναι (0,1,1) και ο ζωγραφος
   (0,2,2): ο ΔΕΥΤΕΡΟΣ κερδιζει. Δυο κανονες για το ιδιο πραγμα, ο
   ενας ακυρωνει τον αλλο, και μετραει μονο ο βαρυτερος.

   ΤΟ ΥΨΟΣ ΔΕΝ ΤΟ ΔΙΝΕΙ ΑΥΤΟ: ειναι height: 100%, αρα ακολουθει τη
   ΘΕΣΗ. Τα ~250px ειναι το κανονικο μεγεθος της θεσης 300x250, που
   κρατιεται δεσμευμενο ακομα κι οταν δεν σερβιρεται διαφημιση (στο
   dev δεν σερβιρεται καμια). Το χρωμα το κανει ορατο· χωρις αυτο ο
   χωρος μενει αλλα δεν φαινεται.

   ΑΝ ΘΕΛΕΙΣ ΤΗ ΖΩΝΗ ΠΙΣΩ, ΑΛΛΑ ΣΚΟΥΡΗ: βαλε τιμη στο token, π.χ.
       html:root { --pg-banner-band: #1a1a1a; }
   Ενα σημειο, καμια αλλαγη επιλογεα.

   ΕΙΔΙΚΟΤΗΤΑ: html + body + section + .banner + :not() = (0,2,3)
   εναντι (0,2,2). Το html μπαινει ΜΟΝΟ γι' αυτο — χωρις αυτο θα
   ηταν ισοβαθμια και θα εκρινε η σειρα φορτωσης, που αλλαζει αναλογα
   με το αν η σελιδα φορτωνει και το mainMag (σελιδες αρθρου) η οχι.
   Σειρα φορτωσης που εξαρταται απο τον τυπο σελιδας ΔΕΝ ειναι βαση
   για κανονα.                                                      */
html body section .banner:not(.b1x1)::before {
  background-color: var(--pg-banner-band, transparent);
}


/* ═══ 30. ΤΑ TABS ΤΟΥ DRUPAL — ΔΙΑΒΑΖΟΝΤΑΙ ΣΕ ΣΚΟΥΡΟ ══════════════
   βημα 266 · 27/10/2026

   View / Edit / Delete / Revisions / Devel: ΜΟΝΟ το ενεργο φαινοταν,
   τα υπολοιπα ηταν μαυρα σε μαυρο.

   ── ΔΕΝ ΗΤΑΝ ΣΦΑΛΜΑ, ΗΤΑΝ ΠΑΡΑΛΕΙΨΗ ────────────────────────────
   Το article.css εξαιρει ΕΠΙΤΗΔΕΣ το admin UI απο τον χρωματισμο μας:
       :not(:is([id="toolbar-administration"], .toolbar, .contextual,
                .contextual-links, .tabs, .block-local-tasks-block, …) *)
   Σωστο σκεπτικο — δεν θελουμε να βαφουμε τη διαχειριστικη μπαρα. Αλλα
   τα tabs ΔΕΝ ειναι στη μπαρα: ειναι ΜΕΣΑ στη σελιδα, πανω στο δικο
   μας φοντο. Τα εξαιρεσαμε απο το βαψιμο και δεν τους δωσαμε τιποτα
   αλλο — αρα κρατησαν το a { color: #171717 } του mainsite.

   ΤΟ ΕΝΕΡΓΟ ΦΑΙΝΟΤΑΝ γιατι το .is-active παιρνει δικο του χρωμα. Ενα
   ορατο στοιχειο διπλα σε πεντε αορατα ειναι χειροτερο απο μηδεν
   ορατα: μοιαζει με σφαλμα δεδομενων, οχι με προβλημα χρωματος.

   ── ΤΟ ΒΛΕΠΕΙ ΜΟΝΟ Ο ΔΙΑΧΕΙΡΙΣΤΗΣ ──────────────────────────────
   Ο ανωνυμος επισκεπτης δεν παιρνει καθολου αυτο το markup. Μπαινει
   εδω και οχι στο article.css γιατι τα tabs εμφανιζονται σε ΚΑΘΕ
   σελιδα κομβου, ορου και προβολης — οχι μονο στα αρθρα.

   ΤΟ ΜΕΛΑΝΙ ΕΙΝΑΙ ΣΒΗΣΤΟ ΣΚΟΠΙΜΑ: εργαλεια διαχειρισης δεν πρεπει
   να τραβανε το ματι οσο κοιτας τη σελιδα ως αναγνωστης. Το ενεργο
   ειναι ενα σκαλι πιο φωτεινο, οχι χρωματιστο.

   ΕΙΔΙΚΟΤΗΤΑ: (0,2,1) εναντι του (0,0,1) του a. Με αερα.          */
.tabs a,
.block-local-tasks-block a {
  color: var(--pg-text-muted, #a0a0a0);
  text-decoration: none;
}

.tabs a.is-active,
.tabs .is-active > a,
.block-local-tasks-block a.is-active {
  color: var(--pg-text, #e8e8e8);
}

@media (hover: hover) and (pointer: fine) {
  .tabs a:hover,
  .block-local-tasks-block a:hover {
    color: var(--pg-section-accent, rgb(255 72 72));
  }
}

/* Σε σειρα, με αερα αναμεσα τους. Χωρις αυτο καθε tab ειναι δικη του
   γραμμη (ειναι <li> σε <ul>) και τα εξι πιανουν ~60px υψος πριν καν
   αρχισει το αρθρο.                                                */
.tabs.primary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: .8666rem;
}

.tabs.primary > li {
  margin: 0;
}

/* ── ΤΑ ΜΗΝΥΜΑΤΑ ΤΟΥ DRUPAL — ΒΗΜΑ 268 ────────────────────────────
   ΜΕΤΡΗΜΕΝΟ: div.messages--status, υψος 52px, ΑΟΡΑΤΟ. Μαζι με τα
   tabs (54px) ηταν τα ~106px κενου αναμεσα σε header και αρθρο που
   «δεν φαινοταν να οφειλεται σε τιποτα».

   ΑΚΡΙΒΩΣ ΤΟ ΙΔΙΟ ΜΟΤΙΒΟ ΜΕ ΤΑ TABS: το article.css εξαιρει τα
   .messages απο τον χρωματισμο μας (ειναι στη λιστα του :not()),
   σωστα — αλλα δεν τους εδωσε τιποτα αλλο. Μαυρο κειμενο σε μαυρο
   φοντο, με υψος.

   ΤΟ ΜΑΘΗΜΑ, ΔΕΥΤΕΡΗ ΦΟΡΑ ΣΕ ΜΙΑ ΩΡΑ: «εξαιρω απο το βαψιμο» ΔΕΝ
   σημαινει «δεν με αφορα». Σημαινει «θα το βαψω αλλιως». Οτιδηποτε
   ζει ΜΕΣΑ στη σελιδα, πανω στο δικο μας φοντο, χρειαζεται χρωμα —
   ακομα κι αν το βλεπει μονο ο διαχειριστης. Ενα αορατο κουτι με
   υψος ειναι χειροτερο απο ενα ασχημο: ψαχνεις το κενο για ωρες.

   ΚΡΑΤΑΜΕ ΤΑ ΧΡΩΜΑΤΑ ΤΟΥ DRUPAL ΓΙΑ ΤΗ ΣΗΜΑΣΙΑ: πρασινο επιτυχια,
   κοκκινο σφαλμα. Αλλαζει μονο το ΜΕΛΑΝΙ, ωστε να διαβαζεται — οχι
   η σηματοδοτηση, που ειναι πληροφορια.                           */
.messages {
  color: var(--pg-bg, #121212);
  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: .9333rem;
  line-height: 1.4;
  margin: 0 0 16px;
}

.messages a {
  color: inherit;
  text-decoration: underline;
}

/* ΑΝ ΔΕΝ ΕΧΕΙ ΦΟΝΤΟ ΑΠΟ ΤΟ DRUPAL, ΤΟ ΔΙΝΟΥΜΕ ΕΜΕΙΣ.
   Το :not([class*="--"]) πιανει το σκετο .messages, δηλαδη αυτο που
   ΔΕΝ ειναι --status / --warning / --error και αρα δεν εχει δικο του
   χρωμα σημασιας.                                                 */
.messages:not([class*="--"]) {
  background-color: var(--pg-surface-1, #1a1a1a);
  color: var(--pg-text, #e8e8e8);
  padding: 10px 14px;
}


/* ═══ 31. ΤΟ ΟΡΙΖΟΝΤΙΟ ΣΚΡΟΛ ΣΤΟ ΚΙΝΗΤΟ ══════════════════════════
   βημα 281 · 02/11/2026

   ΜΕΤΡΗΜΕΝΟ: viewport 440px, πλατος εγγραφου 442px. Δυο pixel — αρκετα
   για να «κανει δεξια αριστερα» ολη η σελιδα.

   ── ΓΙΑΤΙ Ο ΠΙΝΑΚΑΣ ΥΠΕΡΧΕΙΛΙΣΗΣ ΔΕΝ ΕΔΕΙΞΕ ΕΝΟΧΟ ───────────────
   Ολα τα στοιχεια εβγαιναν 442, κανενα μεμονωμενο. Αυτη ΕΙΝΑΙ η
   υπογραφη: το querySelectorAll ΔΕΝ ΒΛΕΠΕΙ ΨΕΥΔΟΣΤΟΙΧΕΙΑ. Οταν η
   σαρωση δειχνει «ολα ισα με το πλατος του εγγραφου» και κανενα
   μεγαλυτερο, ψαξε ::before / ::after.

   ── Η ΑΙΤΙΑ: width: 100vw ───────────────────────────────────────
   grep στο mainMag.css → ΔΕΚΑΤΕΣΣΕΡΑ 100vw, τα περισσοτερα μεσα σε
   @media (max-width: 766px), και τα μισα σε ::before:

       .header.sticky                       γρ 22726
       body section .banner:not(.b1x1):before  γρ 24832
       .flowSection__asideBanner:before     γρ 26481
       .article--portraitInline:before      γρ 22828   κ.α.

   ΤΟ 100vw ΔΕΝ ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΜΕ ΤΟ 100%: μετραει το παραθυρο
   ΜΑΖΙ με τη μπαρα κυλισης, ενω το 100% μετραει τον περιεκτη ΧΩΡΙΣ
   αυτη. Η διαφορα ειναι ακριβως το πλατος της μπαρας — εδω 2px.
   Καθε ενα απο τα δεκατεσσερα ειναι εν δυναμει οριζοντιο σκρολ.

   ── ΔΥΟ ΔΙΟΡΘΩΣΕΙΣ, ΟΧΙ ΔΕΚΑΤΕΣΣΕΡΙΣ ───────────────────────────
   Το κυνηγι ενα-ενα θα σπαγε πραγματα (καποια ειναι σκοπιμα
   full-bleed, π.χ. το .gallery). Αντ' αυτου: μια γενικη ασπιδα που
   κοβει ο,τι ξεφυγει, και ΜΙΑ στοχευμενη για το μονο που ειναι
   πλεον ΑΧΡΗΣΤΟ.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Η ΑΣΠΙΔΑ: clip, ΟΧΙ hidden ───────────────────────────────
   ΑΥΤΗ Η ΔΙΑΚΡΙΣΗ ΜΑΣ ΕΧΕΙ ΗΔΗ ΚΟΣΤΙΣΕΙ ΜΙΑ ΜΕΡΑ ΔΙΑΓΝΩΣΗΣ στο
   thessvoice: το overflow-x: hidden σε html/body φτιαχνει ΠΕΡΙΕΚΤΗ
   ΚΥΛΙΣΗΣ, και τοτε καθε position: sticky ΜΕΣΑ του σταματαει να
   κολλαει — σιωπηλα, χωρις σφαλμα. Το overflow-x: clip κοβει το ιδιο
   πραγμα ΧΩΡΙΣ να γινει περιεκτης κυλισης.

   Εδω εχουμε sticky σε τουλαχιστον τρια σημεια (banner στηλες,
   .articleActions, .stickyCol). Το hidden θα τα σκοτωνε ολα.

   ΜΟΝΟ ΣΤΟ ΚΙΝΗΤΟ: σε desktop δεν υπαρχει το προβλημα, και μια
   ασπιδα που δεν χρειαζεται ειναι μια ασπιδα που κρυβει το επομενο
   πραγματικο σφαλμα.                                              */
@media (max-width: 766px) {
  html body {
    overflow-x: clip;
  }
}

/* ── 2. Η ΛΩΡΙΔΑ ΤΩΝ BANNER ΦΕΥΓΕΙ ΕΝΤΕΛΩΣ ───────────────────────
   Το βημα 254 την εκανε ΔΙΑΦΑΝΗ (ηταν ανοιχτογκριζα σε σκουρη
   σελιδα). Απο τοτε ειναι ενα κουτι 100vw × 100% που δεν ζωγραφιζει
   ΤΙΠΟΤΑ και μονο σπρωχνει το πλατος.

   content: none ΚΑΙ ΟΧΙ display: none: το ψευδοστοιχειο δεν
   παραγεται καθολου — ουτε κουτι, ουτε υπολογισμος. Ιδιο σκεπτικο
   με το βημα 280.

   ΔΕΝ ΧΑΝΕΤΑΙ ΕΤΙΚΕΤΑ: το .banner:before του mainMag τυπωνει
   attr(data-bannertext) («Advertisement»), αλλα ΑΥΤΟΣ ο κανονας το
   ειχε ηδη αντικαταστησει με content: '' — ειναι το ιδιο
   ψευδοστοιχειο, ενα ανα στοιχειο. Στο κινητο η ετικετα ειχε ηδη
   χαθει πριν απο εμας.                                            */
@media (max-width: 766px) {
  html body section .banner:not(.b1x1)::before {
    content: none;
  }
}