/* ═══════════════════════════════════════════════════════════════════════
   ΣΕΛΙΔΑ ΑΡΘΡΟΥ — σκουρο θεμα
   popup.gr · βημα 077 · 05/10/2026

   ΤΟ ΠΡΟΒΛΗΜΑ
   Η σελιδα αρθρου φορτωνει το mainMag.css, γραμμενο για ΑΣΠΡΟ φοντο.
   Δεν ειναι ενα-δυο χρωματα: το mainMag.css μηδενιζει ΟΛΗ την παλετα

       body.lookLayout {
         --lightColor: #000;  --mediumColor: #000;  --regularColor: #000;
         --darkRegularColor: #000;  --darkMediumColor: #000;
         --darkLightColor: #000;    background-color: #f4f4f4;
       }                                                  (0,1,1)

   δηλαδη καθε τονος, περιγραμμα, ετικετα και κουμπι της σελιδας γινεται
   μαυρο — πανω σε σκουρο φοντο. Γι' αυτο «τα γραμματα ειναι ολα σκουρα».

   Η ΛΥΣΗ
   Πρωτα ξαναοριζουμε τις ΕΞΙ μεταβλητες (ενοτητα 1). Αυτο μονο διορθωνει
   δεκαδες κανονες μαζεμενα. Μετα πιανουμε ενα-ενα τα σημεια που εχουν
   καρφωτο #171717 / #000 / #fbfbf8 / #f4f4f4 και δεν περνανε απο
   μεταβλητη (ενοτητες 2-13).

   ΕΜΒΕΛΕΙΑ
   Ολα δενουν στο body.singleArticlePage / body.galleryArticlePage — ΟΧΙ
   στο .lookLayout, που το φορανε και οι σελιδες κατηγοριας. Ετσι τιποτα
   εδω δεν αγγιζει αλλη σελιδα.

   ΠΡΟΣΟΧΗ: το «Σχετικο Αρθρο» χτιζεται με PHP στο popup_v1.theme και
   εχει inline style. Inline δεν το νικα stylesheet — μονο !important.
   Ενοτητα 13.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 1. Η ΠΑΛΕΤΑ ══════════════════════════════════════════════════════
   Αντιπαλος: body.lookLayout (0,1,1).  Εμεις: html body.<κλαση> (0,1,2).

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

     --lightColor        φοντο επιφανειων (preview, formContainer, tile)
     --mediumColor       κειμενο σε σκουρο + ανοιχτα chips (button--tag)
     --regularColor      ο τονος (hover, εικονιδια, κατηγοριες)
     --darkRegularColor  κειμενο (labels φορμων, infoBox, τιτλοι)
     --darkMediumColor   περιγραμματα & φοντο πεδιων
     --darkLightColor    σβησμενο κειμενο

   Στη σελιδα αρθρου ΔΕΝ υπαρχουν τα .categorySection--darkWithBg /
   .article--movieMedium που χρησιμοποιουν το --darkRegularColor ως
   ΦΟΝΤΟ — γι' αυτο εδω μπορει να ειναι ανετα χρωμα κειμενου.          */
html body.singleArticlePage,
html body.galleryArticlePage {
  --lightColor:        #242424;
  --mediumColor:       var(--pg-text, #e8e8e8);
  --regularColor:      var(--pg-brand-on-dark, #e55d65);
  --darkRegularColor:  var(--pg-text, #e8e8e8);
  --darkMediumColor:   var(--pg-border, #2e2e2e);
  --darkLightColor:    var(--pg-text-muted, #a0a0a0);
  background-color:    var(--pg-bg, #121212);
}


/* ═══ 2. ΚΕΙΜΕΝΟ ΚΑΙ LINKS ═════════════════════════════════════════════
   Το χρωμα του body το εβαλε το tokens.css (βημα 076). Ομως το
   `a { color:#171717 }` του mainMag ειναι ΔΙΚΟ του χρωμα στο link —
   η κληρονομια δεν το πιανει, θελει ρητο κανονα.

   `color: inherit` και οχι σταθερη τιμη: ετσι ενα link μεσα σε σβησμενο
   meta μενει σβησμενο, μεσα σε τιτλο μενει τιτλος.

   Τα :not() κρατουν εξω τις ΕΤΙΚΕΤΕΣ κατηγοριας — ειναι <a> με μαυρο
   φοντο και ασπρα γραμματα, παει πανω στη φωτογραφια, σωστο ως εχει.

   Το τελευταιο :not() κραταει εξω ΟΛΟ ΤΟ ΔΙΑΧΕΙΡΙΣΤΙΚΟ — δες ενοτητα 16
   για το γιατι. Γραφεται [id="toolbar-administration"] και οχι
   #toolbar-administration επιτηδες: το ID θα ανεβαζε την ειδικοτητα
   του κανονα στο (1,0,0) και θα αρχιζε να νικαει πραγματα που δεν
   πρεπει. Το attribute selector μετραει σαν κλαση.                    */
/* ΒΗΜΑ 305 — ΠΡΟΣΤΕΘΗΚΕ ΤΟ .header ΣΤΙΣ ΕΞΑΙΡΕΣΕΙΣ.

   ΤΙ ΕΣΠΑΓΕ: ο κανονας βαφει ΚΑΘΕ <a> της σελιδας αρθρου με
   color: inherit — και πιανε και τον HEADER. Η σειρα υποκατηγοριων
   κληρονομουσε το ανοιχτο χρωμα του header, αρα ΟΛΟΙ οι συνδεσμοι
   της εβγαιναν #e8e8e8 και η τρεχουσα υποκατηγορια δεν ξεχωριζε απο
   τις υπολοιπες. ΜΕΤΡΗΘΗΚΕ σε screenshot (αποκωδικοποιηση PNG):
   «PEOPLE» και «CELEBRITIES» ΚΑΙ ΤΑ ΔΥΟ rgb(232,232,232).

   ΓΙΑΤΙ ΕΧΑΝΑΝ ΟΙ ΚΑΝΟΝΕΣ ΤΟΥ HEADER — αριθμητικα:
     εδω                                            (0,6,3)
     .header×4 .header__subcats :is(a,span).is-current (0,6,1)
     .header×4 .header__subcats a                      (0,5,1)
   Τα τρια html/body/a δινουν σε ΑΥΤΟΝ τον κανονα δυο στοιχεια
   παραπανω. Δεν ηταν θεμα τιμης — ηταν θεμα εμβελειας.

   ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΑΥΞΗΣΗ ΕΙΔΙΚΟΤΗΤΑΣ ΣΤΟ header.css:
   το article.css ειναι το φυλλο ΤΟΥ ΑΡΘΡΟΥ. Ο header ειναι σκελετος
   του site, οχι περιεχομενο — εχει ηδη δικους του κανονες και σε
   ΚΑΘΕ ΑΛΛΗ σελιδα ειναι εκεινοι που ισχυουν. Η λιστα εξαιρεσεων
   υπαρχει ακριβως γι' αυτο: κραταει εξω ο,τι δεν ειναι αρθρο
   (διαχειριστικο, tabs, messages). Ο header ανηκει στην ιδια
   κατηγορια. Η αυξηση ειδικοτητας θα διορθωνε ΜΙΑ ιδιοτητα και θα
   αφηνε το ιδιο λαθος να ξαναχτυπησει στην επομενη.                */
html body:is(.singleArticlePage, .galleryArticlePage)
  a:not(.article__category):not(.article__parentCategory):not(.articleSingle__category):not(.button):not(:is(
    [id="toolbar-administration"], .toolbar, .contextual, .contextual-links,
    .tabs, .block-local-tasks-block, .action-links, .local-actions,
    .messages, .ui-dialog, .region-highlighted, .header) *) {
  color: inherit;
}

/* Μεσα στο σωμα του αρθρου τα links ΠΡΕΠΕΙ να ξεχωριζουν. Το mainMag
   τους βαζει ηδη underline + semibold· προσθετουμε τον τονο.          */
html body:is(.singleArticlePage, .galleryArticlePage)
  :is(.articleSingle__description, .articleCenterContainer__content, .articleQuote__content, .quiz__message)
  a:not(.article__category):not(.article__parentCategory):not(.button) {
  color: var(--pg-brand-on-dark, #e55d65);
  text-decoration-color: currentColor;
}


/* ═══ 3. ΕΠΙΚΕΦΑΛΙΔΕΣ ══════════════════════════════════════════════════
   `h1,h2,…,h6 { border-top: 2px solid #171717 }` — μαυρη γραμμη πανω
   απο καθε επικεφαλιδα, αορατη στο σκουρο.                            */
html body:is(.singleArticlePage, .galleryArticlePage)
  :is(h1, h2, h3, h4, h5, h6) {
  border-top-color: var(--pg-border, #2e2e2e);
}


/* ═══ 4. ΕΙΣΑΓΩΓΗ, ΠΕΡΙΛΗΨΗ, ΠΑΡΑΘΕΣΕΙΣ ═══════════════════════════════
   Εδω το mainMag βαζει ΡΗΤΟ #171717 (και #999 στο intro), καποια με
   !important. Τα παιρνουμε ενα-ενα.                                   */
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__intro,
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__intro p {
  color: var(--pg-text-muted, #a0a0a0);
  border-bottom-color: var(--pg-border, #2e2e2e);
}

html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__summary {
  border-left-color: var(--pg-border, #2e2e2e);
}

/* Το mainMag γραφει `color:#171717` ΧΩΡΙΣ !important στο
   .articleSingle__summaryContent p, αλλα με !important στα font-*.
   Δικο μας (0,1,4) αρκει — δεν χρειαζεται !important.                 */
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__summaryContent,
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__summaryContent p,
html body:is(.singleArticlePage, .galleryArticlePage) blockquote:not(.tiktok-embed),
html body:is(.singleArticlePage, .galleryArticlePage) blockquote:not(.tiktok-embed) p,
html body:is(.singleArticlePage, .galleryArticlePage) blockquote:not(.tiktok-embed) p .firstletterSmall:first-letter {
  color: var(--pg-text, #e8e8e8);
}


/* ═══ 5. ΛΙΣΤΕΣ ════════════════════════════════════════════════════════
   Οι κουκιδες ειναι ::before με background-color:#171717 — εξαφανισμενες.
   Οι αριθμοι (ol) κληρονομουν χρωμα, ειναι ηδη οκ.                     */
html body:is(.singleArticlePage, .galleryArticlePage)
  :is(.articleSingle__description, .articleCenterContainer__content)
  ul:not(.recipeInfo) li::before {
  background-color: var(--pg-text-muted, #a0a0a0);
}


/* ═══ 6. ΛΕΖΑΝΤΕΣ ══════════════════════════════════════════════════════
   Δυο ξεχωριστες περιπτωσεις:
   α) `figcaption { color: grey }` — #808080, μολις 2.8:1 στο σκουρο
   β) `.lookLayout … .imageBlockCaption { color:#000 }` με μαυρη
      παυλα ::before — και τα δυο αορατα.                              */
html body:is(.singleArticlePage, .galleryArticlePage) figcaption,
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__galleryImage figcaption,
html body:is(.singleArticlePage, .galleryArticlePage) :is(.articleSingle__image, .articleSingle__slider) figcaption,
html body:is(.singleArticlePage, .galleryArticlePage) .largeImage figcaption,
html body:is(.singleArticlePage, .galleryArticlePage) .articleSection__content--gallery figcaption {
  color: var(--pg-text-muted, #a0a0a0);
}

html body.lookLayout:is(.singleArticlePage, .galleryArticlePage)
  .articleSingle__description .imageBlock .imageBlockCaption {
  color: var(--pg-text-muted, #a0a0a0);
}

html body.lookLayout:is(.singleArticlePage, .galleryArticlePage)
  .articleSingle__description .imageBlock .imageBlockCaption::before {
  background-color: var(--pg-text-muted, #a0a0a0);
}

/* Η λεζαντα της full-width εικονας ειναι ΑΣΠΡΟ ΚΟΥΤΙ (#fbfbf8) πανω
   στη φωτογραφια. Το κανουμε σκουρο, οχι διαφανο: πατα σε εικονα και
   θελει φοντο για να διαβαζεται.                                      */
html body:is(.singleArticlePage, .galleryArticlePage) .fullWidthImage figcaption {
  background-color: var(--pg-bg, #121212);
  color: var(--pg-text-muted, #a0a0a0);
}


/* ═══ 7. ΔΙΑΧΩΡΙΣΤΙΚΑ ══════════════════════════════════════════════════
   Μαζεμενα: ολες οι μαυρες γραμμες (2px και 4px) που χωριζουν ενοτητες
   μεσα στο αρθρο. Αλλαζουμε ΜΟΝΟ το χρωμα — τα παχη ειναι σχεδιαστικη
   αποφαση του mainMag και μενουν.                                     */
html body:is(.singleArticlePage, .galleryArticlePage) :is(
  .articleSingle--withBorder,
  .articleSingle--withBorderSmall,
  .articleSingle__tags,
  .articleSingle__endLinks,
  .articleSingle__links,
  .related,
  .related__title,
  .categoriesList,
  .articleExtrasList,
  .articleCenterContainer__content,
  .articleSingle--recipe .articleSingle__content,
  .articleSingle--tribute .articleSingle__content,
  .articleSingle__authorDetailsImage,
  .articleInfoList__item,
  .articleQuote__content,
  .listWithHeader,
  .infoList,
  .tagsList__content,
  .simpleText__intro,
  .articleTabs__list li a,
  .filterGroup
) {
  border-color: var(--pg-border, #2e2e2e);
}

/* Τα ::before/::after που ειναι ΓΡΑΜΜΗ-με-background, οχι border.     */
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle--centered .articleSingle__content::after,
html body:is(.singleArticlePage, .galleryArticlePage) .listWithHeader::before,
html body:is(.singleArticlePage, .galleryArticlePage) .infoList::before,
html body:is(.singleArticlePage, .galleryArticlePage) .infoList::after,
html body:is(.singleArticlePage, .galleryArticlePage) .article__info::after,
html body:is(.singleArticlePage, .galleryArticlePage) .article--plain::after,
html body:is(.singleArticlePage, .galleryArticlePage) .sidebarItem__title::before,
html body:is(.singleArticlePage, .galleryArticlePage) .linkMore::before,
html body:is(.singleArticlePage, .galleryArticlePage) .vote::after,
html body:is(.singleArticlePage, .galleryArticlePage) .gender::after {
  background-color: var(--pg-border, #2e2e2e);
}

/* Οι ετικετες tag: `border: 2px solid #000` + κοκκινο κειμενο.        */
html body:is(.singleArticlePage, .galleryArticlePage) .categoriesList__link {
  border-color: var(--pg-border, #2e2e2e);
  color: var(--pg-text-muted, #a0a0a0);
}

@media (hover: hover) and (pointer: fine) {
  html body:is(.singleArticlePage, .galleryArticlePage) .categoriesList__link:hover {
    color: var(--pg-bg, #121212);
    background-color: var(--pg-text, #e8e8e8);
  }
}


/* ═══ 8. ΣΥΝΤΑΚΤΗΣ ═════════════════════════════════════════════════════
   Το `.articleSingle__author` ειναι μια γραμμη με το ονομα σε «τρυπα»:
   μαυρη γραμμη 2px που περναει πισω, και το <span> εχει φοντο #fbfbf8
   για να την κοψει. Σκουραινουμε και τα δυο — αλλιως μενει ΑΣΠΡΟ
   πλακιδιο μεσα στη σελιδα.                                           */
html body:is(.singleArticlePage, .galleryArticlePage) :is(.articleSingle__author, .articlePreview__author)::before {
  background-color: var(--pg-border, #2e2e2e);
}

html body:is(.singleArticlePage, .galleryArticlePage) :is(.articleSingle__author, .articlePreview__author) span,
html body:is(.singleArticlePage, .galleryArticlePage) .linkMore span {
  background-color: var(--pg-bg, #121212);
}

html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__authorDetailsContent a,
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__authorDetailsContentTitle,
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__authorDetailsContent span {
  color: var(--pg-text, #e8e8e8);
}


/* ═══ 9. ΕΝΕΡΓΕΙΕΣ, ΚΟΙΝΟΠΟΙΗΣΗ, ΤΕΥΧΟΣ ══════════════════════════════ */
html body:is(.singleArticlePage, .galleryArticlePage) .articleActions__link {
  border-color: var(--pg-border, #2e2e2e);
  color: var(--pg-text, #e8e8e8);
  /* ΒΗΜΑ 299 — ΙΔΙΟΣ ΧΡΟΝΟΣ ΜΕ ΤΑ ΚΟΥΜΠΙΑ ΚΟΙΝΟΠΟΙΗΣΗΣ.
     Τα .st-btn εχουν ηδη transition: all .3s ease (mainMag:15910),
     τα A− / A+ ΚΑΜΙΑ (mainMag:9213). Διπλα-διπλα στην ιδια στηλη, το
     ενα εσβηνε απαλα και το αλλο εκοβε αποτομα — διαφορα που δεν
     φαινεται σε screenshot αλλα γινεται αμεσως αντιληπτη.
     ΟΧΙ transition: all: γραφουμε ΜΟΝΟ οσα αλλαζουν. Το «all»
     υποσχεται μεταβαση και σε ιδιοτητες που καποτε θα προστεθουν
     χωρις να το θελουμε.                                           */
  transition: background-color .3s ease,
              border-color     .3s ease,
              color            .3s ease;
}

/* ═══ ΤΟ HOVER ΕΙΝΑΙ ΕΝΑ ΓΙΑ ΟΛΗ ΤΗ ΣΤΗΛΗ — ΒΗΜΑ 299 ══════════════
   Ζητηθηκε: τα τεσσερα κουμπια κοινοποιησης και τα δυο του μεγεθους
   γραμματων να κανουν ΤΟ ΙΔΙΟ στο hover.

   ΤΙ ΕΚΑΝΑΝ ΠΡΙΝ — δυο εντελως διαφορετικα πραγματα:
     A− / A+   αντιστροφη: ανοιχτο φοντο, σκουρο συμβολο
     .st-btn   mainMag:27722 → φοντο #171717 (σχεδον αορατο σε
               σκουρο) ΚΑΙ filter: none, που ΕΠΑΝΕΦΕΡΕ τα χρωματα
               καθε μαρκας. Δηλαδη το ενα αντιστρεφοταν και το αλλο
               γινοταν πολυχρωμο.

   ΤΩΡΑ: και τα εξι αντιστρεφονται. Ανοιχτος κυκλος, σκουρο συμβολο.
   Το διαλεξα αυτο και οχι το αντιστροφο επειδη ΥΠΗΡΧΕ ΗΔΗ στα
   A− / A+ — επεκτεινουμε κατι δοκιμασμενο αντι να εφευρουμε τριτο.

   brightness(0) στο <img>: το SVG ερχεται απο το sharethis CDN, αρα
   δεν βαφεται με color (βημα 287). Το brightness(0) το ισοπεδωνει σε
   ΚΑΘΑΡΟ ΜΑΥΡΟ — ακριβως το ρολο που παιζει το color: var(--pg-bg)
   στα A− / A+.

   ΚΑΜΙΑ ΚΙΝΗΣΗ, ΜΟΝΟ ΧΡΩΜΑ: ο κανονας των βηματων 112/146.

   ΕΙΔΙΚΟΤΗΤΑ εναντι του mainMag, που γραφει !important:
     δικο μας  html body:is(…) .st-btn:hover      (0,3,2)
     mainMag    .sharethis-… .st-btn:hover        (0,3,0)
   Μεταξυ δηλωσεων !important κρινει η ειδικοτητα — κερδιζουμε.     */
@media (hover: hover) and (pointer: fine) {
  html body:is(.singleArticlePage, .galleryArticlePage) .articleActions__link:hover,
  html body:is(.singleArticlePage, .galleryArticlePage) .st-btn:hover {
    background-color: var(--pg-text, #e8e8e8) !important;
    border-color: var(--pg-text, #e8e8e8) !important;
    color: var(--pg-bg, #121212) !important;
  }

  /* ΒΗΜΑ 300 — ΤΟ ΣΥΜΒΟΛΟ ΤΩΝ A− / A+ ΕΜΕΝΕ ΛΕΥΚΟ ΣΕ ΛΕΥΚΟ.
     Το κουμπι γινοταν ολολευκος δισκος: το φοντο αλλαζε, το γραμμα οχι.

     Ο ΜΟΝΟΣ ΓΝΩΣΤΟΣ ΑΝΤΙΠΑΛΟΣ ειναι mainMag:27376
         .articleActions__link:hover { background-color:#171717; color:#fff }
     σε (0,2,0), που ο δικος μας (0,3,2) ΘΑ ΕΠΡΕΠΕ να νικαει — και το
     background ΟΝΤΩΣ το νικουσε. Αρα το color το χανε αλλου. Ελεγχθηκαν
     και αποκλειστηκαν: το σερβιριζομενο mainMag (ιδιο byte-προς-byte με
     το τοπικο), το tokens.css, το soul_v1/node.css (98 bytes, κενο), και
     καθε κανονας :hover του sections.css. Δεν βρεθηκε η πηγη στατικα.

     ΑΝΤΙ ΓΙΑ ΑΛΛΟ ΚΥΝΗΓΙ, ΔΙΝΟΥΜΕ ΤΗΝ ΙΔΙΑ ΕΓΓΥΗΣΗ ΜΕ ΤΑ ΑΛΛΑ ΤΕΣΣΕΡΑ:
     εκεινα δεν χανουν ποτε γιατι το χρωμα τους το επιβαλλει
     filter: brightness(0) !important — μηχανισμος που δεν συγκρινεται με
     κανεναν. Εδω: !important στο color ΚΑΙ ρητος κανονας στο ::before.

     ΓΙΑΤΙ ΚΑΙ ΤΑ ΔΥΟ: το συμβολο ειναι ψευδοστοιχειο iconfont. Αν το
     χρωμα χανεται σε ΕΙΔΙΚΟΤΗΤΑ, το !important το λυνει. Αν καποιος
     βαφει το ::before ΑΠΕΥΘΕΙΑΣ, τοτε η κληρονομια απο τον <a> δεν
     παιζει ρολο οσο !important κι αν ειναι — χρειαζεται κανονας στο
     ιδιο το ψευδοστοιχειο. Τα δυο μαζι καλυπτουν και τις δυο
     περιπτωσεις· χωριστα, καθενα καλυπτει τη μια.                   */
  html body:is(.singleArticlePage, .galleryArticlePage) .articleActions__link:hover::before {
    color: var(--pg-bg, #121212) !important;
  }

  html body:is(.singleArticlePage, .galleryArticlePage) .st-btn:hover img {
    filter: brightness(0) !important;
  }
}

/* .followList: στο singleArticlePage το mainMag γραφει ΡΗΤΑ #171717
   και στον τιτλο και στα links — δυο ξεχωριστοι κανονες.              */
html body:is(.singleArticlePage, .galleryArticlePage) .followList__title,
html body:is(.singleArticlePage, .galleryArticlePage) .followList__items li a,
html body:is(.singleArticlePage, .galleryArticlePage) .followList__items li a strong {
  color: var(--pg-text, #e8e8e8);
}

html body:is(.singleArticlePage, .galleryArticlePage) .followList__title,
html body:is(.singleArticlePage, .galleryArticlePage) .followList__items li {
  border-color: var(--pg-border, #2e2e2e);
}

html body:is(.singleArticlePage, .galleryArticlePage) .issue__label,
html body:is(.singleArticlePage, .galleryArticlePage) .issue__number,
html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__update,
html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__link,
html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__row a,
html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__row span,
html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__action,
html body:is(.singleArticlePage, .galleryArticlePage) .actionsList__item--date span,
html body:is(.singleArticlePage, .galleryArticlePage) .actionsList__link {
  color: var(--pg-text, #e8e8e8);
}

html body:is(.singleArticlePage, .galleryArticlePage) .actionsList__item {
  border-bottom-color: var(--pg-border, #2e2e2e);
}

/* .actions__icon: μαυρος κυκλος με ασπρο εικονιδιο — στο σκουρο χανεται
   το σχημα. Τον γυριζουμε αναστροφα.                                  */
html body:is(.singleArticlePage, .galleryArticlePage) .actions__icon,
html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__icon {
  background-color: var(--pg-surface-2, #222222);
  color: var(--pg-text, #e8e8e8);
}


/* ═══ 10. ΑΝΟΙΧΤΕΣ ΝΗΣΙΔΕΣ ════════════════════════════════════════════
   Κουτια που το mainMag τα γεμιζει #f4f4f4 / #fbfbf8 / #e4e4e4 —
   λευκα πλακιδια μεσα στη σκουρη σελιδα.                              */
html body:is(.singleArticlePage, .galleryArticlePage) :is(
  .article--heroMag .article__content,
  .article--slide .article__content,
  .article--slide,
  .articlePreview__content,
  .imageTiles__content,
  .quiz__inner,
  .lookGuide__headerContent,
  .lookSubscribe__headerContent,
  .customBanner
) {
  background-color: var(--pg-surface-1, #1a1a1a);
}

html body:is(.singleArticlePage, .galleryArticlePage) .illustrationContainer::before {
  background-color: var(--pg-surface-1, #1a1a1a);
}

html body:is(.singleArticlePage, .galleryArticlePage) .customBanner__title,
html body:is(.singleArticlePage, .galleryArticlePage) .customBanner__subtitle,
html body:is(.singleArticlePage, .galleryArticlePage) .imageTiles__content p,
html body:is(.singleArticlePage, .galleryArticlePage) .illustrationContainer__title,
html body:is(.singleArticlePage, .galleryArticlePage) .illustrationContainer p,
html body:is(.singleArticlePage, .galleryArticlePage) .lookGuide__headerTitle,
html body:is(.singleArticlePage, .galleryArticlePage) .ctaBox__title,
html body:is(.singleArticlePage, .galleryArticlePage) .cta__col p,
html body:is(.singleArticlePage, .galleryArticlePage) .subscribe p {
  color: var(--pg-text, #e8e8e8);
}


/* ═══ 11. ΚΟΥΜΠΙΑ ΚΑΙ ΦΟΡΜΕΣ ══════════════════════════════════════════
   Στο lookLayout τα κουμπια ειναι «περιγραμμα 4px #000 + μαυρα
   γραμματα + διαφανο φοντο» — στο σκουρο μενει μονο ενα κενο.
   Ο αντιπαλος εχει ΤΕΡΑΣΤΙΑ εμβελεια (δεκα :not()). Αντι να την
   κυνηγησουμε, βαζουμε !important.

   Δενουμε ΜΟΝΟ στην κλαση .button — οχι στο σκετο στοιχειο <button>.
   Το σκετο θα επιανε και τα κουμπια του audio player (.controls__play
   ειναι ΑΣΠΡΟΣ κυκλος με μαυρο εικονιδιο) και τα «κλεισε» των popup,
   και θα τα εκανε ανοιχτο-σε-ανοιχτο.                                 */
html body:is(.singleArticlePage, .galleryArticlePage)
  .button:not(.disabled):not(.js-form-submit):not(.form-submit):not(.button--primary):not(.button--danger):not(:is(
    [id="toolbar-administration"], .toolbar, .contextual, .contextual-links,
    .tabs, .block-local-tasks-block, .action-links, .local-actions,
    .messages, .ui-dialog, .region-highlighted) *) {
  border-color: var(--pg-text, #e8e8e8) !important;
  color: var(--pg-text, #e8e8e8) !important;
}

html body:is(.singleArticlePage, .galleryArticlePage) .button--dark:not(.disabled):not(.js-form-submit),
html body:is(.singleArticlePage, .galleryArticlePage) .button--black:not(.disabled):not(.js-form-submit) {
  background-color: var(--pg-surface-2, #222222) !important;
  color: var(--pg-text, #e8e8e8) !important;
}

html body:is(.singleArticlePage, .galleryArticlePage) .formGroup__field,
html body:is(.singleArticlePage, .galleryArticlePage) .searchFieldGroup__field,
html body:is(.singleArticlePage, .galleryArticlePage) .select__value {
  background-color: var(--pg-surface-1, #1a1a1a);
  border-color: var(--pg-border, #2e2e2e);
  color: var(--pg-text, #e8e8e8);
}

html body:is(.singleArticlePage, .galleryArticlePage) .formGroup label,
html body:is(.singleArticlePage, .galleryArticlePage) .formGroup__label,
html body:is(.singleArticlePage, .galleryArticlePage) .formGroup__text,
html body:is(.singleArticlePage, .galleryArticlePage) .formGroup__info,
html body:is(.singleArticlePage, .galleryArticlePage) .checkbox-container label,
html body:is(.singleArticlePage, .galleryArticlePage) .form__title,
html body:is(.singleArticlePage, .galleryArticlePage) .form__subtitle {
  color: var(--pg-text, #e8e8e8);
}

html body:is(.singleArticlePage, .galleryArticlePage) .checkbox-container label::after {
  border-color: var(--pg-text-muted, #a0a0a0);
}

html body:is(.singleArticlePage, .galleryArticlePage) .checkbox-container label::before {
  color: var(--pg-bg, #121212);
}

/* Το newsletterSnippet ειναι ΕΠΙΤΗΔΕΣ ασπρο κουτι με κοκκινα γραμματα —
   το αφηνουμε. Μονο το πεδιο του κρατα αρκετη αντιθεση.               */
html body:is(.singleArticlePage, .galleryArticlePage) .newsletterSnippet .formGroup__field {
  background-color: #f2f2f2;
  border-color: #cfcfcf;
  color: #171717;
}


/* ═══ 12. HOVER ════════════════════════════════════════════════════════
   Το mainMag, στο ΤΕΛΟΣ του αρχειου, γραφει

       .article__title:hover { color: #171717; text-decoration-color: #000 }

   που νικαει τον προηγουμενο του κανονα `color: var(--regularColor)`.
   Στα «Σχετικα» του αρθρου λοιπον ο τιτλος ΣΚΟΤΕΙΝΙΑΖΕΙ στο hover —
   το αντιθετο απο την αρχικη, που την φτιαξαμε κοκκινη.

   ΒΗΜΑ 295 — ΤΟ .articleSingle__title ΒΓΗΚΕ ΑΠΟ ΑΥΤΗ ΤΗ ΛΙΣΤΑ.
   Ειναι ο ΚΥΡΙΟΣ τιτλος του αρθρου: <h1 class="articleSingle__title">,
   επιβεβαιωμενο στο ζωντανο HTML. ΔΕΝ ΕΙΝΑΙ ΣΥΝΔΕΣΜΟΣ — δειχνει τη
   σελιδα στην οποια ηδη βρισκεσαι. Το :hover του CSS ομως δεν ρωταει
   αν το στοιχειο ειναι κλικαμπλ· πιανει οποιοδηποτε στοιχειο. Ετσι ο
   τιτλος κοκκινιζε σαν να υποσχεται προορισμο που δεν υπαρχει.

   Οι αλλοι δυο επιλογεις ΜΕΝΟΥΝ: το .article__title στα «Σχετικα»
   ειναι οντως συνδεσμος και πρεπει να κοκκινιζει, οπως και στην
   αρχικη. Η διαφορα δεν ειναι αισθητικη αλλα σημασιολογικη: κοκκινο
   στο hover σημαινει «πατα με».                                      */
@media (hover: hover) and (pointer: fine) {
  html body:is(.singleArticlePage, .galleryArticlePage) .article__title:hover,
  html body:is(.singleArticlePage, .galleryArticlePage) .related .article__title:hover {
    color: var(--pg-section-accent, rgb(255 72 72));
    text-decoration-color: currentColor;
  }

  html body:is(.singleArticlePage, .galleryArticlePage) .article__info a:hover,
  html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__endLinks ul li a:hover,
  html body:is(.singleArticlePage, .galleryArticlePage) .categoriesList__item a:hover {
    color: var(--pg-section-accent, rgb(255 72 72));
  }
}


/* ═══ 13. ΤΟ «ΣΧΕΤΙΚΟ ΑΡΘΡΟ» — INLINE STYLES ══════════════════════════
   Το κουτι το χτιζει η popup_v1_preprocess_node() με PHP και γραφει
   τα χρωματα INLINE:

       style="font-size:24px; font-weight:700; color:#000000; …"
       style="… color:#888888; …"

   Inline style νικαει καθε stylesheet — εκτος απο !important.
   Δενουμε στο attribute selector [style*="…"], που πιανει ΜΟΝΟ τα
   στοιχεια που εχουν ακριβως αυτο το χρωμα γραμμενο μεσα τους. Καμια
   παρενεργεια: δεν αγγιζει τιποτα αλλο στη σελιδα.

   Η ΣΩΣΤΗ διορθωση ειναι στο PHP. Αυτο εδω ειναι το μπαλωμα που
   δουλευει χωρις να πειραχτει το popup_v1.theme.

   ΔΕΝ γραφουμε [style*="#000000"] σκετο: θα επιανε και στοιχειο με
   inline background:#000000 και θα του αλλαζε το ΚΕΙΜΕΝΟ αδικα. Το
   selector περιεχει ρητα το «color», και στις δυο γραφες (με και χωρις
   κενο), γιατι το attribute selector συγκρινει το string οπως το
   εγραψε η PHP.                                                       */
html body:is(.singleArticlePage, .galleryArticlePage) [style*="color:#000"],
html body:is(.singleArticlePage, .galleryArticlePage) [style*="color: #000"] {
  color: var(--pg-text, #e8e8e8) !important;
}

html body:is(.singleArticlePage, .galleryArticlePage) [style*="color:#888"],
html body:is(.singleArticlePage, .galleryArticlePage) [style*="color: #888"] {
  color: var(--pg-text-muted, #a0a0a0) !important;
}


/* ═══ 14. FOOTER ═══════════════════════════════════════════════════════
   Στο lookLayout το footer χανει το μαυρο φοντο του (γινεται
   transparent) και τα links του γινονται #000 — αορατα.               */
html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .footer__top {
  border-top-color: var(--pg-border, #2e2e2e);
}

html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .simpleList li a,
html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .smallList li a,
html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .socialList li a {
  color: var(--pg-text, #e8e8e8);
}

@media (hover: hover) and (pointer: fine) {
  html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .simpleList li a:hover,
  html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .smallList li a:hover,
  html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .socialList li a:hover {
    color: var(--pg-section-accent, rgb(255 72 72));
    border-color: currentColor;
  }
}

/* Το «πανω-πανω» κουμπι: μαυρος κυκλος σε σκουρο = αορατο.            */
html body.lookLayout:is(.singleArticlePage, .galleryArticlePage) .toTop {
  background-color: var(--pg-surface-2, #222222);
  color: var(--pg-text, #e8e8e8);
  border: 2px solid var(--pg-border, #2e2e2e);
}


/* ═══ 15. ΤΟ ΜΕΓΑΛΟ ΛΟΓΚΟ ΠΑΝΩ ΑΠΟ ΤΗΝ ΕΙΚΟΝΑ ════════════════════════
   βημα 078 · 05/10/2026 — ζητηθηκε να φυγει.

   Το mainMag.css το δινει σε δυο σημεια, 301px πλατος:

       .articleSingle__logo img,
       .mainHeading figure img  { max-width: 301px; height: auto }

   Δεν ξεραμε ποιο απο τα δυο ειναι στη σελιδα αρθρου, γι' αυτο
   σβηνονται και τα δυο — καλυπτει και την περιπτωση που αλλαξει.

   Σημειωση: το .articleSingle__logo ειναι ΗΔΗ display:none κατω απο
   1280px στο mainMag. Δηλαδη σε κινητο και tablet ΔΕΝ φαινοταν ποτε —
   το κρυβουμε απλως και στο desktop, που ειναι η συνεπης συμπεριφορα.

   ΠΡΟΣΟΧΗ: display:none κρυβει, δεν αφαιρει. Ο browser συνηθως
   ΚΑΤΕΒΑΖΕΙ ακομα το <img>. Για να φυγει και απο το HTML θελει το node
   template (templates/node/node--article*.html.twig) η την
   popup_v1_preprocess_node(). Μεχρι τοτε, το κοστος ειναι μια εικονα.  */
html body:is(.singleArticlePage, .galleryArticlePage) .articleSingle__logo,
html body:is(.singleArticlePage, .galleryArticlePage) .mainHeading figure {
  display: none;
}


/* ═══ 16. ΤΟ ΔΙΑΧΕΙΡΙΣΤΙΚΟ ΜΕΝΕΙ ΕΞΩ ══════════════════════════════════
   βημα 079 · 05/10/2026 — διορθωση δικου μας λαθους.

   ΤΙ ΕΓΙΝΕ
   Τα blocks του διαχειριστικου (καρτελες View/Edit, contextual links,
   μηνυματα) βγηκαν «ψιλο λευκα» μολις ανεβηκε το article.css.

   ΓΙΑΤΙ — δυο κανονες μας πατησαν σε ΓΕΝΙΚΑ selectors που τα
   χρησιμοποιει και το Drupal:

     ενοτητα 2   `a { color: inherit }`  → καθε link της σελιδας παιρνει
                 το χρωμα του body, δηλαδη #e8e8e8. Οι καρτελες του
                 διαχειριστικου εχουν ΑΝΟΙΧΤΟ φοντο → ανοιχτο σε ανοιχτο.

     ενοτητα 11  `.button { color: … !important }` → το `.button` ΔΕΝ
                 ειναι δικη μας κλαση. Ειναι η κλαση κουμπιου του
                 Drupal core. Καθε κουμπι διαχειρισης εγινε #e8e8e8
                 πανω σε γκριζο — και με !important, αρα ασυζητητα.

   ΚΑΙ ΥΠΑΡΧΕΙ ΚΑΙ ΖΗΤΗΜΑ ΣΕΙΡΑΣ: το admin-overrides.css (βιβλιοθηκη
   logged-in-styles) εχει βαρος 0. Το article.css το βαλαμε 80 για να
   νικαει το mainMag.css — αρα φορτωνει ΜΕΤΑ και απο το
   admin-overrides.css. Οτι γραψουμε εδω και συγκρουεται, κερδιζει.

   Η ΔΙΟΡΘΩΣΗ
   Οχι «ξεγραψιμο» του διαχειριστικου με δευτερο μπλοκ κανονων — αυτο
   θα σημαινε να μαντεψουμε τα χρωματα του Claro. Αντ' αυτου οι δυο
   κανονες ΔΕΝ ΦΤΑΝΟΥΝ πια εκει: μπηκε `:not(:is(…) *)` με τους
   γνωστους περιεκτες του Drupal.

   Ο ΚΑΝΟΝΑΣ ΠΟΥ ΒΓΑΙΝΕΙ: οταν γραφεις site-wide CSS σε Drupal, το `a`
   και το `.button` ΔΕΝ ειναι δικα σου. Αν τα πιασεις γυμνα, πιανεις
   και το backend. Καθε μελλοντικος κανονας σε γενικο selector θελει
   την ιδια εξαιρεση.

   Περιεκτες που μενουν ανεπαφοι:
     [id="toolbar-administration"]   η μπαρα διαχειρισης
     .toolbar                        τα trays της
     .contextual / .contextual-links το μολυβι «Επεξεργασια»
     .tabs / .block-local-tasks-block  View · Edit · Delete · Revisions
     .action-links / .local-actions  «Προσθηκη…»
     .messages                       status / warning / error
     .ui-dialog                      modals
     .region-highlighted             οπου κατσουν τα μηνυματα
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   Η ΚΑΤΗΓΟΡΙΑ ΠΑΝΩ ΣΤΗΝ ΕΙΚΟΝΑ ΦΕΥΓΕΙ      (βημα 182 - 14/10/2026)

   Το mainMag.css:18189 την κανει ΜΑΥΡΗ ΠΑΣΤΙΛΙΑ καρφωμενη κατω
   αριστερα πανω στην εικονα:

       .articleSingle__category {
         position: absolute;  left: 0;  bottom: 0;
         background-color: #000;  color: #fff;  padding: 0 16px;
       }

   Ζητηθηκε να μη φαινεται καθολου.

   ── Η ΠΛΗΡΟΦΟΡΙΑ ΔΕΝ ΧΑΝΕΤΑΙ ────────────────────────────────────
   Απο το βημα 178 η κατηγορια φαινεται στον header σε ΔΥΟ σημεια:
   η γονικη σημαδεμενη κοκκινη στη μπαρα (.is-trail) και η ιδια η
   υποκατηγορια στην τριτη σειρα (.is-current). Υπαρχει και η λιστα
   tags στο τελος του αρθρου. Η παστιλια ηταν το τριτο αντιγραφο, και
   το μονο που εκρυβε φωτογραφια.

   ── ΕΙΝΑΙ Η ΙΔΙΑ ΠΑΣΤΙΛΙΑ ΠΟΥ ΒΓΑΛΑΜΕ ΚΑΙ ΑΠΟ ΤΙΣ ΚΑΡΤΕΣ ───────
   sections.css ενοτητα 5: «Το mainsite.css:13257 την εκανε ΜΑΥΡΗ
   ΠΑΣΤΙΛΙΑ … σε σκουρο φοντο ειναι μαυρο κουτι πανω σε μαυρο». Εκει
   την ξαναβαψαμε· εδω φευγει τελειως, γιατι εκει ηταν ΚΑΤΩ απο την
   εικονα, εδω ειναι ΠΑΝΩ της.

   ── ΓΙΑΤΙ display: none ΚΑΙ ΟΧΙ visibility ────────────────────────
   Δεν θελουμε να κρατησει χωρο ουτε να διαβαζεται απο screen reader:
   θα ηταν τριτη φορα η ιδια λεξη στην ιδια σελιδα.

   ΕΙΔΙΚΟΤΗΤΑ: διπλη κλαση (0,2,0) εναντι (0,1,0) του mainMag. Το
   article.css φορτωνει ηδη ΜΕΤΑ (weight 80 εναντι 0), αρα θα αρκουσε
   και μονη — η διπλη ειναι ωστε να μην εξαρταται απο τη σειρα.

   ΓΙΑ ΕΠΑΝΑΦΟΡΑ: σβησε αυτο το μπλοκ.

   ── ΠΡΟΣΟΧΗ — ΔΕΝ ΙΣΧΥΕΙ ΠΙΑ ΠΑΝΤΟΥ (βημα 264) ───────────────────
   Απο το βημα 264 η κατηγορια ΔΕΝ ειναι πλεον μεσα στην εικονα: το
   node--article.html.twig τη μετεφερε στο .articleSingle__content,
   πανω απο τον τιτλο. Εκει την ΞΑΝΑΑΝΟΙΓΕΙ ο κανονας στο τελος του
   αρχειου, με (0,2,2) εναντι του (0,2,0) αυτου εδω.

   ΑΥΤΟΣ Ο ΚΑΝΟΝΑΣ ΜΕΝΕΙ ΣΚΟΠΙΜΑ: αν καποτε ξαναεμφανιστει
   .articleSingle__category σε αλλη θεση — αλλος τυπος αρθρου, αλλο
   template — θα ειναι παλι η μαυρη παστιλια πανω σε μαυρο. Ο
   μηδενισμος ειναι το ΠΡΟΕΠΙΛΕΓΜΕΝΟ, και το ανοιγμα ρητο ΜΟΝΟ εκει
   που το θελουμε. Δυο κανονες που μοιαζουν να μαλωνουν, αλλα ο ενας
   ειναι ο κανονας και ο αλλος η εξαιρεση.
   ═══════════════════════════════════════════════════════════════════════ */
.articleSingle__category.articleSingle__category {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   Η ΕΙΚΟΝΑ ΠΙΑΝΕΙ ΟΛΟ ΤΟ ΠΛΑΤΟΣ        (βημα 186 - 15/10/2026)

   Ζητηθηκε: η φωτογραφια του αρθρου να πιανει και τον χωρο της
   διαφημισης δεξια της, και η διαφημιση να παει απο κατω.

   ── ΤΙ ΗΤΑΝ ────────────────────────────────────────────────────
   Το .articleSingle__media ειναι flex ΣΕΙΡΑ (mainMag:7624) με δυο
   στοιχεια — το .articleActions ειναι position: absolute (mainMag:9178,
   left: -64px), αρα ΔΕΝ μετραει:

       .articleSingle__mediaContainer  width: calc(100% - 366px)
       .banner (300×250)               position: sticky, top: 60px

   Τα 366px ηταν ο δεσμευμενος χωρος της διαφημισης. Η εικονα επαιρνε
   ο,τι απεμενε.

   ── ΤΟ ΚΑΘΕΤΟ ΣΧΗΜΑ ΔΕΝ ΤΟ ΕΦΕΥΡΙΣΚΟΥΜΕ ────────────────────────
   Το mainMag το εχει ΗΔΗ, στο @media (max-width: 766px):
       .articleSingle__media       { flex-direction: column }
       .articleSingle__media .banner { position: relative; top: 0 }
       .articleSingle__mediaContainer { margin-right: 0; width: 100% }
   Εδω το κανουμε να ισχυει σε ΟΛΑ τα πλατη — ιδιο ακριβως μοτιβο με
   τις καρτες της σελιδας κατηγοριας (βημα 173), οπου το καθετο σχημα
   υπηρχε κι εκει μονο στο κινητο.

   ── Η ΣΕΙΡΑ ΣΤΟ DOM ΕΙΝΑΙ ΗΔΗ ΣΩΣΤΗ ────────────────────────────
   Το banner ερχεται ΜΕΤΑ τον mediaContainer στο markup, αρα με
   flex-direction: column πεφτει απο μονο του απο κατω. Καμια αναγκη
   για order.

   ── position: static ΚΑΙ ΟΧΙ ΑΠΛΑ top: 0 ───────────────────────
   Το sticky με top: 60px ειχε νοημα ΟΣΟ η διαφημιση ηταν σε στηλη
   διπλα: ακολουθουσε τον αναγνωστη καθως κυλουσε. Κατω απο την
   εικονα, κολλημενη στην κορυφη, θα κυνηγουσε τη σελιδα σαν
   αιωρουμενο κουτι πανω απο το κειμενο.

   ── ΕΙΔΙΚΟΤΗΤΑ ─────────────────────────────────────────────────
   Διπλη κλαση (0,2,0) και (0,3,0). Νικαει και τα media queries του
   mainMag στα 1279px/1023px, που οριζουν πλατος στο (0,1,0). Το
   article.css φορτωνει ηδη μετα (weight 80), αλλα η ειδικοτητα το
   κανει ανεξαρτητο απο τη σειρα — μαθημα βηματος 176.

   ΓΙΑ ΕΠΑΝΑΦΟΡΑ: σβησε αυτο το μπλοκ.
   ═══════════════════════════════════════════════════════════════════════ */

.articleSingle__media.articleSingle__media {
  flex-direction: column;
}

.articleSingle__mediaContainer.articleSingle__mediaContainer {
  /* ΑΡΙΣΤΕΡΑ ΚΑΙ ΟΛΟ ΤΟ ΠΛΑΤΟΣ — βημα 189.
     Το βημα 187 το ειχε κενταρει σε max-width: 1074px, επειδη τοσο
     ηταν το αρχειο της εικονας. Ζητηθηκε να ξεκιναει κανονικα απο
     αριστερα και να ειναι ΜΕΓΑΛΥΤΕΡΗ — να πιανει και τον χωρο που
     ειχε η διαφημιση.                                             */
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Το mainMag:7744 δινει .articleSingle--default .articleSingle__image
   { max-width: 1074px } στο (0,2,0). Χωρις αυτη την ακυρωση η εικονα
   θα σταματαγε παλι στα 1074 και ο περιεκτης θα ητανε απλως ενα
   φαρδυτερο κουτι με κενο δεξια — ακριβως το προβλημα του 186.    */
.articleSingle--default.articleSingle--default .articleSingle__image {
  max-width: none;
  width: 100%;
  margin-right: 0;
}

/* ── Η ΔΙΑΦΗΜΙΣΗ ΠΟΥ ΗΤΑΝ ΔΙΠΛΑ ΣΤΗ ΦΩΤΟ ΦΕΥΓΕΙ — βημα 189 ──────
   ΠΡΟΣΟΧΗ: ΑΥΤΟ ΕΙΝΑΙ ΘΕΣΗ ΔΙΑΦΗΜΙΣΗΣ, ΟΧΙ ΔΙΑΚΟΣΜΗΣΗ.

   Στο βημα 186 τη μετακινησα ΚΑΤΩ απο τη φωτογραφια. Αφου ομως η
   φωτογραφια πιανει πλεον ολο το πλατος, η στηλη διαφημισεων
   συνεχιζει απο κατω — στο .mgSidebar, διπλα στο σωμα του κειμενου,
   οπου ΥΠΑΡΧΕΙ ΗΔΗ ιδια θεση 300×250. Μενοντας, θα ηταν δευτερη ιδια
   διαφημιση σε αποσταση μιας οθονης.

   ΔΕΝ χανεται εσοδο: η θεση του .mgSidebar μενει ανεπαφη.

   ΓΙΑ ΕΠΑΝΑΦΟΡΑ: σβησε ΜΟΝΟ αυτον τον κανονα — επανερχεται κατω απο
   τη φωτο, οχι διπλα της.                                         */
.articleSingle__media.articleSingle__media > .banner {
  display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   ΣΤΑΘΕΡΟ ΠΛΑΙΣΙΟ ΕΙΚΟΝΑΣ ΣΕ ΚΑΘΕ ΑΡΘΡΟ   (βημα 188 - 15/10/2026)

   Ζητηθηκε: καθε φωτογραφια να πιανει ΤΟ ΙΔΙΟ πλαισιο, οχι ο,τι υψος
   τυχαινει να εχει το αρχειο της.

   ── ΤΟ ΠΛΑΙΣΙΟ ΥΠΗΡΧΕ ΗΔΗ. ΑΥΤΟ ΠΟΥ ΕΛΕΙΠΕ ΗΤΑΝ ΤΟ ΓΕΜΙΣΜΑ ──────
   mainMag:7844  .articleSingle--default … figure { aspect-ratio: 1074/600 }

   Το κουτι ηταν παντα σωστο. Ομως το object-fit: cover που κανει την
   εικονα να ΓΕΜΙΣΕΙ το κουτι εμπαινε ΜΟΝΟ σε δυο ακρα:

       mainMag:18978  @media (min-width: 1366px)
       mainMag:26673  @media (max-width: 766px)   — και με height: auto

   Αναμεσα στα 767 και 1365px — δηλαδη ταμπλετες και μικρα laptop —
   ΔΕΝ υπηρχε καθολου. Εκει η εικονα κραταγε το φυσικο της μεγεθος
   μεσα σε κουτι με αναλογια: αλλη φωτο ξεχειλιζε, αλλη αφηνε κενο.
   Και στα >1366 υπηρχε ΚΑΙ min-height: 600px, που μαχεται το
   aspect-ratio: οποιο απο τα δυο «κερδισει» εξαρταται απο το πλατος.

   ── ΤΟ <picture> ΕΙΝΑΙ ΤΟ ΣΗΜΕΙΟ ΠΟΥ ΣΠΑΕΙ ΣΙΩΠΗΛΑ ─────────────
   Η δομη ειναι <figure><picture><img></picture></figure>. Το <picture>
   ειναι inline εξ ορισμου, αρα το height: 100% της εικονας θα
   υπολογιζοταν πανω σε στοιχειο ΧΩΡΙΣ υψος — και θα εβγαινε 0 η
   αγνοουνταν. Γι' αυτο το <picture> γινεται ρητα block με υψος.
   Χωρις αυτη τη γραμμη ολο το μπλοκ δεν κανει τιποτα.

   ── ΤΙ ΣΗΜΑΙΝΕΙ ΓΙΑ ΤΙΣ ΦΩΤΟΓΡΑΦΙΕΣ ───────────────────────────
   Το cover ΚΟΒΕΙ ο,τι περισσευει αντι να παραμορφωσει. Μια καθετη
   φωτογραφια θα χασει πανω και κατω — αυτο ειναι το τιμημα του
   «ιδιο πλαισιο παντου», και ειναι συνειδητο. Το object-position:
   center κραταει το κεντρο, που ειναι η ασφαλεστερη προεπιλογη για
   προσωπα.

   ΕΙΔΙΚΟΤΗΤΑ: (0,4,0) — οι αντιπαλοι ειναι ολοι (0,3,0), ΚΑΙ μεσα σε
   media queries. Διπλο .articleSingle--default αντι να κυνηγαμε καθε
   breakpoint ξεχωριστα.
   ═══════════════════════════════════════════════════════════════════════ */

.articleSingle--default.articleSingle--default .articleSingle__image figure {
  aspect-ratio: 1074 / 600;
  /* Ακυρωνει το min-height: 600px του @media (min-width: 1366px), που
     αλλιως νικαει την αναλογια σε στενοτερα παραθυρα.               */
  min-height: 0;
  width: 100%;
  /* Το cover γεμιζει· το overflow κοβει ο,τι βγαινει εξω. */
  overflow: hidden;
}

/* ΧΩΡΙΣ ΑΥΤΟ ΔΕΝ ΔΟΥΛΕΥΕΙ ΤΙΠΟΤΑ — δες το σχολιο πιο πανω. */
.articleSingle--default.articleSingle--default .articleSingle__image figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.articleSingle--default.articleSingle--default .articleSingle__image figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   ΤΟ ΣΩΜΑ ΤΟΥ ΚΕΙΜΕΝΟΥ ΠΙΑΝΕΙ ΤΗ ΣΤΗΛΗ ΤΟΥ  (βημα 190 - 15/10/2026)

   Ζητηθηκε: το περιεχομενο κατω απο τη φωτογραφια να πιανει ολο τον
   χωρο της μεριας του — «μαζευει λιγο και εχει κενο μεχρι το sidebar».

   ── ΔΕΝ ΗΤΑΝ ΤΟ ΠΡΟΦΑΝΕΣ ──────────────────────────────────────────
   Το πρωτο υποπτο ηταν το .articleContainer { padding-right: 96px }
   (mainMag:9067). ΑΚΥΡΩΝΕΤΑΙ ΗΔΗ: η γρ. 18101 ξαναοριζει
   .articleContainer { padding: 0 } με ιδια ειδικοτητα και ΑΡΓΟΤΕΡΑ.
   Αν το ειχα «διορθωσει» χωρις να κοιταξω, θα ειχα γραψει κανονα που
   δεν κανει τιποτα — και το κενο θα εμενε.

   ── ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΑΙΤΙΟ: ΔΥΟ ΑΡΙΘΜΟΙ ────────────────────────────
   mainMag:18102  .articleContainer { --leftSpace: 142px; --contentWidth: 732px }
   mainMag:18109  .articleContainer__body { padding-left: var(--leftSpace) }
   mainMag:18128  .articleSingle__content { max-width: var(--contentWidth) }

   Δηλαδη 142 + 732 = 874px μεσα σε στηλη ~1146px. Τα υπολοιπα ~272px
   ηταν το «κενο μεχρι το sidebar» — δεν ηταν κενο, ηταν ΟΡΙΟ.

   Και η λιστα ετικετων εχει δικο της: .categoriesList (18263) στα
   --contentMaxWidth: 708px.

   ── ΠΕΡΙΟΡΙΖΕΤΑΙ ΣΤΟ .articleContainer, ΣΚΟΠΙΜΑ ──────────────────
   Η κλαση .articleSingle__content χρησιμοποιειται ΔΥΟ φορες στη
   σελιδα: μια για το σωμα του κειμενου και μια για τον ΤΙΤΛΟ με την
   υπογραφη, πανω, μεσα στο .articleSingle__mediaContainer. Χωρις το
   scope θα ξεκλειδωναμε και τον τιτλο — που θα απλωνε σε ολο το
   πλατος και θα εχανε το μετρο του.

   Το .articleContainer υπαρχει ΜΟΝΟ στη δευτερη σειρα. Ενα scope,
   μηδεν παρενεργειες.

   ── ΤΟ ΤΙΜΗΜΑ, ΚΑΤΑΓΕΓΡΑΜΜΕΝΟ ───────────────────────────────────
   Τα 732px ΔΕΝ ηταν τυχαια: ειναι περιπου 80 χαρακτηρες στο τρεχον
   μεγεθος, το κλασικο μετρο αναγνωσης. Σε ~1146px η γραμμη φτανει
   τους ~125 χαρακτηρες, και το ματι δυσκολευεται να βρει την αρχη
   της επομενης σειρας.

   Εγινε γιατι ζητηθηκε ρητα. ΑΝ ΦΑΝΕΙ ΚΟΥΡΑΣΤΙΚΟ, η μεση λυση ειναι
   max-width: 900px εδω — πιο πλατυ απο πριν, χωρις να χαθει το μετρο.
   ═══════════════════════════════════════════════════════════════════════ */

/* ΕΝΑ ΝΟΥΜΕΡΟ ΓΙΑ ΤΟ ΜΕΤΡΟ ΑΝΑΓΝΩΣΗΣ — βημα 191.
   Το 190 ειχε βαλει max-width: none (ολη η στηλη, ~1146px). Ζητηθηκε
   να μαζευτει. Τωρα 900px: πλατυτερο απο τα 732 του θεματος, πιο
   μαζεμενο απο τη στηλη.

   ΟΡΙΖΕΤΑΙ ΜΙΑ ΦΟΡΑ ΚΑΙ ΔΙΑΒΑΖΕΤΑΙ ΑΠΟ ΔΥΟ ΣΗΜΕΙΑ — το κειμενο και
   η λιστα ετικετων. Αν ηταν δυο ξεχωριστοι αριθμοι, θα αποκλιναν
   στην πρωτη ρυθμιση και οι ετικετες θα σταματαγαν αλλου απο το
   κειμενο. Αλλαζεις ΕΔΩ, αλλαζουν και τα δυο.

   ΤΟ ΚΕΙΜΕΝΟ ΞΕΚΙΝΑΕΙ ΑΡΙΣΤΕΡΑ, στοιχισμενο με τη φωτογραφια — δεν
   κενταρεται. Η εσοχη των 142px (--leftSpace) μενει στο μηδεν.    */
.articleContainer.articleContainer {
  --pg-article-measure: 900px;
}

.articleContainer.articleContainer .articleContainer__body {
  padding-left: 0;
}

.articleContainer.articleContainer .articleSingle__content {
  max-width: var(--pg-article-measure, 900px);
  margin-left: 0;
}

/* Η λιστα ετικετων στο τελος — ΙΔΙΟ οριο, ωστε να τελειωνει στο ιδιο
   σημειο με το κειμενο απο πανω της. */
.articleContainer.articleContainer .categoriesList {
  max-width: var(--pg-article-measure, 900px);
}


/* ═══════════════════════════════════════════════════════════════════════
   ΟΛΑ ΞΕΚΙΝΑΝΕ ΑΠΟ ΤΗΝ ΑΚΡΗ ΤΗΣ ΕΙΚΟΝΑΣ   (βημα 192 - 15/10/2026)

   Ζητηθηκε: τιτλος και σωμα κειμενου να ξεκινανε απο εκει που ξεκιναει
   η εικονα. Και τα κουμπια share, που μενουν sticky, να μην πεφτουν
   πανω στο κειμενο.

   ── ΤΡΙΑ ΔΙΑΦΟΡΕΤΙΚΑ ΣΗΜΕΙΑ ΕΚΚΙΝΗΣΗΣ, ΤΡΕΙΣ ΔΙΑΦΟΡΕΤΙΚΕΣ ΑΙΤΙΕΣ ─
   Μετρημενο στο markup, οχι υποθεση:

     ΕΙΚΟΝΑ   x = 0
       μεσα στο εσωτερικο .wrapper (padding: 0 20px)

     ΤΙΤΛΟΣ   x = +158   ΔΕΞΙΑ
       mainMag:18133  .articleSingle--default .articleSingle__content
                      { margin-left: var(--leftSpace) }  = 142px
                      + padding-left: 16px

     ΣΩΜΑ     x = -20    ΑΡΙΣΤΕΡΑ
       το <div class="row xlargeWrap"> ειναι ΕΞΩ απο το εσωτερικο
       .wrapper, αρα δεν παιρνει τα 20px του.

   Το .xlargeWrap ΔΕΝ εχει κανενα κανονα — ουτε στο mainMag ουτε στο
   mainsite. Ειναι κλαση-φαντασμα απο το παλιο θεμα, που εμεινε στο
   markup χωρις στυλ. Γι' αυτο το σωμα «επεφτε» 20px αριστερα.

   ── ΤΑ SHARE ΔΙΟΡΘΩΝΟΝΤΑΙ ΑΠΟ ΜΟΝΑ ΤΟΥΣ ─────────────────────────
   Το .articleActions ειναι position: absolute με left: -64px
   (mainMag:9178), ως προς το .articleSingle__media που ειναι
   position: relative. Δηλαδη ζει ΠΑΝΤΑ 64px αριστερα της εικονας.

   Επεφτε πανω στο κειμενο επειδη το ΚΕΙΜΕΝΟ ειχε μετακινηθει 20px
   αριστερα — οχι επειδη μετακινηθηκαν τα κουμπια. Μολις ολα
   ευθυγραμμιστουν στην ακρη της εικονας, η λωριδα των share ξαναβρισκει
   το περιθωριο της. ΔΕΝ πειραζουμε το sticky: δεν ηταν αυτο το λαθος.

   ── ΤΟ ΜΕΤΡΟ ΑΝΑΓΝΩΣΗΣ ΔΕΝ ΑΛΛΑΖΕΙ ─────────────────────────────
   Το --pg-article-measure (900px, βημα 191) μενει. Εδω αλλαζει μονο
   ΠΟΥ ξεκιναει το κειμενο, οχι ποσο πλατυ ειναι.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Ο ΤΙΤΛΟΣ: φευγει η εσοχη των 142px.
      Ειδικοτητα (0,3,0) εναντι (0,2,0) του mainMag:18131.
      Περιοριζεται σε .articleSingle--default, αρα ΔΕΝ αγγιζει το σωμα
      — εκεινο εχει μονο .articleSingle, χωρις --default.           */
.articleSingle--default.articleSingle--default {
  /* ΤΟ ΠΛΑΤΟΣ ΤΟΥ ΤΙΤΛΟΥ — βημα 196.
     Μετρημενο πριν: τιτλος 732px, εικονα 1312px. Τον κρατουσε το
     mainMag:18128 .articleSingle__content { max-width: var(--contentWidth) }
     δηλαδη το ιδιο οριο 732px που ειχε και το σωμα του κειμενου.

     ΓΙΑΤΙ none ΚΑΙ ΟΧΙ ΚΑΠΟΙΟΣ ΑΡΙΘΜΟΣ: ο τιτλος ανηκει στην ΕΙΚΟΝΑ —
     καθεται ακριβως απο κατω της, μεσα στο ιδιο .articleSingle__media.
     Με max-width: none παιρνει το πλατος του περιεκτη, που ειναι το
     πλατος της εικονας. Ευθυγραμμιζεται και στις ΔΥΟ ακρες μαζι της,
     που φαινεται σκοπιμο — ενω οποιοσδηποτε ενδιαμεσος αριθμος θα
     εδειχνε τυχαιος.

     ΔΕΝ ΙΣΧΥΕΙ ΤΟ ΕΠΙΧΕΙΡΗΜΑ ΤΟΥ ΜΕΤΡΟΥ ΑΝΑΓΝΩΣΗΣ: τα 900px του
     σωματος (--pg-article-measure, βημα 191) αφορουν ΠΑΡΑΓΡΑΦΟΥΣ, που
     διαβαζονται σειρα-σειρα. Ο τιτλος ειναι μια-δυο σειρες σε μεγαλο
     μεγεθος — εκει το πλατος δεν κουραζει, το σπασιμο σε πολλες
     σειρες κουραζει.

     ΑΝ ΦΑΝΕΙ ΤΕΝΤΩΜΕΝΟΣ: βαλε εδω εναν αριθμο, π.χ. 1100px. Ενα
     σημειο, και πιανει τιτλο ΚΑΙ υπογραφη μαζι.                    */
  --pg-title-measure: none;
}

.articleSingle--default.articleSingle--default .articleSingle__content {
  margin-left: 0;
  padding-left: 0;
  max-width: var(--pg-title-measure, none);
}

/* 2. ΤΟ ΣΩΜΑ: παιρνει το ΙΔΙΟ περιθωριο με το .wrapper της εικονας.
      ΔΙΟΡΘΩΣΗ ΤΟΥ ΒΗΜΑΤΟΣ 192 — βημα 193.

      Ειχα βαλει 20px. ΛΑΘΟΣ ΑΡΧΕΙΟ: το 20px ειναι του mainsite.css
      (γρ. 3345), που κυβερναει την ΑΡΧΙΚΗ και τις ΚΑΤΗΓΟΡΙΕΣ. Τις
      σελιδες ΑΡΘΡΟΥ τις κυβερναει το mainMag.css, που δινει:

          mainMag:4093  .wrapper { padding: 0 var(--gridSpace) }
                        --gridSpace: 64px

      Και τα δυο αρχεια οριζουν .wrapper με ιδια ειδικοτητα· σε σελιδα
      αρθρου φορτωνουν ΚΑΙ ΤΑ ΔΥΟ και κερδιζει το mainMag (weight 0,
      αλλα φορτωνεται απο τη βιβλιοθηκη article-styles ΜΕΤΑ το
      mainsite). Εγω διαβαζα το mainsite επειδη εκει δουλευα.

      ΜΕΤΡΗΘΗΚΕ, δεν υπολογιστηκε:
          εικονα   left 297   right 1609
          σωμα     left 253   right 1055   ← 44px αριστεροτερα
          sidebar  left 1321  right 1653   ← 44px δεξιοτερα
      Η διαφορα ηταν ακριβως 64 − 20 = 44px, και στις δυο πλευρες.

      ΤΟ PADDING ΣΤΗ ΓΡΑΜΜΗ ΔΙΟΡΘΩΝΕΙ ΚΑΙ ΤΙΣ ΔΥΟ ΑΚΡΕΣ: σπρωχνει το
      σωμα 44px δεξια (253 → 297, ιδιο με την εικονα) ΚΑΙ τραβαει το
      sidebar 44px αριστερα (1653 → 1609, ιδιο με τη δεξια ακρη της
      εικονας). Μια ιδιοτητα, δυο ευθυγραμμισεις.

      ΚΑΙ ΛΥΝΕΙ ΤΑ SHARE: ειναι στο 249-281. Με το κειμενο στο 253
      ΕΠΕΦΤΑΝ ΠΑΝΩ ΤΟΥ — μετρημενο, οχι εντυπωση. Στο 297 μενουν 16px
      καθαρα.

      var() και οχι 64px: αν αυριο αλλαξει το --gridSpace, ακολουθει.

      ΠΡΟΣΟΧΗ — ΔΙΑΒΑΣΕ ΚΑΙ ΤΟ MEDIA ΑΜΕΣΩΣ ΑΠΟ ΚΑΤΩ (βημα 251):
      ο κανονας αυτος ισχυει ΜΟΝΟ πανω απο τα 766px. Γραφτηκε χωρις
      breakpoint και αυτο ηταν το σφαλμα.                           */
.row.xlargeWrap {
  padding-inline: var(--gridSpace, 64px);
}

/* ── ΣΤΟ ΚΙΝΗΤΟ ΤΟ ΠΕΡΙΘΩΡΙΟ ΜΗΔΕΝΙΖΕΤΑΙ — ΒΗΜΑ 251 ────────────────
   ΜΕΤΡΗΜΕΝΟ σε viewport 440px, απο το σωμα του αρθρου προς τα πανω:

       body / main / layout-content        440
       .region-content.wrapper   pad 16    440 → 408 ωφελιμα
       .block-system-main-block            408
       .row.xlargeWrap  margin -12  →      432
                        pad 64      →      304   ← ΕΔΩ ΧΑΝΟΝΤΑΙ 128px
       .col             pad 12      →      280
       .articleContainer … p               280

   280 απο 440 = 64% της οθονης. Τα 128px ειναι το 29%.

   ΓΙΑΤΙ ΗΤΑΝ ΛΑΘΟΣ ΕΞ ΑΡΧΗΣ: το βημα 193 εφτιαξε αυτο το padding για
   να στοιχισει το σωμα με την εικονα, που κληρονομει το
   .wrapper { padding: 0 var(--gridSpace) } του mainMag. Αλλα το ιδιο
   το mainMag ΚΛΙΜΑΚΩΝΕΙ εκεινο το περιθωριο:

       mainMag:4093                      64px
       mainMag:19477  ≤1279px            20px
       mainMag:22673  ≤766px             16px

   Ο δικος μας κανονας εμεινε 64px σε ΚΑΘΕ πλατος. Η στοιχιση που
   διορθωνε υπαρχει μονο πανω απο τα 1280px· πιο κατω αντεγραφε ενα
   περιθωριο που ο ιδιος ο γονεας ειχε ηδη εγκαταλειψει.

   ΓΙΑΤΙ 0 ΚΑΙ ΟΧΙ 16px: το περιθωριο των 16px το δινει ΗΔΗ ο γονεας
   .wrapper. Αν το ξαναγραφαμε εδω, θα γινοταν 32px — το ιδιο λαθος
   αθροισης με το βημα 204. Με 0, το σωμα βγαινει 408 απο 440 (93%)
   και στοιχιζεται ΑΚΡΙΒΩΣ με καθε αλλο στοιχειο της σελιδας.

   ΓΙΑΤΙ 766px ΚΑΙ ΟΧΙ 1279px: στα 766 το mainMag κανει
   .articleContainer__sidebar { width: 100% } — η στηλη των share
   και των διαφημισεων ΦΕΥΓΕΙ απο το πλαι και παει απο κατω. Πανω
   απο αυτο καθεται ακομα διπλα, και το περιθωριο την κραταει
   μακρια απο το κειμενο (ηταν ο δευτερος λογος του βηματος 193 —
   τα share επεφταν πανω στις λεξεις). Εκει δεν αγγιζεται τιποτα. */
@media (max-width: 766px) {
  .row.xlargeWrap {
    padding-inline: 0;
  }
}


/* ═══ ΣΕΙΡΑ ΤΟΥ ΑΡΘΡΟΥ ΣΤΟ ΚΙΝΗΤΟ ════════════════════════════════════
   βημα 260 · 26/10/2026

   ΖΗΤΗΘΗΚΕ: τιτλος → περιγραφη → συντακτης → κεντρικη εικονα.
   ΗΤΑΝ:     κεντρικη εικονα → τιτλος → περιγραφη.

   ΜΕΤΡΗΜΕΝΗ ΔΟΜΗ (viewport 440px):
       .articleSingle--default            flex column
       └ .articleSingle__media            flex
          └ .articleSingle__mediaContainer  block
             ├ .articleSingle__image      top −296   ← ΠΡΩΤΗ
             └ .articleSingle__content    top  405
                ├ .articleSingle__title   405
                └ .articleSingle__intro   509

   ΓΙΑΤΙ ΟΧΙ ΑΠΟ ΤΟ MANAGE DISPLAY: η σειρα ΔΕΝ ερχεται απο τα πεδια.
   Ειναι χτισμενη στο template του βασικου θεματος — το __image και το
   __content ειναι ξεχωριστα κουτια μεσα στον __mediaContainer, οχι
   δυο πεδια σε λιστα. Αλλαζοντας σειρα πεδιων δεν κουνιεται τιποτα.

   ΓΙΑΤΙ ΧΡΕΙΑΖΕΤΑΙ ΠΡΩΤΑ display: flex: ο __mediaContainer ειναι
   display: block. Το order ΑΓΝΟΕΙΤΑΙ ΕΝΤΕΛΩΣ σε block ροη — δεν
   βγαζει σφαλμα, απλα δεν κανει τιποτα. Ειναι ιδιοτητα flex/grid
   item, και ενα παιδι γινεται flex item ΜΟΝΟ αν ο ΓΟΝΕΑΣ ειναι flex.

   ΤΟ flex ΜΠΑΙΝΕΙ ΜΟΝΟ ΚΑΤΩ ΑΠΟ 766px: στο desktop ο ιδιος κανονας
   εχει width: calc(100% - 366px) και margin-right: 45px
   (mainMag:18177) — ειναι η στηλη διπλα στο sidebar. Εκει η σειρα
   ειναι σωστη και δεν αγγιζεται.

   ΟΙ ΑΡΙΘΜΟΙ ΑΦΗΝΟΥΝ ΚΕΝΑ (1, 3, 5): αν αυριο μπει κουτι αναμεσα —
   π.χ. ο συντακτης ως ξεχωριστο αδερφι — παιρνει 2 η 4 χωρις να
   ξαναγραφτει κανενας αλλος αριθμος.                               */
@media (max-width: 766px) {
  .articleSingle__mediaContainer {
    display: flex;
    flex-direction: column;
  }

  /* τιτλος + περιγραφη (+ ο,τι αλλο εχει μεσα το __content) */
  .articleSingle__mediaContainer > .articleSingle__content {
    order: 1;

    /* ── ΚΕΝΤΡΟ — ΒΗΜΑ 261 ───────────────────────────────────────
       ΔΥΟ ΙΔΙΟΤΗΤΕΣ, ΤΡΙΤΗ ΦΟΡΑ ΤΟ ΙΔΙΟ ΜΑΘΗΜΑ:
       το __content ειναι ΜΕΤΡΗΜΕΝΑ display: flex (column). Σε flex
       column το text-align κεντραρει το ΚΕΙΜΕΝΟ μεσα σε καθε κουτι,
       αλλα το ΚΟΥΤΙ του τιτλου εχει πλατος fit-content και καθεται
       οπου το βαζει το align-items. Χωρις τη δευτερη γραμμη, ενας
       κοντος τιτλος θα εμενε κολλητα αριστερα με κεντραρισμενο
       κειμενο μεσα του — δηλαδη πουθενα.
       Ιδιο ακριβως με το .article__info (βηματα 138, 245) και την
       .contributorsHeading (βημα 256).                            */
    text-align: center;
    align-items: center;
  }

  /* ── ΤΑ ΠΑΙΔΙΑ ΞΕΧΩΡΙΣΤΑ, ΟΧΙ ΜΟΝΟ Ο ΓΟΝΕΑΣ — ΒΗΜΑ 262 ───────────
     Το βημα 261 κεντραρε ΜΟΝΟ το .articleSingle__content. Ο τιτλος
     εμεινε αριστερα, και ο λογος ειναι ο ιδιος που μας εφαγε στο
     βημα 256:

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

     Αν ο τιτλος ειναι <h1 class="articleSingle__title mainHeading">,
     ειναι ΚΙ ΑΥΤΟΣ flex container. Τοτε:
       · το text-align που κληρονομει ΔΕΝ κεντραρει — σε flex
         container τη στοιχιση στον κυριο αξονα τη ρυθμιζει το
         justify-content
       · το align-items: center του γονεα ΔΕΝ βοηθαει, γιατι ο τιτλος
         εχει width: 100% και ειναι ηδη ολοκληρο το πλατος: κεντραρεις
         ενα κουτι που ηδη γεμιζει

     ΤΡΕΙΣ ΙΔΙΟΤΗΤΕΣ ΜΑΖΙ, καθεμια για αλλο σεναριο:
       text-align      αν ειναι block
       justify-content αν ειναι flex  (ο πιθανοτερος ενοχος)
       align-self      αν ειναι flex item με fit-content πλατος

     Καμια δεν βλαπτει οταν δεν ισχυει: το justify-content σε block
     στοιχειο αγνοειται, το text-align σε flex container ισχυει για
     το κειμενο ΜΕΣΑ στα παιδια του. Τεταρτη φορα το ιδιο μοτιβο
     (138, 245, 256, εδω) — γι' αυτο γραφονται ολες μαζι.         */
  /* ── ΤΟ html body ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΣΗ — ΒΗΜΑ 263 ────────────────
     ΒΡΕΘΗΚΕ Ο ΕΝΟΧΟΣ, ΜΕΣΑ ΣΤΟ mainMag.css:

         .articleSingle__content
           h1:not(.articleSingle__authorDetailsContentTitle).articleSingle__title
         { text-align: left; }

     ΕΙΔΙΚΟΤΗΤΑ, ΜΕΤΡΗΜΕΝΗ:
       mainMag  .__content + :not() + .__title = 3 κλασεις, h1 = 1 στοιχειο
                                                          → (0,3,1)
       εμεις    .__mediaContainer + .__content + :is(.__title)
                = 3 κλασεις, 0 στοιχεια                    → (0,3,0)

     ΙΣΟΠΑΛΙΑ ΣΤΙΣ ΚΛΑΣΕΙΣ, ΚΑΙ ΚΡΙΝΕΙ ΤΟ ΣΤΟΙΧΕΙΟ. Ενα σκετο h1 —
     το φθηνοτερο κομματι επιλογεα που υπαρχει — νικαει τρεις κλασεις
     μας επειδη η συγκριση κατεβαινει στην τριτη στηλη μονο οταν οι
     δυο πρωτες ειναι ισες. Ποσοτητα κλασεων ΔΕΝ αναπληρωνει.

     ΤΟ html body ΔΙΝΕΙ ΔΥΟ ΣΤΟΙΧΕΙΑ: (0,3,2) εναντι (0,3,1).
     Ιδιο ακριβως κολπο με το βημα 254 (η λευκη ζωνη των banner) και
     το βημα 219 του header. Δεν αυξανει κλασεις — αρα δεν χαλαει
     καμια αλλη ισορροπια· μετακινει ΜΟΝΟ τη στηλη που κρινει.

     ΠΡΟΣΟΧΗ ΑΝ ΑΛΛΑΞΕΙ ΚΑΤΙ: το mainMag ΕΧΕΙ ΗΔΗ, στο
     @media (max-width: 1279px), text-align: center για το ιδιο h1 —
     αλλα σε (0,2,1), δηλαδη ΧΑΜΗΛΟΤΕΡΑ απο το left των (0,3,1).
     Το ιδιο το βασικο θεμα παλευει με τον εαυτο του και χανει.    */
  html body .articleSingle__mediaContainer > .articleSingle__content
    > :is(.articleSingle__category, .articleSingle__title,
          .articleSingle__intro, .articleSingle__subtitle,
          .articleSingle__summary, .articleSingle__info,
          .articleSingle__date, h1, h2) {
    text-align: center;
    justify-content: center;
    align-self: center;
  }

  /* ΤΟ ΣΩΜΑ ΤΟΥ ΑΡΘΡΟΥ ΜΕΝΕΙ ΑΡΙΣΤΕΡΑ — ΣΚΟΠΙΜΑ.
     Αν το __description βρεθει καποτε μεσα στο __content, θα
     κληρονομουσε το κεντρο. Κεντραρισμενες παραγραφοι πολλων σειρων
     ειναι το χειροτερο για αναγνωση: το ματι δεν ξερει που ξεκιναει
     η επομενη γραμμη, γιατι η αρχη αλλαζει θεση σε καθε μια (ιδιο
     σκεπτικο με το .rvw-feature, βημα 101). Ο τιτλος και η περιληψη
     ειναι λιγες σειρες — εκει το κεντρο δουλευει.

     Αν το __description ειναι αλλου στο DOM, αυτος ο κανονας απλα
     δεν ταιριαζει σε τιποτα. Κοστος: μια γραμμη. Οφελος: δεν
     χαλαει τιποτα αν αυριο αλλαξει το template.                  */
  .articleSingle__mediaContainer > .articleSingle__content
    :is(.articleSingle__description, .articleCenterContainer__content) {
    text-align: left;
  }

  /* ── ΤΑ ΧΕΙΡΙΣΤΗΡΙΑ ΦΕΥΓΟΥΝ ΑΠΟ ΤΗΝ ΚΟΡΥΦΗ — ΒΗΜΑ 270 ────────────
     ΜΕΤΡΗΜΕΝΟ ΣΤΟ ΖΩΝΤΑΝΟ SITE: το .articleActions (κουμπια
     κοινοποιησης + μεγεθος γραμματων) καθοταν ΠΡΩΤΟ μεσα στο
     .articleSingle__media, πανω απο κατηγορια και τιτλο. Με
     margin 16 + 24 και υψος ~40px ηταν ~80-110px κενου.

     ΓΙΑΤΙ ΚΕΝΟ ΚΑΙ ΟΧΙ ΟΡΑΤΑ ΚΟΥΜΠΙΑ: τα .articleActions__link ειναι
     κυκλοι με border: 2px solid #171717 — σκουρο σε σκουρο. Και απο
     τα τεσσερα .st-btn, τα τρια εχουν inline style="display:none"
     απο το template. Ενα σχεδον αορατο κουτι με υψος: η ιδια παγιδα
     με τα tabs (266) και τα messages (268), τριτη φορα σημερα.

     ── Η ΠΡΑΓΜΑΤΙΚΗ ΑΙΤΙΑ, ΒΡΕΘΗΚΕ ΣΤΟ ΖΩΝΤΑΝΟ HTML ───────────────
     Το mainsite.css ΕΧΕΙ κανονα «.articleActions { order: 3 }» στο
     @media (max-width: 766px), που τα στελνει κατω. ΑΛΛΑ ΣΤΙΣ
     ΣΕΛΙΔΕΣ ΑΡΘΡΟΥ ΤΟ mainsite.css ΔΕΝ ΦΟΡΤΩΝΕΤΑΙ ΚΑΘΟΛΟΥ — μονο
     το mainMag.css (επιβεβαιωθηκε απο τα <link> της σελιδας). Και
     το mainMag εχει order ΜΟΝΟ για .type30 / .type31, κλασεις που
     το αρθρο μας δεν εχει.

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

     ΓΙΑΤΙ 5 ΚΑΙ ΟΧΙ 3: ιδιο σκεπτικο με το βημα 260 — τα κενα
     νουμερα αφηνουν θεση για κουτι που θα μπει αναμεσα.          */
  .articleSingle__media > .articleActions {
    order: 5;
    margin-top: 24px;
  }

  /* ΤΑ ΚΟΥΜΠΙΑ ΤΟΥΣ ΓΙΝΟΝΤΑΙ ΟΡΑΤΑ — ο κανονας ειναι στη γρ.254,
     ΕΞΩ απο αυτο το @media.

     ΕΙΧΕ ΕΔΩ ΑΝΤΙΓΡΑΦΟ με color: var(--pg-text-muted) — ΝΕΚΡΟ και
     παραπλανητικο. Το @media ΔΕΝ προσθετει ειδικοτητα: ο εδω
     επιλογεας ηταν σκετο .articleActions__link (0,1,0) εναντι
     html body:is(…) .articleActions__link (0,2,2) της γρ.254. Σε
     κινητο νικουσε ΠΑΝΤΑ ο εξω — το muted δεν βαφτηκε ποτε.
     Αφαιρεθηκε στο βημα 287: μηδεν οπτικη αλλαγη, μια λιγοτερη
     ψευτικη πληροφορια για τον επομενο.                          */

  /* η κεντρικη εικονα πεφτει απο κατω */
  .articleSingle__mediaContainer > .articleSingle__image,
  .articleSingle__mediaContainer > .articleSingle__slider,
  .articleSingle__mediaContainer > .articleSingle__gallery {
    order: 5;
  }
}


/* ═══ Η ΚΑΤΗΓΟΡΙΑ ΠΑΝΩ ΑΠΟ ΤΟΝ ΤΙΤΛΟ ════════════════════════════════
   βημα 264 · 27/10/2026

   ΤΟ TEMPLATE ΑΛΛΑΞΕ, ΟΧΙ ΤΟ CSS ΜΟΝΟ. Στο node--article.html.twig ο
   βροχος της κατηγοριας ηταν ΜΕΣΑ στο .articleSingle__image και
   μεταφερθηκε ΜΕΣΑ στο .articleSingle__content, πριν τον <h1>.

   ΓΙΑΤΙ ΔΕΝ ΓΙΝΟΤΑΝ ΜΕ CSS: το order δουλευει ΜΟΝΟ μεταξυ αδερφιων.
   Η κατηγορια ηταν παιδι της ΕΙΚΟΝΑΣ, οχι του content — δυο
   διαφορετικοι γονεις. Οι δυο CSS διεξοδοι σπαγανε την εικονα:
     · display: contents στο __image → χανεται το min-width: 100vw
       και το left: -32px που δινουν το full-bleed στο κινητο
     · position: absolute στην κατηγορια → το mainMag δινει
       position: relative στην εικονα, αρα θα κολλουσε ΜΕΣΑ της

   ── ΤΙ ΧΡΕΙΑΖΕΤΑΙ ΜΟΛΙΣ ΑΛΛΑΞΕΙ ΓΟΝΕΑΣ ────────────────────────────
   Το mainMag.css:18189 τη σχεδιασε ΓΙΑ ΜΕΣΑ ΣΤΗΝ ΕΙΚΟΝΑ:

       .articleSingle__category {
         position: absolute;  left: 0;  bottom: 0;  z-index: 2;
         background-color: #000;  color: #fff;  padding: 0 16px;
       }

   Καθε μια απο αυτες ειναι λαθος στη νεα της θεση:
     position/left/bottom → θα εβγαινε απο τη ροη και θα αγκιστρωνοταν
       σε οποιον προγονο τυχαινει να ειναι positioned, οχι πανω απο
       τον τιτλο
     background #000 + color #fff → ΜΑΥΡΗ ΠΑΣΤΙΛΙΑ ΣΕ ΜΑΥΡΟ ΦΟΝΤΟ,
       ακριβως η παγιδα του βηματος 004 με το .article__category των
       καρτων· εκει ειχε λυθει με τον ιδιο τροπο

   ΙΔΙΑ ΦΩΝΗ ΜΕ ΤΙΣ ΚΑΡΤΕΣ: διαβαζει τα ιδια tokens με το
   .article__category της ενοτητας 4 του sections.css, αρα αν αλλαξει
   η παλετα ακολουθει μονη της.

   ΕΙΔΙΚΟΤΗΤΑ: html + body + .__content + > .__category = (0,2,2).
   ΔΥΟ ΑΝΤΙΠΑΛΟΙ, ΟΧΙ ΕΝΑΣ:
     mainMag .articleSingle__category                      (0,1,0)
     ΔΙΚΟΣ ΜΑΣ .__category.__category { display: none }    (0,2,0)
   Ο δευτερος ειναι ο δυσκολος, και ειναι γραμμενος ~230 γραμμες πιο
   πανω σε ΑΥΤΟ το αρχειο. Το (0,2,2) τον περναει με δυο στοιχεια —
   χωρις να προστεθει κλαση, αρα χωρις να μετακινηθει τιποτα αλλο.
   Το «γιατι μενει εκεινος» ειναι γραμμενο στο σχολιο του.          */
html body .articleSingle__content > .articleSingle__category {
  position: static;
  inset: auto;
  z-index: auto;
  display: inline-block;
  width: auto;
  margin: 0 0 4px;
  padding: 0;
  background-color: transparent;

  font-family: var(--pg-font-cond, 'Fira Sans', Arial, sans-serif);
  font-size: var(--pg-meta, .9333rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pg-section-accent, rgb(255 72 72));
  text-decoration: none;
}

/* ΤΟ <span> ΜΕΣΑ ΤΗΣ ΞΑΝΑΕΜΦΑΝΙΖΕΤΑΙ.
   mainsite/mainMag: .articleSingle__category span { display: none } —
   εκει εκρυβε διακοσμητικο εικονιδιο που σε εμας δεν υπαρχει. Αν ο
   τιτλος της κατηγοριας τυλιχτει καποτε σε <span>, θα εξαφανιζοταν
   ΟΛΟΚΛΗΡΟΣ χωρις ιχνος.                                           */
html body .articleSingle__content > .articleSingle__category span {
  display: inline;
}

@media (hover: hover) and (pointer: fine) {
  html body .articleSingle__content > .articleSingle__category:hover {
    color: var(--pg-text, #e8e8e8);
  }
}

/* ═══ Η ΥΠΟΓΡΑΦΗ ΜΕΣΑ ΣΤΟ ΑΡΘΡΟ ═══════════════════════════════════
   βηματα 284–285 · 02/11/2026

   ΖΗΤΟΥΜΕΝΟ (κινητο μονο):
       (ΤΤ) POP UP Team             ← φωτο + ονομα μαζι, κεντραρισμενα
        30 Σεπτεμβριου 2024         ← ημερομηνια απο κατω, κεντραρισμενη

   ── ΤΟ TEMPLATE ΕΚΑΝΕ ΤΟ ΜΙΣΟ (βημα 284) ───────────────────────
   Η «παυλα» ηταν ΚΥΡΙΟΛΕΚΤΙΚΟ «|» γραμμενο μεσα στο
   node--article.html.twig, οχι ::before — κανενα CSS δεν θα την
   αγγιζε. Αφαιρεθηκε απο εκει, μαζι με τους ελληνικους μηνες.
   ΔΕΥΤΕΡΗ ΦΟΡΑ ΤΟ ΙΔΙΟ ΑΡΧΕΙΟ: το teaser ειχε το δικο του στο 283.
   Η ημερομηνια στα ελληνικα ισχυει ΠΑΝΤΟΥ — ειναι μορφοποιηση, οχι
   διαταξη. Μονο η ΔΙΑΤΑΞΗ παρακατω ειναι του κινητου.

   ── ΤΟ ΕΜΠΟΔΙΟ: Η ΗΜΕΡΟΜΗΝΙΑ ΕΙΝΑΙ ΔΥΟ ΕΠΙΠΕΔΑ ΒΑΘΙΑ ───────────
   .mobileActions__header            flex row (mainMag 9282 + 18281)
     a.mobileActions__image          η φωτο
     .mobileActions__col             flex (9303)
       .mobileActions__row           block (18296)
         a      ← ονομα
         span   ← ημερομηνια
   Η ημερομηνια πρεπει να βγει ΠΑΝΩ απο τη φωτο. Με flex-wrap δεν
   γινεται: δεν ειναι αδερφι της φωτος, ειναι εγγονι.

   ── ΓΙΑΤΙ display: contents ΚΑΙ ΟΧΙ ΑΛΛΑΓΗ ΣΤΟ TEMPLATE ─────────
   Μετακινηση του <span> στο Twig θα αλλαζε ΚΑΙ το desktop: το
   .mobileActions ειναι ορατο σε ΟΛΑ τα πλατη παρα το ονομα του
   (mainMag:9277 display: none, 18277 display: block, ΚΑΝΕΝΑ απο τα
   δυο μεσα σε media query — επιβεβαιωθηκε, δεν υποτεθηκε). Το
   markup ειναι ενα, το CSS ομως μπορει να διαφερει ανα πλατος.
   Με display: contents τα __col/__row παυουν να παραγουν κουτι και
   τα παιδια τους ανεβαινουν να γινουν ΑΠΕΥΘΕΙΑΣ παιδια του flex
   header. Τοτε φωτο, ονομα και ημερομηνια ειναι αδερφια.

   ── ΠΩΣ ΜΠΑΙΝΕΙ ΑΠΟ ΚΑΤΩ ───────────────────────────────────────
   flex: 0 0 100% δινει στην ημερομηνια ΟΛΟΚΛΗΡΗ γραμμη, αρα
   τυλιγεται μονη της κατω απο το ζευγος φωτο+ονομα. ΚΑΝΕΝΑ order:
   η σειρα του DOM ειναι ηδη φωτο → ονομα → ημερομηνια. (Το βημα
   285 ειχε order: -1 για να παει πανω· αφαιρεθηκε, δεν ακυρωθηκε
   με δευτερο κανονα.)

   justify-content: center κεντραρει ΤΗ ΓΡΑΜΜΗ — ετσι κεντραρεται
   το ΖΕΥΓΟΣ φωτο+ονομα σαν ενοτητα, οχι το καθενα χωριστα.

   Το ονομα «ξεκιναει στο κεντρο του κυκλου» χωρις νεο κανονα: το
   align-items: center (mainMag:18282) ισχυει ΑΝΑ ΓΡΑΜΜΗ του flex,
   και τωρα η πρωτη γραμμη εχει μονο φωτο + ονομα.

   ── ΓΙΑΤΙ Η ΦΩΤΟ ΔΕΝ ΕΒΓΑΙΝΕ ΚΥΚΛΟΣ ────────────────────────────
   mainMag:9292 δινει figure { overflow: hidden; border-radius: 100% }
   αλλα ΚΑΜΙΑ διασταση. Το 48x48 ειναι στο <a> (18287). Το figure
   ειναι block: πλατος 48 απο τον γονεα, υψος ΑΥΤΟΜΑΤΟ — και το img
   εχει height: 100% πανω σε γονεα με υψος auto, που λυνεται σε
   auto, δηλαδη στο ΦΥΣΙΚΟ υψος της μικρογραφιας. Μη τετραγωνη
   μικρογραφια → μη τετραγωνο figure → το border-radius: 100% δινει
   ΕΛΛΕΙΨΗ, οχι κυκλο. Γι' αυτο «ειναι λιγο διαφορετικο».
   Το object-fit: cover (9299) ηταν παντα εκει· απλα δεν ειχε
   σταθερο κουτι να γεμισει.

   ΜΟΝΟ ΚΙΝΗΤΟ, ρητο αιτημα. Σε desktop μενει η αρχικη διαταξη.   */
@media (max-width: 766px) {

  html body:is(.singleArticlePage, .galleryArticlePage) :is(.mobileActions__col,
                                                            .mobileActions__row) {
    display: contents;
  }

  html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__header {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Η ημερομηνια: δικη της γραμμη, απο κατω, κεντραρισμενη.
     Το margin-right: 20px του mainMag:9326 ακυρωνεται ηδη μονο του
     απο το span:last-child (9333) — δεν το ξαναγραφουμε.          */
  html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__row > span {
    flex: 0 0 100%;
    margin-top: 6px;
    text-align: center;
  }

  /* Ο ΚΥΚΛΟΣ: δινουμε στο figure το κουτι που δεν ειχε ποτε.
     Το 100% λυνεται πανω στο ρητο 48x48 του <a> (mainMag:18287),
     αρα τετραγωνο → το border-radius: 100% του 9294 γινεται
     επιτελους κυκλος και το object-fit: cover κοβει σωστα.
     aspect-ratio: ζωνη ασφαλειας αν αλλαξει καποτε το υψος.       */
  html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__image figure {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
  }

  /* Το ονομα πιο κοντα στη φωτο: 20px (mainMag:18286) → 10px.
     Αλλαζουμε ΤΗΝ ΤΙΜΗ στον δικο μας κανονα, οχι με δευτερο.      */
  html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__image {
    margin-right: 10px;
  }
}

/* ═══ ΚΑΘΕΤΟΣ ΣΤΗΝ ΥΠΟΓΡΑΦΗ — ΜΟΝΟ DESKTOP ══════════════════════════
   βημα 287 · 02/11/2026

   Σε desktop ονομα και ημερομηνια ειναι στην ΙΔΙΑ σειρα (το βημα
   285 αλλαξε μονο το κινητο), οποτε χρειαζονται χωρισμα.

   Ο ΙΔΙΟΣ ΧΑΡΑΚΤΗΡΑΣ «|» ΠΟΥ ΑΦΑΙΡΕΘΗΚΕ ΣΤΟ ΒΗΜΑ 284, ΑΛΛΑ ΑΠΟ
   ΑΛΛΗ ΠΗΓΗ. Εκει ηταν γραμμενος στο Twig, αρα υπηρχε σε ΟΛΑ τα
   πλατη και κανενα CSS δεν τον εφτανε. Εδω ειναι ::before, αρα
   μπορει να υπαρχει σε ΕΝΑ μονο πλατος — αυτο ακριβως που ζητηθηκε.

   ΓΙΑΤΙ ΟΧΙ ΠΙΣΩ ΣΤΟ TEMPLATE: το markup ειναι ΕΝΑ για ολα τα
   πλατη. Οτι μπει στο Twig θα φαινοταν και στο κινητο, οπου η
   ημερομηνια ειναι σε δικη της γραμμη και η καθετος θα κρεμοταν
   στην αρχη της.

   min-width: 767px: ακριβως το συμπληρωμα του max-width: 766px
   της ενοτητας του κινητου — καμια επικαλυψη, κανενα κενο.       */
@media (min-width: 767px) {
  html body:is(.singleArticlePage, .galleryArticlePage) .mobileActions__row > span::before {
    content: "| ";
  }
}


/* ═══ ΤΑ ΚΟΥΜΠΙΑ ΚΟΙΝΟΠΟΙΗΣΗΣ ΣΤΟ ΧΡΩΜΑ ΤΩΝ A− / A+ ══════════════
   βημα 287 · 02/11/2026

   Τα τεσσερα αριστερα (Facebook, X, Messenger, mail) εβγαιναν
   ΓΕΜΑΤΟΙ ΛΕΥΚΟΙ ΚΥΚΛΟΙ με μαυρο συμβολο, ενω τα δυο δεξια
   (μεγεθος γραμματων) ειναι περιγραμμα με διαφανο φοντο. Τα
   εξισωνουμε προς τα δεξια.

   ── ΠΟΙΟΣ ΤΑ ΕΒΑΦΕ ─────────────────────────────────────────────
   mainMag:27851  .st-btn { background-color: #fff !important;
                            border: 1px solid #e0e0e0 !important }
   mainMag:27856  .st-btn img { filter: brightness(0) !important }
   Το λευκο φοντο ερχεται απο εκει· το μαυρο συμβολο ειναι το
   brightness(0) πανω στο εξωτερικο SVG.

   ── ΓΙΑΤΙ filter ΚΑΙ ΟΧΙ color ─────────────────────────────────
   Δεν ειναι εικονιδιογραμματοσειρα: ειναι <img> με SVG απο το
   platform-cdn.sharethis.com. Εξωτερικο SVG σε <img> ΔΕΝ βαφεται
   με color — ειναι ξεχωριστο εγγραφο, το CSS μας δεν το αγγιζει.
   Ο μονος δρομος ειναι filter πανω στο ιδιο το <img>.

   brightness(0) invert(0.91): το brightness(0) ισοπεδωνει το SVG
   σε ΚΑΘΑΡΟ ΜΑΥΡΟ ανεξαρτητα απο το τι χρωμα εχει η πηγη (αλλιως
   το invert θα εδινε αλλο αποτελεσμα σε καθε δικτυο — το μπλε του
   Facebook δεν αντιστρεφεται στο ιδιο γκρι με το μαυρο του X).
   Μετα invert(0.91) πανω σε μαυρο δινει 0.91 × 255 = 232, δηλαδη
   ΑΚΡΙΒΩΣ #E8E8E8 — η τιμη του --pg-text, το ιδιο χρωμα που εχουν
   τα A− / A+ απο τη γρ.254.

   Σταθερα και οχι var(): το filter δεν δεχεται χρωμα απο μεταβλητη.
   Αν αλλαξει καποτε το --pg-text, αλλαζει και το 0.91 εδω.

   ── !important ─────────────────────────────────────────────────
   Το mainMag γραφει !important. Μεταξυ δηλωσεων !important κρινει
   η ειδικοτητα: html body:is(…) .st-btn = (0,2,2) εναντι (0,1,0),
   και εναντι του .sharethis-inline-share-buttons .st-btn (0,2,0)
   που δινει border: 2px solid #171717 !important (γρ.15908).

   border-color και οχι border: κραταμε παχος και σχημα του
   mainMag, αλλαζουμε ΜΟΝΟ το χρωμα — το μαθημα του βηματος 249
   εφαρμοσμενο προληπτικα.

   ΔΕΝ ΑΓΓΙΧΤΗΚΕ ΤΟ HOVER (mainMag:27722): βαζει φοντο #171717 και
   filter: none, δηλαδη επαναφερει τα χρωματα της καθε μαρκας. Σε
   σκουρο φοντο αυτο διαβαζεται μια χαρα και ειναι αλλαγη ΧΡΩΜΑΤΟΣ,
   οχι κινησης — συμβατο με τον κανονα του βηματος 112/146.       */
html body:is(.singleArticlePage, .galleryArticlePage) .st-btn {
  background-color: transparent !important;
  border-color: var(--pg-border, #2e2e2e) !important;
}

html body:is(.singleArticlePage, .galleryArticlePage) .st-btn img {
  filter: brightness(0) invert(0.91) !important;
}