/*
 * Wide News: single.css
 * Single post, page, 404 και search. Μόνο tokens του base.css, καμία τιμή χρώματος εδώ.
 * Breakpoints (οι media queries δεν δέχονται var()): tablet 690px, desktop 1000px.
 * Στήλη κειμένου 890px και featured image 890x405 (μετρημένα στο audit, current-design.md §4 και §6).
 */

:root {
	--wn-column: 890px;
	--wn-featured-ratio: 890 / 405;
}

.wn-main--single,
.wn-main--page,
.wn-main--404,
.wn-main--search {
	max-width: var(--wn-column);
}

/* ---- Breadcrumbs (AIOSEO) ---- */
.wn-breadcrumbs {
	margin-bottom: var(--wn-space-4);
	color: var(--wn-color-meta);
	font-size: 13px;
	line-height: 1.5;
}

.wn-breadcrumbs a {
	color: var(--wn-color-ui);
	text-decoration: none;
}

.wn-breadcrumbs a:hover,
.wn-breadcrumbs a:focus-visible {
	color: var(--wn-color-accent);
	text-decoration: underline;
}

/* ---- Header του άρθρου ---- */
.wn-entry__header {
	margin-bottom: var(--wn-space-5);
}

.wn-entry__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-1) var(--wn-space-3);
	margin: 0 0 var(--wn-space-3);
	padding: 0;
	list-style: none;
}

.wn-entry__title {
	margin: 0 0 var(--wn-space-3);
	font-size: 25px;
	letter-spacing: -0.01em;
}

.wn-byline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-1) var(--wn-space-4);
	color: var(--wn-color-meta);
	font-size: 14px;
	line-height: 1.5;
}

.wn-byline a {
	color: var(--wn-color-ui);
	font-weight: 600;
	text-decoration: none;
}

.wn-byline a:hover,
.wn-byline a:focus-visible {
	color: var(--wn-color-accent);
	text-decoration: underline;
}

/* ---- Featured image ---- */
.wn-featured {
	margin: 0 0 var(--wn-space-5);
}

.wn-featured__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wn-featured-ratio);
	object-fit: cover;
	border-radius: var(--wn-radius-img);
}

.wn-featured--placeholder {
	overflow: hidden;
	border-radius: var(--wn-radius-img);
}

.wn-featured__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: var(--wn-featured-ratio);
}

.wn-featured__caption {
	margin-top: var(--wn-space-2);
	color: var(--wn-color-meta);
	font-size: 14px;
	line-height: 1.5;
}

/* ---- Κείμενο ---- */
.wn-content {
	overflow-wrap: break-word;
}

.wn-content > * {
	max-width: 100%;
}

.wn-content h2 {
	margin-top: 1.6em;
	font-size: 25px;
}

.wn-content h3 {
	margin-top: 1.5em;
	font-size: 22px;
}

.wn-content h4,
.wn-content h5,
.wn-content h6 {
	margin: 1.5em 0 var(--wn-space-2);
	color: var(--wn-color-heading);
	font-weight: 700;
}

.wn-content p {
	margin: 0 0 1.5em;
}

.wn-content > * + * {
	margin-top: 0;
}

.wn-content ul,
.wn-content ol {
	margin: 0 0 1.5em;
	padding-left: 1.4em;
}

.wn-content blockquote {
	margin: 0 0 1.5em;
	padding: 0 0 0 var(--wn-space-4);
	border-left: 3px solid var(--wn-color-accent);
	color: var(--wn-color-ui);
}

.wn-content figure {
	margin: 0 0 1.5em;
}

.wn-content img {
	border-radius: var(--wn-radius-img);
}

.wn-content figcaption {
	margin-top: var(--wn-space-2);
	color: var(--wn-color-meta);
	font-size: 14px;
	line-height: 1.5;
}

.wn-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.wn-content pre {
	max-width: 100%;
	overflow-x: auto;
}

/* ---- Embeds: αναλογία 16/9, χωρίς οριζόντιο scroll ---- */
.wn-content iframe {
	max-width: 100%;
	border: 0;
}

.wp-block-embed {
	margin: 0 0 1.5em;
}

.wp-block-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-embed.is-provider-spotify iframe {
	aspect-ratio: auto;
	height: 352px;
}

.wp-block-embed.is-provider-soundcloud iframe {
	aspect-ratio: auto;
	height: 300px;
}

.wp-block-embed.is-provider-twitter iframe,
.wp-block-embed.is-provider-instagram iframe,
.wp-block-embed.is-provider-facebook iframe,
.wp-block-embed.is-provider-tiktok iframe {
	aspect-ratio: auto;
	min-height: 400px;
}

.wn-content iframe[src*="youtube"],
.wn-content iframe[src*="youtu.be"],
.wn-content iframe[src*="vimeo"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-embed__wrapper {
	max-width: 100%;
	overflow: hidden;
}

/* ---- Σελιδοποίηση άρθρου ---- */
.wn-page-links {
	margin: 0 0 var(--wn-space-5);
	font-weight: 600;
}

.wn-page-links__title {
	margin-right: var(--wn-space-2);
}

/* ---- Share ---- */
.wn-entry__footer {
	margin-top: var(--wn-space-6);
}

.wn-share__title {
	display: block;
	margin-bottom: var(--wn-space-2);
	color: var(--wn-color-meta);
	font-size: var(--wn-text-meta-size);
	font-weight: 700;
	letter-spacing: var(--wn-text-meta-spacing);
	text-transform: uppercase;
}

.wn-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-share__link {
	display: inline-block;
	padding: var(--wn-space-2) var(--wn-space-3);
	border: 1px solid var(--wn-color-border);
	border-radius: var(--wn-radius);
	color: var(--wn-color-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: background-color var(--wn-transition), color var(--wn-transition);
}

.wn-share__link:hover,
.wn-share__link:focus-visible {
	background: var(--wn-color-heading);
	color: var(--wn-color-surface);
}

/* ---- Επόμενο / προηγούμενο άρθρο ---- */
.wn-post-nav {
	margin-top: var(--wn-space-6);
	padding-top: var(--wn-space-4);
	border-top: 1px solid var(--wn-color-border-soft);
}

.wn-post-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wn-space-4);
}

.wn-post-nav .nav-previous,
.wn-post-nav .nav-next {
	flex: 1 1 250px;
	max-width: 100%;
}

.wn-post-nav .nav-next {
	text-align: right;
}

.wn-post-nav a {
	display: block;
	text-decoration: none;
}

.wn-post-nav__title {
	display: block;
	color: var(--wn-color-heading-alt);
	font-family: var(--wn-font-heading);
	font-size: 18px;
	font-weight: 900;
	line-height: 1.3;
}

.wn-post-nav a:hover .wn-post-nav__title,
.wn-post-nav a:focus-visible .wn-post-nav__title {
	color: var(--wn-color-accent);
}

/* ---- Σχετικά άρθρα ---- */
.wn-related {
	margin-top: var(--wn-space-6);
}

.wn-related__title {
	font-size: 22px;
}

.wn-related__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wn-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-related__link {
	display: block;
	text-decoration: none;
}

.wn-related__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--wn-radius-img);
}

.wn-related__post-title {
	margin: var(--wn-space-2) 0 var(--wn-space-1);
	font-size: 16px;
	line-height: 1.3;
}

.wn-related__link:hover .wn-related__post-title,
.wn-related__link:focus-visible .wn-related__post-title {
	color: var(--wn-color-accent);
}

/* ---- 404 και search ---- */
.wn-notfound {
	text-align: center;
}

.wn-notfound .wn-search-form {
	justify-content: center;
}

.wn-notfound__recent {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-notfound__recent li + li {
	margin-top: var(--wn-space-2);
}

.wn-archive-header {
	margin-bottom: var(--wn-space-5);
}

.wn-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-2);
	max-width: 540px;
	margin: var(--wn-space-4) 0;
}

.wn-search-form__field {
	flex: 1 1 220px;
	min-width: 0;
	padding: var(--wn-space-3);
	border: 2px solid var(--wn-color-border);
	border-radius: var(--wn-radius);
	background: var(--wn-color-surface);
	color: var(--wn-color-text);
	font-family: var(--wn-font-body);
	font-size: 16px;
}

.wn-result {
	padding: var(--wn-space-4) 0;
	border-bottom: 1px solid var(--wn-color-border-soft);
}

.wn-result__title {
	margin: 0 0 var(--wn-space-1);
	font-size: 20px;
	line-height: 1.3;
}

.wn-result__title a {
	color: var(--wn-color-heading);
	text-decoration: none;
}

.wn-result__title a:hover,
.wn-result__title a:focus-visible {
	color: var(--wn-color-accent);
}

.wn-result__excerpt p {
	margin: var(--wn-space-2) 0 0;
}

.wn-search-empty {
	margin: var(--wn-space-4) 0;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-2);
	margin-top: var(--wn-space-5);
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: var(--wn-space-2) var(--wn-space-3);
	border-radius: var(--wn-radius-img);
	color: var(--wn-color-ui);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--wn-color-accent);
	color: var(--wn-color-surface);
}

/* ---- Tablet (690px) ---- */
@media (min-width: 690px) {
	.wn-entry__title {
		font-size: 30px;
	}

	.wn-content h2 {
		font-size: 30px;
	}

	.wn-content h3 {
		font-size: 25px;
	}

	.wn-related__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- Desktop (1000px) ---- */
@media (min-width: 1000px) {
	.wn-entry__title {
		font-size: 40px;
		letter-spacing: -0.4px;
	}

	.wn-content h2 {
		font-size: 35px;
		letter-spacing: -0.35px;
	}

	.wn-content h3 {
		font-size: 30px;
		letter-spacing: -0.3px;
	}
}