/**
 * Sport-S single post styling.
 * Ported from sport-s-artikkelmal-desktop.html wireframe.
 * Loaded only on is_singular('post').
 */

.single-post {
	--sps-lime: #bdd63d;
	--sps-lime-dark: #a5bc2e;
	--sps-lime-light: #d4e876;
	--sps-black: #000000;
	--sps-near-black: #101010;
	--sps-white: #ffffff;
	--sps-gray-50: #f7f7f7;
	--sps-gray-100: #eeeeee;
	--sps-gray-200: #d9d9d9;
	--sps-gray-300: #b3b3b3;
	--sps-gray-400: #8a8a8a;
	--sps-gray-500: #666666;
	--sps-gray-600: #444444;
	--sps-radius: 8px;
	--sps-radius-lg: 12px;
	--sps-max-w: 820px;
	--sps-max-w-wide: 1200px;

	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	color: var(--sps-near-black);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* ===== BREADCRUMB ===== */
body.single-post nav.breadcrumb,
.single-post .breadcrumb,
.single-post .breadcrumbs,
.single-post .ast-breadcrumbs {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--sps-max-w-wide);
	margin: 0 auto;
	padding: 1.75rem 1.5rem;
	font-size: 0.8rem;
	color: var(--sps-gray-400);
	line-height: 1.4;
}
body.single-post nav.breadcrumb a,
.single-post .breadcrumb a,
.single-post .breadcrumbs a,
.single-post .ast-breadcrumbs a {
	color: var(--sps-gray-500);
	text-decoration: none;
}
body.single-post nav.breadcrumb a:hover,
.single-post .breadcrumb a:hover,
.single-post .breadcrumbs a:hover,
.single-post .ast-breadcrumbs a:hover {
	text-decoration: underline;
	color: var(--sps-black);
}
body.single-post nav.breadcrumb span {
	margin: 0 0.4rem;
	color: var(--sps-gray-300);
}

/* ===== HERO / TITLE AREA ===== */
.single-post .entry-header,
.single-post .article-hero {
	max-width: var(--sps-max-w);
	margin: 0 auto;
	padding: 0 1.5rem 2rem;
	text-align: left;
}

.single-post .hero-category-wrap {
	max-width: var(--sps-max-w);
	margin: 0 auto;
	padding: 0;
	clear: both;
}

.single-post .entry-header .cat-links a,
.single-post .entry-header .post-categories a,
.single-post .hero-category {
	display: inline-block;
	background: var(--sps-lime);
	color: var(--sps-black);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.75rem;
	border-radius: 3px;
	margin: 0;
	text-decoration: none;
	line-height: 1.4;
}
.single-post .hero-category:hover {
	background: var(--sps-lime-dark);
	color: var(--sps-black);
}

.single-post .entry-title,
.single-post h1.entry-title,
.single-post .hero-text h1 {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--sps-black);
	margin: 0 0 1rem;
}

.single-post .entry-meta,
.single-post .hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.85rem;
	color: var(--sps-gray-500);
	margin-bottom: 1.25rem;
}
.single-post .entry-meta a,
.single-post .hero-meta a {
	color: var(--sps-near-black);
	text-decoration: none;
	font-weight: 600;
}
.single-post .entry-meta a:hover,
.single-post .hero-meta a:hover {
	text-decoration: underline;
}
.single-post .hero-meta .dot { color: var(--sps-gray-300); }

.single-post .author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sps-gray-200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--sps-gray-500);
}

.single-post .hero-intro,
.single-post .entry-content > p:first-of-type {
	font-size: 1.05rem;
	color: var(--sps-gray-600);
	line-height: 1.7;
}

.single-post .post-thumbnail,
.single-post .hero-image {
	max-width: var(--sps-max-w);
	margin: 0 auto 2rem;
	padding: 0 1.5rem;
}
.single-post .post-thumbnail img,
.single-post .hero-image img {
	width: 100%;
	height: auto;
	border-radius: var(--sps-radius-lg);
	display: block;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* ===== ARTICLE BODY ===== */
.single-post .entry-content,
.single-post .article-body {
	max-width: var(--sps-max-w);
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
}

.single-post .entry-content p,
.single-post .article-body p {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--sps-gray-600);
	margin-bottom: 1.5rem;
}

.single-post .entry-content h2,
.single-post .article-body h2 {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--sps-black);
	margin: 2.5rem 0 1rem;
	letter-spacing: -0.02em;
	text-align: left;
}

.single-post .entry-content h3,
.single-post .article-body h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--sps-near-black);
	margin: 2rem 0 0.75rem;
	text-align: left;
}

.single-post .entry-content > p a,
.single-post .entry-content > h2 a,
.single-post .entry-content > h3 a,
.single-post .entry-content > ul a,
.single-post .entry-content > ol a {
	color: var(--sps-lime-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.single-post .entry-content > p a:hover,
.single-post .entry-content > h2 a:hover,
.single-post .entry-content > h3 a:hover,
.single-post .entry-content > ul a:hover,
.single-post .entry-content > ol a:hover {
	color: var(--sps-black);
}

/* ===== INLINE TOC ===== */
.single-post .toc-box,
.single-post .wp-block-table-of-contents,
.single-post .ez-toc-v2_0_71 {
	background: var(--sps-gray-50);
	border: 1px solid var(--sps-gray-100);
	border-left: 4px solid var(--sps-lime);
	border-radius: var(--sps-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
}
.single-post .toc-box h4 {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sps-gray-400);
	margin-bottom: 0.75rem;
	font-weight: 600;
}
.single-post .toc-box ol { list-style: decimal; padding-left: 1.25rem; }
.single-post .toc-box li {
	font-size: 0.9rem;
	color: var(--sps-near-black);
	margin-bottom: 0.35rem;
	font-weight: 500;
}
.single-post .toc-box li a {
	color: var(--sps-near-black);
	text-decoration: none;
}
.single-post .toc-box li a:hover {
	color: var(--sps-lime-dark);
	text-decoration: underline;
}

/* ===== INLINE IMAGES ===== */
.single-post .entry-content .wp-block-image,
.single-post .article-image {
	margin: 2rem 0;
	border-radius: var(--sps-radius-lg);
	overflow: hidden;
}
.single-post .entry-content .wp-block-image img {
	border-radius: var(--sps-radius-lg);
	display: block;
	width: 100%;
	height: auto;
}

/* ===== INLINE CTA BUTTON ===== */
.single-post .cta-btn,
.single-post .entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--sps-lime);
	color: var(--sps-black);
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.85rem 1.75rem;
	border-radius: var(--sps-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s, transform 0.15s;
}
.single-post .cta-btn:hover,
.single-post .entry-content .wp-block-button__link:hover {
	background: var(--sps-lime-dark);
	transform: translateY(-1px);
	color: var(--sps-black);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
	.single-post .entry-title,
	.single-post h1.entry-title,
	.single-post .hero-text h1 {
		font-size: 1.8rem;
	}
	.single-post .entry-meta,
	.single-post .hero-meta {
		gap: 0.5rem;
	}
}