/* ═══ Αρχική του συνθέτη (.home-x) ═══
   Φορτώνει ΜΟΝΟ όταν ο συνθέτης είναι ενεργός. Όλα με πρόθεμα hx- ώστε να
   μη συγκρούονται με την κλασική αρχική (home.css), που μένει άθικτη.
   Ρυθμός σελίδας: οι ενότητες χωρίζονται με φόντο και αποστάσεις — καμία
   διαχωριστική γραμμή. Δύο προσθήκες στην παλέτα: κεχριμπαρί (--sun) για
   ετικέτες/λωρίδα και το σκούρο των γραμμάτων ως φόντο (--night). */

.home-x { --sun: #FFC83D; --night: #16121F; --band-soft: var(--bg-soft); }
/* Σκούρο θέμα: η σελίδα είναι ήδη σχεδόν μαύρη, οπότε οι ζώνες παίρνουν
   ΧΡΩΜΑ (βαθύ μοβ / πιο ανοιχτό γκρι-μοβ) αντί για ακόμα πιο μαύρο — αλλιώς
   όλες οι ενότητες δείχνουν ένα ενιαίο μαύρο. */
:root[data-theme="dark"] .home-x { --night: #241A3F; --band-soft: #1F1B2D; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .home-x { --night: #241A3F; --band-soft: #1F1B2D; }
}

/* ΜΟΝΟ στα νέα κομμάτια — οι σταθερές ενότητες κρατούν τα δικά τους στυλ. */
.hx-hero img, .hx-feed img, .hx-shorts img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--line); border-radius: var(--radius); }
.hx-hero em, .hx-feed em, .hx-band em { font-style: normal; }
.hx-hero b, .hx-feed b, .hx-band b { font-weight: 800; }

/* Κάθε ενότητα έχει 50px πάνω-κάτω· όταν δύο ΛΕΥΚΕΣ ακολουθούν η μία την
   άλλη, η δεύτερη δεν ξαναβάζει πάνω κενό. Γύρω από χρωματιστή ζώνη το
   κενό μένει ολόκληρο, ώστε ο τίτλος να μην κολλά στο χρώμα. */
.hx-sec { padding: 50px 0; }
.hx-sec:not([class*="hx-bg-"]) + .hx-sec:not([class*="hx-bg-"]),
.hx-ad + .hx-sec:not([class*="hx-bg-"]) { padding-top: 0; }
.hx-bg-soft { background: var(--band-soft); }
.hx-bg-night { background: var(--night); color: #F2EFF7; }
.hx-ad { padding-bottom: 46px; }

/* Τίτλος ενότητας: ετικέτα, τίτλος και το κουμπί ΚΟΛΛΗΤΑ δίπλα του. */
.hx-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.hx-head h2 { font-size: 38px; }
.hx-chip { display: inline-block; background: var(--sun); color: #17141F; font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 12px; transform: skewX(-9deg); }
.hx-chip span { display: inline-block; transform: skewX(9deg); }
.hx-btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid currentColor; border-radius: 99px; padding: 6px 15px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.hx-btn::after { content: "→"; font-size: 15px; line-height: 1; }
.hx-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hx-btn--down::after { content: "↓"; }
.hx-btn--wide { display: flex; justify-content: center; padding: 12px 16px; font-size: 13.5px; margin-top: 10px; }
.hx-bg-night .hx-btn { color: var(--sun); }
.hx-bg-night .hx-btn:hover { background: var(--sun); color: #17141F; border-color: var(--sun); }

/* Κάρτα: εικόνα, τύπος, τίτλος. Χωρίς περίγραμμα. */
.hx-card { display: block; color: inherit; }
.hx-card img { aspect-ratio: 16/10; margin-bottom: 10px; }
.hx-card em, .hx-big em { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.hx-card b, .hx-rail-item b, .hx-side-item b, .hx-dcard b, .hx-list-item b, .hx-slide b, .hx-picks b { font-family: var(--font-display); font-weight: 800; line-height: 1.1; }
.hx-card b { display: block; font-size: 21px; line-height: 1.12; }
.hx-card:hover b, .hx-rail-item:hover b, .hx-side-item:hover b, .hx-list-item:hover b, .hx-big:hover h3 { color: var(--accent); }
.hx-bg-night .hx-card em, .hx-bg-night .hx-big em { color: var(--sun); }
.hx-bg-night a:hover b, .hx-bg-night .hx-big:hover h3 { color: var(--sun); }

/* Κεντρικό θέμα + 3 υπο-κεντρικά + τελευταία */
.hx-hero { padding: 30px 0 40px; }
.hx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
.hx-lead { position: relative; display: block; border-radius: 12px; overflow: hidden; color: #fff; }
.hx-lead img { aspect-ratio: 16/9; border-radius: 0; }
.hx-lead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 9, 18, 0.94), rgba(12, 9, 18, 0.3) 50%, transparent 74%); }
.hx-lead-txt { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; }
.hx-lead h1 { font-size: 48px; margin-top: 12px; color: #fff; }
.hx-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.hx-rail h2 { font-size: 26px; margin-bottom: 4px; }
.hx-rail-item { display: grid; grid-template-columns: 1fr 96px; gap: 14px; align-items: center; padding: 11px 0; color: inherit; }
.hx-rail-item em { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.hx-rail-item b { display: block; font-size: 20px; }
.hx-rail-item img { aspect-ratio: 4/3; }

/* Πρότυπα ενότητας άρθρων */
.hx-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: start; }
.hx-big { display: block; color: inherit; }
.hx-big img { aspect-ratio: 16/9; margin-bottom: 14px; }
.hx-big h3 { font-size: 36px; }
.hx-side-item { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding-bottom: 20px; color: inherit; }
.hx-side-item img { aspect-ratio: 16/10; }
.hx-side-item b { font-size: 23px; }
.hx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 22px; }
.hx-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.hx-row { display: grid; gap: 16px; }
.hx-row5 { grid-template-columns: repeat(5, 1fr); }
.hx-row4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hx-dcard { display: block; background: var(--night); color: #fff; border-radius: 12px; overflow: hidden; }
.hx-bg-night .hx-dcard { background: rgba(255, 255, 255, 0.07); }
.hx-dcard img { aspect-ratio: 4/3; border-radius: 0; }
.hx-dcard span { display: block; padding: 14px 14px 18px; }
.hx-dcard em { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sun); margin-bottom: 6px; }
.hx-dcard b { font-size: 20px; line-height: 1.12; }
.hx-list2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 40px; }
.hx-list-item { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; color: inherit; }
.hx-list-item img { aspect-ratio: 16/10; }
.hx-list-item b { display: block; font-size: 22px; }
.hx-list-item em { font-size: 13px; color: var(--ink-2); }

/* Slider και λίστα */
.hx-read { display: grid; grid-template-columns: 1.55fr 1fr; gap: 36px; align-items: start; }
.hx-sliderbox { position: relative; border-radius: 12px; overflow: hidden; }
.hx-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hx-slider::-webkit-scrollbar { display: none; }
.hx-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: block; color: #fff; }
.hx-slide img { aspect-ratio: 16/9; border-radius: 0; }
.hx-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 9, 18, 0.94), transparent 62%); }
.hx-slide b { position: absolute; z-index: 1; left: 26px; right: 130px; bottom: 22px; font-size: 34px; line-height: 1.08; }
.hx-arrows { position: absolute; z-index: 2; right: 18px; bottom: 20px; display: flex; gap: 8px; }
.hx-arrows button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #17141F; font-size: 20px; font-weight: 800; cursor: pointer; }

/* Λωρίδα */
.hx-band { background: var(--sun); color: #17141F; padding: 30px 0; }
.hx-band .wrap { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center; }
.hx-band h2 { font-size: 34px; color: #17141F; }
.hx-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hx-picks a { display: block; color: #17141F; }
.hx-picks em { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.7; margin-bottom: 3px; }
.hx-picks b { font-size: 22px; }
.hx-picks b::after { content: " →"; }

/* Shorts: ο τίτλος κάτω από το βίντεο */
.hx-shorts-row { grid-template-columns: repeat(5, 1fr); }
.hx-short { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hx-short-v { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.hx-short img { aspect-ratio: 9/16; border-radius: 0; }
.hx-short i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); }
.hx-short i::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #17141F; }
.hx-short b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.3; }

/* Σταθερές ενότητες (κοινά partials με την κλασική): ίδιο περιεχόμενο και
   κάρτες, αλλά ο τίτλος παίρνει το νέο σχήμα — κουμπί δίπλα, χωρίς γραμμή. */
.home-x .section-head { align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.home-x .section-head h2 { font-size: 38px; }
.home-x .section-head .rule { display: none; }
.home-x .section-head a.more { border: 1.5px solid currentColor; border-radius: 99px; padding: 6px 15px; margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.home-x .section-head a.more:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

@media (max-width: 820px) {
	.hx-sec { padding: 36px 0; }
	.hx-ad { padding-bottom: 34px; }
	.hx-head h2, .home-x .section-head h2 { font-size: 30px; }
	.hx-hero-grid, .hx-duo, .hx-read { grid-template-columns: 1fr; gap: 26px; }
	.hx-lead img { aspect-ratio: 4/5; }
	.hx-lead-txt { left: 18px; right: 18px; bottom: 18px; }
	.hx-lead h1 { font-size: 34px; }
	.hx-subs { grid-template-columns: 1fr; gap: 16px; }
	.hx-subs .hx-card { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
	.hx-subs .hx-card img { margin: 0; }
	.hx-big h3 { font-size: 28px; }
	.hx-side-item { grid-template-columns: 116px 1fr; }
	.hx-side-item b { font-size: 20px; }
	.hx-grid3 { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
	.hx-grid3 .hx-card b, .hx-grid2 .hx-card b { font-size: 18px; }
	.hx-grid2 { gap: 20px 14px; }
	.hx-row { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; scroll-snap-type: x proximity; }
	.hx-row::-webkit-scrollbar { display: none; }
	.hx-row > * { scroll-snap-align: start; }
	.hx-dcard { flex: 0 0 62%; }
	.hx-short { flex: 0 0 44%; }
	.hx-row4 .hx-card { flex: 0 0 68%; }
	.hx-list2 { grid-template-columns: 1fr; }
	.hx-list-item { grid-template-columns: 112px 1fr; }
	.hx-list-item b { font-size: 19px; }
	.hx-slide b { font-size: 24px; left: 16px; right: 16px; bottom: 74px; }
	.hx-arrows { right: auto; left: 16px; bottom: 16px; }
	.hx-band .wrap, .hx-picks { grid-template-columns: 1fr; gap: 16px; }
	.hx-band h2 { font-size: 28px; }
}


/* Κεντρικό θέμα: hover όπως σε κάθε σκούρα επιφάνεια — ο τίτλος παίρνει το
   μουσταρδί (καμία μετακίνηση, όπως σε όλο το site). */
.hx-lead h1 { transition: color 0.15s ease; }
.hx-lead:hover h1 { color: var(--sun); }

/* ── Σταθερές ενότητες κάτω από τα νέα κομμάτια (Κυκλοφορίες, Ταινίες και
   σειρές, Reviews, Στήλες, Τελευταία νέα): ίδιο markup με την κλασική, αλλά
   στο ίδιο ύφος με την υπόλοιπη νέα αρχική — χωρίς πλαίσια και γραμμές,
   τίτλοι στη γραμματοσειρά των τίτλων. ── */
.home-x .rel-card { border: 0; border-radius: 12px; padding: 16px; background: var(--band-soft); }
.home-x .rel-card .date { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 0.01em; line-height: 1; color: var(--accent); }
.home-x .rel-card h3 { font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.25; margin-top: 8px; }

.home-x .screen-card, .home-x .col-card { border-radius: 12px; }
.home-x .screen-card:hover, .home-x .col-card:hover { transform: none; box-shadow: none; }
.home-x .screen-card:hover h3, .home-x .col-card:hover h3 { color: var(--sun); }
.home-x .col-card { border-bottom: 0; }
/* Ταινίες και σειρές: η τρίτη σειρά (6η–7η κάρτα) γεμίζει όλο το πλάτος αντί
   να αφήνει μισή σειρά άδεια. */
@media (min-width: 821px) {
	.home-x .screen-grid > .screen-card:nth-child(n+6) { grid-column: span 2; aspect-ratio: 16/7; }
	.home-x .screen-grid > .screen-card:nth-child(6):last-child { grid-column: span 4; aspect-ratio: 16/5; }
}

.home-x .reviews-grid { grid-template-columns: 1.25fr 1fr; gap: 36px; }
.home-x .review-featured { border: 0; border-radius: 0; background: none; overflow: visible; }
.home-x .review-featured:hover { transform: none; box-shadow: none; }
.home-x .review-featured .thumb { border-radius: 12px; overflow: hidden; }
.home-x .review-featured .body { padding: 16px 0 0; }
.home-x .review-featured .rscore { top: -58px; right: 14px; }
.home-x .review-featured h3 { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.08; }
.home-x .review-featured:hover h3, .home-x .review-row:hover h3 { color: var(--accent); }
.home-x .review-list { gap: 20px; }
.home-x .review-row { grid-template-columns: 150px 1fr; gap: 16px; border: 0; border-radius: 0; padding: 0; background: none; }
.home-x .review-row .thumb { aspect-ratio: 16/10; border-radius: 10px; }
.home-x .review-row h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; }

.home-x .river-item { border-bottom: 0; padding: 14px 0; }
.home-x .river-item .thumb { border-radius: 10px; }
.home-x .river-item h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; }
.home-x .river-cats button { border: 0; background: var(--band-soft); }
.home-x .river-cats button.is-on { background: var(--ink); color: var(--bg); }
.home-x .river-modes { border: 0; }
.home-x .load-more { border: 1.5px solid currentColor; border-radius: 99px; padding: 10px 22px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: none; color: var(--ink); }
.home-x .load-more:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── Μεγάλες οθόνες: το περιεχόμενο πιάνει περισσότερο πλάτος αντί να μένει
   στενή στήλη στο κέντρο με μεγάλα κενά δεξιά-αριστερά. Αλλάζει το --wrap
   στο <body>, άρα ακολουθούν και η κεφαλίδα και το υποσέλιδο. ── */
@media (min-width: 1500px) { body.is-wide { --wrap: 1360px; } }
@media (min-width: 1800px) { body.is-wide { --wrap: 1560px; } }
@media (min-width: 1800px) {
	.hx-lead h1 { font-size: 56px; }
	.hx-card b { font-size: 23px; }
	.hx-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; }
}

@media (max-width: 820px) {
	.home-x .reviews-grid { grid-template-columns: 1fr; gap: 24px; }
	.home-x .review-featured h3 { font-size: 27px; }
	.home-x .review-row { grid-template-columns: 128px 1fr; gap: 14px; }
	.home-x .review-row h3 { font-size: 19px; }
	.home-x .river-item h3 { font-size: 20px; }
}

/* ── Αποστάσεις, μετρημένες δίπλα στο Polygon (13/11) ──
   Τα κενά ανάμεσα στα μπλοκ ήταν ήδη ίσα ή μεγαλύτερα· πιο σφιχτά ήταν
   (α) το διάστιχο στους τίτλους των καρτών (1.06–1.12 έναντι 1.2), (β) τα
   μικρά κενά μέσα στην κάρτα και (γ) δύο λευκές ενότητες στη σειρά, που
   απείχαν 50px χωρίς τίποτα να τις χωρίζει. Εδώ ανοίγουν λίγο όλα αυτά. */
.hx-card b, .hx-dcard b { line-height: 1.18; }
.hx-rail-item b, .hx-side-item b, .hx-list-item b, .home-x .review-row h3, .home-x .river-item h3 { line-height: 1.16; }
.hx-lead h1, .hx-big h3, .hx-slide b, .home-x .review-featured h3 { line-height: 1.1; }
.hx-card img { margin-bottom: 12px; }
.hx-card em, .hx-big em { margin-bottom: 6px; }
.hx-head, .home-x .section-head { margin-bottom: 24px; }
@media (min-width: 821px) {
	.hx-sec { padding: 56px 0; }
	.hx-sec:not([class*="hx-bg-"]) + .hx-sec:not([class*="hx-bg-"]) { padding-top: 16px; }
	.hx-ad + .hx-sec:not([class*="hx-bg-"]) { padding-top: 10px; }
	.hx-subs { gap: 24px; margin-top: 26px; }
	.hx-grid3 { gap: 34px 24px; }
	.hx-grid2 { gap: 30px 24px; }
	.hx-row { gap: 20px; }
	.hx-row4 { gap: 24px; }
	.hx-side-item { padding-bottom: 24px; }
	.hx-rail-item { padding: 13px 0; }
	.hx-list2 { gap: 26px 40px; }
	.home-x .review-list { gap: 24px; }
	.home-x .river-item { padding: 16px 0; }
}
@media (max-width: 820px) {
	.hx-sec { padding: 40px 0; }
	.hx-sec:not([class*="hx-bg-"]) + .hx-sec:not([class*="hx-bg-"]) { padding-top: 8px; }
	.hx-subs { gap: 18px; }
	.hx-side-item { padding-bottom: 18px; }
	.home-x .review-list { gap: 18px; }
}

/* ── Shorts: hover (δεν είχαν κανένα) ── */
.hx-short { cursor: pointer; }
.hx-short i { transition: background-color 0.15s ease; }
.hx-short b { transition: color 0.15s ease; }
.hx-short:hover i { background: var(--sun); }
.hx-short:hover b { color: var(--accent); }
.hx-bg-night .hx-short:hover b { color: var(--sun); }

@media (max-width: 820px) {
	/* Οι σειρές που σύρονται (shorts, σκούρες κάρτες) ξεκινούν ευθυγραμμισμένες
	   με το περιεχόμενο: χωρίς αυτό το snap τραβούσε την πρώτη κάρτα κολλητά
	   στην άκρη της οθόνης. */
	.hx-row { scroll-padding-left: 24px; scroll-padding-right: 24px; }

	/* «Τι διαβάζεται τώρα» στο κινητό: ο τίτλος ΚΑΤΩ από την εικόνα. Πάνω της
	   κάλυπτε τη μισή φωτογραφία (πρόσωπα, γράμματα) και δεν διαβαζόταν. */
	.hx-sliderbox { overflow: visible; border-radius: 0; container-type: inline-size; }
	.hx-slide { color: inherit; }
	.hx-slide::after { display: none; }
	.hx-slide img { border-radius: 12px; }
	.hx-slide b { position: static; display: block; padding: 12px 2px 0; font-size: 22px; line-height: 1.16; }
	.hx-arrows { left: auto; right: 12px; bottom: auto; top: 12px; }
	@supports (top: 1cqw) { .hx-arrows { top: calc(56.25cqw - 52px); } }
	.hx-arrows button { width: 40px; height: 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
}