/* ============================================================================
   Athens Party 2026 — main.css
   Design tokens: electric blue primary (#130ffd, apo to palio brand),
   violet/cyan accents. Layout: .boxed max-width 1200 (standard family).
   ========================================================================== */
:root {
	--ap-primary: #130ffd;
	--ap-violet: #7D64F9;
	--ap-cyan: #27C4FF;
	--ap-ink: #111116;
	--ap-ink-soft: #55555e;
	--ap-bg: #ffffff;
	--ap-bg-soft: #f4f4f8;
	--ap-bar-bg: #101018;
	--ap-bar-ink: #ffffff;
	--ap-bar-h: 100px;
	/* ypsos tou sticky header sto scroll (.is-compact 58px) + mikro keno:
	   ola ta position:sticky tou site "kollane" se afto to offset oste na
	   MIN mpainoun kato apo ton header (o header einai sticky, z-index 1100). */
	--ap-hdr-h: 58px;
	--ap-sticky-top: 72px;
	/* ══ Γραμματοσειρά ΤΙΤΛΩΝ — ΤΕΛΙΚΗ ΕΠΙΛΟΓΗ (user 20/08 ιγ΄): ═══════════
	   Noto SERIF SemiBold condensed (600 / wdth 75 / tracking -.03em).
	   Δοκιμάστηκαν με τη σειρά: Iosevka Charon 700 → Noto Sans 600/75 →
	   **Noto Serif 600/75** → Noto Serif Display 600/75 → Display 600/90
	   (τα Display hairlines αδυνατούσαν στα 16-18px) → Noto Sans 800/80 →
	   600/80 → 700/80 → σκέτο 700 (χωρίς wdth/tracking: διαβαζόταν άνετα
	   αλλά χωρούσε ΑΙΣΘΗΤΑ λιγότερο τίτλο — και οι 25 τίτλοι έφταναν στο
	   3-line clamp) → ΓΥΡΙΣΜΑ ΕΔΩ.
	   ΕΝΑ σημείο αλλαγής — αν αλλάξουν αυτά, πρέπει να αλλάξει ΚΑΙ το
	   `family=Noto+Serif:wdth,wght@75,600` στο layout_top (το Google Fonts
	   σερβίρει το συγκεκριμένο named instance, όχι όλο το variable range). */
	--ap-font-title: 'Noto Serif', Georgia, 'Times New Roman', serif;
	--ap-font-title-wght: 600;
	--ap-font-title-wdth: 75%;
	/* tracking: ο wdth άξονας στενεύει τα glyphs, ΟΧΙ τα sidebearings — στα
	   ελληνικά έβγαινε «πολύ αραιό» (user). Το -.03em τα δένει χωρίς να
	   κολλάνε (δοκιμάστηκαν 0 / -.01 / -.02 / -.03 / -.04). */
	--ap-font-title-track: -.03em;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: var(--ap-ink);
	background: var(--ap-bg);
	/* xoros gia to persistent bar — na min kryvetai to periexomeno.
	   AKRIBOS bar-h (oxi +12): o dark footer prepei na koumponei flush sto
	   dark bar (idio bg) — alliws menei lefki lorida anamesa tous (19/08). */
	padding-bottom: var(--ap-bar-h);
}

/* form controls den klironomoun font apo default — na akolouthoun to site font */
button, input, select, textarea { font-family: inherit; }

img { max-width: 100%; height: auto; }

a { color: var(--ap-primary); }

.boxed { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------------- header (19/08: +20% ύψος, κεντραρισμένο logo, burger,
   sticky + brand stripe + quick links/social σε desktop) ------------------- */
.ap-header {
	background: var(--ap-bg);
	border-bottom: 1px solid #e4e4ec;
	box-shadow: 0 4px 18px rgba(17, 17, 22, .12);
	position: sticky;
	top: 0;
	z-index: 1100;
}
/* full width: 3 ζώνες — αριστερά burger+links, κέντρο logo, δεξιά social+search */
.ap-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 77px;   /* 64 * 1.2 */
	padding: 0 20px;
	transition: min-height .2s ease;
}
/* max-height (OXI height) — sto mobile i kentriki stili tou grid stenevei
   (~245px sta 375px viewport, tin pianoun oi 2 plevrikes stiles) kai to
   global "img{max-width:100%}" mazi me FIXED height egrafe platos/ypsos
   asymmetra -> "plakoni" to logo (6.4:1 -> 4.7:1, epaletheutike 20/08). Me
   max-height + width:auto o browser dialegei to pio perioristiko apo ta 2
   (max-width apo to global reset I max-height) diathrontas panta tin
   analogia. */
.ap-logo img { max-height: 52px; width: auto; transition: max-height .2s ease; }

/* shrink σε scroll (pattern παλιού site: smallHeader 60px + μικρότερο logo) */
.ap-header.is-compact .ap-header-inner { min-height: 58px; }
.ap-header.is-compact .ap-logo img { max-height: 30px; }

/* mobile: mikrotero logo skopima (oxi mono to accidental shrink apo to
   max-width tou grid) — apofasi user 20/08. */
@media (max-width: 767px) {
	.ap-logo img { max-height: 34px; }
	.ap-header.is-compact .ap-logo img { max-height: 26px; }
}
.ap-header-left { display: flex; align-items: center; gap: 16px; justify-self: start; }
.ap-header-right { display: flex; align-items: center; gap: 4px; justify-self: end; }
.ap-logo { display: flex; justify-content: center; align-items: center; }

.ap-quicklinks { display: none; gap: 18px; }
.ap-quicklinks a {
	color: var(--ap-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
}
.ap-quicklinks a:hover { color: var(--ap-primary); border-bottom-color: var(--ap-primary); }

.ap-header-soc {
	display: none;
	justify-content: center;
	align-items: center;
	width: 38px; height: 38px;
	color: #7f7f7f;
	border-radius: 8px;
	font-size: 17px;
	text-decoration: none;
}
.ap-header-soc:hover { background: var(--ap-bg-soft); color: var(--ap-primary); }
/* eutheia grammi: to font glyph (23px line box) kai to svg (17px) kentrarontai
   diaforetika sto flex — normalizoume OLA se 17px block boxes */
.ap-header-soc i { display: block; line-height: 1; height: 1em; }
.ap-header-soc i:before { margin: 0; }
.ap-header-soc svg { display: block; }

@media (min-width: 980px) {
	.ap-quicklinks { display: flex; }
	.ap-header-soc { display: flex; }
}

/* headline mode (sticky, μόνο στα άρθρα): ο τίτλος στη θέση του logo */
.ap-headline {
	max-width: 60vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 800;
	font-size: 15px;
	color: var(--ap-ink);
	text-align: center;
}
.ap-header.headline-mode .ap-logo { display: none; }
.ap-header.headline-mode .ap-headline { display: block; animation: apHlIn .25s ease; }
@keyframes apHlIn { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }

/* popup mode (body.ap-popup — ?popup=1 στο /{call}/player): οι επισκέπτες από
   το popup του e-radio (τα AP brand stations 301άρουν εκεί) έρχονται σε μικρό
   παράθυρο — header όσο πιο λεπτό γίνεται: μένουν burger/logo/search, φεύγουν
   quicklinks/social. Τα διπλά selectors καλύπτουν ΚΑΙ το .is-compact (έχει
   μεγαλύτερο specificity από σκέτο body.ap-popup — αλλιώς το scroll θα το
   ΜΕΓΑΛΩΝΕ πίσω στα 58px). */
body.ap-popup .ap-header-inner,
body.ap-popup .ap-header.is-compact .ap-header-inner { min-height: 42px; padding: 0 12px; }
body.ap-popup .ap-logo img,
body.ap-popup .ap-header.is-compact .ap-logo img { max-height: 20px; }
body.ap-popup .ap-quicklinks,
body.ap-popup .ap-header-soc { display: none; }
/* o popup header einai 42px — to sticky offset akolouthei */
body.ap-popup { --ap-hdr-h: 42px; --ap-sticky-top: 56px; }

/* burger: port tou animation apo to live site (ma-infinitypush morph) me
   sketo CSS — xoris to plugin (den to xreiazomaste, idio apotelesma). Ta 3
   spans einai absolute mesa se ena 24x16 kentrarismeno box· sto anoigma ta
   ekso mpares mazevontai sto kentro (width:0) eno to mesaio gyrizei 45deg —
    akribos i logiki tou live (top/width/left values, klimakosmena). */
.ap-burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	border-radius: 8px;
}
.ap-burger:hover { background: var(--ap-bg-soft); }
.ap-burger-box { position: relative; width: 24px; height: 16px; }
.ap-burger-box span {
	position: absolute;
	left: 0;
	width: 24px; height: 2px;
	border-radius: 1px;
	background: var(--ap-ink);
	transition: top .25s ease-in-out, width .25s ease-in-out, left .25s ease-in-out, transform .25s ease-in-out;
}
.ap-burger-box span:nth-child(1) { top: 0; }
.ap-burger-box span:nth-child(2) { top: 7px; }
.ap-burger-box span:nth-child(3) { top: 14px; }
#apBurger.is-open .ap-burger-box span:nth-child(1) { top: 7px; width: 0; left: 50%; }
#apBurger.is-open .ap-burger-box span:nth-child(2) { transform: rotate(45deg); }
#apBurger.is-open .ap-burger-box span:nth-child(3) { top: 7px; width: 0; left: 50%; }

.ap-nav-search {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px; height: 44px;
	color: #7f7f7f;   /* idio gkri me to palio search icon */
	border-radius: 8px;
	font-size: 20px;
	text-decoration: none;
}
.ap-nav-search:hover { background: var(--ap-bg-soft); color: var(--ap-primary); }
/* idia eutheia me ta social icons: block glyph box xoris line-height/margin quirks */
.ap-nav-search i { display: block; line-height: 1; height: 1em; }
.ap-nav-search i:before { margin: 0; }

/* header search: klik sto koumpi → input pou anoigei ΑΡΙΣΤΕΡΑ του (expand) */
.ap-hsearch { display: flex; align-items: center; }
.ap-hsearch input {
	width: 0;
	min-width: 0;
	height: 38px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--ap-bg-soft);
	color: var(--ap-ink);
	font-family: inherit;
	font-size: 14px;
	opacity: 0;
	outline: none;
	transition: width .22s ease, opacity .15s ease, padding .22s ease, margin .22s ease;
}
.ap-hsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ap-hsearch input::placeholder { color: #9a9aa6; }
.ap-hsearch.is-open input { width: 220px; padding: 0 12px; margin-right: 4px; opacity: 1; border-color: #e0e0ea; }
.ap-hsearch.is-open input:focus { border-color: var(--ap-primary); }
/* oso einai anoixto: ta social kryvontai gia na min stenevei to kentro */
.ap-header.hsearch-open .ap-header-soc { display: none; }
@media (max-width: 979px) {
	/* mikra plati: kryvetai kai to logo/headline oso grafeis — o xoros ftanei */
	.ap-header.hsearch-open .ap-logo,
	.ap-header.hsearch-open .ap-headline { display: none; }
	.ap-hsearch.is-open input { width: min(220px, calc(100vw - 176px)); }
}

/* ---------------- burger drawer (sideMenu) — redesign 20/08: port του
   VISUAL από το live athensparty.com sideMenu (πλατύτερο, λευκό, χρωματιστό
   logo στην κορυφή, sections με flowing/wrapping links αντί για κάθετη
   λίστα, plain section headers, σκέτα social icons — βλ. σχόλιο στο
   sideMenu.asp για την πλήρη ανάλυση). Κλάσεις: sideMenu-* / sm-*. -------- */
.sideMenu {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 400px;
	max-width: 92vw;
	background: #fff;
	z-index: 1400;
	transform: translateX(-105%);
	transition: transform .4s ease;
	box-shadow: 4px 0 24px rgba(0,0,0,.18);
	display: flex;
	flex-direction: column;
}
.sideMenu.is-open { transform: translateX(0); }
html.sm-locked { overflow: hidden; }

.sideMenu-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid #ccc;
}
.sideMenu-close {
	font-size: 46px;
	font-weight: 300;
	line-height: 1;
	background: none;
	border: 0;
	cursor: pointer;
	color: #888;
	padding: 0 4px;
	border-radius: 6px;
}
.sideMenu-close:hover { color: var(--ap-primary); }
.sideMenu-logo img { display: block; height: 32px; width: auto; }

.sideMenu-scroll { overflow-y: auto; flex: 1; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }

/* LIVE / ΑΝΑΖΗΤΗΣΗ — symmetric, xoris eidiko gemisto (pattern live: kai ta
   dyo idio look, mono hover xrwma) */
.sideMenu-half { display: flex; border-bottom: 1px solid #ccc; }
.sideMenu-half a {
	flex: 1;
	text-align: center;
	padding: 18px 10px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	color: var(--ap-ink);
}
.sideMenu-half a i { margin-right: 6px; font-size: 14px; }
.sideMenu-half a:first-child { border-right: 1px solid #ccc; }
.sideMenu-half a:hover { color: var(--ap-primary); }

/* sections: plain heading + flowing/wrapping row apo links (pattern live —
   "tag-like" seires anti gia kathetes listes) */
.sm-section { padding: 14px 20px; border-bottom: 1px solid #ccc; }
.sm-header {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--ap-ink);
	text-decoration: none;
	margin-bottom: 8px;
}
.sm-header--text { cursor: default; }
.sm-header:hover { color: var(--ap-primary); }
.sm-flow { display: flex; flex-wrap: wrap; }
.sm-flow a {
	white-space: nowrap;
	margin: 0 16px 8px 0;
	color: var(--ap-ink-soft);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
}
.sm-flow a:hover { color: var(--ap-primary); }
/* onomata kanalion sto burger menu: Title Case (Athens Party, Wonder Radio,
   Velvet.Fm) me to RNB oloklhro kefalaio — apofasi user 20/08 ε'. To sosto
   casing grafetai idi etoimo apo to sideMenu.asp (case-statement gia ta 2
   apo ta 4 pou itan OLA-KEFALAIA sto apChName array), OXI CSS transform —
   den yparxei kathara CSS treatment gia "lowercase ektos apo to RNB". To
   channel-switcher ekso apo to drawer (.ap-phero-nav chips, player/
   playlist selides) menei KEFALAIO — diaforetiko UI context. */
.sm-flow--ch a { font-weight: 700; }

/* social: sketa eikonidia (icon font, pattern live) — OXI kykloi/fonto */
.sm-social { display: flex; align-items: center; gap: 20px; padding-top: 2px; }
.sm-social a { display: flex; color: var(--ap-ink-soft); font-size: 24px; }
.sm-social a:hover { color: var(--ap-primary); }

/* NEXTWEB mark sto telos — pattern live (nextweb2023.png = mavro se
   diafaneia -> fysiko panw sto lefko fonto tou drawer, xoris filter) */
.sideMenu-nextweb { display: block; text-align: center; padding: 30px 20px 36px; opacity: .82; }
.sideMenu-nextweb:hover { opacity: 1; }
.sideMenu-nextweb img { display: inline-block; height: 32px; width: auto; }

.sideMenu-spider {
	position: fixed;
	inset: 0;
	background: rgba(45, 45, 46, .5);
	z-index: 1390;
}

/* ---------------- main / demo ---------------- */
#apMain { min-height: 50vh; }
html.ap-loading #apMain { opacity: .55; transition: opacity .15s; }

/* ---------------- submenu / listings ---------------- */
.ap-submenu {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 0 6px;
	border-bottom: 1px solid #e4e4ec;
	margin-bottom: 18px;
}
.ap-submenu a {
	color: var(--ap-ink-soft);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 4px 2px;
	border-bottom: 2px solid transparent;
}
.ap-submenu a:hover { color: var(--ap-primary); }
.ap-submenu a.active { color: var(--ap-primary); border-bottom-color: var(--ap-primary); }
.ap-intro { color: var(--ap-ink-soft); max-width: 760px; }

.ap-hero-card {
	display: block;
	position: relative;
	margin: 18px 0 24px;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	background: #000;
}
.ap-hero-card img { width: 100%; display: block; aspect-ratio: 21/9; object-fit: cover; opacity: .85; }
.ap-hero-card h2 {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 28px 24px 20px;
	color: #fff;
	font-size: clamp(20px, 3.2vw, 34px);
	background: linear-gradient(transparent, rgba(0,0,0,.82));
}

.ap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 24px;   /* user 20/08 ιγ΄ (ήταν 20) — το κληρονομούν ΚΑΙ οι ζώνες */
	margin: 18px 0;
}

/* ══ ΚΑΡΤΕΣ ΘΕΜΑΤΩΝ — 3 παραλλαγές (20/08 ια΄, απόφαση user) ═══════════════
   Κοινό μοντέλο σε ΟΛΟ το site (αρχική/κατηγορίες/tag/choices/search/
   «ΔΙΑΒΑΣΤΕ ΑΚΟΜΗ»). Κανόνες: ΤΕΤΡΑΓΩΝΑ όσο γίνεται, ΧΩΡΙΣ στρογγυλές
   γωνίες, ΧΩΡΙΣ ημερομηνία, κατηγορία ως eyebrow (όχι pill), media badge
   πάνω δεξιά. Το ύψος μοιράζεται σταθερά (media 62% / body ο υπόλοιπος)
   ώστε όλες οι κάρτες μιας γραμμής να ευθυγραμμίζονται ό,τι κι αν έχουν. */
.ap-card {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	text-decoration: none;
	color: var(--ap-ink);
	background: var(--ap-bg-soft);
}
/* Στα ΜΙΚΡΑ κουτάκια η εικόνα πιάνει ΑΚΡΙΒΩΣ το μισό ύψος (user 20/08 ιγ΄):
   0 0 50% εδώ + 1 1 50% στο body = σταθερή μοιρασιά, ίδιο ύψος εικόνας σε
   όλη τη σειρά ό,τι κι αν έχει ο τίτλος. (Το photo variant δεν επηρεάζεται:
   έχει absolute media πάνω σε όλη την κάρτα — δες παρακάτω.) */
.ap-card-media { position: relative; flex: 0 0 50%; min-height: 0; overflow: hidden; }
.ap-card-media img {
	width: 100%; height: 100%;   /* class > element: νικά το global img{height:auto} */
	object-fit: cover;
	display: block;
}
.ap-card-body {
	flex: 1 1 50%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 10px 12px 12px;
}
.ap-card-eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--cat-deep, var(--cat, var(--ap-primary)));
}
.ap-card h3 {
	margin: 0;
	/* Τίτλοι κουτακιών: Noto SERIF SemiBold condensed (20/08 ιγ΄, απόφαση
	   user — αντικατέστησε Iosevka Charon και μετά Noto Sans). Το width axis
	   (wdth 75) ελέγχεται με font-stretch — ΠΡΕΠΕΙ να συμφωνεί με το
	   `wdth,wght@75,600` του Google Fonts URL στο layout_top, αλλιώς ο
	   browser συνθέτει/αγνοεί το face. Τα tokens ζουν στο :root. */
	font-family: var(--ap-font-title);
	font-weight: var(--ap-font-title-wght);
	font-stretch: var(--ap-font-title-wdth);
	letter-spacing: var(--ap-font-title-track);
	font-size: 18px;   /* 20 -> 18, user 20/08 ιγ' */
	line-height: 1.24;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* σταθερό ύψος 3 γραμμών ΜΟΝΟ όπου το body σπρώχνει την εικόνα (plain/pale):
   έτσι όλα τα κουτάκια μιας σειράς έχουν ίδιο ύψος εικόνας/κειμένου */
.ap-card--plain h3, .ap-card--pale h3 { min-height: calc(3em * 1.24); }
.ap-card:hover h3 { color: var(--cat-deep, var(--cat, var(--ap-primary))); }

/* badge media (video/audio/photos) — πάνω δεξιά στην εικόνα */
.ap-card-badge {
	position: absolute;
	top: 8px; right: 8px;
	z-index: 2;
	width: 28px; height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10,8,30,.62);
	color: #fff;
	border-radius: 50%;
	font-size: 14px;
}
.ap-card-badge i { display: block; line-height: 1; }
.ap-card-badge i:before { margin: 0; }
.ap-card-media--none { flex: 0 0 0; overflow: visible; }

/* ── 1. photo: όλη η εικόνα φόντο + σκούρο overlay, γράμματα από πάνω ── */
.ap-card--photo { background: #14141c; color: #fff; }
.ap-card--photo .ap-card-media { position: absolute; inset: 0; flex: none; }
.ap-card--photo .ap-card-media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,6,22,.92) 0%, rgba(8,6,22,.55) 38%, rgba(8,6,22,.12) 70%, rgba(8,6,22,.30) 100%);
}
.ap-card--photo .ap-card-body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	flex: none;
	padding: 12px 14px 14px;
}
.ap-card--photo .ap-card-eyebrow { color: #fff; opacity: .95; }
.ap-card--photo h3 { color: #fff; }
.ap-card--photo:hover h3 { color: #fff; text-decoration: underline; }

/* ── 2. plain: εικόνα πάνω, κείμενο κάτω σε ΛΕΥΚΟ, ΧΩΡΙΣ padding Α/Δ ── */
.ap-card--plain { background: #fff; }
.ap-card--plain .ap-card-body { padding: 10px 0 0; }

/* ── 3. pale: εικόνα πάνω, κάτω pale χρώμα κατηγορίας ΜΕ padding ── */
.ap-card--pale { background: var(--cat-pale, var(--ap-bg-soft)); }
.ap-card--pale .ap-card-body { padding: 11px 13px 13px; }

/* χωρίς εικόνα (tag/search): το body πιάνει όλο το κουτί */
.ap-card--noimg { background: var(--cat-pale, var(--ap-bg-soft)); }
.ap-card--noimg .ap-card-body { flex: 1 1 auto; justify-content: center; padding: 14px; }
.ap-card--noimg h3 { -webkit-line-clamp: 5; }

/* Ημερομηνία κάρτας (20/08 ιδ΄, απόφαση user): μικρή και διακριτική, κάτω
   από τον τίτλο. Βγαίνει ΠΑΝΤΟΥ ΕΚΤΟΣ από την αρχική — εκεί ο generator
   ορίζει apCardNoDate=true, δηλαδή το markup δεν γεννιέται καν. */
.ap-card-date {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ap-ink-soft);
	opacity: .85;
}
.ap-card--photo .ap-card-date { color: #fff; opacity: .7; }
.ap-card--pale .ap-card-date { color: var(--cat-deep, var(--cat, var(--ap-ink-soft))); opacity: .72; }

/* ---------------- category chips + palette (19/08) ----------------
   MONADIKI pigi xromaton ana katigoria: .cat-{slug} (slugs tou catmap.asp)
   orizei --cat (fondo chip / accent zonis), --cat-ink (keimeno chip, default
   lefko) kai --cat-deep (keimeno pano se lefko fondo — headers/links, gia ta
   anoixta xromata). Allagi xromaton = MONO edo. */
/* --cat-pale: πολύ ανοιχτή απόχρωση της κατηγορίας — φόντο στο pale variant
   των καρτών (20/08 ια΄). Ρητές τιμές, ΟΧΙ color-mix: το bake/paletta πρέπει
   να διαβάζεται και να αλλάζει από ΕΝΑ σημείο. */
.cat-news          { --cat: #130ffd; --cat-pale: #ebeaff; }                                          /* brand electric blue */
.cat-celebs        { --cat: #C33764; --cat-pale: #fbe9f0; }                                          /* stripe magenta */
.cat-viral         { --cat: #27C4FF; --cat-ink: #062a38; --cat-deep: #0779ae; --cat-pale: #e6f7ff; } /* brand cyan */
.cat-good-life     { --cat: #0fce74; --cat-ink: #04301c; --cat-deep: #0a9153; --cat-pale: #e5f9ef; } /* green (syngenes tou eq #2eff8a) */
.cat-entertainment { --cat: #8E2DE2; --cat-pale: #f4e9fd; }                                          /* stripe purple */
.cat-longreads     { --cat: #111116; --cat-pale: #eeeef3; }                                          /* ink black — editorial */
.cat-astra         { --cat: #7D64F9; --cat-pale: #f0ecff; }                                          /* brand violet */
.cat-tophits       { --cat: #F5B915; --cat-ink: #3a2c02; --cat-deep: #9c7407; --cat-pale: #fef5dd; } /* chart gold */
.cat-shows         { --cat: #0e8be2; --cat-pale: #e6f2fc; }                                          /* wonder deep blue */
.cat-exodos        { --cat: #FF5A1F; --cat-ink: #3d1403; --cat-deep: #c23f0e; --cat-pale: #ffece4; } /* nightlife orange */

.ap-chip {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cat, var(--ap-primary));
	color: var(--cat-ink, #fff);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.5;
	box-shadow: 0 2px 8px rgba(0,0,0,.28);
	pointer-events: none;   /* to click anikei stin karta */
}
/* karta xoris eikona (tag/search): to chip ginetai static pano apo ton titlo */
.ap-card--noimg .ap-chip { position: static; display: inline-block; margin: 10px 12px 0; }

/* ---------------- zones katigorion (19/08 — 20/08 ι΄: χωρίς mosaic πια,
   variants r5/r3/half + ζεύγος .ap-zpair) ---------------- */
.ap-zone { margin: 30px 0; }
.ap-zone-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 3px solid var(--cat, var(--ap-primary));
	padding-bottom: 8px;
	margin-bottom: 4px;
}
.ap-zone-head h2 { margin: 0; font-size: 20px; }
.ap-zone-head h2 a { color: var(--ap-ink); text-decoration: none; }
.ap-zone-head h2 a:hover { color: var(--cat-deep, var(--cat, var(--ap-primary))); }
.ap-zone-more {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	color: var(--cat-deep, var(--cat, var(--ap-primary)));
}
/* 4 stiles statheres sto desktop. Το gap ΔΕΝ αλλάζει πια ανά ζώνη (20/08 ια΄,
   απόφαση user: ίδιο κενό με το grid των «Τελευταίων νέων» — κληρονομείται
   το 20px του .ap-grid) */
@media (min-width: 768px) {
	.ap-zone .ap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* variants (20/08 ι΄): full-width σειρές 5 και 3 + μισές ζώνες σε ζεύγος.
   Ίδια specificity με το γενικό repeat(4) — νικούν επειδή έρχονται ΜΕΤΑ */
@media (min-width: 768px) {
	.ap-zone--r5 .ap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.ap-zone--feat5 .ap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ap-zone--r3 .ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ap-zone--half .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-zpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
}
/* Longreads: 3 ΤΕΤΡΑΓΩΝΕΣ σε όλο το πλάτος — το 1/1 τις κάνει ψηλότερες,
   άρα μεγαλύτερες (20/08 ιβ΄, απόφαση user· ήταν 4/3). Τα «μεσαία»
   κουτάκια: δικό τους μέγεθος τίτλου, ανάμεσα σε feat και κανονικά. */
.ap-zone--r3 .ap-card { aspect-ratio: 1 / 1; }
@media (min-width: 768px) {
	.ap-zone--r3 .ap-card h3 { font-size: 28px; line-height: 1.16; -webkit-line-clamp: 3; }
}

/* ---------------- ASTRA κουτί sidebar (ζώδια — 20/08 ια΄) ----------------
   ΤΕΤΡΑΓΩΝΟ, ΕΝΑ θέμα (το τελευταίο των ζωδίων): η φωτογραφία του θέματος
   γίνεται ΦΟΝΤΟ με μοβ-μπλε overlay ταυτότητας και όλο το περιεχόμενο
   κεντράρεται (απόφαση user). Ζει ΠΑΝΩ από το sticky 300x600· <980 το
   aside πέφτει κάτω από τη στήλη περιεχομένου (δεν χάνεται στο κινητό). */
.ap-astraside { margin: 0 0 18px; }
.ap-astrabox {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background: #241a54;
}
.ap-astrabox-bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;   /* class > element: νικά το global img{height:auto} */
	object-fit: cover;
}
/* μοβ → μπλε overlay (brand: #4A00E0 violet → #130ffd primary) */
.ap-astrabox::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(150deg, rgba(74,0,224,.88) 0%, rgba(19,15,253,.80) 55%, rgba(125,100,249,.86) 100%);
}
.ap-astrabox-in {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 24px 20px;
}
.ap-astrabox-lbl { font-size: 12px; font-weight: 800; letter-spacing: .16em; opacity: .92; }
.ap-astrabox-title { font-size: 17px; font-weight: 700; line-height: 1.35; }
.ap-astrabox-more {
	border: 1px solid rgba(255,255,255,.65);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12.5px;
	font-weight: 700;
	transition: background .15s ease, color .15s ease;
}
.ap-astrabox:hover .ap-astrabox-more { background: #fff; color: #130ffd; border-color: #fff; }

/* ---------------- teliko grid me rythmo: featured karta ----------------
   MONO ≥768: se monostilo grid to span 2 ftiaxnei "phantom" 2i stili */
@media (min-width: 768px) {
	.ap-grid .ap-card--feat {
		grid-column: span 2;
		grid-row: span 2;
		aspect-ratio: auto;   /* το span 2x2 ορίζει το ύψος — όχι το 1/1 */
	}
	.ap-grid .ap-card--feat h3 { font-size: 36px; line-height: 1.1; -webkit-line-clamp: 3; }
	.ap-grid .ap-card--feat .ap-card-eyebrow { font-size: 12px; }
	/* διπλάσιο padding γύρω από τον τίτλο (user 20/08 ιγ΄) — ήταν 16/18/18.
	   Νικά το `.ap-card--photo .ap-card-body` (3 classes vs 2). */
	.ap-grid .ap-card--feat .ap-card-body { padding: 32px 36px 36px; }
}

/* ---------------- mobile: zones se carousel (pattern showcase) ----------
   — to «Τελευταία νέα» grid menei katheto */
@media (max-width: 767px) {
	.ap-zone .ap-grid {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 72%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
		scrollbar-width: none;
	}
	.ap-zone .ap-grid::-webkit-scrollbar { display: none; }
	.ap-zone .ap-card { scroll-snap-align: center; }

	/* ── ΤΥΠΟΓΡΑΦΙΑ ΚΑΡΤΩΝ ΣΤΟ ΚΙΝΗΤΟ (20/08 ιγ΄) ────────────────────────
	   Στο <768 ΟΛΑ τα grids γίνονται μονόστηλα/carousel, άρα τα desktop
	   μεγέθη (feat 38, longreads 28) δεν έχουν πια το πλάτος που τα
	   δικαιολογούσε — τα mobile κουτάκια είναι ~72% viewport (~280px),
	   δηλαδή ΠΙΟ ΣΤΕΝΑ κι από τη μικρή desktop κάρτα. Οι desktop κανόνες
	   ζουν ήδη σε min-width:768 και ΔΕΝ φτάνουν εδώ· ορίζουμε ρητά μια
	   κλίμακα ώστε το lead να ξεχωρίζει χωρίς να «σπάει» σε λέξεις. */
	.ap-latest .ap-grid { grid-template-columns: minmax(0, 1fr); }   /* κάθετο, όχι carousel */
	/* ⚠️ Στο κάθετο grid η κάρτα πιάνει ΟΛΟ το πλάτος (~343px): με 1/1 +
	   50/50 το κείμενο (2-3 γραμμές) άφηνε ~90px ΝΕΚΡΟ χώρο κάτω του.
	   Εδώ λοιπόν ΟΧΙ τετράγωνο: εικόνα 16/9, κείμενο όσο χρειάζεται.
	   Τα τετράγωνα 50/50 μένουν στα carousels των ζωνών (~280px κάρτες,
	   εκεί ο χώρος γεμίζει) και σε όλο το desktop. */
	.ap-latest .ap-card:not(.ap-card--photo) { aspect-ratio: auto; }
	.ap-latest .ap-card:not(.ap-card--photo) .ap-card-media { flex: none; aspect-ratio: 16 / 9; }
	.ap-latest .ap-card:not(.ap-card--photo) .ap-card-body { flex: 0 0 auto; }
	.ap-card h3 { font-size: 17px; }
	/* lead (feat): μεγαλύτερο αλλά όχι desktop-μεγάλο — μένει τετράγωνο,
	   χωρίς το span 2x2 που ισχύει μόνο ≥768 */
	.ap-grid .ap-card--feat h3 { font-size: 25px; line-height: 1.14; -webkit-line-clamp: 4; }
	.ap-grid .ap-card--feat .ap-card-eyebrow { font-size: 11.5px; }
	.ap-zone--r3 .ap-card h3 { font-size: 20px; line-height: 1.2; }
	/* το photo variant σηκώνει λίγο μεγαλύτερο (κείμενο πάνω σε εικόνα) */
	.ap-card--photo h3 { font-size: 19px; }
}
@media (min-width: 560px) and (max-width: 767px) {
	.ap-zone .ap-grid { grid-auto-columns: 44%; }
	/* 2 κάρτες ορατές: πιο στενές -> μικρότερος τίτλος */
	.ap-card h3, .ap-card--photo h3 { font-size: 16px; }
	.ap-zone--r3 .ap-card h3 { font-size: 18px; }
}

/* ---------------- CHOICES: Common enotita deltion typou/backlinks (19/08).
   Hero band me ti violet tautotita tou eRadio choices + koino chip xroma
   gia oles tis choices ypokatigories (skouro violet) */
.ap-choices-hero {
	margin: 18px 0;
	padding: 26px 24px;
	border-radius: 14px;
	color: #fff;
	background: linear-gradient(120deg, #241a3d 0%, #3a2150 100%);
}
.ap-choices-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .22em; color: #d9b3ff; }
.ap-choices-hero h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.ap-choices-hero .ap-intro { color: #e3dcf2; margin: 8px 0 0; }
.cat-choices, .cat-draseis, .cat-beautystyle, .cat-wellness, .cat-betterlife,
.cat-techchoices, .cat-educhoices, .cat-gastronomy, .cat-travel { --cat: #3a2150; }


/* ---------------- article ---------------- */
.ap-article { max-width: 820px; }
.ap-crumb { margin: 14px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ap-crumb a { font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
/* ημερομηνία δημοσίευσης ΧΩΡΙΣ ώρα, δίπλα στην κατηγορία (user 20/08 ιγ΄) —
   με λεπτή τελεία-διαχωριστή, εκτός αν είναι μόνη της (post χωρίς κατηγορία) */
.ap-crumb-date { font-size: 13px; color: var(--ap-ink-soft); position: relative; padding-left: 12px; }
.ap-crumb-date::before { content: "·"; position: absolute; left: 2px; }
.ap-crumb-date--solo { padding-left: 0; }
.ap-crumb-date--solo::before { content: none; }
/* Τίτλος άρθρου: ίδια γραμματοσειρά με τα κουτάκια/λίστες (user 20/08 ιγ΄) —
   ένα σετ tokens για ΚΑΘΕ τίτλο θέματος στο site */
.ap-article h1 {
	font-family: var(--ap-font-title);
	font-weight: var(--ap-font-title-wght);
	font-stretch: var(--ap-font-title-wdth);
	letter-spacing: var(--ap-font-title-track);
	font-size: clamp(24px, 3.4vw, 38px);
	line-height: 1.2;
	margin: 8px 0 10px;
}
.ap-subtitle { font-size: 18px; color: var(--ap-ink-soft); margin: 0 0 18px; }   /* +αέρας πριν το byline, user 20/08 ιγ΄ */
.ap-sponsored { font-size: 11px; letter-spacing: .12em; color: var(--ap-ink-soft); border: 1px solid #d5d5df; display: inline-block; padding: 2px 8px; border-radius: 4px; }
.ap-meta { font-size: 13px; color: var(--ap-ink-soft); }
.ap-hero { margin: 16px 0; }
.ap-hero img { width: 100%; border-radius: 12px; display: block; }
.ap-lead { font-weight: 600; }
.ap-body { font-size: 17px; line-height: 1.65; }
.ap-body img { border-radius: 8px; }
.ap-body iframe { max-width: 100%; }

/* reading progress bar (shell) */
#apProgress { position: fixed; top: 0; left: 0; height: 3px; background: var(--ap-primary); width: 0; z-index: 1200; }

/* media badge (LIVE/ΕΚΤΑΚΤΟ/QUIZ klp apo fldElements) */
.postAlert {
	display: inline-block;
	background: #e8442e;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	padding: 4px 10px;
	border-radius: 4px;
	margin: 10px 0 2px;
}

/* topic banner (post anikei se topic) */
.postTopic {
	display: block;
	margin: 14px 0;
	padding: 12px 16px;
	background: var(--ap-bg-soft);
	border-left: 4px solid var(--ap-violet);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	color: var(--ap-ink);
	font-size: 14px;
}
.postTopic:hover { color: var(--ap-primary); }

/* meta line: author • date • reading time */
.ap-meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	font-size: 13px;
	color: var(--ap-ink-soft);
	margin: 6px 0;
}
.ap-meta-line .ap-meta-author { font-weight: 700; }
.ap-meta-updated { font-size: 12px; margin: 2px 0 0; }

/* Byline (20/08 ιγ΄, απόφαση user): **SHARE αριστερά | αχνό κάθετο border |
   ποιος + χρόνος ανάγνωσης δεξιά**. Η ημερομηνία δημοσίευσης έφυγε από εδώ
   — ζει πάνω, δίπλα στην κατηγορία (.ap-crumb-date). Γκρι border-top +
   αέρας από τον υπότιτλο. Κάτω από 560 στοιβάζονται και ο κάθετος
   διαχωριστής γίνεται οριζόντιος. */
.ap-byline {
	display: flex;
	align-items: center;
	gap: 18px;
	border-top: 1px solid #e0e0e8;
	margin-top: 22px;
	padding-top: 14px;
}
.ap-byline .ap-share { margin: 0; flex: none; }
.ap-byline-meta {
	flex: 1 1 auto;
	min-width: 0;
	border-left: 1px solid #ececf2;   /* ο αχνός διαχωριστής ΑΝΑΜΕΣΑ στις 2 στήλες */
	padding-left: 18px;
	text-align: right;                /* συντάκτης/χρόνος ΔΕΞΙΑ (user 20/08 ιγ΄) */
}
/* συντάκτης και χρόνος ανάγνωσης σε ΔΥΟ ΣΕΙΡΕΣ, στοιχισμένα δεξιά */
.ap-byline .ap-meta-line {
	margin: 0;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
@media (max-width: 560px) {
	.ap-byline { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ap-byline-meta {
		flex: none;
		width: 100%;
		border-left: 0;
		border-top: 1px solid #ececf2;
		padding: 12px 0 0;
		text-align: left;   /* full-width κάτω από τα share — δεξιά θα έμοιαζε ξεκρέμαστο */
	}
	.ap-byline .ap-meta-line { align-items: flex-start; }
}

.ap-seealso-title {
	font-size: 15px;
	letter-spacing: .08em;
	border-top: 2px solid var(--ap-ink);
	padding-top: 14px;
	margin: 34px 0 4px;
}
.ap-grid-related { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* «ΠΕΡΙΣΣΟΤΕΡΑ ΑΡΘΡΑ» (20/08 ιδ΄): μεγάλο ορθογώνιο κάτω από το see-also grid
   του άρθρου — φέρνει το επόμενο σετ 6 καρτών (ap-shell.js -> morecards.asp).
   Χωρίς radius, όπως οι κάρτες. Το label είναι ΨΗΜΕΝΟ κεφαλαίο (ελληνικά:
   ΟΧΙ text-transform — χάνονται οι τόνοι). */
.ap-more {
	display: block;
	width: 100%;
	margin: 22px 0 4px;
	padding: 22px 16px;
	border: 2px solid var(--ap-ink);
	background: #fff;
	color: var(--ap-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	text-align: center;
	text-decoration: none;   /* stis listes to koumpi einai <a> me pragmatiko href */
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ap-more:hover { background: var(--ap-primary); border-color: var(--ap-primary); color: #fff; }
.ap-more:focus-visible { outline: 3px solid var(--ap-primary); outline-offset: 2px; }
.ap-more[aria-busy="true"] { opacity: .55; cursor: progress; }
@media (max-width: 640px) {
	.ap-more { padding: 19px 12px; font-size: 13px; letter-spacing: .1em; }
}

/* sxetika themata: LISTA (18/08 — oxi grid) */
.ap-rellist { list-style: none; margin: 10px 0 24px; padding: 0; counter-reset: rel; }
.ap-rellist li { border-bottom: 1px solid #ececf2; }
.ap-rellist a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 4px;
	text-decoration: none;
	color: var(--ap-ink);
}
.ap-rellist a::before {
	counter-increment: rel;
	content: counter(rel);
	flex: none;
	width: 26px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ap-primary);
	text-align: center;
}
.ap-rellist img { flex: none; width: 92px; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; }
.ap-rellist-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Ίδια γραμματοσειρά τίτλων με τα κουτάκια (user 20/08 ιγ΄): λίστα θεμάτων
   στο player page («ΔΙΑΒΑΣΤΕ ΣΗΜΕΡΑ») και στο post («ΣΧΕΤΙΚΑ ΘΕΜΑΤΑ»/«Η
   ΛΙΣΤΑ») — κοινό component, ένα στυλ. */
.ap-rellist-title {
	font-family: var(--ap-font-title);
	font-weight: var(--ap-font-title-wght);
	font-stretch: var(--ap-font-title-wdth);
	letter-spacing: var(--ap-font-title-track);
	font-size: 16px;
	line-height: 1.3;
}
.ap-rellist a:hover .ap-rellist-title { color: var(--ap-primary); }
.ap-rellist time { font-size: 12px; color: var(--ap-ink-soft); }

/* hero figure: credit (postImage-Legend apo getStartCode) */
.startCode { margin: 16px 0; }
.startCode img { width: 100%; height: auto; border-radius: 12px; display: block; }
.startCode iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 12px; }
.startCode .postImage-Legend { font-weight: 400; font-size: 13px; font-style: italic; text-align: right; color: #797979; margin-top: 6px; }

/* prostasia overflow gia periexomeno apo ti vasi (pattern eRadio) */
.ap-body { overflow-wrap: break-word; }
.ap-body p::selection, .ap-body::selection { background-color: #FAF485; color: #646464; }
.ap-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ap-body td img { width: auto !important; max-width: 100%; height: auto; }

/* ---------------- share buttons ---------------- */
.ap-share { display: flex; gap: 10px; align-items: center; margin: 14px 0 4px; }
.ap-share a, .ap-share button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: var(--ap-ink-soft);
	position: relative;
	transition: transform .15s ease, background .15s ease;
}
.ap-share a:hover, .ap-share button:hover { transform: translateY(-2px); }
.ap-share-fb { background: #1877f2; }
.ap-share-x { background: #111; }
.ap-share-wa { background: #25d366; }
.ap-share-mail { background: var(--ap-violet); }
.ap-share-copy { background: var(--ap-primary); }
.ap-share-native { background: var(--ap-cyan); }
.ap-copied-tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--ap-ink);
	color: #fff;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s;
}
.ap-share-copy.is-copied .ap-copied-tip { opacity: 1; }
/* native share: mono opou yposthrizetai (JS to afinei — CSS kryvei se desktop) */
@media (min-width: 980px) { .ap-share-native { display: none; } }

.ap-source { font-size: 13px; color: var(--ap-ink-soft); border-top: 1px solid #ececf2; padding-top: 14px; margin-top: 22px; }
.ap-source a { font-weight: 700; }

.ap-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 26px 0 8px; }
.ap-tags-label { font-size: 12px; letter-spacing: .1em; color: var(--ap-ink-soft); font-weight: 700; }
.ap-tags a {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ap-primary);
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 4px 12px;
}
.ap-tags a:hover { background: var(--ap-primary); color: #fff; }

/* ---------------- home hero: τα 4 κανάλια σε «χαμόγελο» band (20/08 στ΄) ----
   Full-width ζώνη α λα .ap-phero: 4 crossfading background layers (gradient
   ταυτότητας + blurred artwork — τα γεμίζει ο poller), κάτω άκρο κομμένο σε
   καμπύλη-«χαμόγελο» (border-radius, το λευκό σώμα φαίνεται στις γωνίες).
   ΠΡΟΣΟΧΗ όνομα: .ap-hhero (h=home, α λα .ap-phero) — το σκέτο .ap-hero
   είναι ΠΙΑΣΜΕΝΟ από το hero image των άρθρων (margin:16px = έκανε κενό
   κάτω από το header, collision 20/08 ζ΄). Κολλάει flush στο header, το
   billboard ζει ΜΕΣΑ στη ζώνη πάνω από τις κάρτες (frosted, πάτερν phero).
   Οι κάρτες ΔΕΝ αλλάζουν ποτέ μέγεθος/θέση (απόφαση user 20/08 — κανένα
   scale): hover/focus αλλάζει ΜΟΝΟ ring + φόντο. Focus/rotation: ap-player.js */
.ap-hhero .ch-athensparty    { --ap-ch-a: #130ffd; --ap-ch-g1: #130ffd; --ap-ch-g2: #7D64F9; }
.ap-hhero .ch-athenspartyrnb { --ap-ch-a: #4A00E0; --ap-ch-g1: #4A00E0; --ap-ch-g2: #8E2DE2; }
.ap-hhero .ch-wonder         { --ap-ch-a: #0e8be2; --ap-ch-g1: #0e8be2; --ap-ch-g2: #27C4FF; }
.ap-hhero .ch-velvetfm       { --ap-ch-a: #C33764; --ap-ch-g1: #C33764; --ap-ch-g2: #6a1b6a; }

.ap-hhero {
	--ap-smile: clamp(26px, 5vw, 64px);
	/* πόσο ΠΑΝΩ από το τέλος του section σταματά το gradient: οι κάρτες
	   «κρέμονται» έξω από το band κατά τόσο (απόφαση user 20/08 η΄·
	   20/08 θ΄: 80px πιο ΚΑΤΩ από την πρώτη εκδοχή — μαζί με το
	   padding-bottom 40, ώστε το overflow:hidden να μην κόβει τις σκιές) */
	--ap-hang: clamp(60px, calc(12.5vw - 50px), 110px);
	position: relative;
	overflow: hidden;
	padding: 16px 0 40px;
	/* +20px αέρας προς «Τελευταία νέα»/ASTRA (20/08 ιγ΄, user) — ΜΕ MARGIN,
	   όχι padding: το padding θα μετακινούσε και το τόξο ως προς τις κάρτες
	   (το --ap-hang μετριέται από το κάτω άκρο του section) */
	margin-bottom: 20px;
	color: #fff;
}
/* Το «χαμόγελο» (v2 — πιο ομαλό, 20/08): το clipping ζει στον bgs wrapper
   που είναι ΠΛΑΤΥΤΕΡΟΣ από το viewport (±18%) με ελλειπτικά κάτω radius.
   Μέσα στο ορατό πλάτος μένει μόνο το ρηχό μεσαίο μέρος του τόξου: στις
   άκρες της οθόνης η κλίση είναι ~12° αντί για την ΚΑΤΑΚΟΡΥΦΗ εφαπτομένη
   που έχει το σκέτο 50% radius στο ίδιο το .ap-hhero (ήταν «απότομο στις
   άκρες»). Το τόξο ακουμπά το κάτω άκρο στο κέντρο και ανεβαίνει ~0.84×
   smile στις άκρες — ίδιο βάθος, ομαλή αρχή. */
.ap-hhero-bgs {
	position: absolute;
	top: 0; bottom: var(--ap-hang);   /* το τόξο περνά ΠΙΣΩ από τις κάρτες */
	left: -18%; right: -18%;
	overflow: hidden;
	border-bottom-left-radius: 50% calc(var(--ap-smile) * 2.6);
	border-bottom-right-radius: 50% calc(var(--ap-smile) * 2.6);
	background: #10103a;   /* πίσω από τα layers όσο δεν έχει φορτώσει τίποτα */
}
.ap-hhero-bg {
	position: absolute; inset: 0;
	background: linear-gradient(150deg, var(--ap-ch-g1, #130ffd) 0%, var(--ap-ch-g2, #7D64F9) 100%);
	opacity: 0;
	transition: opacity .55s ease;
}
.ap-hhero-bg.is-on { opacity: 1; }
.ap-hhero-bg img {
	position: absolute; left: -40px; top: -40px;
	width: calc(100% + 80px); height: calc(100% + 80px);
	max-width: none;   /* το global img max-width θα το έκοβε */
	object-fit: cover;
	filter: blur(60px) saturate(1.25) brightness(.85);
	opacity: 0;
	transition: opacity .6s ease;
}
.ap-hhero-bg.has-art img { opacity: .5; }
.ap-hhero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10,8,40,.18); }
.ap-hhero .boxed { position: relative; }

/* κάρτες: λευκές, σε ΟΛΟ το πλάτος του boxed (απόφαση user 20/08 ζ΄) */
.ap-hhero-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px;   /* +100% (ήταν 18px) — απόφαση user 20/08 */
}
.ap-hcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--ap-ink);
	border-radius: 16px;
	padding: 19px 19px 23px;
	box-shadow: 0 10px 26px rgba(5,5,40,.28);
	transition: box-shadow .3s ease;
}
/* ring focus/playing: ΧΡΩΜΑ καναλιού στην άκρη της κάρτας — το παλιό λευκό
   ring δεν έχει νόημα πια, το παχύ λευκό πλαίσιο το έχουν ΟΛΕΣ οι κάρτες
   (padding)· το χρωματιστό διαβάζεται και πάνω στο band και στο λευκό */
.ap-hcard.is-focus,
.ap-hcard.is-playing { box-shadow: 0 0 0 3px var(--ap-ch-a, var(--ap-primary)), 0 16px 34px rgba(5,5,40,.36); }

/* artwork / logo-tile: τετράγωνο, ένα από τα δύο ορατό (ο poller εναλλάσσει
   με [hidden] — το !important νικά τα display των βασικών κανόνων).
   Το πλάτος του artwork είναι ΞΕΧΩΡΙΣΤΗ ρύθμιση από το padding της κάρτας
   (--ap-art-w): μικραίνει το εξώφυλλο ΧΩΡΙΣ να στενεύει ο τίτλος (20/08 ιγ΄) */
.ap-hcard-art { position: relative; width: var(--ap-art-w, 78%); margin: 0 auto; }
.ap-hcard-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0;   /* τετράγωνες γωνίες — απόφαση user 20/08 */
	object-fit: cover;
}
.ap-hcard-img.is-artist { border-radius: 50%; }
.ap-hcard-tile {
	display: flex; align-items: center; justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0;   /* τετράγωνες γωνίες — απόφαση user 20/08 */
	background: linear-gradient(150deg, var(--ap-ch-g1, #130ffd) 0%, var(--ap-ch-g2, #7D64F9) 100%);
}
.ap-hcard-img[hidden], .ap-hcard-tile[hidden] { display: none !important; }
/* πηγή: {call}_2.png (160px, διάφανο) γυρισμένο ΛΕΥΚΟ με filter — τα
   _w.png είναι μόλις 85px και έβγαιναν θολά στο ~173px του πλακιδίου */
.ap-hcard-tile img { width: 62%; max-height: 62%; object-fit: contain; filter: brightness(0) invert(1); }

/* play: μισό πάνω στο artwork, μισό στη λευκή κάρτα (το translate είναι
   στατικό κεντράρισμα — ΟΧΙ hover effect μεγέθους) */
.ap-hcard-play {
	position: absolute; left: 50%; bottom: 0;
	transform: translate(-50%, 50%);
	width: 56px; height: 56px;
	border: 0; border-radius: 50%;
	background: var(--ap-ch-a, var(--ap-primary));
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(5,5,40,.35);
	z-index: 2;
	transition: filter .15s ease;
}
.ap-hcard-play:hover { filter: brightness(1.15); }
.ap-hcard-play svg { width: 22px; height: 22px; display: block; margin-left: 2px; }

/* equalizer badge: ΜΟΝΟ στο κανάλι που παίζει στο bar */
.ap-hcard-eq {
	position: absolute; top: 8px; right: 8px;
	display: none; align-items: flex-end; gap: 3px;
	height: 16px; padding: 6px 8px;
	background: rgba(8,8,30,.55);
	border-radius: 9px;
	box-sizing: content-box;
}
.ap-hcard-eq span { width: 3px; border-radius: 2px; background: #2eff8a; animation: apEq 1s ease-in-out infinite; }
.ap-hcard-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.ap-hcard-eq span:nth-child(2) { height: 90%; animation-delay: .18s; }
.ap-hcard-eq span:nth-child(3) { height: 60%; animation-delay: .36s; }
.ap-hcard-eq span:nth-child(4) { height: 80%; animation-delay: .54s; }
@keyframes apEq { 50% { transform: scaleY(.35); } }
.ap-hcard.is-playing .ap-hcard-eq { display: flex; }

/* τίτλος/καλλιτέχνης — ο χώρος κρατιέται ΚΑΙ άδειος (min-height): όταν
   έρθουν τα data του poller δεν μετακινείται τίποτα */
.ap-hcard-track { margin-top: 38px; padding: 0 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-hcard-title {
	min-width: 0;
	font-size: 14.5px; font-weight: 700; line-height: 1.3;
	/* ΔΥΟ γραμμές δεσμευμένες ΠΑΝΤΑ: ο poller φέρνει άλλοτε 1 και άλλοτε 2
	   γραμμές τίτλου και οι κάρτες «πηδούσαν» σε κάθε αλλαγή κομματιού
	   (η ψηλότερη κάρτα τεντώνει ΟΛΗ τη σειρά του grid) — 20/08 ιγ΄ */
	min-height: calc(1.3em * 2);
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ap-hcard-artist { min-width: 0; font-size: 12.5px; color: var(--ap-ink-soft); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* λογότυπο σταθμού: πάντα τέρμα κάτω (margin-top auto), SPA link στο player */
.ap-hcard-st { margin: auto auto 0; padding-top: 10px; display: flex; align-items: center; }
.ap-hcard-st img { max-height: 66px; max-width: 135px; width: auto; }   /* +50% (ήταν 44/90) */
.ap-hcard-st:hover img { opacity: .7; }

/* mobile: swipe carousel με scroll-snap — το φόντο ακολουθεί την κάρτα που
   κουμπώνει στο κέντρο (IntersectionObserver στο ap-player.js) */
@media (max-width: 900px) {
	/* ΧΩΡΙΣ hang στο κινητό: οι κάρτες πιάνουν σχεδόν όλο το πλάτος και
	   έκρυβαν το χαμόγελο από πίσω τους — εδώ η καμπύλη μένει ΚΑΤΩ από
	   τις κάρτες, πλήρως ορατή (όπως το ενέκρινε ο user στο mobile) */
	.ap-hhero { --ap-hang: 0px; padding-bottom: calc(var(--ap-smile) + 18px); }
	.ap-hhero-cards {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* extra κάτω χώρος για τις σκιές των καρτών (ο scroller τις έκοβε
		   στα 10px)· το αρνητικό margin επαναφέρει το spacing της ροής */
		margin: 0 -12px -24px;
		padding: 12px 12px 34px;
	}
	.ap-hhero-cards::-webkit-scrollbar { display: none; }
	.ap-hcard { scroll-snap-align: center; }
}
@media (min-width: 560px) and (max-width: 900px) {
	.ap-hhero-cards { grid-auto-columns: 38%; }
}

/* ---------------- ads ---------------- */
/* Placeholder: "ADVERTISEMENT" + shimmer mexri na apantisei o GAM.
   .is-filled: fevgei to placeholder (menei mono to creative)
   .is-empty:  menei to koutaki, stamataei to shimmer */
.ap-ad {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 16px auto;
	position: relative;
	background: linear-gradient(100deg, #ececf2 40%, #f8f8fc 50%, #ececf2 60%);
	background-size: 200% 100%;
	animation: apAdShimmer 1.6s linear infinite;
	border-radius: 8px;
	overflow: hidden;
}
.ap-ad::before {
	content: "ADVERTISEMENT";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 10px;
	letter-spacing: .28em;
	color: #9a9aa8;
	pointer-events: none;
}
@keyframes apAdShimmer { to { background-position: -200% 0; } }
.ap-ad.is-empty { animation: none; }
.ap-ad.is-filled { background: none; animation: none; min-height: 0; width: auto; }
.ap-ad.is-filled::before { content: none; }

/* diastaseis placeholder ana slot — akolouthoun ta GAM size mappings */
.ap-ad[data-ad="billboard"] { display: none; }
@media (min-width: 768px) {
	.ap-ad[data-ad="billboard"] { display: flex; min-height: 90px; width: 728px; max-width: 100%; }
}
@media (min-width: 980px) {
	.ap-ad[data-ad="billboard"] { min-height: 250px; width: 970px; }
}
.ap-ad-top { margin-top: 12px; }

.ap-ad[data-ad="inline1"], .ap-ad[data-ad="inline2"] { min-height: 250px; width: 300px; }
.home .ap-ad[data-ad="inline1"] { display: flex; }
@media (min-width: 980px) {
	.home .ap-ad[data-ad="inline1"] { display: none; }   /* home inline1: mono kato apo 980 */
}

.ap-ad[data-ad="300x250_2"] { display: none; }
@media (min-width: 980px) {
	.ap-ad[data-ad="300x250_2"] { display: flex; min-height: 250px; width: 300px; }
}

/* in-feed slot ton liston: orato MONO sto kinito (live: .hideOver768) —
   ekei to billboard den servirei tipota, afto einai to pano ad */
.ap-ad-feed { display: flex; }
@media (min-width: 768px) {
	.ap-ad-feed { display: none; }
}

/* custom: to banner strip pou anoigei to soma tou arthrou (mono post pages —
   port apo ads/gam_post-min.js): 320x50/100 kinito, 468x60 tablet,
   468x60 + 728x90 desktop */
.ap-ad[data-ad="custom"] { min-height: 100px; width: 320px; max-width: 100%; }
@media (min-width: 768px) {
	.ap-ad[data-ad="custom"] { min-height: 60px; width: 468px; }
}
@media (min-width: 980px) {
	.ap-ad[data-ad="custom"] { min-height: 90px; width: 728px; }
}

/* InMobi Choice: to persistent "Privacy" link einai position:fixed bottom:0
   right:0 me z-index 2147483640 — kathotan PANO sto player bar. To kryvoume.
   I prosvasi sto consent UI DEN xanetai: to footer link «Ρυθμίσεις cookies»
   kalei __tcfapi('displayConsentUi') (epalitheumeno oti anoigei to UI), ara
   i apaitisi tou TCF gia epanaklisi ton rythmiseon kalyptetai. To CSS tou
   CMP DEN exei !important edo, opote arkei auto. */
.qc-cmp2-persistent-link { display: none !important; }

/* Smart/Equativ containers (adweb wrapper): den einai GPT slots — den exoun
   slotRenderEnded, ara OXI shimmer placeholder (den tha efevge pote).
   Xoris desmevmeno ypsos: adeio format = KAMIA tripa sti selida. */
.ap-sasbox { margin: 22px auto; text-align: center; }
.ap-sasbox:empty { margin: 0; }
.ap-sasbox--video { max-width: 300px; }

/* fldNoADs=1: kanena placeholder (to ap-ads.js den trexei kan) */
body.ap-noads .ap-ad, body.ap-noads .ap-ad-skin, body.ap-noads .ap-sasbox { display: none !important; }

/* skin: 1x1 — pote placeholder */
.ap-ad-skin, .ap-ad[data-ad="skin"] { background: none !important; animation: none !important; min-height: 0 !important; }
.ap-ad-skin::before, .ap-ad[data-ad="skin"]::before { content: none !important; }

/* ---------------- sticky sidebar (300x600 / 300x250_1) ----------------
   Dyo stiles apo 980px kai pano: periexomeno + 300px sidebar. To slot einai
   sticky — "kollaei" sto scroll. Sto ≥1279 xoraei kai 300x600 (halfpage).
   20/08 i': to aside einai orato KAI <980 (kouvalaei to ASTRA text kouti —
   sto kinito benei kato apo to periexomeno tis stilis)· MONO to ad slot
   kryvetai <980. */
.ap-cols { display: block; }
.ap-side { display: block; }
.ap-side .ap-ad[data-ad="300x250_1"] { display: none; }
@media (min-width: 980px) {
	.ap-cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 28px;
		/* OXI align-items:start — to aside prepei na tentonei sto ypsos tis
		   grammis gia na exei "diadromi" to position:sticky tou ad */
	}
	/* DYO sticky zones (pattern live site: sticky-column-1/2): kathe slot
	   zei se diko tou .ap-side-slot, opote to sticky tou periorizetai sti
	   diki tou zoni. Dyo sticky items sto IDIO container tha kollousan sto
	   idio top kai tha stoivazontan to ena PANO sto allo. */
	.ap-side { display: flex; flex-direction: column; }
	.ap-side > .ap-astrabox { flex: none; }
	.ap-side-slot { flex: 3 1 0; min-height: 0; }
	.ap-side-slot + .ap-side-slot { flex: 1 1 0; margin-top: 28px; }
	.ap-side .ap-ad[data-ad="300x250_1"],
	.ap-side .ap-ad[data-ad="300x250_2"] {
		display: flex;
		position: sticky;
		top: var(--ap-sticky-top);
		min-height: 250px;
		width: 300px;
		margin: 0;
	}
}
@media (min-width: 1279px) {
	.ap-side .ap-ad[data-ad="300x250_1"] { min-height: 600px; }
}

/* ---------------- search ----------------
   To pedio anazitisis + ta CSE apotelesmata zoun sto _css/search.css
   (selida /search, Google Programmable Search). */

/* ---------------- player hero (redesign 20/08, α λα eRadio #playerHero) ---
   Full-width ζώνη: gradient ταυτότητας + blurred artwork του τρέχοντος
   κομματιού (το γεμίζει ο poller στο .ap-phero-bg) + billboard πάνω στο blur
   + switcher chips με τα λευκά brand marks. Η λευκή κάρτα (.ap-pcard)
   ΚΑΒΑΛΑΕΙ το hero με αρνητικό margin — το -75px pattern του eRadio
   .player_container. Χρώματα ανά κανάλι: custom properties στο main.ch-X
   (τα κληρονομούν hero/κουμπί/pulse/tiles — και στο playlist page). */
main.ch-athensparty    { --ap-ch-a: #130ffd; --ap-ch-g1: #130ffd; --ap-ch-g2: #7D64F9; }
main.ch-athenspartyrnb { --ap-ch-a: #4A00E0; --ap-ch-g1: #4A00E0; --ap-ch-g2: #8E2DE2; }
main.ch-wonder         { --ap-ch-a: #0e8be2; --ap-ch-g1: #0e8be2; --ap-ch-g2: #27C4FF; }
main.ch-velvetfm       { --ap-ch-a: #C33764; --ap-ch-g1: #C33764; --ap-ch-g2: #6a1b6a; }

.ap-phero {
	position: relative;
	overflow: hidden;
	padding: 16px 0 74px;
	background: linear-gradient(150deg, var(--ap-ch-g1, #130ffd) 0%, var(--ap-ch-g2, #7D64F9) 100%);
}
.ap-phero-bg { position: absolute; inset: -40px; }
.ap-phero-bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: blur(60px) saturate(1.2);
	opacity: 0;
	transition: opacity .6s ease;
}
.ap-phero-bg.has-art img { opacity: .45; }
.ap-phero-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 40, .25); }
.ap-phero .boxed { position: relative; }

/* billboard μέσα στη brand ζώνη: frosted πάνω στο gradient — το no-fill
   κενό «χάνεται» στο σκούρο φόντο αντί για άσπρη τρύπα. Το κενό προς τα
   chips το δίνει το ίδιο το slot (κάτω margin) — <768 το slot κρύβεται
   και δεν αφήνει κενό. */
.ap-phero .ap-ad, .ap-hhero .ap-ad { background: rgba(255,255,255,.08); animation: none; }
.ap-phero .ap-ad::before, .ap-hhero .ap-ad::before { color: rgba(255,255,255,.7); }
.ap-phero .ap-ad.is-filled, .ap-hhero .ap-ad.is-filled { background: none; }
.ap-phero .ap-ad-top { margin: 0 auto 16px; }
.ap-hhero .ap-ad-top { margin: 0 auto 18px; }

/* switcher: chips με τα λευκά brand marks — active = λευκό γεμάτο */
.ap-phero-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.ap-phero-nav a {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 16px 8px 11px;
	border-radius: 999px;
	background: rgba(255,255,255,.13);
	border: 1px solid rgba(255,255,255,.22);
	color: #fff;
	text-decoration: none;
	font-size: 13px; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ap-phero-nav a img { width: 22px; height: 22px; object-fit: contain; display: block; }
.ap-phero-nav a:hover { background: rgba(255,255,255,.26); }
.ap-phero-nav a.active { background: #fff; border-color: #fff; color: var(--ap-ink); }
.ap-phero-nav a.active img { filter: brightness(0); opacity: .8; }
@media (max-width: 640px) {
	/* οριζόντιο scroll αντί για wrap — 4 chips δεν χωράνε σε 375px */
	.ap-phero-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
	.ap-phero-nav::-webkit-scrollbar { display: none; }
	.ap-phero-nav a { flex: none; }
}

/* Δύο ζώνες περιεχομένου (20/08 δ΄): ΑΡΙΣΤΕΡΑ κάρτα + PLAYLIST + άρθρα,
   ΔΕΞΙΑ η διαφήμιση ως δική της στήλη (sticky) που ξεκινά στο ύψος της
   κάρτας. ΟΛΟ το .ap-pgrid καβαλάει το hero — κάρτα και ad μαζί.
   DOM order = MOBILE order (κάρτα → ad → tabs): στο desktop τα grid areas
   στέλνουν το aside δεξιά σε όλο το ύψος, στο mobile η φυσική ροή βγάζει
   τη διαφήμιση κάτω από την κάρτα, πάνω από τα tabs. */
.ap-pgrid { position: relative; z-index: 2; margin-top: -58px; display: block; }
.ap-pside .ap-ad[data-ad="300x250_1"] { min-height: 250px; width: 300px; }
@media (min-width: 980px) {
	.ap-pgrid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-rows: auto 1fr;
		grid-template-areas: "card side" "main side";
		gap: 0 28px;
	}
	.ap-pcard { grid-area: card; }
	.ap-pside { grid-area: side; }
	.ap-player3 { grid-area: main; }
	/* ΟΧΙ align-items:start — το aside τεντώνει για να έχει διαδρομή το sticky */
	.ap-pside .ap-ad[data-ad="300x250_1"] { position: sticky; top: var(--ap-sticky-top); margin: 0; }
}
@media (min-width: 1279px) {
	.ap-pside .ap-ad[data-ad="300x250_1"] { min-height: 600px; }
}

/* mobile tabs (<980): PLAYLIST / ΔΙΑΒΑΣΤΕ ΣΗΜΕΡΑ — ενεργό το δεύτερο.
   Τα section headings κρύβονται, τα tabs τα αντικαθιστούν. Η εναλλαγή
   γίνεται με .show-won στο .ap-player3 (delegation στο ap-player.js). */
.ap-ptabs { display: none; }
@media (max-width: 979px) {
	.ap-ptabs { display: flex; border-bottom: 1px solid #ececf2; }
	.ap-ptabs button {
		flex: 1;
		background: none;
		border: 0;
		font: inherit;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: .04em;
		color: var(--ap-ink-soft);
		padding: 10px 4px;
		margin-bottom: -1px;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}
	.ap-ptabs button.active { color: var(--ap-ch-a, var(--ap-primary)); border-bottom-color: var(--ap-ch-a, var(--ap-primary)); }
	.ap-player3 .ap-seealso-title { display: none; }
	.ap-player3-won { display: none; }
	.ap-player3-latest { margin-top: 14px; }
	.ap-player3.show-won .ap-player3-won { display: block; margin-top: 14px; }
	.ap-player3.show-won .ap-player3-latest { display: none; }
}

/* Η λευκή κάρτα ΜΙΑΣ ζώνης (μέσα στην αριστερή ζώνη):
   [ap-pnow (wonNowCard: art + meta)] [Ακούστε live τέρμα δεξιά].
   Σκιά ΠΡΟΣ ΤΑ ΠΑΝΩ + radius μόνο στις πάνω γωνίες — το κάτω μέρος
   «δένει» με το λευκό σώμα της σελίδας (καμία σκιά/γραμμή από κάτω). */
.ap-pcard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	background: var(--ap-bg);
	border-radius: 18px 18px 0 0;
	/* σκιά ΜΟΝΟ πάνω/πλάγια: το clip-path κόβει κάθε διάχυση κάτω από την
	   κάτω άκρη — το λευκό της κάρτας συνεχίζει καθαρό στο σώμα της σελίδας */
	box-shadow: 0 -16px 36px rgba(17, 17, 22, .26);
	clip-path: inset(-90px -90px 0 -90px);
	/* ίση απόσταση artwork από πάνω και από αριστερά· το κάτω 20px χωράει
	   ΟΛΗ τη σκιά του artwork (6+14) ώστε να μην την κόβει το clip-path */
	/* deksia 76 = 22 (padding) + 54 (play FAB pano deksia): to keimeno DEN
	   pernaei pote kato apo to koumpi */
	padding: 22px 76px 20px 22px;
	position: relative;
}
/* flex-basis 500 = artwork 170 + gap 22 + ~310 κείμενο: κάτω από αυτό το
   «Ακούστε live» ΔΕΝ χωράει πλάι στο κείμενο και τυλίγεται σε δική του
   σειρά (margin-left:auto = τέρμα δεξιά). Χρειάζεται ΚΑΙ στο desktop:
   στα 980-1075 η κάρτα είναι μόνο ~620px γιατί δίπλα κάθεται το 300άρι
   ad — εκεί η στήλη κειμένου έπεφτε στα ~210px και το «Αμέσως μετά»
   έσπαγε σε 5 γραμμές. */
/* ΟΧΙ position:relative εδώ — το FAB πρέπει να αγκυρώνει στην ΚΑΡΤΑ (πάνω
   δεξιά γωνία της), όχι στη στήλη του «τώρα παίζει» */
.ap-pnow { flex: 1 1 500px; min-width: 0; --ap-art: 170px; --ap-fab-in: 10px; }
.ap-pcard .ap-listen-btn { flex: none; align-self: flex-end; background: var(--ap-ch-a, var(--ap-primary)); }
.ap-pcard .ap-listen-btn:hover { background: var(--ap-ch-a, var(--ap-primary)); filter: brightness(1.16); }

/* το «Τώρα παίζει» ΜΕΓΑΛΟ: ίδιο wonNowCard markup, μηδενισμένο το κουτί
   της βάσης (bg/border/padding) και μεγεθυσμένα τα μέρη. Στο label: h1
   όνομα σταθμού (injection) — «Αμέσως μετά» pill μόνο όταν υπάρχει next
   (AutoDJ/icecast: λείπει, το layout δεν το χρειάζεται). */
.ap-pnow .wonNowCard { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; gap: 22px; }
/* ΧΩΡΙΣ αυτό το min-width:0 η στήλη κειμένου αρνείται να συρρικνωθεί κάτω
   από το min-content της (= ολόκληρο το nowrap «Αμέσως μετά») και ξεφεύγει
   δεξιά από την κάρτα — το automatic minimum size του flex item. */
.ap-pnow .wonNowMeta { min-width: 0; }
.ap-pnow .wonPulse { display: none; }   /* το pulse μπαίνει στο label (::before του Txt) */
/* σκιά art: 6+14=20 = το κάτω padding της κάρτας — τελειώνει ΜΕΣΑ της,
   το clip-path δεν την ακουμπά */
.ap-pnow .wonNowArt, .ap-pnow .wonNowArtNone { width: var(--ap-art); height: var(--ap-art); }
.ap-pnow .wonNowArt { border-radius: 14px; box-shadow: 0 6px 14px rgba(17, 17, 22, .24); }
/* play FAB: PANO DEKSIA mesa sto lefko plaisio tis kartas (apofasi user
   21/08). Sto ≤640 gyrnaei stin kato-deksia gonia tou artwork — ekei i stili
   keimenou einai ~180px kai den perisseuei platos gia deksi padding 76px. */
.ap-play-fab {
	position: absolute;
	top: 22px; right: 22px;
	width: 54px; height: 54px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: var(--ap-ch-a, var(--ap-primary));
	color: #fff;
	font-size: 19px; line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(17, 17, 22, .34);
	transition: filter .15s ease, box-shadow .15s ease;
}
.ap-play-fab span { transform: translateX(2px); }   /* optiko kentrarisma tou glyph */
.ap-play-fab:hover { filter: brightness(1.14); }
.ap-play-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* to kanali pou PAIZEI: daktylios stin apoxrosi tou kanaliou */
.ap-play-fab.is-playing { box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 6px 16px rgba(17, 17, 22, .34); }
.ap-pnow .wonNowLabel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-pnow .wonStName { display: inline; margin: 0; font: inherit; color: var(--ap-ink); }
.ap-pnow .wonStSep { opacity: .45; font-weight: 400; }
.ap-pnow .wonNowLabelTxt { display: inline-flex; align-items: center; gap: 8px; }
.ap-pnow .wonNowLabelTxt::before {
	content: "";
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--ap-ch-a, var(--ap-primary));
	animation: apPulse 1.4s ease-in-out infinite;
}
.ap-pnow .wonNowSongBig { font-size: 30px; line-height: 1.18; margin-top: 6px; }
.ap-pnow .wonNowArtist { font-size: 17px; margin-top: 4px; }
.ap-pnow .wonNextLine {
	display: inline-flex; align-items: center; gap: 9px;
	margin-top: 14px;
	background: var(--ap-bg-soft);
	border-radius: 999px;
	padding: 8px 16px 8px 14px;
	font-size: 14px;
	max-width: 100%;
}
.ap-pnow .wonNextLbl { color: var(--ap-ch-a, var(--ap-violet)); flex: none; }
/* ΜΙΑ γραμμή πάντα: το στρογγυλό pill με 2-5 σειρές κειμένου (μεγάλοι
   τίτλοι σε στενή κάρτα) διαλυόταν οπτικά — min-width:0 για να μπορεί να
   συρρικνωθεί το nowrap κείμενο, ellipsis στο υπόλοιπο. */
.ap-pnow .wonNextLine b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
	.ap-pgrid { margin-top: -48px; }
	.ap-pcard { flex-wrap: wrap; gap: 14px; padding: 16px 16px 20px; }
	.ap-pnow { --ap-art: 115px; --ap-fab-in: 8px; }
	/* kentro ligo MESA apo tin gonia: alliws to koumpi patouse to keimeno */
	.ap-play-fab {
		width: 44px; height: 44px; font-size: 15px;
		top: calc(16px + var(--ap-art) - var(--ap-fab-in));
		right: auto;
		left: calc(16px + var(--ap-art) - var(--ap-fab-in));
		transform: translate(-50%, -50%);
	}
	.ap-pcard .ap-listen-btn { margin-left: 0; width: 100%; }
	/* μικρό art = μικρότερη σκιά (4+10=14 = κάτω padding, μηδέν κόψιμο) */
	.ap-pnow .wonNowArt { box-shadow: 0 4px 10px rgba(17, 17, 22, .24); }
	/* όνομα σταθμού και «ΤΩΡΑ ΠΑΙΖΕΙ» σε 2 καθαρές γραμμές (όχι τύλιγμα) */
	.ap-pnow .wonStSep { display: none; }
	.ap-pnow .wonStName { width: 100%; }
	.ap-pnow .wonNowCard { gap: 14px; align-items: flex-start; }
	.ap-pnow .wonNowSongBig { font-size: 21px; }
	.ap-pnow .wonNowArtist { font-size: 15px; }
	/* το «ΤΩΡΑ ΠΑΙΖΕΙ» κρύβεται στο mobile — μένει μόνο το όνομα σταθμού
	   (μαζί του φεύγει και το pulse dot, ::before του Txt) */
	.ap-pnow .wonNowLabelTxt { display: none; }
	/* «Αμέσως μετά» ΧΩΡΙΣ pill στο mobile: σκέτο κείμενο σε 2 ΣΕΙΡΕΣ —
	   label πάνω, κομμάτι από κάτω σε όλο το πλάτος */
	.ap-pnow .wonNextLine { background: none; border-radius: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 3px; }
	/* χωρίς pill = χωρίς ellipsis: ολόκληρος ο τίτλος σε όσες γραμμές θέλει */
	.ap-pnow .wonNextLine b { white-space: normal; overflow: visible; }
}
/* popup (μικρό παράθυρο): πιο σφιχτή ζώνη */
body.ap-popup .ap-phero { padding-bottom: 58px; }
body.ap-popup .ap-pgrid { margin-top: -42px; }

/* ---------------- player page: 2 στήλες (μέσα στην αριστερή ζώνη) -------- */
/* (1) PLAYLIST 300px  (2) Διαβάστε σήμερα (ο υπόλοιπος χώρος) — η διαφήμιση
   ζει πλέον στη δεξιά ζώνη του .ap-pgrid (.ap-pside), όχι εδώ.
   ΜΟΝΟ ≥980 το πλαϊνό padding = του card (PLAYLIST↔artwork, δεξί άκρο
   άρθρων↔«Ακούστε live») — στο mobile τα tabs/λίστες κρατούν το βασικό
   margin του boxed (απόφαση user 20/08). */
.ap-player3 { margin-top: 26px; display: block; }
.ap-player3-latest { margin-top: 26px; }
/* max 15 κομμάτια πίσω στο player page (το κοινό fragment ψήνει έως 20 —
   το playlist page τα δείχνει όλα, εδώ κόβουμε με CSS ώστε το Application
   cache won_{sid} να μένει ΕΝΑ για τις δύο σελίδες) */
.ap-player3-won .wonPlaylist li:nth-child(n+16) { display: none; }
.ap-player3-won .ap-seealso-title { margin-top: 0; border-top: 0; padding-top: 0; }
.ap-player3-won .wonPlaylist { margin-top: 10px; }
@media (min-width: 980px) {
	.ap-player3 {
		display: grid;
		/* 21/08 (popup size ~1010px = 50% tou traffic): ta THEMATA pairnoun to
		   60% kai i PLAYLIST to 40% — prin itan statheri 300px playlist kai ta
		   themata emenan me ligotero xoro apo aftin */
		grid-template-columns: minmax(210px, .66fr) minmax(0, 1fr);
		gap: 24px;
		padding: 0 22px;
	}
	.ap-player3-latest { margin-top: 0; }
	.ap-player3-latest .ap-seealso-title { margin-top: 0; border-top: 0; padding-top: 0; }
	/* σφιχτές γραμμές playlist στη στενή στήλη: ΜΙΑ γραμμή τίτλος, ΜΙΑ
	   καλλιτέχνης (ellipsis) — αλλιώς κάθε γραμμή έπιανε 78px στο popup */
	.ap-player3-won .wonPlaylist { max-width: none; }
	.ap-player3-won .wonPlaylist li { gap: 10px; padding: 7px 2px; }
	.ap-player3-won .wonRowTime { width: 40px; font-size: 12px; }
	.ap-player3-won .wonRowArt { width: 38px; height: 38px; }
	.ap-player3-won .wonRowMeta { min-width: 0; }
	.ap-player3-won .wonRowTitle,
	.ap-player3-won .wonRowArtist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.ap-player3-won .wonRowTitle { font-size: 14px; }
	.ap-player3-won .wonRowArtist { font-size: 12px; }
}

/* «Διαβάστε σήμερα» (player page): αρίθμηση/εικόνα/τίτλος align top, φωτο
   4:3 με πιο σφιχτό radius, χωρίς ημερομηνία (δεν τυπώνεται καν) */
.ap-player3-latest .ap-rellist a { align-items: flex-start; gap: 10px; padding: 8px 2px; }
/* σφιχτή αρίθμηση (user 21/08): 18px αντί 26 + μικρότερο νούμερο */
.ap-player3-latest .ap-rellist a::before { line-height: 1.1; width: 18px; font-size: 15px; }
.ap-player3-latest .ap-rellist img { aspect-ratio: 4/3; border-radius: 4px; width: 78px; }
/* το πολύ 3 γραμμές τίτλος — αλλιώς στη στενή στήλη έβγαιναν 5-6 και οι
   γραμμές της λίστας ανέβαιναν στα 230px */
.ap-player3-latest .ap-rellist-title {
	font-size: 15px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------- playlist / whatson ---------------- */
/* Η κάρτα του σταθμού καβαλάει το brand ribbon (.ap-phero) — ΙΔΙΟ πατέρν με
   την .ap-pcard του player: σκιά ΜΟΝΟ πάνω/πλάγια (clip-path κόβει κάθε
   διάχυση κάτω από την κάτω άκρη), radius μόνο πάνω, το κάτω μέρος «δένει»
   με το λευκό σώμα της σελίδας. */
.ap-plcard {
	position: relative;
	z-index: 2;
	margin-top: -58px;
	background: var(--ap-bg);
	border-radius: 18px 18px 0 0;
	box-shadow: 0 -16px 36px rgba(17, 17, 22, .26);
	clip-path: inset(-90px -90px 0 -90px);
	padding: 22px 22px 10px;
}
.ap-plcard .ap-ch-head { margin: 0; }
.ap-plcard .ap-listen-btn { background: var(--ap-ch-a, var(--ap-primary)); }
.ap-plcard .ap-listen-btn:hover { background: var(--ap-ch-a, var(--ap-primary)); filter: brightness(1.16); }
@media (min-width: 980px) {
	/* to periexomeno kato apo tin karta stoixizetai me to esoteriko tis padding
	   (idio patern me to .ap-player3 tou player page) */
	.playlist .ap-colmain { padding: 0 22px; }
}
@media (max-width: 640px) {
	.ap-plcard { margin-top: -48px; padding: 16px 16px 6px; }
	.ap-plcard .ap-ch-head { gap: 14px; }
	.ap-plcard .ap-ch-head img { width: 56px; height: 56px; }
	.ap-plcard .ap-ch-head h1 { font-size: 24px; }
	.ap-plcard .ap-listen-btn { margin-left: 0; width: 100%; }
}
.ap-ch-head { display: flex; align-items: center; gap: 18px; margin: 22px 0; flex-wrap: wrap; }
.ap-ch-head img { border-radius: 14px; }
.ap-ch-head h1 { margin: 0 0 4px; }
.ap-ch-head .ap-intro { margin: 0; }
.ap-listen-btn {
	margin-left: auto;
	background: var(--ap-primary);
	color: #fff;
	border: 0;
	font: inherit;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 999px;
	cursor: pointer;
}
.ap-listen-btn:hover { background: var(--ap-violet); }

.wonNowCard {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--ap-bg-soft);
	border-left: 4px solid var(--ap-primary);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 18px 0;
}
.wonPulse {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--ap-primary);
	animation: apPulse 1.4s ease-in-out infinite;
	flex: none;
}
.wonNowLabel { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-ink-soft); }
.wonNowSongBig { font-size: 26px; font-weight: 700; line-height: 1.25; }
.wonNowArtist { font-size: 14px; color: var(--ap-ink-soft); }
.wonNowArtist:empty { display: none; }
.wonNextLine { font-size: 13px; color: var(--ap-ink-soft); margin-top: 4px; }
.wonNextLbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; white-space: nowrap; }
.ap-pnow .wonNextLbl { margin-right: 0; }   /* στο hero pill το gap αναλαμβάνει */
.wonNextLine b { font-weight: 700; }
/* το hidden πρέπει να νικά τα display overrides (flex/inline-flex) */
img.wonNowArt[hidden], .wonNowArtNone[hidden], .wonNextLine[hidden] { display: none !important; }

.wonPlaylist { list-style: none; margin: 18px 0; padding: 0; max-width: 640px; }
.wonPlaylist li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 4px;
	border-bottom: 1px solid #ececf2;
}
.wonRowTime { flex: none; width: 76px; font-size: 13px; color: var(--ap-ink-soft); font-variant-numeric: tabular-nums; padding-top: 2px; }
.wonRowMeta { display: flex; flex-direction: column; }
.wonRowTitle { font-weight: 700; }
.wonRowArtist { font-size: 13px; color: var(--ap-ink-soft); }
/* artwork από tblTrackArt: εξώφυλλο (τετράγωνο) ή φωτογραφία καλλιτέχνη
   (στρογγυλή)· ♪ placeholder όταν δεν βρέθηκε τίποτα. wonRowArt = γραμμή
   playlist (44px), wonNowArt = κάρτα «Τώρα παίζει» (64px) */
.wonRowArt {
	flex: none;
	width: 44px; height: 44px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--ap-bg-soft);
}
.wonNowArt {
	flex: none;
	width: 96px; height: 96px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--ap-bg);
}
/* logo-tile fallback: όταν δεν υπάρχει artwork, το λευκό brand mark πάνω στο
   gradient του καναλιού (μεταβλητές από το main.ch-X) */
.wonNowArtNone {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, var(--ap-ch-g1, #130ffd), var(--ap-ch-g2, #7D64F9));
}
.wonNowArtNone img { width: 54%; height: auto; display: block; }
.wonRowArt.wonRowArtPerson, .wonNowArt.wonRowArtPerson, .wonNowArt.is-artist { border-radius: 50%; }
@media (max-width: 640px) {
	.wonNowArt { width: 72px; height: 72px; }
	.wonNowSongBig { font-size: 20px; }
}
.wonRowArtNone { display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--ap-ink-soft); }
.wonArtErr { visibility: hidden; }
.wonEmpty { color: var(--ap-ink-soft); margin: 24px 0; }

/* ---------------- footer (19/08 β': διάταξη α λα Condé Nast Traveler) ------
   Φόντο = --ap-bar-bg ώστε footer + fixed bar να διαβάζονται σαν μία σκούρα
   ζώνη στο τέλος της σελίδας. Πάνω το 4χρωμο stripe (καθρέφτης του header)
   + διακριτικό glow στα brand χρώματα. Ζώνη 1: brand block αριστερά (logo ->
   social glyphs -> mission paragraph -> app badges σε σειρά), ΠΟΛΥ πλατύτερη
   στήλη (20/08 γ') ώστε το mission text να απλώνει. Δεξιά 2 στήλες links —
   έχουν top offset (`.apf-col`) ώστε να ΜΗΝ ευθυγραμμίζονται με το logo αλλά
   να ξεκινάνε χαμηλότερα, περίπου στο ύψος των social icons (πιο ισορροπημένο
   δίπλα σε μια ψηλή στήλη brand). Ζώνη 2 (κάτω από γραμμή): legal links με
   pipes + bordered κουτί Nextweb δεξιά (θέση country selector του προτύπου).
   Τέλος: copyright paragraph. Prefix κλάσεων: apf-. ------------------------ */
.ap-footer {
	margin-top: 56px;
	background:
		radial-gradient(560px 240px at 10% 0%, rgba(19, 15, 253, .28), transparent 60%),
		radial-gradient(520px 220px at 90% 0%, rgba(195, 55, 100, .16), transparent 60%),
		var(--ap-bar-bg);
	color: #b4b4c4;
	font-size: 14px;
}
.ap-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, #130ffd 0%, #8E2DE2 33%, #27C4FF 66%, #C33764 100%);
}
.apf-inner { max-width: 1200px; margin: 0 auto; padding: 44px 20px 30px; }
.ap-footer a { color: inherit; text-decoration: none; }
.ap-footer a:focus-visible { outline: 2px solid var(--ap-cyan); outline-offset: 2px; border-radius: 4px; }

/* --- ζώνη 1: brand block αριστερά (ΠΟΛΥ πλατύτερη, 20/08 γ') + 2 στήλες
   links δεξιά (οι ΕΝΟΤΗΤΕΣ σπάνε εσωτερικά σε 2 λίστες — φαρδύτερο track) */
.apf-main {
	display: grid;
	grid-template-columns: minmax(500px, 600px) 1.05fr .68fr;
	gap: 32px 44px;
	padding-bottom: 40px;
}
.apf-logo { display: inline-block; }
.apf-logo img { display: block; height: 30px; width: auto; }
.apf-social { display: flex; gap: 26px; align-items: center; margin: 26px 0 0; }
.apf-social a { display: block; color: #fff; opacity: .92; transition: opacity .15s ease, color .15s ease, transform .15s ease; }
.apf-social a:hover { color: var(--ap-cyan); opacity: 1; transform: translateY(-1px); }
.apf-social svg { display: block; }
.apf-mission { margin: 26px 0 0; max-width: 60ch; font-size: 13.5px; line-height: 1.7; color: #b4b4c4; }
.apf-mission em { color: #dcdce6; }

/* app download badges — κάτω από το mission text, ΣΕ ΣΕΙΡΑ (20/08 γ'),
   ΜΟΝΟ iOS+Android. Icon + κείμενο, bordered pill· ίδιο language με
   .apf-social/.apf-nwbox (border -> λευκό fill on hover). flex-wrap: αν δεν
   χωράνε σε σειρά (πολύ στενό viewport) πέφτουν σε 2η γραμμή αντί να σκάνε. */
.apf-appbadges { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.apf-appbadge {
	display: flex; align-items: center; gap: 9px;
	padding: 9px 13px; border-radius: 9px;
	color: #cfcfdc; border: 1px solid rgba(255, 255, 255, .16);
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.apf-appbadge:hover { background: #fff; color: #101018; border-color: #fff; transform: translateY(-1px); }
.apf-appbadge svg { flex: none; display: block; }

/* στήλες: uppercase headers + uppercase links (πρότυπο CNT). Top offset —
   ΟΧΙ ευθυγράμμιση με το logo (η στήλη brand είναι πολύ ψηλότερη πλέον) αλλά
   ξεκίνημα περίπου στο ύψος των social icons (56 = 30 logo + 26 margin).
   Reset σε 0 στο ≤980px breakpoint — εκεί το brand πιάνει ολόκληρη τη
   1η γραμμή του grid και οι στήλες πάνε αυτόματα από κάτω σε 2η γραμμή. */
.apf-col { margin-top: 56px; }
.apf-h {
	margin: 0 0 18px; font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.apf-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.apf-links--2col { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
.apf-links a {
	color: #9a9aac; font-size: 11.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	transition: color .15s ease;
}
.apf-links a:hover { color: #fff; }

/* --- ζώνη 2: ΤΟ ΔΙΚΤΥΟ ΜΑΣ οριζόντια (inline label + links, πάτερν eRadio) */
.apf-net {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
	padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12);
}
.apf-h--inline { margin: 0; }
.apf-netlinks { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.apf-netlinks a {
	color: #9a9aac; font-size: 11.5px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	transition: color .15s ease;
}
.apf-netlinks a:hover { color: #fff; }

/* --- ζώνη 3: legal links με pipes + λογότυπο Nextweb --- */
.apf-legal {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 16px 28px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.apf-legallinks { display: flex; flex-wrap: wrap; align-items: center; }
.apf-legallinks a {
	color: #cfcfdc; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
	transition: color .15s ease;
}
.apf-legallinks a:hover { color: #fff; }
.apf-legallinks a + a::before {
	content: "|"; margin: 0 13px; color: rgba(255, 255, 255, .28); font-weight: 400;
}
/* nextweb2023.png = μαύρο σε διαφάνεια -> λευκό με filter πάνω στο σκούρο.
   Σκέτο logo, χωρίς πλαίσιο (απόφαση user 19/08). */
.apf-nextweb { display: block; opacity: .8; transition: opacity .15s ease; }
.apf-nextweb:hover { opacity: 1; }
.apf-nextweb img { display: block; height: 22px; width: auto; filter: brightness(0) invert(1); }

/* --- copyright paragraph --- */
.apf-copy { margin: 22px 0 0; font-size: 12px; line-height: 1.75; color: #8b8b9e; }

@media (max-width: 980px) {
	.apf-main { grid-template-columns: repeat(2, 1fr); }
	.apf-brand { grid-column: 1 / -1; }
	.apf-mission { max-width: 62ch; }
	/* brand πιάνει όλη την 1η γραμμή -> οι στήλες πάνε αυτόματα από κάτω,
	   το top offset του desktop (ευθυγράμμιση δίπλα στο logo) δεν χρειάζεται */
	.apf-col { margin-top: 0; }
}
@media (max-width: 560px) {
	.apf-inner { padding: 32px 16px 26px; }
	.apf-main { grid-template-columns: 1fr; gap: 28px; padding-bottom: 30px; }
	/* 2 στήλες στις λίστες: να μην ψηλώνει άσκοπα το footer */
	.apf-links { grid-template-columns: repeat(2, 1fr); gap: 11px 16px; }
	.apf-legal { flex-direction: column; align-items: flex-start; }
	.apf-legallinks a + a::before { margin: 0 10px; }
}

/* ============================================================================
   Persistent player bar — redesign 19/08: 100px, τρεις ζώνες (pattern eRadio
   κάτω μπάρα 08/2026). Αριστερά logo καναλιού (μέσα του το artwork) + τίτλος
   κομματιού + όνομα καναλιού με equalizer — όλο μαζί το κουμπί του switcher.
   Κέντρο: LIVE + στρογγυλό play (buffering spinner μέσα, στεφάνι όσο παίζει
   έξω) + χρόνος ακρόασης. Δεξιά: volume popover + share. Τα overrides πάνω
   στο openplayer.min.css είναι scoped στο .ap-bar / .ap-bar-play.
   ========================================================================== */
.ap-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 1000;
	background: var(--ap-bar-bg);
	color: var(--ap-bar-ink);
	box-shadow: 0 -2px 14px rgba(0,0,0,.35);
}
.ap-bar-inner {
	position: relative;   /* άγκυρα των popovers (μενού/share) */
	display: flex;
	align-items: center;
	gap: 16px;
	height: var(--ap-bar-h);
	/* full width όπως το header (20/08): το play μένει στο πραγματικό κέντρο
	   του viewport μέσω των flex:1 1 0 εξωτερικών ζωνών */
	padding: 0 20px;
}

/* ---- αριστερή ζώνη -------------------------------------------------------
   Οι δύο εξωτερικές ζώνες μοιράζονται εξίσου (flex:1 1 0) ώστε το play να
   κάθεται στο ΠΡΑΓΜΑΤΙΚΟ κέντρο της μπάρας, όχι στο κέντρο του υπολοίπου. */
.ap-bar-left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: 0;
	padding: 4px;
	margin-left: -4px;
	border-radius: 14px;
	color: var(--ap-bar-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ap-bar-left:hover { background: rgba(255,255,255,.06); }

/* logo κουτί: gradient ταυτότητας ανά κανάλι (ίδια με το showcase)· το
   artwork «μπαίνει μέσα στο logo» — γεμίζει το κουτί με fade όταν υπάρχει */
.ap-bar-logo {
	position: relative;
	flex: none;
	width: 68px; height: 68px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, #130ffd 0%, #7D64F9 100%);
}
.ap-bar[data-ch="athenspartyrnb"] .ap-bar-logo { background: linear-gradient(150deg, #4A00E0 0%, #8E2DE2 100%); }
.ap-bar[data-ch="wonder"] .ap-bar-logo         { background: linear-gradient(150deg, #0e8be2 0%, #27C4FF 100%); }
.ap-bar[data-ch="velvetfm"] .ap-bar-logo       { background: linear-gradient(150deg, #C33764 0%, #6a1b6a 100%); }
#apChLogo { width: 80%; height: 80%; object-fit: contain; }
#apNowArt {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s ease;
}
.ap-bar-logo.has-art #apNowArt { opacity: 1; }

.ap-bar-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ap-bar-track {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: .8;
}
.ap-bar.has-track .ap-bar-track { opacity: 1; font-weight: 700; }
.ap-bar-station {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
}
.ap-bar-station #apChName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-caret { flex: none; opacity: .6; }

/* equalizer α λα radio.net: μπαράκια που ανεβοκατεβαίνουν ΜΟΝΟ όσο παίζει
   (keyframes apEq: ορισμένα στο channels showcase) */
.ap-bar-eq { display: none; align-items: flex-end; gap: 2.5px; height: 13px; flex: none; }
.ap-bar-eq span {
	width: 3px;
	border-radius: 1.5px;
	background: #2eff8a;
	animation: apEq 1s ease-in-out infinite;
}
.ap-bar-eq span:nth-child(1) { height: 45%; animation-delay: 0s; }
.ap-bar-eq span:nth-child(2) { height: 100%; animation-delay: .18s; }
.ap-bar-eq span:nth-child(3) { height: 65%; animation-delay: .36s; }
.ap-bar-eq span:nth-child(4) { height: 85%; animation-delay: .54s; }
.ap-bar.is-playing .ap-bar-eq { display: flex; }

/* μενού καναλιών (προς τα πάνω) */
.ap-bar-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 12px;
	z-index: 5;
	background: #1a1a24;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	padding: 6px;
	min-width: 280px;
	box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.ap-bar-menu button {
	display: grid;
	grid-template-columns: 28px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	align-items: center;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	color: var(--ap-bar-ink);
	font: inherit;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
}
.ap-bar-menu button:hover { background: rgba(255,255,255,.08); }
.ap-bar-menu button.active { background: rgba(19,15,253,.35); }
.ap-bar-menu button img { grid-row: 1 / span 2; }
.ap-mi-name { font-weight: 700; font-size: 14px; }
.ap-mi-tag { font-size: 12px; opacity: .65; }

/* ---- κεντρική ζώνη: LIVE + play + χρόνος ------------------------------- */
.ap-bar-center { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }

/* LIVE: σκέτο κείμενο, ίδιο γκρι με τον χρόνο — χωρίς βούλα, χωρίς αλλαγή
   χρώματος όσο παίζει (απόφαση 20/08) */
.ap-bar-live {
	font-size: 10px; font-weight: 800; letter-spacing: .14em;
	color: rgba(255,255,255,.6);
	user-select: none;
}

/* χρόνος ακρόασης — δικός μας μετρητής συνεδρίας στο ap-player.js:
   μετράει από το play, μηδενίζει σε stop και σε αλλαγή καναλιού */
.ap-bar-time {
	min-width: 44px;
	font-size: 12px;
	color: rgba(255,255,255,.6);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- το στρογγυλό play/stop (restyle του OpenPlayerJS, pattern eRadio) -- */
.ap-bar-play { position: relative; flex: none; }
.ap-bar-play .op-player {
	height: 60px; min-height: 60px; max-height: 60px;
	width: auto; background: transparent;
}
.ap-bar-play .op-player__media { display: none; }
.ap-bar-play .op-controls {
	position: static; height: auto; width: auto;
	padding: 0; gap: 0; background: transparent;
}
/* mid-load τάξη: μέχρι το JS να μεταφέρει time/volume στα σπίτια τους,
   γεννιούνται όλα εδώ — κρυφά. Μόλις μετακομίσουν, οι selectors αδειάζουν. */
.ap-bar-play .op-controls__mute,
.ap-bar-play .op-controls__volume,
.ap-bar-play .op-controls-time,
.ap-bar-play .op-controls__time { display: none; }
/* ΖΥΓΕΣ διαστάσεις παντού (60/54, icons 26/24) ώστε τα κέντρα να πέφτουν σε
   ακέραια pixel — και ΧΩΡΙΣ hover scale (το 1.06 έδινε 63.6px, κλασματικό
   πλάτος = θολό εικονίδιο). Το padding 2px 4px 3px της lib μηδενίζεται. */
.ap-bar-play .op-controls__playpause {
	width: 60px; height: 60px; border-radius: 50%;
	padding: 0;
	background-color: var(--ap-primary) !important;
	box-shadow: 0 4px 16px rgba(19,15,253,.45);
	transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
	position: relative; overflow: hidden;
}
.ap-bar-play .op-controls__playpause:hover {
	background-color: #3c39ff !important;
	box-shadow: 0 4px 22px rgba(60,57,255,.65);
}
.ap-bar-play .op-controls__playpause:active { transform: scale(.97); }
/* SVG εικονίδια με κομμένο viewBox πάνω στο σχήμα (pattern eRadio).
   Η lib δίνει στο :before κουτάκι 15x15 inline-block με margins και
   repeat — το background κεντραριζόταν σε ΑΥΤΟ, όχι στο κουμπί. Το
   απλώνουμε σε όλο το κουμπί ώστε το center να είναι το κέντρο του κύκλου. */
.ap-bar-play .op-controls__playpause:before,
.ap-bar-play .op-controls__playpause:hover:before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	margin: 0; padding: 0;
	background-repeat: no-repeat !important;
	background-size: 26px 26px !important;
	/* +1px δεξιά: οπτικό κεντράρισμα (owner 20/08 — με το subpixel snap
	   ενεργό, το +2 ήταν πια υπερβολικό και μαζεύτηκε στο +1) */
	background-position: calc(50% + 1px) 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='7 4 13 16'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.ap-bar-play .op-controls__playpause--pause::before,
.ap-bar-play .op-controls__playpause--pause:hover::before {
	/* +1px δεξιά όπως και το play (owner 20/08) */
	background-position: calc(50% + 1px) 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 4 14 16'%3E%3Cpath fill='white' d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
}

/* buffering: ο κύκλος γυρίζει ΜΕΣΑ στο κουμπί, στη θέση του εικονιδίου */
.ap-bar.is-buffering .op-controls__playpause:before { background-image: none !important; }
.ap-bar.is-buffering .op-controls__playpause:after {
	/* left 12 / right 10 = +1px δεξιά, σε συμφωνία με τα glyphs (owner 20/08) */
	content: ''; position: absolute; top: 11px; left: 12px; right: 10px; bottom: 11px;
	border: 2.5px solid rgba(255,255,255,.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: apSpin .8s linear infinite;
	pointer-events: none;
}
@keyframes apSpin { to { transform: rotate(360deg); } }

/* «παίζει»: αργό στεφάνι ΓΥΡΩ από το κουμπί (pattern eRadio) — έξω από το
   κουμπί, 9s στροφή, και χάνεται όσο υπάρχει buffering ώστε να μιλάει ένα
   σήμα τη φορά. Όπου δεν υποστηρίζεται το :has(), απλώς δεν εμφανίζεται. */
.ap-bar-play:has(.op-controls__playpause--pause)::after {
	content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
	border-radius: 50%; pointer-events: none;
	border: 2px solid transparent;
	border-top-color: rgba(255,255,255,.55);
	border-right-color: rgba(255,255,255,.16);
	animation: apRing 9s linear infinite;
}
@keyframes apRing { to { transform: rotate(360deg); } }
.ap-bar.is-buffering .ap-bar-play::after { content: none; }

/* ---- δεξιά ζώνη: volume popover + share -------------------------------- */
.ap-bar-right {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
.ap-bar-iconbtn,
#apVolBtn {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border-radius: 50%;
	color: #fff; border: 1px solid rgba(255,255,255,.28); background: transparent;
	cursor: pointer; padding: 0;
	transition: background-color .15s ease, border-color .15s ease;
}
.ap-bar-iconbtn:hover, #apVolBtn:hover,
.ap-bar-iconbtn[aria-expanded="true"], #apVolBtn[aria-expanded="true"] {
	background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6);
}
#apVolBtn svg { width: 20px; height: 20px; fill: currentColor; }

/* volume popover: κάθετος slider προς τα πάνω (α λα ORB/TuneIn, port eRadio) */
#apVolume { position: relative; display: flex; align-items: center; }
#apVolume #apVolPanel {
	position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);
	width: 44px; height: auto; padding: 12px 0; margin: 0; z-index: 6;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: rgba(16,16,24,.96); border: 1px solid rgba(255,255,255,.16);
	border-radius: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
#apVolume #apVolPanel[hidden] { display: none; }
#apVolPanel .op-controls__volume {
	width: 36px; height: 104px; margin: 0; padding: 0; position: relative; display: block;
}
#apVolPanel .op-controls__volume input[type=range] {
	position: absolute; top: 50%; left: 50%; width: 96px; height: 4px; margin: 0;
	transform: translate(-50%,-50%) rotate(-90deg);
	accent-color: var(--ap-cyan); background: transparent;
}
#apVolPanel .op-controls__volume--display { display: none; }
#apVolPanel .op-controls__mute { display: none; }

/* share popover: grid 4x2 πάνω από τη μπάρα */
.ap-bar-share {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 12px;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(4, 76px);
	gap: 2px;
	padding: 10px;
	background: #1a1a24;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.ap-bar-share[hidden] { display: none; }
.ap-share-item {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 10px 4px;
	background: none; border: 0; border-radius: 10px;
	color: var(--ap-bar-ink);
	font: inherit; font-size: 11px;
	text-decoration: none;
	cursor: pointer;
}
.ap-share-item:hover { background: rgba(255,255,255,.08); }
.ap-share-ic {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255,255,255,.1);
}
.ap-share-lb { opacity: .8; white-space: nowrap; }
/* copy feedback — την is-copied τη βάζει το ap-shell.js (data-copy-link) */
.ap-share-copy .ap-ic-tick { display: none; }
.ap-share-copy.is-copied .ap-ic-chain { display: none; }
.ap-share-copy.is-copied .ap-ic-tick { display: block; color: #2eff8a; }
.ap-share-copy.is-copied .ap-share-ic { background: rgba(46,255,138,.15); }

/* keyframes κοινά με το showcase (live dot καρτών) */
@keyframes apPulse { 50% { opacity: .35; } }

/* mobile */
@media (max-width: 900px) {
	.ap-bar-inner { gap: 12px; }
	.ap-bar-center { gap: 10px; }
}
@media (max-width: 640px) {
	.ap-bar-inner { gap: 10px; padding: 0 10px; }
	.ap-bar-left { gap: 10px; }
	.ap-bar-logo { width: 54px; height: 54px; border-radius: 10px; }
	.ap-bar-track { font-size: 13px; }
	.ap-bar-station { font-size: 10px; }
	.ap-bar-time { display: none; }
	.ap-bar-play .op-player { height: 54px; min-height: 54px; max-height: 54px; }
	.ap-bar-play .op-controls__playpause { width: 54px; height: 54px; }
	.ap-bar-play .op-controls__playpause:before { background-size: 24px 24px !important; }
	.ap-bar-share { grid-template-columns: repeat(4, 68px); right: 6px; }
}
@media (max-width: 480px) {
	.ap-bar-live { display: none; }
	#apVolume { display: none; }   /* ένταση από τα κουμπιά της συσκευής */
	.ap-caret { display: none; }
}

/* Η μπάρα μένει ανοιχτή ώρες — η συνεχής κίνηση είναι vestibular trigger */
@media (prefers-reduced-motion: reduce) {
	.ap-bar-eq span { animation: none; }
	.ap-bar-play:has(.op-controls__playpause--pause)::after {
		animation: none;
		border-color: rgba(255,255,255,.28);
	}
}

/* Visually hidden — ορατό ΜΟΝΟ σε screen readers/crawlers (20/08, SEO audit).
   Το χρησιμοποιεί ο h1 της αρχικής: το hero band είναι σχεδιαστικά κάρτες
   καναλιών χωρίς τίτλο, αλλά η σελίδα ΠΡΕΠΕΙ να έχει έναν h1. ΟΧΙ display:none
   (η Google το αγνοεί ως κρυφό περιεχόμενο) — clip σε 1x1. */
.ap-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}