/* =============================================================
   SportLive Pro — Design System
   1. Fonts            5. Header/Nav       9. Archive/Search
   2. Tokens           6. Cards           10. Footer
   3. Base/Reset       7. Home sections   11. Utilities
   4. Layout           8. Article         12. Motion/Print
   ============================================================= */

/* ---------- 1. Fonts (self-hosted, latin+greek subsets) ---------- */
@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/commissioner-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/commissioner-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Commissioner';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/commissioner-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-greek-ext.woff2') format('woff2');
	unicode-range: U+1F00-1FFF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-greek.woff2') format('woff2');
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-compatible fallback: μειώνει το CLS στο font swap. */
@font-face {
	font-family: 'Inter-fallback';
	src: local('Arial');
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}

/* ---------- 2. Tokens ---------- */
:root {
	color-scheme: light dark;

	/* Brand */
	--brand: #d90429;
	--brand-deep: #9b0321;
	--brand-text: #c50324;
	--live: #0f9d58;

	/* Surfaces (light) */
	--bg: #f4f5f7;
	--surface: #ffffff;
	--surface-2: #eceef1;
	--ink-strip: #12151a;      /* το σκούρο strip: ticker + teams + footer */
	--ink-strip-2: #1b1f26;
	--navy-strip: #182f4c;     /* το navy του logo — ticker (live) + teams strip */
	--title-line-2: #182f4c;   /* 2ο χρώμα της gradient γραμμής των τίτλων (light = navy) */

	/* Text (light) */
	--text-1: #12151a;
	--text-2: #454e59;
	--text-3: #5d6673;
	--text-inverse: #f3f4f6;

	/* Lines */
	--line: #dcdfe4;
	--line-strong: #b9bec6;

	/* Type */
	--font-display: 'Commissioner', 'Inter-fallback', system-ui, sans-serif;
	--font-body: 'Inter', 'Inter-fallback', system-ui, sans-serif;

	/* Fluid scale */
	--step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--step-0: clamp(0.9688rem, 0.94rem + 0.2vw, 1.0625rem);
	--step-1: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--step-2: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);
	--step-3: clamp(1.5rem, 1.32rem + 0.9vw, 1.9375rem);
	--step-4: clamp(1.875rem, 1.55rem + 1.6vw, 2.625rem);
	/* Τίτλος άρθρου: στο mobile το παλιό floor (34px) έσπαγε τον τίτλο σε 5
	   γραμμές/193px — μισή οθόνη πριν καν τη φωτογραφία. Χαμηλότερο floor
	   (28px), ίδια κορυφή 52px στο desktop. */
	--step-5: clamp(1.75rem, 1.07rem + 2.9vw, 3.25rem);

	/* Rhythm */
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow-1: 0 1px 2px rgb(18 21 26 / 0.06), 0 2px 8px rgb(18 21 26 / 0.05);
	--shadow-2: 0 4px 12px rgb(18 21 26 / 0.09), 0 12px 32px rgb(18 21 26 / 0.09);

	--container: 1240px;
	--ticker-h: 42px;
	--focus-ring: 2px solid var(--brand);
}

:root[data-theme='dark'] {
	--brand-text: #ff5a6e;
	--live: #2fd07c;

	--bg: #101318;
	--surface: #171b21;
	--surface-2: #1f242c;
	--ink-strip: #0b0d11;
	--ink-strip-2: #14171d;

	--text-1: #eceef1;
	--text-2: #b6bdc7;
	--text-3: #98a1ac;
	--text-inverse: #f3f4f6;
	--title-line-2: var(--text-1); /* dark: αμετάβλητο — όπως πριν (ανοιχτό) */

	--line: #2a303a;
	--line-strong: #3a424e;

	--shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
	--shadow-2: 0 6px 18px rgb(0 0 0 / 0.5);
}

/* ---------- 3. Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-1);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0;
	/* «pretty»: γεμίζει κάθε γραμμή σε όλο το πλάτος (greedy) και αποφεύγει
	   μόνο τη μονή ορφανή λέξη στο τέλος. Το «balance» έσπαγε τους τίτλους νωρίς. */
	text-wrap: pretty;
	letter-spacing: -0.01em;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	color: inherit;
	padding: 0;
}

:is(a, button, input, [tabindex]):focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--brand);
	color: #fff;
}

/* ---------- 4. Layout ---------- */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.site-main {
	padding-block: var(--space-4) var(--space-6);
}

/* ---------- 5. Header ---------- */

/* -- Ticker: σταθερό ύψος (CLS-safe), pausable -- */
.ticker {
	height: var(--ticker-h);
	background: var(--ink-strip);
	color: var(--text-inverse);
	display: flex;
	align-items: stretch;
	overflow: hidden;
	font-size: 0.8125rem;
	border-bottom: 2px solid var(--brand);
}

.ticker-label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--brand);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: 0.12em;
	padding-inline: clamp(0.75rem, 2.5vw, 1.25rem);
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.ticker-label::after {
	content: '';
	position: absolute;
	inset-block: 0;
	right: -11px;
	width: 22px;
	background: var(--brand);
	transform: skewX(-14deg);
}

.ticker-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.72); }
}

.ticker-viewport {
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.ticker-track {
	display: flex;
	gap: 2.5rem;
	padding-inline: 1.5rem;
	width: max-content;
	animation: ticker-scroll 60s linear infinite;
}

.ticker:is(:hover, :focus-within, .is-paused) .ticker-track {
	animation-play-state: paused;
}

@keyframes ticker-scroll {
	to { transform: translateX(-50%); }
}

.ticker-item a {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	white-space: nowrap;
}

.ticker-item a:hover .ticker-title {
	text-decoration: underline;
}

.ticker-league {
	color: #fff;
	font-weight: 700;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.65;
}

.ticker-item.is-new .ticker-league {
	color: var(--live);
	opacity: 1;
}

.ticker-time {
	font-size: 0.6875rem;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

.ticker-toggle {
	flex-shrink: 0;
	width: 42px;
	display: grid;
	place-items: center;
	opacity: 0.7;
	border-inline-start: 1px solid rgb(255 255 255 / 0.12);
}

.ticker-toggle:hover {
	opacity: 1;
}

.ticker-toggle svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.ticker-toggle .icon-play,
.ticker.is-paused .ticker-toggle .icon-pause {
	display: none;
}

.ticker.is-paused .ticker-toggle .icon-play {
	display: block;
}

/* -- Masthead -- */
.masthead {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.masthead.is-stuck {
	box-shadow: var(--shadow-1);
}

.masthead-inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	min-height: 64px;
}

.brand-logo {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.625rem;
	letter-spacing: -0.03em;
	color: var(--text-1);
	white-space: nowrap;
}

.brand-logo em {
	font-style: normal;
	color: var(--brand-text);
}

.custom-logo-link img {
	max-height: 44px;
	width: auto;
}

/* Logo image: εναλλαγή variant ανά color scheme. */
.brand-img {
	display: flex;
	align-items: center;
}

.brand-img img {
	height: 30px;
	width: auto;
}

.logo-on-dark,
:root[data-theme='dark'] .logo-on-light {
	display: none;
}

:root[data-theme='dark'] .logo-on-dark {
	display: block;
}

.footer-brand-img img {
	height: 30px;
	width: auto;
}

/* Μεγαλύτερο logo σε desktop — header ΚΑΙ footer ίδιο μέγεθος (mobile 30px). */
@media (min-width: 1024px) {
	.brand-img img,
	.footer-brand-img img {
		height: 40px;
	}
}

/* -- Primary nav -- */
.site-nav {
	flex: 1;
}

.nav-list {
	display: flex;
	gap: 0.25rem;
}

.nav-list > li {
	position: relative;
}

.nav-list > li > a {
	display: block;
	padding: 1.25rem 0.85rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--text-2);
	border-bottom: 3px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a {
	color: var(--text-1);
	border-bottom-color: var(--brand);
}

/* dropdown */
.nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	box-shadow: var(--shadow-2);
	padding: 0.5rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	z-index: 60;
}

.nav-list li:is(:hover, :focus-within) > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-list .sub-menu a {
	display: block;
	padding: 0.55rem 1.1rem;
	font-size: 0.9063rem;
	font-weight: 500;
	color: var(--text-2);
}

.nav-list .sub-menu a:hover {
	color: var(--brand-text);
	background: var(--surface-2);
}

/* -- Tools -- */
.masthead-tools {
	display: flex;
	gap: 0.4rem;
	margin-inline-start: auto;
}

.tool-btn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--text-2);
	transition: background 0.15s, color 0.15s;
}

.tool-btn:hover {
	background: var(--surface-2);
	color: var(--text-1);
}

.tool-btn svg {
	width: 19px;
	height: 19px;
}

.theme-toggle .icon-moon,
:root[data-theme='dark'] .theme-toggle .icon-sun {
	display: none;
}

:root[data-theme='dark'] .theme-toggle .icon-moon {
	display: block;
}

/* -- Search panel -- */
.search-panel {
	border-top: 1px solid var(--line);
	background: var(--surface);
	padding-block: var(--space-3);
}

.search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 640px;
}

.search-field {
	flex: 1;
	padding: 0.7rem 1rem;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg);
	color: var(--text-1);
	font-size: 1rem;
}

.search-field:focus {
	outline: none;
	border-color: var(--brand);
}

.search-submit {
	background: var(--brand);
	color: #fff;
	border-radius: var(--radius-sm);
	padding-inline: 1.1rem;
	display: grid;
	place-items: center;
}

.search-submit:hover {
	background: var(--brand-deep);
}

.search-submit svg {
	width: 18px;
	height: 18px;
}

/* -- Teams strip -- */
.teams-strip {
	background: var(--navy-strip);
	border-top: 1px solid rgb(255 255 255 / 0.06);
}

/* Dark mode: το teams strip επιστρέφει στο αρχικό σκούρο (όχι navy). */
:root[data-theme='dark'] .teams-strip {
	background: var(--ink-strip-2);
}

.teams-strip .container {
	display: flex;
	align-items: center;
	gap: 1rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.teams-strip .container::-webkit-scrollbar {
	display: none;
}

.teams-list {
	display: flex;
	gap: 0.65rem;
	margin-inline: auto;
}

.teams-list a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.65rem;
	color: rgb(255 255 255 / 0.8);
	font-size: 0.8438rem;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 4px;
	transition: color 0.15s, background 0.15s;
}

.teams-list a:hover {
	color: #fff;
	background: rgb(255 255 255 / 0.08);
}

/* Στο desktop εμφανίζεται μόνο το logo, ώστε να χωρούν όλες οι ομάδες. */
.team-name {
	display: none;
}

.team-badge {
	width: 36px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
	transition: transform 0.15s;
}

.teams-list a:hover .team-badge {
	transform: scale(1.12);
}

@media (min-width: 640px) and (max-width: 1099px) {
	.teams-list {
		gap: 0.5rem;
	}
}

/* -- Burger (mobile) -- */
.nav-burger {
	display: none;
	width: 42px;
	height: 42px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.nav-burger span {
	display: block;
	width: 22px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--text-1);
	transition: transform 0.2s, opacity 0.2s;
}

body.nav-open .nav-burger span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

body.nav-open .nav-burger span:nth-child(2) {
	opacity: 0;
}

body.nav-open .nav-burger span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* ---------- 6. Cards ---------- */

/* -- Media κοινό -- */
:is(.card-media, .card-hero-media, .list-media) {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface-2);
	aspect-ratio: 16 / 9;
}

:is(.card-media, .card-hero-media, .list-media) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

article:hover :is(.card-media, .card-hero-media, .list-media) img {
	transform: scale(1.04);
}

/* Frontend edit shortcut: αποδίδεται μόνο σε χρήστες με edit capability. */
:is(.card, .card-hero, .card-overlay, .list-item, .text-item) {
	position: relative;
}

.sportlive-admin-edit {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 28px;
	padding: 0.3rem 0.55rem;
	border-radius: var(--radius-sm);
	background: rgb(17 24 39 / 0.9);
	box-shadow: 0 3px 12px rgb(0 0 0 / 0.24);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
}

.sportlive-admin-edit svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

:is(.card, .card-hero, .card-overlay, .list-item, .text-item):hover > .sportlive-admin-edit,
:is(.card, .card-hero, .card-overlay, .list-item, .text-item):focus-within > .sportlive-admin-edit,
.sportlive-admin-edit:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.sportlive-admin-edit:hover {
	background: #000;
	color: #fff;
}

.sportlive-admin-edit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.thumb-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--line-strong);
}

/* Σπασμένο εξωτερικό image: εμφάνιση brand watermark αντί για κενό. */
.img-failed::after {
	content: 'SPORTLIVE';
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.1rem;
	letter-spacing: 0.2em;
	color: var(--line-strong);
}

.thumb-placeholder svg {
	width: 34%;
	max-width: 88px;
}

/* -- Kicker: το slash-label κατηγορίας -- */
.kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--brand-text);
	width: fit-content;
}

.kicker::before {
	content: '';
	width: 4px;
	height: 0.9em;
	background: var(--brand);
	transform: skewX(-14deg);
}

.kicker:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -- Meta -- */
.card-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

.views-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 600;
}

.views-badge::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--line-strong);
}

/* -- Hero card -- */
.card-hero {
	position: relative; /* όριο για το stretched link του τίτλου */
	display: grid;
	gap: var(--space-3);
}

.card-hero-media {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
}

.card-hero-title {
	font-size: var(--step-4);
	font-weight: 850;
	letter-spacing: -0.02em;
}

.card-hero-title a:hover {
	color: var(--text-3);
}

.card-hero-body {
	display: grid;
	gap: 0.6rem;
}

.card-hero-excerpt {
	color: var(--text-2);
	font-size: var(--step-1);
	line-height: 1.5;
	max-width: 62ch;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- Standard card -- */
.card {
	position: relative; /* όριο για το stretched link του τίτλου */
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

/* Stretched link: ο σύνδεσμος του τίτλου καλύπτει ΟΛΗ την κάρτα ώστε το tap
   οπουδήποτε (τίτλος, εικόνα, κενό) να ανοίγει πάντα το άρθρο — λύνει οριστικά
   το «διπλό tap» στο κινητό, όπου το μικρό <a> του τίτλου έχανε το tap. */
.card-title a::after,
.card-feature-title a::after,
/* Το hero έλειπε από εδώ: στο desktop σωζόταν επειδή η εικόνα του είναι δικό της
   <a>, αλλά στο κινητό το κείμενο μπαίνει ΠΑΝΩ στην εικόνα (overlay) και έκλεινε
   το tap — άνοιγε μόνο πατώντας ακριβώς τον τίτλο (bug 30/07). */
.card-hero-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Ο kicker του hero πρέπει να μείνει πάνω από το stretched link για να παραμένει
   δικός του σύνδεσμος (το .card-hero δεν είναι .card, δεν τον έπιανε ο κανόνας). */
.card-hero .kicker {
	position: relative;
	z-index: 2;
}

/* Ο kicker (κατηγορία) μένει ξεχωριστός σύνδεσμος πάνω από το stretched link. */
.card .kicker {
	position: relative;
	z-index: 2;
}

.card-media {
	border-radius: 0;
}

.card-body {
	display: grid;
	gap: 0.5rem;
	padding: 0 var(--space-3) var(--space-3);
	align-content: start;
}

.card-title {
	font-size: var(--step-1);
	font-weight: 800;
	line-height: 1.25;
}

.card-title a:hover {
	color: var(--text-3);
}

.card-excerpt {
	color: var(--text-2);
	font-size: 0.9063rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -- List item (compact horizontal) -- */
.list-item {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	padding-block: var(--space-2);
	border-bottom: 1px solid var(--line);
}

.list-item:last-child {
	border-bottom: 0;
}

.list-media {
	flex-shrink: 0;
	width: 108px;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-sm);
}

.list-rank {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--brand);
	min-width: 2rem;
	/* left (όχι center): κεντραρισμένα σε κουτί 2rem, τα ψηφία έδειχναν
	   μετατοπισμένα δεξιά σε σχέση με τον τίτλο «Δημοφιλή» (feedback 29/07). */
	text-align: left;
	font-variant-numeric: tabular-nums;
	padding-top: 0.1rem;
}

.list-body {
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

.list-title {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	font-family: var(--font-body);
	letter-spacing: 0;
}

.list-title a:hover {
	color: var(--text-3);
}

.list-item .card-meta .kicker {
	font-size: 0.6563rem;
}

/* -- Text item (rail) -- */
.text-item {
	position: relative;
	padding: 0.65rem 0 0.65rem 1.1rem;
	border-bottom: 1px solid var(--line);
}

.text-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--line-strong);
}

.text-item:first-child::before {
	background: var(--brand);
}

.text-item:last-child {
	border-bottom: 0;
}

.text-item-time {
	font-size: 0.6875rem;
	color: var(--text-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.text-item-title {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	margin-top: 0.15rem;
}

.text-item-title a:hover {
	color: var(--text-3);
}

/* ---------- 5b. Trending strip ---------- */
.trending-strip {
	background: var(--bg);
	padding-block: 0.65rem;
	border-bottom: 1px solid var(--line);
}

.trending-inner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.trending-inner::-webkit-scrollbar {
	display: none;
}

.trending-label {
	flex-shrink: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-text);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.trending-label::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand);
	animation: pulse 1.8s ease-in-out infinite;
}

.trending-chip {
	flex-shrink: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 99px;
	padding: 0.3rem 0.8rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-2);
	transition: border-color 0.15s, color 0.15s, transform 0.15s;
}

.trending-chip:hover {
	border-color: var(--brand);
	color: var(--brand-text);
	transform: translateY(-1px);
}

/* ---------- 5c. Mega menu ---------- */
@media (min-width: 1024px) {
	/* Full-width panel: ο γονέας γίνεται static ώστε το absolute να λύνεται πάνω
	   στο sticky .masthead, και το περιεχόμενο ευθυγραμμίζεται με το .container
	   μέσω padding (το <ul> το βγάζει το wp_nav_menu, δεν υπάρχει wrapper). */
	.nav-list > li {
		position: static;
	}

	.nav-list .sub-menu.has-mega {
		left: 0;
		right: 0;
		width: 100%;
		min-width: 0;
		padding-block: 1.5rem 1.1rem;
		padding-inline: max(clamp(1rem, 3vw, 1.5rem), calc((100% - var(--container)) / 2 + clamp(1rem, 3vw, 1.5rem)));
		/* Χωρίς πλαϊνά borders (θα κολλούσαν στις άκρες της οθόνης) και χωρίς
		   γωνίες — το panel διαβάζεται ως συνέχεια του header. */
		border-inline: 0;
		border-radius: 0;
		box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35);
	}

	/* Ίσες στήλες σε όλο το πλάτος, με κάθετα διαχωριστικά ώστε ο χώρος να
	   διαβάζεται ως δομή και όχι ως κενό. */
	.mega-groups-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		align-items: stretch;
	}

	.mega-col {
		padding-inline: clamp(1rem, 2.5vw, 2.25rem);
	}

	.mega-col:first-child {
		padding-inline-start: 0;
	}

	.mega-groups-list > .mega-col + .mega-col {
		border-inline-start: 1px solid var(--line);
	}

	.nav-list .sub-menu.has-mega a.mega-all {
		margin-top: 1.2rem;
		padding-top: 0.85rem;
		border-top: 1px solid var(--line);
		width: 100%;
	}
}

.mega-col-title,
.nav-list .sub-menu.has-mega a.mega-col-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0 0 0.6rem;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-1);
}

/* Κοντή κόκκινη παύλα δίπλα στην επικεφαλίδα (σταθερό μήκος, όχι τεντωμένη
   γραμμή που άλλαζε ανά στήλη). */
.mega-col-title::after {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: var(--brand);
	border-radius: 2px;
}

.nav-list .sub-menu.has-mega a.mega-col-title:hover {
	color: var(--brand-text);
	background: transparent;
}

.mega-sublist {
	display: grid;
	gap: 0.1rem;
}

.nav-list .sub-menu.has-mega .mega-sublist a {
	position: relative;
	padding: 0.32rem 0 0.32rem 0.8rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-1);
	transition: color 0.15s, transform 0.15s;
}

/* Κόκκινη τελεία που ανάβει στο hover: κίνηση χωρίς πλακάτο background. */
.nav-list .sub-menu.has-mega .mega-sublist a::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--brand);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.15s, transform 0.15s;
}

.nav-list .sub-menu.has-mega .mega-sublist a:hover {
	background: transparent;
	color: var(--brand-text);
	transform: translateX(3px);
}

.nav-list .sub-menu.has-mega .mega-sublist a:hover::before {
	opacity: 1;
	transform: scale(1);
}

.nav-list .sub-menu.has-mega a.mega-all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand-text);
	background: transparent;
}

.nav-list .sub-menu.has-mega a.mega-all span {
	transition: transform 0.15s;
}

.nav-list .sub-menu.has-mega a.mega-all:hover span {
	transform: translateX(4px);
}

/* ---------- 5d. Load more ---------- */
.load-more-wrap {
	display: grid;
	place-items: center;
	margin-top: var(--space-4);
}

.load-more:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- 6b. Scoreboard strip ---------- */
.scoreboard {
	height: 86px; /* σταθερό ύψος: μηδενικό CLS */
	margin-bottom: var(--space-4);
	overflow: hidden;
}

.scoreboard-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	height: 100%;
}

.scoreboard-track::-webkit-scrollbar {
	display: none;
}

.match-cell {
	flex-shrink: 0;
	min-width: 172px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 9px 14px;
	display: grid;
	gap: 3px;
	align-content: center;
	font-size: 0.8125rem;
}

.match-cell.is-live {
	border-color: var(--brand);
	box-shadow: inset 3px 0 0 var(--brand);
}

.match-league {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-3);
}

.match-cell.is-live .match-status {
	color: var(--brand-text);
	animation: pulse 1.8s ease-in-out infinite;
}

.match-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.match-team {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
}

.match-score {
	font-family: var(--font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.match-cell-more {
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--brand-text);
	min-width: 130px;
	transition: border-color 0.15s;
}

.match-cell-more:hover {
	border-color: var(--brand);
}

/* ---------- 6c. Standings ---------- */
.standings-grid {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
	.standings-grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.table-scroll {
	overflow-x: auto;
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
}

.standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.standings-table th,
.standings-table td {
	padding: 0.6rem 0.65rem;
	text-align: center;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

.standings-table thead th {
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-3);
	border-bottom: 2px solid var(--line-strong);
}

.standings-table .col-team {
	text-align: left;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.standings-table .col-team img {
	border-radius: 3px;
}

.standings-table .col-rank {
	color: var(--text-3);
	font-weight: 700;
}

.standings-table tbody tr:first-child .col-rank {
	color: var(--brand-text);
}

.standings-table .col-pts {
	font-weight: 800;
}

.standings-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---------- 6d. TV schedule widget ---------- */
.tv-schedule {
	display: grid;
	/* Κλείσιμο του widget με την ίδια θολή γραμμή των σειρών — ορίζει το τέλος
	   του, όπως στη Ροή και στα Δημοφιλή (feedback 29/07). */
	border-bottom: 1px solid var(--line);
}

.tv-row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.6rem;
	border-bottom: 1px solid var(--line);
	font-size: 0.875rem;
}

.tv-row:last-child {
	border-bottom: 0;
}

.tv-time {
	font-family: var(--font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--brand-text);
	flex-shrink: 0;
}

.tv-body {
	display: grid;
	gap: 1px;
	min-width: 0;
	flex: 1;
}

.tv-league {
	font-size: 0.6563rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-3);
}

.tv-match {
	font-weight: 600;
	line-height: 1.3;
}

.tv-channel {
	flex-shrink: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--surface-2);
	border-radius: 4px;
	padding: 0.2rem 0.5rem;
	color: var(--text-2);
}

/* ---------- 7. Home sections ---------- */

/* -- Hero cluster -- */
.hero-cluster {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

@media (min-width: 1024px) {
	.hero-cluster {
		grid-template-columns: 1fr 320px;
		align-items: start;
	}
}

.hero-main {
	display: grid;
	gap: var(--space-4);
}

/* Τα 2 secondary: δίπλα-δίπλα σε tablet· στοιβαγμένα στη δεξιά στήλη του hero
   σε desktop (η ροή ειδήσεων μετακόμισε στο sidebar). */
.hero-secondary {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

@media (min-width: 640px) and (max-width: 1023px) {
	.hero-secondary {
		grid-template-columns: 1fr 1fr;
	}
}

.rail-list {
	display: grid;
}

/* Ροή ειδήσεων (sidebar): εσωτερικός scroller αντί για μακριά «χύμα» λίστα. */
.rail-scroll {
	/* 360px: ώστε το sidebar #1 (Ροή + Μεταδόσεις) να χωράει κάτω από το sticky
	   header και να κολλάει με ΟΡΑΤΟ τον τίτλο του. */
	max-height: 360px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--line-strong) transparent;
	padding-right: 0.4rem;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}

.rail-scroll::-webkit-scrollbar {
	width: 6px;
}

.rail-scroll::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: 3px;
}

.rail-scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* -- Section title: η «γραμμή τερματισμού» -- */
.section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--space-3);
}

/* Ενιαία απόσταση τίτλου → περιεχομένου (32px) σε ΟΛΑ τα sections της αρχικής.
   Τα .category-block είναι grid και φτάνουν εκεί μόνα τους (margin 16 + row-gap
   16)· τα υπόλοιπα (Σήμερα, Περισσότερα Νέα) είναι block, οπότε χρειάζονται
   ολόκληρη την απόσταση ως margin — αλλιώς ο ρυθμός σπάει στα μισά (29/07). */
.home-section:not(.category-block) > .section-header {
	margin-bottom: calc(var(--space-3) * 2);
}

.section-title {
	font-size: var(--step-2);
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	position: relative;
	flex: 1;
}

.section-title span {
	position: relative;
	display: inline-block;
	padding-bottom: 0.4rem;
}

.section-title span::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--brand) 0 2.25rem, var(--title-line-2) 2.25rem 100%);
	clip-path: polygon(0 0, calc(100% - 3px) 0, 100% 100%, 3px 100%);
}

.section-more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-3);
	white-space: nowrap;
	transition: color 0.15s;
}

.section-more:hover {
	color: var(--brand-text);
}

.section-more svg {
	width: 13px;
	height: 13px;
}

.home-section {
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--line);
}

.home-section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* =============================================================
   Category blocks — 4 ρυθμιζόμενα layouts (πλουραλισμός αρχικής)
   ============================================================= */
.category-block {
	display: grid;
	gap: var(--space-3);
}

/* ---- Layout: feature-row (horizontal featured + σειρά καρτών) ---- */
.category-rest {
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.card-feature .card-feature-title {
	font-size: var(--step-2);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Κάτω από 700px το .card-feature ΔΕΝ είναι feature: το grid με τη μεγάλη
   πλαϊνή εικόνα ενεργοποιείται από min-width:700px (βλ. παρακάτω), οπότε στο
   κινητό η κάρτα καταρρέει σε ολόιδια στοιχισμένη κάρτα — ίδιο πλάτος, ίδια
   εικόνα 358×201 — με τις υπόλοιπες. Ο τίτλος όμως κρατούσε το --step-2 και
   έμενε 20,5px δίπλα σε 19px: 1,5px διαφορά που διαβάζεται ως λάθος, όχι ως
   ιεραρχία. Χειρότερα, feature έχει ΜΟΝΟ το πρώτο section, οπότε το Ποδόσφαιρο
   ξεκινούσε αλλιώς από Μπάσκετ/Σπορ. (Αίτημα χρήστη 30/07.) */
/* Κάτω από 700px το .card-feature ΔΕΝ είναι feature: το grid με τη μεγάλη πλαϊνή
   εικόνα ενεργοποιείται από min-width:700px, οπότε στο κινητό η κάρτα καταρρέει σε
   ολόιδια στοιχισμένη κάρτα (ίδιο πλάτος, ίδια εικόνα 358×201) με τις υπόλοιπες.
   Έμενε μόνο 1,5px διαφορά στον τίτλο — διαβαζόταν ως λάθος, όχι ως ιεραρχία, και
   επειδή feature έχει ΜΟΝΟ το πρώτο section, το Ποδόσφαιρο ξεκινούσε αλλιώς από
   Μπάσκετ/Σπορ. Εξισώνονται ΠΡΟΣ ΤΑ ΠΑΝΩ (απόφαση χρήστη 30/07: «έπρεπε να
   μεγαλώσεις τα άλλα»): όλοι οι τίτλοι καρτών παίρνουν το μέγεθος του feature. */
@media (max-width: 699px) {

	.card-title,
	.card-feature .card-feature-title {
		font-size: var(--step-2);
		line-height: 1.22;
	}

	/* Το overlay του Lifestyle band ακολουθεί κι αυτό, αλλιώς η προβεβλημένη ζώνη
	   ξαναγίνεται ΜΙΚΡΟΤΕΡΗ από απλή κάρτα (19 έναντι 20,5) — το ίδιο πρόβλημα
	   που είχε λυθεί στις 29/07. Descendant selector για να νικήσει σε specificity
	   τον βασικό κανόνα του .card-overlay-title που ορίζεται παρακάτω στο αρχείο. */
	.card-overlay .card-overlay-title {
		font-size: var(--step-2);
		line-height: 1.22;
	}

	/* Οι λίστες του sidebar («Δημοφιλή») ΔΕΝ ακολουθούν: είναι sidebar component,
	   κρατούν τη δική τους συμπαγή κλίμακα (απόφαση χρήστη 30/07). */
}

/* ============================================================
   MOBILE HERO — full-bleed κάρτες με τίτλο πάνω στη φωτογραφία
   ============================================================
   Πρότυπο: sport-fm.gr σε κινητό (μετρημένο 30/07: κάρτες 390px πλάτος, left 0,
   radius 0, πρώτη 371px ύψος και οι επόμενες 240, κολλητά χωρίς κενό, τίτλος
   λευκός πάνω σε gradient, kicker σε pill ΚΑΤΩ από τον τίτλο).

   Υλοποιείται ΜΟΝΟ με CSS πάνω στο υπάρχον markup: το media και το body μπαίνουν
   στο ΙΔΙΟ κελί grid και στοιβάζονται. Δεν διπλασιάζεται HTML, δεν μπαίνει JS —
   το ίδιο cacheable HTML σερβίρεται σε desktop και mobile. */
@media (max-width: 639px) {

	/* Έξοδος από το padding του .container ώστε να πιάσει όλο το πλάτος. */
	.hero-cluster {
		margin-inline: calc(clamp(1rem, 3vw, 1.5rem) * -1);
		gap: 0;
		margin-bottom: var(--space-4);
	}

	.hero-main,
	.hero-secondary {
		gap: 0;
	}

	.card-hero,
	.hero-secondary .card {
		display: grid;
		gap: 0;
		border-radius: 0;
		overflow: hidden;
		background: #0b0e13;
	}

	/* Media και κείμενο στο ΙΔΙΟ κελί → στοίβα. */
	.card-hero > .card-hero-media,
	.card-hero > .card-hero-body,
	.hero-secondary .card > .card-media,
	.hero-secondary .card > .card-body {
		grid-area: 1 / 1;
	}

	.card-hero > .card-hero-media,
	.hero-secondary .card > .card-media {
		aspect-ratio: auto;
		border-radius: 0;
		height: 100%;
	}

	.card-hero > .card-hero-media img,
	.hero-secondary .card > .card-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Ύψη κατά το πρότυπο: το πρώτο μεγαλύτερο, τα επόμενα πιο χαμηλά. */
	.card-hero {
		min-height: 370px;
	}

	.hero-secondary .card {
		min-height: 240px;
	}

	/* Το κείμενο κάθεται στο κάτω μέρος, πάνω σε gradient — ίδιο με το overlay
	   component του Lifestyle band, ώστε η γλώσσα του site να μένει ενιαία. */
	.card-hero > .card-hero-body,
	.hero-secondary .card > .card-body {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 0.5rem;
		padding: var(--space-4);
		/* ΧΩΡΙΣ scrim (31/07, ίδια λογική με το overlay του Lifestyle): η
		   αναγνωσιμότητα βγαίνει από τη σκιά του τίτλου, ώστε να φαίνεται ΟΛΗ η
		   φωτογραφία. Πριν, το σκούρο ανέβαινε ως το 63% (και 50% στην πρώτη). */
	}

	/* Διαχωριστική γραμμή ανάμεσα στις κάρτες — όπως στο πρότυπο (μετρημένο:
	   border-top 2px rgba(255,255,255,0.3) στη 2η και 3η, όχι στην πρώτη). */
	.hero-secondary .card {
		border-top: 2px solid rgb(255 255 255 / 0.3);
	}

	.card-hero .card-hero-title,
	.card-hero .card-hero-title a,
	.hero-secondary .card .card-title,
	.hero-secondary .card .card-title a {
		color: #fff;
	}

	/* Ο τίτλος του πρώτου hero έπεφτε στα 27,9px (--step-4) και έπιανε 4 γραμμές
	   πάνω στη φωτογραφία. Στα 24px —όσο και το πρότυπο— μένει εξίσου κυρίαρχος
	   αλλά αφήνει να φανεί η εικόνα. */
	.card-hero .card-hero-title {
		font-size: 1.5rem;
		line-height: 1.15;
	}

	/* Η σκιά αντικαθιστά το scrim — ίδιες τρεις στρώσεις με το overlay του
	   Lifestyle: σκληρή για το περίγραμμα των γραμμάτων + δύο halo που σβήνουν
	   τοπικά τη φωτογραφία γύρω από το κείμενο. Μόνο εδώ (max-width:639px): στο
	   desktop οι τίτλοι είναι σκούροι ΕΞΩ από την εικόνα. */
	.card-hero .card-hero-title,
	.hero-secondary .card .card-title {
		text-shadow: 0 2px 2px rgb(0 0 0 / 0.9), 0 0 18px rgb(0 0 0 / 0.8), 0 0 40px rgb(0 0 0 / 0.55);
	}

	/* Στο hero του κινητού μένει ΜΟΝΟ ο τίτλος (απόφαση χρήστη 30/07): η κατηγορία
	   φαίνεται ήδη στη ροή παρακάτω και εδώ έτρωγε ~30px κάθετου χώρου ανά κάρτα
	   — 90px συνολικά, δηλαδή ένα ολόκληρο πρόσθετο άρθρο πάνω από το fold. */
	.card-hero > .card-hero-body > .kicker,
	.hero-secondary .card > .card-body > .kicker,
	.card-hero .card-hero-excerpt,
	.card-hero .card-meta,
	.hero-secondary .card .card-excerpt,
	.hero-secondary .card .card-meta {
		display: none;
	}
}

.card-feature .card-feature-title a:hover {
	color: var(--text-3);
}

@media (min-width: 700px) {
	.card-feature {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		align-items: stretch;
	}

	.card-feature .card-media {
		height: 100%;
		aspect-ratio: auto;
		min-height: 260px;
	}

	.card-feature .card-body {
		align-content: center;
		gap: 0.6rem;
		padding: var(--space-4);
	}

	.card-feature .card-excerpt {
		-webkit-line-clamp: 3;
	}
}

/* ---- Layout: vertical-split (κάθετη hero + compact ομοιόμορφη λίστα) ---- */
.split-grid {
	display: grid;
	gap: var(--space-4);
}

.split-list {
	display: flex;
	flex-direction: column;
}

/* Ομοιόμορφα items: το thumbnail ΓΕΜΙΖΕΙ το ύψος του κειμένου (σταθερό πλάτος),
   ώστε top & bottom να ευθυγραμμίζονται με τις γραμμές του τίτλου. */
.split-list .list-item {
	align-items: stretch;
	gap: var(--space-3);
}

.split-list .list-media {
	width: 132px;
	aspect-ratio: auto;   /* όχι σταθερό aspect — παίρνει το ύψος της γραμμής */
	align-self: stretch;
}

.split-list .list-title {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (min-width: 768px) {
	.split-grid {
		grid-template-columns: 1.05fr 1fr;
		align-items: stretch;   /* lead & list ίδιο ύψος → ίδιο «μήκος» */
	}

	.split-lead .card-title {
		font-size: var(--step-2);
	}

	/* Ισοκατανομή των items ώστε το τελευταίο να τελειώνει ΑΚΡΙΒΩΣ στο ύψος
	   του lead (bottom-aligned), χωρίς να προεξέχει η αριστερή κάρτα. */
	.split-list {
		justify-content: space-between;
	}

	.split-list .list-item:first-child {
		padding-top: 0;
	}

	/* Το τελευταίο item χωρίς padding-bottom: το thumbnail φτάνει ΑΚΡΙΒΩΣ στην
	   κάτω άκρη της lead κάρτας (pinpoint bottom-alignment). */
	.split-list .list-item:last-child {
		padding-bottom: 0;
	}
}

/* ---- Layout: mosaic (2 μεγάλες κάρτες + λωρίδα text items) ---- */
.mosaic {
	display: grid;
	gap: var(--space-4);
}

.mosaic-feature {
	display: grid;
	gap: var(--space-4);
}

.mosaic-strip {
	display: grid;
	gap: 0 var(--space-4);
	border-top: 2px solid var(--text-1);
	padding-top: var(--space-2);
}

@media (min-width: 560px) {
	.mosaic-feature {
		grid-template-columns: 1fr 1fr;
	}

	.mosaic-strip {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 960px) {
	.mosaic-strip {
		grid-template-columns: repeat(4, 1fr);
		column-gap: var(--space-4);
	}
}

/* Στη λωρίδα: χωρίς κάτω γραμμή/κουκκίδα, καθαρές στήλες. */
.mosaic-strip .text-item {
	border-bottom: 0;
	padding: var(--space-2) 0 0;
}

.mosaic-strip .text-item::before {
	display: none;
}

/* ---------- Full-width έγχρωμη ζώνη (home band) ----------
   Section που «σπάει» τη στήλη + το sidebar και απλώνεται σε όλο το πλάτος με
   δικό του background — δίνει ρυθμό στην αρχική (à la Gazzetta). */
.home-band {
	background: var(--navy-strip);
	padding-block: var(--space-5);
	/* Αέρας πάνω/κάτω ώστε η ζώνη να «αναπνέει» και να μην εφάπτεται με τα
	   γειτονικά sections. Το πάνω κενό συμπληρώνεται από το margin του
	   προηγούμενου section (24px) — γι' αυτό οι δύο τιμές διαφέρουν αλλά το
	   οπτικό αποτέλεσμα βγαίνει συμμετρικό (64px). */
	margin-top: var(--space-5);
	margin-bottom: var(--space-6);
}

.home-band .home-section {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Αντιστροφή χρωμάτων πάνω στο σκούρο φόντο. */
.home-band .section-title {
	color: #fff;
}

.home-band .section-title span::after {
	background: linear-gradient(90deg, var(--brand) 0 2.25rem, #fff 2.25rem 100%);
}

.home-band .section-more {
	color: rgb(255 255 255 / 0.72);
}

.home-band .section-more:hover {
	color: #fff;
}


/* ---- Layout: overlay (poster + 2 stacked, τίτλος πάνω στην εικόνα) ---- */
.overlay-grid {
	display: grid;
	gap: var(--space-4);
}

.overlay-stack {
	display: grid;
	gap: var(--space-4);
}

.card-overlay {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	background: var(--ink-strip);
	transition: box-shadow 0.2s, transform 0.2s;
}

.card-overlay:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

/* Stretched link: ο τίτλος-σύνδεσμος καλύπτει όλη την κάρτα → κλικ παντού
   (και πάνω στον τίτλο) ανοίγει το άρθρο. */
.card-overlay-link {
	color: inherit;
}

.card-overlay-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Ο kicker (σύνδεσμος κατηγορίας) πάνω από το stretched link, ώστε να κλικάρει. */
.card-overlay .kicker {
	position: relative;
	z-index: 2;
}

.card-overlay-media {
	/* Mobile: πιο όρθιος λόγος. Στα 358px το 16/10 έδινε κάρτα 224px — μισό
	   ύψος από κάθε άλλη κάρτα της σελίδας (458px) και με τον τίτλο 3 γραμμών
	   να καλύπτει σχεδόν όλη τη φωτογραφία (feedback 29/07). Το 4/3 δίνει
	   ~268px και αφήνει την εικόνα να διαβαστεί. */
	aspect-ratio: 4 / 3;
	height: 100%;
	border-radius: 0;
}

@media (min-width: 640px) {
	.card-overlay-media {
		aspect-ratio: 16 / 10;
	}
}

.card-overlay-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.card-overlay:hover .card-overlay-media img {
	transform: scale(1.06);
}

.card-overlay-scrim {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: var(--space-4);
	/* ΧΩΡΙΣ scrim (31/07): η αναγνωσιμότητα βγαίνει πλέον από τη ΣΚΙΑ του κειμένου,
	   όπως στο sport-fm — η φωτογραφία μένει 100% καθαρή αντί να σκεπάζεται κατά
	   82%. Βλ. .card-overlay-title για το γιατί η σκιά μας είναι πλουσιότερη από
	   τη δική τους. */
}

/* Το hover ΔΕΝ σκουραίνει πια (ήταν 88%): σκέπαζε ακόμη περισσότερη φωτογραφία
   χωρίς λόγο — δεν έδινε καμία πληροφορία, ούτε affordance που δεν δίνει ήδη ο
   δείκτης και το transform του τίτλου (αίτημα χρήστη 31/07). */


/* Ο stretched link του overlay: πάνω από το scrim (που με inset:0 έτρωγε τα κλικ
   σε όλη τη φωτογραφία) αλλά ΚΑΤΩ από kicker/τίτλο, ώστε ο kicker να παραμένει
   ξεχωριστός σύνδεσμος κατηγορίας. */
.card-overlay-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card-overlay .kicker,
.card-overlay-title {
	position: relative;
	z-index: 2;
}

.card-overlay .kicker {
	color: #fff;
}

/* Μέσα στη ζώνη Lifestyle το kicker κάθε κάρτας επαναλαμβάνει τον τίτλο του
   ίδιου του section — κρύβεται (απόφαση χρήστη 29/07). Εκτός ζώνης (π.χ.
   overlay layout σε άλλο section) παραμένει. */
.home-band .card-overlay .kicker {
	display: none;
}

.card-overlay .kicker::before {
	background: var(--brand);
}

.card-overlay-title {
	color: #fff;
	/* Ελάχιστο 1.1875rem (19px): με σκέτο --step-1 έπεφτε στα 17,4px στα 390px,
	   δηλαδή ΜΙΚΡΟΤΕΡΟΣ από τις κανονικές κάρτες (19px) — προβεβλημένη ζώνη δεν
	   μπορεί να έχει μικρότερα γράμματα από απλή κάρτα (feedback 29/07). */
	font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.25rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	/* Τρεις στρώσεις αντί για μία: σκληρή σκιά για το περίγραμμα των γραμμάτων +
	   δύο απαλά halo που «σβήνουν» τοπικά τη φωτογραφία γύρω από το κείμενο.
	   Το sport-fm αρκείται σε «2px 2px 1px» — δοκιμάστηκε και είναι το πιο αδύναμο
	   από τα τρία: δουλεύει σε ΕΚΕΙΝΟΥΣ επειδή ο τίτλος τους πέφτει σε σκούρο
	   σημείο της εικόνας, ενώ οι δικές μας φωτογραφίες είναι ό,τι φέρει το άρθρο
	   (μετρημένο πάνω σε φωτεινό τσιμέντο: η 2η γραμμή έχανε αισθητά). */
	text-shadow: 0 2px 2px rgb(0 0 0 / 0.9), 0 0 18px rgb(0 0 0 / 0.8), 0 0 40px rgb(0 0 0 / 0.55);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex-shrink: 0;   /* να μη συμπιέζεται από το flex scrim (κοβόταν πολύ νωρίς) */
	transition: transform 0.25s ease;
}

.card-overlay:hover .card-overlay-title {
	transform: translateY(-2px);
}

.card-overlay .kicker,
.card-overlay-meta {
	/* Χωρίς scrim, ο kicker και η ώρα έμεναν γυμνά πάνω στη φωτογραφία — στο
	   δοκιμαστικό καρέ το «12:34» σχεδόν εξαφανιζόταν στο φωτεινό τσιμέντο. */
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 14px rgb(0 0 0 / 0.7);
}

.card-overlay-meta {
	/* Ήταν 0.82: το ημιδιάφανο λευκό δούλευε όσο από πίσω υπήρχε σκούρο scrim.
	   Χωρίς αυτό, 12px στο 82% λευκού πάνω σε τυχαία φωτογραφία είναι το πιο
	   αδύναμο στοιχείο της κάρτας — η σκιά μόνη της δεν έφτανε (31/07). */
	color: rgb(255 255 255 / 0.95);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.overlay-grid {
		grid-template-columns: 1.5fr 1fr;
		align-items: stretch;
	}

	.overlay-poster,
	.overlay-poster .card-overlay {
		height: 100%;
	}

	.overlay-poster .card-overlay-media {
		aspect-ratio: auto;
		min-height: 360px;
	}

	.overlay-poster .card-overlay-title {
		font-size: var(--step-3);
		-webkit-line-clamp: 3;
	}
}

/* -- Cards grid -- */
.cards-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.cards-grid-4 {
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

/* -- Home columns (main + sidebar) -- */
.home-columns {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.home-columns {
		grid-template-columns: 1fr 320px;
		/* stretch: το sidebar φτάνει ως το ΤΕΛΟΣ των sections (εκεί ξεκινά η
		   ζώνη Lifestyle) ώστε οι «Αθλητικές Μεταδόσεις» να κάθονται στον
		   πάτο της στήλης και να εμφανίζονται μόλις φτάσεις εκεί. */
		align-items: stretch;
	}
}

/* Δύο sidebars: #1 (Ροή) δίπλα στις ενότητες — κολλάει μέχρι τη ζώνη του
   Lifestyle· #2 (Δημοφιλή) δίπλα στα «Περισσότερα Νέα», μετά τη ζώνη.
   Το `top` το ρυθμίζει το app.js (ύψος sticky header, ή αρνητικό αν είναι ψηλό). */
.home-sidebar {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

/* Κλείσιμο της «Ροής Ειδήσεων» με την ίδια θολή γραμμή που έχουν τα items
   (και τα «Δημοφιλή» στο τέλος τους): χωρίς αυτήν, Ροή και «Αθλητικές
   Μεταδόσεις» διαβάζονται σαν ένα ενιαίο μπλοκ. Μπαίνει στο widget (όχι στο
   .rail-scroll) ώστε να μην τη σβήνει το bottom fade του scroll. */
.home-sidebar .widget-rail {
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--space-2);
}

@media (min-width: 1024px) {
	/* Η στήλη γεμίζει το ύψος των sections· ΔΕΝ είναι η ίδια sticky. */
	.home-sidebar {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	/* Ο wrapper καταλαμβάνει ΟΛΟ τον χώρο πάνω από τις Μεταδόσεις: μέσα του
	   κολλάει η Ροή, άρα το sticky range τελειώνει ΑΚΡΙΒΩΣ εκεί που ξεκινούν
	   οι Μεταδόσεις — καμία επικάλυψη. */
	.home-sidebar .rail-sticky-wrap {
		flex: 1;
		min-height: 0;
	}

	/* Sticky είναι ΜΟΝΟ η «Ροή Ειδήσεων»: μένει καρφωμένη κάτω από το header
	   όσο κυλάς τις ενότητες, με δικό της εσωτερικό scroll. */
	.home-sidebar .widget-rail {
		position: sticky;
		top: var(--sticky-top, 122px);
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - var(--sticky-top, 122px) - 16px);
		min-height: 0;
	}

	.home-sidebar .rail-scroll {
		flex: 1;
		min-height: 240px;
		max-height: none;
	}

	/* Οι «Αθλητικές Μεταδόσεις» (και ό,τι άλλο widget) πάνε στον ΠΑΤΟ της
	   στήλης — έρχονται στο προσκήνιο όταν φτάσεις στη ζώνη του Lifestyle. */
	.home-sidebar > .widget {
		flex: 0 0 auto;
	}

	/* Sidebar #2 (Δημοφιλή, κάτω από τη ζώνη Lifestyle): το widget κολλάει
	   μόνο του — το sidebar δεν είναι πια sticky ως σύνολο (η αλλαγή για τη
	   Ροή), οπότε το δηλώνουμε ρητά εδώ. */
	.home-sidebar .widget-popular {
		position: sticky;
		top: var(--sticky-top, 122px);
	}
}

	.archive-popular-sticky {
		flex: 1 0 auto;
		min-height: 0;
	}

	.archive-popular-sticky .widget-popular {
		position: sticky;
		top: var(--sticky-top, 122px);
		z-index: 1;
	}

	.archive-popular-sticky .widget-popular .list-title a {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
}

.widget {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
	padding: var(--space-3);
}

.widget-title {
	font-size: var(--step-1);
	margin-bottom: var(--space-2);
}

/* ---------- 8. Article ---------- */
.article-layout {
	display: grid;
	gap: var(--space-5);
}

/* Sidebar widgets με απόσταση μεταξύ τους (βαθμολογία / δημοφιλή / ads). */
.article-sidebar {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

@media (min-width: 1024px) {
	.article-layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.article-sidebar {
		position: sticky;
		top: 84px;
	}
}

.article {
	max-width: 860px;
}

/* ---------- Single post enhancements ---------- */

/* Reading progress bar */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	z-index: 200;
	pointer-events: none;
}

.reading-progress > span {
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left;
	/* Πολύ διακριτικό: λεπτή, μουντή γκρι γραμμή — να μην αποσπά τον αναγνώστη. */
	background: rgb(100 116 139 / 0.4);
	will-change: transform;
}

:root[data-theme='dark'] .reading-progress > span {
	background: rgb(148 163 184 / 0.35);
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--text-3);
	margin-bottom: var(--space-3);
}

.breadcrumbs a:hover {
	color: var(--brand-text);
	text-decoration: underline;
}

.breadcrumbs span[aria-hidden] {
	opacity: 0.5;
}

.article-header {
	display: grid;
	gap: 0.85rem;
	margin-bottom: var(--space-4);
}

.article-title {
	font-size: var(--step-5);
	/* 700, όχι 900: στο μέγεθος του single τίτλου το black βάρος «φώναζε»
	   (αίτημα χρήστη 23/07). Οι κάρτες/λοιπά headings κρατούν τα δικά τους. */
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
	/* Greedy γέμισμα: κάθε γραμμή πιάνει όσο πλάτος χωράει, ώστε ο μεγάλος
	   τίτλος να απλώνεται σε όλο το width· το «balance»/«pretty» έσπαγαν νωρίς. */
	text-wrap: wrap;
}

.article-standfirst {
	font-size: var(--step-1);
	color: var(--text-2);
	line-height: 1.5;
	text-wrap: pretty;
}

/* Editorial lead ακριβώς πάνω από το κείμενο (μετά τη φωτογραφία), στο στυλ του
   sport24: λιτό, χωρίς border ώστε να μη διαβάζεται σαν callout/pull-quote —
   απλώς μια βαρύτερη εισαγωγική παράγραφος, ευθυγραμμισμένη με τη στήλη. */
/* Editorial lead πάνω από το κείμενο (στυλ sport24). Navy κάθετη γραμμή +
   navy κείμενο (χρώμα λογοτύπου) ώστε να ξεχωρίζει καθαρά από το σώμα. */
.article-standfirst-above-body {
	max-width: 68ch;
	margin: 0 0 1.5rem;
	padding-left: 1.1rem;
	border-left: 4px solid var(--navy-strip);
	/* Ήταν σταθερό 1.25rem: στο mobile έβγαινε 20px (πάνω από το σώμα των
	   17.4px) και το lead έπιανε 6 γραμμές. Τώρα κλιμακώνεται 18px → 20px. */
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
	line-height: 1.5;
	font-weight: 600;
	color: var(--navy-strip);
}

/* Mobile fine-tuning κεφαλίδας άρθρου: στα μικρά μεγέθη το πολύ σφιχτό
   line-height/tracking του desktop τίτλου κάνει τις γραμμές να «κολλάνε»,
   και το πλατύ padding του lead το ξεχώριζε από τη στοίχιση του σώματος. */
@media (max-width: 639px) {

	.article-title {
		line-height: 1.16;
		letter-spacing: -0.015em;
	}

	.article-standfirst-above-body {
		/* 20px → 28px: στο κινητό το lead και η πρώτη παράγραφος έχουν σχεδόν
		   ίδιο μέγεθος (18 vs 17.4px), οπότε με 20px διαβάζονταν σαν ένα μπλοκ. */
		margin-bottom: 1.75rem;
		padding-left: 0.8rem;
		border-left-width: 3px;
		line-height: 1.55;
	}
}

:root[data-theme='dark'] .article-standfirst-above-body {
	border-left-color: var(--text-1);
	color: var(--text-1);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.25rem;
	font-size: 0.8125rem;
	color: var(--text-3);
	padding-top: 0.85rem;
	border-top: 1px solid var(--line);
	font-variant-numeric: tabular-nums;
}

/* Υπογραφή συντάκτη (byline) — όπως τα μεγάλα portal. */
.article-byline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-1);
}

.article-updated {
	color: var(--brand-text);
	font-weight: 600;
}

.article-hero {
	margin: 0 0 var(--space-4);
}

.article-hero img {
	width: 100%;
	border-radius: var(--radius);
}

.article-hero figcaption {
	font-size: 0.8125rem;
	color: var(--text-3);
	padding-top: 0.5rem;
}

/* Full-bleed φωτογραφία άρθρου στο κινητό, όπως sport24 και sport-fm (μετρημένο:
   και τα δύο 100% του viewport, εμείς ήμασταν 92% — 358px με 16px περιθώριο).
   Ίδιο μοτίβο με το hero-cluster της αρχικής: αρνητικά margins ίσα με το
   padding-inline του .container. Η λεζάντα ΔΕΝ ακολουθεί — κείμενο κολλημένο
   στην άκρη της οθόνης δεν διαβάζεται, οπότε παίρνει πίσω το padding. */
@media (max-width: 639px) {

	.article-hero {
		margin-inline: calc(clamp(1rem, 3vw, 1.5rem) * -1);
	}

	.article-hero img {
		border-radius: 0;
	}

	.article-hero figcaption {
		padding-inline: clamp(1rem, 3vw, 1.5rem);
	}
}

.article-body {
	font-size: var(--step-1);
	line-height: 1.7;
	max-width: 68ch;
}

.article-body > * + * {
	margin-top: 1.1em;
}

.article-body :is(h2, h3) {
	margin-top: 1.6em;
	letter-spacing: -0.015em;
}

.article-body h2 {
	font-size: var(--step-3);
}

.article-body h3 {
	font-size: var(--step-2);
}

.article-body a {
	color: var(--brand-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2.5px;
}

.article-body a:hover {
	text-decoration-thickness: 2px;
}

/* Auto-linked tags/κατηγορίες μέσα στο κείμενο: χωρίς υπογράμμιση (αίτημα
   χρήστη 29/07) — είναι πλοήγηση, όχι πηγή, και σε άρθρα με πολλά ονόματα
   γέμιζε γραμμές το κείμενο. Παραμένουν αναγνωρίσιμα από το χρώμα, και η
   υπογράμμιση επιστρέφει στο hover ως affordance. */
.article-body a[href*='/tag/'],
.article-body a[href*='/category/'] {
	/* Navy του λογοτύπου, όχι brand κόκκινο (αίτημα χρήστη 29/07): το κόκκινο
	   είναι για CTA/πηγές — τα εσωτερικά tags είναι διακριτική πλοήγηση. */
	color: var(--navy-strip);
	text-decoration: none;
}

/* Στο dark theme το navy χάνεται στο φόντο — ίδια λύση με το lead. */
:root[data-theme='dark'] .article-body a[href*='/tag/'],
:root[data-theme='dark'] .article-body a[href*='/category/'] {
	color: var(--text-1);
}

.article-body a[href*='/tag/']:hover,
.article-body a[href*='/category/']:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.article-body :is(ul, ol) {
	padding-inline-start: 1.4rem;
}

.article-body ul {
	list-style: disc;
}

.article-body ol {
	list-style: decimal;
}

.article-body li + li {
	margin-top: 0.45em;
}

.article-body blockquote {
	margin: 1.5em 0;
	padding: 0.5rem 0 0.5rem 1.25rem;
	border-inline-start: 4px solid var(--brand);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-2);
	line-height: 1.4;
	color: var(--text-1);
}

.article-body img {
	border-radius: var(--radius-sm);
}

/* Bare embeds από scraped content (χωρίς wrapper): responsive, ώστε ένα σταθερό
   width π.χ. iframe width="780" να ΜΗ σπρώχνει τη σελίδα σε desktop πλάτος στο mobile. */
.article-body :is(iframe, video, embed, object) {
	max-width: 100%;
}

/* Video iframes (YouTube/Vimeo/κ.ά.): 16:9 responsive αντί για σταθερό width/height. */
.article-body iframe[src*="youtube"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="vimeo"],
.article-body iframe[src*="dailymotion"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-sm);
}

/* Πλατιά στοιχεία: εσωτερικό scroll αντί για σπάσιμο ολόκληρης της σελίδας. */
.article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.article-body pre {
	overflow-x: auto;
}

.article-body figcaption,
.article-body .wp-caption-text {
	font-size: 0.8125rem;
	color: var(--text-3);
	padding-top: 0.4rem;
}

.embed-responsive {
	position: relative;
	aspect-ratio: 16 / 9;
}

.embed-responsive iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-sm);
}

.article-footer {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag-chip {
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.3rem 0.75rem;
	border-radius: 99px;
	background: var(--surface-2);
	color: var(--text-2);
	transition: background 0.15s, color 0.15s;
}

.tag-chip:hover {
	background: var(--brand);
	color: #fff;
}

.article-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.share-label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--text-3);
	margin-inline-end: 0.25rem;
}

.share-btn {
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.4rem 0.9rem;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--line-strong);
	color: var(--text-2);
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.share-btn:hover {
	border-color: var(--brand);
	color: var(--brand-text);
}

.related-posts {
	margin-top: var(--space-5);
}

/* Ο τίτλος «Σχετικά Άρθρα» είναι γυμνός <h2> (χωρίς .section-header wrapper).
   Κάτω κενό 32px ώστε η απόσταση τίτλου→φωτογραφίας να είναι ΑΚΡΙΒΩΣ ίδια με τα
   sections της αρχικής (ΠΟΔΟΣΦΑΙΡΟ/ΜΠΑΣΚΕΤ κ.λπ. = 32px). */
.related-posts .section-title {
	margin-bottom: 2rem;
}

/* Σχετικά άρθρα: 2 στήλες από tablet και πάνω (6 posts → 3 σειρές των 2),
   αντί για 3 του γενικού .cards-grid. */
@media (min-width: 640px) {
	.related-posts .cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Single: ζώνες discovery μετά το άρθρο ---------- */
/* Δημοφιλή: η πισίνα των extra (πέραν των data-show) μένει κρυφή — το JS
   κληρώνει ποια 5 θα φανούν σε κάθε φόρτωμα (cache-proof randomness). */
.popular-list .list-item.is-extra {
	display: none;
}

/* Mobile flow (29/07): στο 2ο columns block το sidebar στοιβαζόταν ΜΕΤΑ από
   ολόκληρο το «Περισσότερα Νέα», δηλαδή τα «Δημοφιλή» κατέληγαν ~14.000px κάτω
   — πρακτικά αθέατα. Με display:contents τα παιδιά του .home-main γίνονται
   items του ίδιου flex column, οπότε η σειρά γίνεται:
   Σήμερα → Δημοφιλή → Περισσότερα Νέα. Desktop αμετάβλητο. */
@media (max-width: 1023px) {
	.home-columns-tail {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}

	.home-columns-tail .home-main {
		display: contents;
	}

	.home-columns-tail .today-section {
		order: 1;
	}

	.home-columns-tail .home-sidebar {
		order: 2;
	}

	.home-columns-tail .home-section:not(.today-section) {
		order: 3;
	}
}

/* ---------- Ζώνη «Σήμερα»: οριζόντιες κάρτες (εικόνα | κείμενο) ----------
   Ζει ΜΕΣΑ στη στήλη, στο ίδιο πλάτος με τα υπόλοιπα sections — μόνο το
   Lifestyle band βγαίνει full width (απόφαση χρήστη 29/07). */
.today-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

/* Mobile: εικόνα πάνω, κείμενο κάτω. Desktop (και tablet): εικόνα αριστερά,
   κατηγορία + τίτλος δεξιά — απόφαση χρήστη 29/07. */
.today-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	align-items: start;
	position: relative;
}

/* Στο στενότερο πλάτος στήλης η εικόνα παίρνει το 42% ώστε να μένει «hero»
   και ο τίτλος να αναπνέει. */
@media (min-width: 480px) {
	.today-card {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		gap: 1.1rem;
	}
}

.today-media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
	aspect-ratio: 16 / 9;
}

.today-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.today-card:hover .today-media img {
	transform: scale(1.04);
}

.today-media .thumb-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--line-strong);
}

.today-media .thumb-placeholder svg {
	width: 40%;
	max-width: 72px;
}

/* Ο τίτλος «σπάει» λίγο νωρίτερα ώστε το κείμενο να πιάνει περισσότερο κάθετο
   ύψος και να ισορροπεί οπτικά με τη φωτογραφία δίπλα. Περιορίζεται ΜΟΝΟ το
   κείμενο (max-width) — το πλάτος του section μένει ίδιο, άρα η στοίχιση με το
   sidebar δεν αλλάζει. Ισχύει μόνο εδώ, από το breakpoint που η κάρτα γίνεται
   οριζόντια. */
@media (min-width: 480px) {
	.today-card .card-title {
		max-width: 80%;
	}
}

/* Το σώμα χρησιμοποιεί τα ΚΑΘΙΕΡΩΜΕΝΑ classes του site (kicker/card-title/
   card-meta) — καμία δική του τυπογραφία, ώστε μεγέθη, βάρη και χρώματα να
   ταυτίζονται με τις υπόλοιπες κάρτες της αρχικής. */
/* Top-aligned όπως όλα τα οριζόντια items του site (.list-item): ο kicker
   ξεκινά στην ίδια γραμμή με το πάνω άκρο της εικόνας, ανεξάρτητα από το
   μήκος του τίτλου. Κεντράρισμα έδινε ασυνεπή απόκλιση 33-47px ανά κάρτα. */
.today-body {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	min-width: 0;
}

/* ---------- Infinite scroll στο «Τελευταία Νέα» (single) ---------- */
.article-latest-river .cards-grid .card.is-extra {
	display: none;
}

.infinite-sentinel {
	height: 1px;
}

/* «Περισσότερα Νέα» στην αρχική: 2 στήλες (δυάδες) αντί για 3. */
@media (min-width: 640px) {
	#latest-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- 9. Archive / Search ---------- */
.archive-header {
	margin-bottom: var(--space-4);
	display: grid;
	gap: 0.5rem;
}

/* Αρχεία κατηγορίας/tag: 2 στήλες από tablet και πάνω (12 posts → 6 σειρές των 2),
   αντί για 3 του γενικού .cards-grid. */
@media (min-width: 640px) {
	.archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.archive-title {
	font-size: var(--step-4);
	font-weight: 900;
	letter-spacing: -0.02em;
	position: relative;
	width: fit-content;
	padding-bottom: 0.5rem;
}

.archive-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: linear-gradient(90deg, var(--brand) 0 2.75rem, var(--title-line-2) 2.75rem 100%);
	clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 4px 100%);
}

.archive-description {
	color: var(--text-2);
	max-width: 68ch;
}

.archive-count {
	color: var(--text-3);
	font-size: 0.875rem;
}

.no-results {
	display: grid;
	gap: var(--space-3);
	max-width: 560px;
	color: var(--text-2);
	padding-block: var(--space-4);
}

/* pagination */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-top: var(--space-5);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0.35rem 0.95rem;
	border-radius: var(--radius-sm);
	background: var(--surface);
	border: 1px solid var(--line);
	font-weight: 600;
	font-size: 0.9063rem;
	color: var(--text-2);
	transition: border-color 0.15s, color 0.15s;
}

.pagination a.page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand-text);
}

.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

/* ---------- 10. Footer ---------- */
/* ---------- Footer (redesign 29/07 — δομή sport24, ρητά χρώματα) ---------- */
.site-footer {
	background: #10141b;
	color: #9aa4b2;
	border-top: 3px solid #d90429;
	/* Χωρίς margin-top: το .site-main έχει ήδη padding-bottom var(--space-6).
	   Και τα δύο μαζί έδιναν 128px κενό πριν το footer (feedback 29/07). */
}

.footer-main {
	display: grid;
	gap: var(--space-5);
	padding-block: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.footer-main {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.footer-main {
		grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
		gap: var(--space-6);
	}
}

.footer-brand .brand-logo {
	color: #fff;
	font-size: 1.5rem;
}

.footer-brand .brand-logo em {
	color: #ff5a6e;
}

.footer-tagline {
	margin-top: 0.9rem;
	max-width: 34ch;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #8892a0;
}

.footer-social {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.2rem;
}

.footer-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #2a3140;
	color: #c9d2de;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.footer-social a:hover {
	border-color: #d90429;
	background: #d90429;
	color: #fff;
}

.footer-social svg {
	width: 18px;
	height: 18px;
}

/* Headings με κόκκινη υπογράμμιση — το μοτίβο των στηλών του sport24. */
.footer-heading {
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	padding-bottom: 0.6rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #232936;
	position: relative;
}

.footer-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 32px;
	height: 3px;
	background: #d90429;
}

.footer-links {
	display: grid;
	gap: 0.55rem;
}

.footer-links a {
	font-size: 0.9rem;
	color: #9aa4b2;
	transition: color 0.15s, padding-left 0.15s;
}

.footer-links a:hover {
	color: #fff;
	padding-left: 4px;
}

/* Δημοφιλή θέματα: trending chips — φρέσκο περιεχόμενο αντί για στατική λίστα. */
.footer-trending {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.footer-trend-chip {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border: 1px solid #2a3140;
	border-radius: 999px;
	font-size: 0.8125rem;
	color: #9aa4b2;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.footer-trend-chip:hover {
	border-color: #d90429;
	background: #d90429;
	color: #fff;
}

.footer-bottom {
	background: #0b0e14;
	border-top: 1px solid #1c212c;
}

.footer-bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 1.1rem;
	font-size: 0.8125rem;
	color: #737e8c;
}

.legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Διαχωριστικό «|» μεταξύ των θεσμικών συνδέσμων (ίδιο look με το prod footer). */
.legal-links li + li::before {
	content: "|";
	margin-inline-end: 0.75rem;
	color: #3a424f;
}

.legal-links a:hover {
	color: #fff;
}

/* ---------- 11. Utilities ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
	background: var(--brand);
	color: #fff;
	padding: 0.6rem 1.2rem;
	border-radius: var(--radius-sm);
	font-weight: 700;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ad-slot {
	display: grid;
	place-items: center;
	background: var(--surface-2);
	border-radius: var(--radius-sm);
	position: relative;
}

.ad-slot::before {
	content: 'Διαφήμιση';
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-3);
}

.ad-slot-header {
	min-height: 100px;
	margin-block: var(--space-3);
}

.ad-slot-infeed {
	min-height: 110px;
	margin-bottom: var(--space-5);
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--brand);
	color: #fff;
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-sm);
	width: fit-content;
	transition: background 0.15s;
}

.btn-primary:hover {
	background: var(--brand-deep);
	color: #fff;
}

.back-to-top[hidden] {
	display: none;
}

.back-to-top {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--ink-strip);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-2);
	z-index: 40;
	transition: background 0.15s;
}

.back-to-top:hover {
	background: var(--brand);
}

.back-to-top svg {
	width: 16px;
	height: 16px;
}

/* 404 */
.error-404 {
	display: grid;
	gap: var(--space-3);
	justify-items: center;
	text-align: center;
	padding-block: var(--space-5);
}

.error-code {
	font-family: var(--font-display);
	font-size: clamp(5rem, 14vw, 9rem);
	font-weight: 900;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 3px var(--brand);
	letter-spacing: -0.03em;
}

.error-title {
	font-size: var(--step-4);
}

.error-text {
	color: var(--text-2);
	max-width: 48ch;
}

.error-404 .search-form {
	width: min(100%, 480px);
}

/* WordPress core classes */
.alignleft {
	float: left;
	margin: 0.3rem 1.25rem 0.75rem 0;
}

.alignright {
	float: right;
	margin: 0.3rem 0 0.75rem 1.25rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.sticky {
	/* required by theme check — visual διαφοροποίηση μέσω kicker */
	position: relative;
}

/* ---------- 12. Responsive: mobile nav ---------- */
@media (max-width: 1023px) {
	.nav-burger {
		display: flex;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		top: 0;
		background: var(--surface);
		z-index: 90;
		padding: 5.5rem 1.5rem 2rem;
		overflow-y: auto;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
	}

	body.nav-open .site-nav {
		transform: translateX(0);
		visibility: visible;
	}

	body.nav-open {
		overflow: hidden;
	}

	body.nav-open .nav-burger {
		position: relative;
		z-index: 95;
	}

	.nav-list {
		flex-direction: column;
		gap: 0;
	}

	.nav-list > li > a {
		padding: 0.9rem 0;
		font-size: 1.25rem;
		border-bottom: 1px solid var(--line);
	}

	.nav-list .sub-menu {
		position: static;
		opacity: 1;
		visibility: hidden;
		transform: none;
		box-shadow: none;
		border: 0;
		border-inline-start: 3px solid var(--brand);
		border-radius: 0;
		padding: 0.25rem 0 0.25rem 0.5rem;
		display: none;
	}

	.nav-list li.submenu-open .sub-menu {
		display: block;
		visibility: visible;
	}

	.mega-col {
		padding-block: 0.35rem;
	}

	.mega-col-title {
		padding-top: 0.5rem;
	}

	.nav-list .sub-menu.has-mega .mega-sublist a {
		padding-inline-start: 1rem;
	}

	.nav-list .sub-menu.has-mega a.mega-all {
		margin: 0.7rem 0 0.4rem;
	}

	.masthead-inner {
		min-height: 58px;
	}

	.home-sidebar,
	.article-sidebar {
		position: static;
	}
}

@media (max-width: 639px) {
	.ticker {
		display: none;
	}

	/* (Το μέγεθος του hero τίτλου στο κινητό ορίζεται πλέον στο μπλοκ
	   «MOBILE HERO» παραπάνω — ήταν ορισμένο σε δύο σημεία και νικούσε αυτό
	   επειδή ήταν αργότερα στο αρχείο, όχι επειδή ήταν πιο σωστό.) */

	/* Μεγαλύτερη απόσταση μεταξύ των ομάδων, ώστε το σήμα της επόμενης
	   να ξεχωρίζει καθαρά από το όνομα της προηγούμενης. */
	.teams-list {
		gap: 0.85rem;
		margin-inline: 0;
	}

	.team-name {
		display: inline;
	}

	.team-badge {
		width: 24px;
		height: 24px;
	}

	.list-media {
		width: 92px;
	}

	.home .list-title {
		font-size: 1rem;
	}

	.card-hero-excerpt {
		display: none;
	}

	/* (Το μέγεθος των τίτλων καρτών στο mobile ορίζεται ενιαία στο
	   @media (max-width: 699px) παραπάνω — κάρτες ΚΑΙ feature μαζί.) */
}

/* ---------- Touch devices: χωρίς sticky hover ---------- */
/* Το «διπλό tap» (ο τίτλος κοκκινίζει αλλά δεν ανοίγει με το 1ο άγγιγμα): το
   Safari/iOS κρατά το πρώτο tap ως hover ΟΤΑΝ το hover αλλάζει την εμφάνιση
   (σήκωμα κάρτας, zoom εικόνας, αλλαγή χρώματος). Λύση: σε ΚΑΘΕ touch συσκευή
   το :hover να είναι ΟΠΤΙΚΑ ΙΔΙΟ με την ηρεμία → το tap ανοίγει με το 1ο άγγιγμα.
   Χρησιμοποιούμε ΚΑΙ `pointer: coarse` γιατί κάποιες Android αναφέρουν `hover:hover`
   ενώ είναι αφής (το σκέτο `hover: none` δεν τις έπιανε). */
@media (hover: none), (pointer: coarse) {
	/* Admin shortcut διαθέσιμο και σε touch συσκευές, όπου δεν υπάρχει hover. */
	.sportlive-admin-edit {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	/* 1) Καμία μετακίνηση/σήκωμα. */
	.card:hover,
	.card-feature:hover,
	.card-overlay:hover,
	.card-overlay:hover .card-overlay-title,
	.trending-chip:hover,
	.btn-primary:hover,
	.back-to-top:hover {
		transform: none;
	}

	.card:hover {
		box-shadow: var(--shadow-1);
	}

	/* 2) Κανένα zoom εικόνας. */
	article:hover :is(.card-media, .card-hero-media, .list-media) img,
	.card-overlay:hover .card-overlay-media img {
		transform: none;
	}

	/* 3) Καμία αλλαγή χρώματος τίτλου στο hover (η «κοκκινίλα» που έμενε). */
	.card-title a:hover,
	.card-feature-title a:hover,
	.card-hero-title a:hover,
	.list-title a:hover,
	.text-item-title a:hover {
		color: inherit;
	}
}

/* ---------- Motion / a11y ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.ticker-track {
		animation: none;
	}

	.ticker-viewport {
		overflow-x: auto;
	}
}

/* ---------- Print ---------- */
@media print {
	.ticker,
	.masthead,
	.teams-strip,
	.site-footer,
	.article-sidebar,
	.related-posts,
	.article-share,
	.back-to-top,
	.ad-slot {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ---------- Πρωτοσέλιδα εφημερίδων ---------- */
.protoselida-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	margin-bottom: var(--space-6);
}

.cover-card {
	display: grid;
	gap: 0.6rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-1);
	cursor: zoom-in;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.cover-card:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

.cover-card img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 233 / 290;
	object-fit: cover;
}

.cover-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-1);
	padding: 0 0.75rem 0.75rem;
	text-align: center;
}

.cover-lightbox[hidden] {
	display: none;
}

.cover-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(10 12 16 / 0.92);
	padding: 2.5rem 1rem 1.5rem;
}

.cover-lightbox figure {
	margin: 0;
	max-width: min(92vw, 640px);
	max-height: 100%;
	display: grid;
	gap: 0.5rem;
	justify-items: center;
}

.cover-lightbox img {
	max-width: 100%;
	max-height: calc(100vh - 7rem);
	width: auto;
	border-radius: 6px;
	box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
}

.cover-lightbox figcaption {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cover-lb-close,
.cover-lb-nav {
	position: fixed;
	z-index: 201;
	border: 0;
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s ease;
}

.cover-lb-close:hover,
.cover-lb-nav:hover {
	background: rgb(255 255 255 / 0.28);
}

.cover-lb-close { top: 1rem; right: 1rem; }
.cover-lb-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.cover-lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (hover: none), (pointer: coarse) {
	.cover-card:hover { transform: none; box-shadow: none; }
}


/* ---------- Βαθμολογίες: 365Scores widgets ---------- */
.standings-widgets {
	display: grid;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.standings-widgets .widget-365 {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface-1);
	min-height: 200px;
}

.widget-365-credit {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	color: var(--text-3);
}

.widget-365-credit a {
	color: inherit;
}