/* ═══════════════════════════════════════════════════════════════════════
ΑΡΧΙΚΗ ΤΡΙΩΝ ΣΤΗΛΩΝ — αντικαθιστα το hero carousel
popup.gr · βημα 060 · 02/10/2026
block_13 → 4 επιμελημενα (entityqueue hero_article)
block_14 → 6 τελευταια (κατα ημερομηνια)
Διαταξη:
┌──────────┬──────────────────┬──────────┐
│ αρθρο 3 │ αρθρο 1 │ ΤΕΛΕΥΤΑΙΑ│
│ αρθρο 4 │ (μεγαλο) │ 6 τιτλοι│
│ ├──────────────────┤ │
│ │ αρθρο 2 (μικρο)│ │
└──────────┴──────────────────┴──────────┘
ΚΑΝΕΝΑ JS. Καμια κλαση στο Views — ολα δενουν στο view-display-id,
που το βγαζει μονο του το Views σε καθε display.
═══════════════════════════════════════════════════════════════════════ */
html:root {
--fg-gap: 30px;
--fg-rule: #ffffff; /* οι γραμμες, οπως στο Pitchfork */
--fg-rule-soft: rgb(255 255 255 / .18); /* οι λεπτες, στη δεξια στηλη */
--fg-col-side: 3.1fr;
--fg-col-mid: 5.8fr;
/* Το κατακορυφο κενο αναμεσα στις ενοτητες της αρχικης (βημα 103).
Μικραινει σε στενη οθονη, οπου 72px ειναι υπερβολικα. */
--fg-section-gap: clamp(24px, 2.6vw, 38px); /* βημα 232 — ηταν clamp(44px,5vw,72px) */
}
/* ═══ 1. ΟΙ ΤΡΕΙΣ ΣΤΗΛΕΣ ΣΤΗ ΣΕΛΙΔΑ ════════════════════════════════════
Τα δυο blocks ειναι ΞΕΧΩΡΙΣΤΑ αδελφια μεσα στο region-content. Για να
καθισουν διπλα-διπλα, το region γινεται grid ΜΟΝΟ στην αρχικη.
Το `> *` με grid-column: 1 / -1 ειναι η δικλειδα: ΟΛΑ τα υπολοιπα
παιδια — οι ενοτητες κατηγοριων, τα μπανερ τους — κρατουν πληρες
πλατος και δεν τα αγγιζει τιποτα. Μονο τα δυο blocks που ονοματιζουμε
παιρνουν στηλη.
Το body.path-frontpage υπαρχει ηδη (το ειδαμε στην αλυσιδα γονεων). */
body.path-frontpage .region-content {
display: grid;
/* ΤΟ minmax(0, …) ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ — βημα 135 · 09/10/2026.
ΜΕΤΡΗΘΗΚΕ ΖΩΝΤΑΝΑ: σε παραθυρο 717px η στηλη υπολογιζοταν
2174px και το docScrollWidth εφτανε 2190. Ολη η σελιδα
ξεχειλωνε, και καθε μπλοκ εβγαζε τεραστιες εικονες.
ΓΙΑΤΙ: το «1fr» ΔΕΝ σημαινει «ενα κλασμα του διαθεσιμου χωρου».
Σημαινει minmax(AUTO, 1fr) — και το auto ελαχιστο ειναι το
MIN-CONTENT του περιεχομενου, οχι μηδεν. Αν εστω ενα παιδι
αρνειται να συρρικνωθει (εδω: banner 300x250 με min-width:300px
μεσα σε .col-3, δηλαδη απαιτηση ~1200px για τη σειρα), η στηλη
μεγαλωνει ΜΑΖΙ ΤΟΥ περαν του περιεκτη της.
Καμια προειδοποιηση, κανενα σφαλμα — απλως μια σελιδα τριπλασια.
Με minmax(0, …) το ελαχιστο γινεται ΡΗΤΑ μηδεν: η στηλη δεν
ξεπερνα ποτε τον περιεκτη, και οτι δεν χωραει κοβεται ή κυλαει
ΜΕΣΑ στο μπλοκ του αντι να σπρωχνει ολη τη σελιδα. */
grid-template-columns: minmax(0, var(--fg-col-side))
minmax(0, var(--fg-col-mid))
minmax(0, var(--fg-col-side));
column-gap: var(--fg-gap);
/* ΚΕΝΟ ΑΝΑΜΕΣΑ ΣΤΑ ΜΠΛΟΚ — βημα 103 · 08/10/2026.
Υπηρχε μονο column-gap, αρα οι ενοτητες καθονταν η μια πανω στην
αλλη.
ΓΙΑΤΙ row-gap ΚΑΙ ΟΧΙ margin στις ενοτητες:
· τα grid items ΔΕΝ συμπτυσσουν περιθωρια, αρα δυο γειτονικα
margin: 56px θα εδιναν 112px — ή 56px αν ηταν σε κανονικη ροη.
Αβεβαιο αποτελεσμα, αναλογα το context.
· το row-gap ειναι ΕΝΑΣ αριθμος, ιδιος παντου, και δεν εξαρταται
απο το τι κλασεις εχει το καθε μπλοκ μεσα του
· δεν αγγιζει τα block_13/15 και block_14 που ειναι ΔΙΠΛΑ-ΔΙΠΛΑ:
το row-gap ισχυει αναμεσα σε ΓΡΑΜΜΕΣ, οχι μεσα στην ιδια
ΕΝΑΣ ΑΡΙΘΜΟΣ ΤΟ ΡΥΘΜΙΖΕΙ: --fg-section-gap πιο πανω. */
row-gap: var(--fg-section-gap, 72px);
align-items: start;
}
body.path-frontpage .region-content > * { grid-column: 1 / -1; }
/* ═══ ΑΥΤΟΜΑΤΗ ΕΝΑΛΛΑΓΗ 2 ↔ 3 ΣΤΗΛΩΝ (βημα 074 - 05/10/2026)
Η διαταξη ΔΙΑΒΑΖΕΙ αν υπαρχει το block_14 στη σελιδα και προσαρμοζεται
μονη της. Αρα η εναλλαγη γινεται ΜΟΝΟ απο το Block layout:
ενεργοποιεις ή απενεργοποιεις το μπλοκ, και τελος. Κανενα αρχειο.
Το :has() στον ΓΟΝΕΑ ρωταει «περιεχει αυτη η περιοχη το block_14;».
Οι δυο κλαδοι ειναι αμοιβαια αποκλειομενοι, αρα η σειρα γραφης δεν
παιζει ρολο — δεν μπορουν να ισχυσουν ποτε μαζι. */
/* ΡΗΤΕΣ ΘΕΣΕΙΣ, οχι αυτοματη ανιχνευση (βημα 075 - 05/10/2026)
Οσο υπηρχε ΜΟΝΟ το block_13, η διαταξη αλλαζε μονη της αναλογα με το
αν υπηρχε το block_14. Τωρα που τα δυο σεναρια πρεπει να φαινονται
ΜΑΖΙ στην ιδια σελιδα, η ανιχνευση δεν αρκει — χρειαζεται καθε block
να ξερει τη θεση του.
block_13 → εκδοχη Β, πληρες πλατος
block_15 → εκδοχη Γ, οι δυο πρωτες στηλες· διπλα του το block_14 */
body.path-frontpage .region-content > *:has(.view-display-id-block_13) {
grid-column: 1 / -1;
}
body.path-frontpage .region-content > *:has(.view-display-id-block_15) {
grid-column: 1 / 3;
}
body.path-frontpage .region-content > *:has(.view-display-id-block_14) {
grid-column: 3 / 4;
border-left: 1px solid var(--fg-rule);
padding-left: var(--fg-gap);
}
/* ═══ 1β. ΑΠΟΣΤΑΣΗ ΑΠΟ ΤΟ HEADER ═══════════════════════════════════════
Το header ειναι position: fixed, αρα ΔΕΝ πιανει χωρο στη ροη. Το
carousel ηταν 100vh και περνουσε επιτηδες απο κατω του. Χωρις αυτο,
το περιεχομενο ξεκιναει στην κορυφη και κρυβεται.
78px = --hdr-logo-h 50px + 28px padding, απο το header.css.
Συν η μπαρα του admin, που υπαρχει μονο οταν εισαι συνδεδεμενος. */
body.path-frontpage .region-content:not(:has([data-hero-carousel])) {
/* + η σειρα κατηγοριων, που ειναι ορατη ΣΤΗΝ ΚΟΡΥΦΗ — εκει ακριβως
που κρινεται αν το περιεχομενο κρυβεται απο το header.
ΜΟΝΟ οταν ΔΕΝ υπαρχει hero: το carousel ειναι πληρους οθονης και
περναει ΕΠΙΤΗΔΕΣ απο κατω απο το διαφανες header. */
padding-top: calc(var(--pg-admin-offset, 0px) + var(--pg-header-h) + var(--hdr-cats-h, 52px) + 24px);
}
/* ═══ 1γ. ΤΟ HEADER ΧΩΡΙΣ HERO ════════════════════════════════════════
Β63 — παρενεργεια που δεν ειχα προβλεψει.
Το sticky-nav.js (βημα 031) δινει φοντο στο header οταν τελειωνει το
hero: παρακολουθει το [data-hero-carousel] με IntersectionObserver.
Χωρις hero στη σελιδα, ο observer ΔΕΝ δημιουργειται καν — αρα το
.is-past-hero δεν μπαινει ποτε και το header μενει διαφανες για
παντα, με το κειμενο να περνα απο πισω.
Λυση χωρις να πειραχτει το JS: αν η σελιδα ΔΕΝ εχει hero, το header
παιρνει φοντο εξ αρχης.
Ειδικοτητα: το header.css εχει
.header×4:not(.is-past-hero) { background: transparent } (0,5,0)
Εδω: body:not(:has([data-hero-carousel])) δινει 1 κλαση — το :has()
μετραει οσο το ορισμα του, εδω ενας επιλογεας χαρακτηριστικου — συν
τεσσερα .header = (0,5,2). Ισοβαθμια στις κλασεις, κερδιζουμε στα
στοιχεια. */
html body:not(:has([data-hero-carousel])) .header.header.header.header {
/* Επιλογη Α — «λεπτη ανυψωση»: ελαχιστα πιο ανοιχτο απο τη σελιδα
(#1b1b1b πανω σε #151515) με λεπτη γραμμη. Ξεχωριζει ως χειριστηριο
χωρις να σπαει την ενοτητα του σκουρου.
Το λευκο header απορριφθηκε: ειναι fixed, αρα θα ακολουθουσε τον
αναγνωστη σαν φωτεινη σχισμη σε ολο το σκρολ. Και το #ff4848 σε
λευκο δινει 2,6:1 — κατω απο καθε οριο. */
background: #1b1b1b;
border-bottom: 1px solid var(--pg-border, #2e2e2e);
backdrop-filter: none;
transition: border-bottom-color .28s ease;
}
/* Στην ΚΟΡΥΦΗ της σελιδας: χωρις κατω γραμμη.
Εκει το header εχει ηδη τη γραμμη ΠΑΝΩ απο τις κατηγοριες — δευτερη
απο κατω κοβει τη σελιδα σε δυο με δυο παραλληλες ριγες.
Μολις γινει sticky οι κατηγοριες μαζευονται, μενει μια σειρα, και
τοτε η γραμμη χρειαζεται: ειναι το μονο που ξεχωριζει το header απο
το περιεχομενο που κυλαει απο κατω.
Το .active το βαζει το sticky-nav.js μετα τα 80px σκρολ.
Ειδικοτητα (0,6,2) εναντι (0,5,2) του κανονα απο πανω. */
html body:not(:has([data-hero-carousel])) .header.header.header.header:not(.active) {
border-bottom-color: transparent;
}
/* ═══ 2. ΤΑ 4 ΕΠΙΜΕΛΗΜΕΝΑ ══════════════════════════════════════════════
Β60 — ΓΙΑΤΙ ΑΛΛΑΞΕ Η ΠΡΟΣΕΓΓΙΣΗ
Η πρωτη εκδοχη εβαζε και τα 4 αρθρα σε ΕΝΑ grid και τα τοποθετουσε με
grid-column/grid-row ανα :nth-child. Δουλεψε, αλλα το CSS Grid
ΜΟΙΡΑΖΕΙ τις σειρες μεταξυ ολων των στηλων: το υψος της σειρας 1
οριζεται απο το ψηλοτερο στοιχειο της. Αρα οποτε η μια στηλη ηταν
ψηλοτερη, η αλλη εμενε με τεραστιο κενο.
Δεν υπαρχει τροπος να αποσυζευχθουν σειρες μεσα σε ενα grid με επιπεδη
λιστα στοιχειων. Η λυση ειναι ΔΥΟ περιεκτες στο twig — δυο
ανεξαρτητες ροες. */
:is(.view-display-id-block_13, .view-display-id-block_15) .fg {
display: grid;
column-gap: var(--fg-gap);
align-items: start;
/* block_13 — εκδοχη Β: ολο το πλατος, η μεσαια παιρνει το κερδος */
grid-template-columns: minmax(0, 3.1fr) minmax(0, 9.5fr);
}
/* block_15 — εκδοχη Γ: στενοτερη μεσαια, γιατι διπλα της ειναι τα
«ΤΑ ΤΕΛΕΥΤΑΙΑ». Το 3.1 μενει ιδιο ωστε η αριστερη στηλη να κραταει
το απολυτο πλατος της — αλλιως θα αλλαζαν και οι αναλογιες των
φωτογραφιων της. */
.view-display-id-block_15 .fg {
grid-template-columns: minmax(0, 3.1fr) minmax(0, 5.8fr);
}
:is(.view-display-id-block_13, .view-display-id-block_15) .fg__main {
border-left: 1px solid var(--fg-rule);
padding-left: var(--fg-gap);
}
/* ── το μεγαλο ── */
:is(.view-display-id-block_13, .view-display-id-block_15) .fg__main > .article:first-child {
flex-direction: column;
}
:is(.view-display-id-block_13, .view-display-id-block_15) .fg__main > .article:first-child .article__image figure {
aspect-ratio: 16 / 9;
width: 100%; height: auto; padding-top: 0; margin: 0;
}
:is(.view-display-id-block_13, .view-display-id-block_15) .fg__main > .article:first-child .article__title {
font-size: clamp(2.1rem, 3.6vw, 3.1rem);
line-height: 1.04;
}
/* Το standfirst — υπαρχει ηδη στο template ως