/*
 * Warm article & video redesign layer.
 *
 * Loaded by ls-visual-warm-preview.php AFTER warm-home.css (and the mobile
 * layer) for single posts and single archive_video pages. It is the single
 * source of truth for the reading experience on those two templates, so it can
 * out-cascade the older article rules in warm-home.css.
 *
 * Scope note: the archive_video template adds body class "single-post" on top
 * of WordPress's "single-archive_video", so `.single-post` selectors style BOTH
 * the article and the video page; `.single-archive_video` selectors are the
 * video-only refinements (player stage, ordering).
 *
 * Goals (from the 12 Jun 2026 redesign review):
 *  - One modular Arabic type scale so an in-body H2 can never rival the page H1.
 *  - A single spacing rhythm shared by both page types (the article hero used
 *    101px of top padding, the video hero 24px).
 *  - A balanced, centered hero: the video player becomes a clean 16:9 stage and
 *    the title/kicker/meta sit tidily below instead of crowding beside it.
 *  - A modern related-topics section: responsive card grid (never the cramped
 *    fixed 3-up on tablet), warm-ink titles (were off-palette blue), a section
 *    kicker and a quiet read/watch affordance.
 */

/* ================================================================== */
/* Design tokens (scoped to the two templates).                       */
/* ================================================================== */

body.ls-visual-warm.single-post {
	/* Fluid modular type scale — clear steps between each level.
	   H1 deliberately restrained (was up to 47px) for an elegant, calm header. */
	--wa-h1: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
	--wa-h2: clamp(1.3rem, 1.1rem + 0.85vw, 1.6rem);
	--wa-h3: clamp(1.15rem, 1.03rem + 0.5vw, 1.32rem);
	--wa-lead: clamp(1.12rem, 1.04rem + 0.36vw, 1.32rem);
	--wa-body: clamp(1.04rem, 0.99rem + 0.24vw, 1.16rem);
	--wa-kicker: 0.82rem;
	--wa-meta: 0.92rem;

	/* Reading + media columns. */
	--wa-text: 730px;
	--wa-media: 880px;
	--wa-wide: 1180px;

	/* Spacing scale (one rhythm everywhere). */
	--wa-gap-xs: 0.5rem;
	--wa-gap-sm: 0.85rem;
	--wa-gap-md: 1.4rem;
	--wa-gap-lg: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
	--wa-section-y: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);

	/* Header clearance: the inner-page header is fixed (~64px). */
	--wa-header-clear: clamp(5rem, 3.6rem + 4vw, 7rem);

	/* Palette aliases (fall back to the warm globals). */
	--wa-ink: var(--ls-warm-ink, #071323);
	--wa-ink-soft: rgba(7, 19, 35, 0.72);
	--wa-ink-mute: rgba(7, 19, 35, 0.58);
	--wa-red: var(--ls-warm-red-deep, #9f2228);
	--wa-line: rgba(183, 128, 42, 0.24);
	--wa-card: rgba(255, 250, 242, 0.96);
}

/* ================================================================== */
/* Page shell + section rhythm.                                       */
/* ================================================================== */

body.ls-visual-warm.single-post .ls-post-hero,
body.ls-visual-warm.single-post .ls-post-content-section,
body.ls-visual-warm.single-post .ls-post-related {
	padding-inline: clamp(1.1rem, 0.4rem + 3vw, 4rem) !important;
}

/* ------------------------------------------------------------------ */
/* Hero — shared, centered, balanced for both article and video.     */
/* ------------------------------------------------------------------ */

body.ls-visual-warm.single-post .ls-post-hero {
	padding-block: var(--wa-header-clear) var(--wa-section-y) !important;
}

	body.ls-visual-warm.single-post .ls-post-hero__inner {
	display: flex !important;
	flex-direction: column;
	align-items: center !important;
	gap: var(--wa-gap-md);
	width: 100%;
	max-width: var(--wa-wide) !important;
	margin-inline: auto !important;
	text-align: center !important;
}

/* Kicker as a calm pill. */
body.ls-visual-warm.single-post .ls-post-hero__kicker {
	order: 1;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.32rem 0.9rem;
	border: 1px solid rgba(183, 128, 42, 0.42);
	border-radius: 999px;
	background: rgba(255, 246, 226, 0.7);
	color: var(--wa-red) !important;
	font-size: var(--wa-kicker) !important;
	font-weight: 800 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.01em;
}

body.ls-visual-warm.single-post .ls-post-hero__kicker a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Page title — the loudest type on the page, with comfortable measure. */
body.ls-visual-warm.single-post .ls-post-hero__title,
body.ls-visual-warm.single-post .ls-post-hero__title h1 {
	order: 2;
	width: 100%;
	max-width: min(40ch, 100%) !important;
	margin: 0 !important;
	color: var(--wa-ink) !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-h1) !important;
	font-weight: 800 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-wrap: balance;
}

/* Publication metadata is hidden on the public archive interface. */
body.ls-visual-warm.single-post .ls-post-hero__meta {
	display: none !important;
}

/* Hero media — refined frame, consistent 16:9, shared max width. */
body.ls-visual-warm.single-post .ls-post-hero__media {
	order: 4;
	width: 100% !important;
	max-width: var(--wa-media) !important;
	margin: var(--wa-gap-xs) auto 0 !important;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--wa-line) !important;
	border-radius: 14px !important;
	box-shadow:
		0 30px 70px -28px rgba(28, 16, 4, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
}

body.ls-visual-warm.single-post .ls-post-hero__media img {
	filter: saturate(1.06) brightness(1.03) contrast(1.02) !important;
}

/* ------------------------------------------------------------------ */
/* Video-only hero: the player is the hero stage.                     */
/* ------------------------------------------------------------------ */

body.ls-visual-warm.single-archive_video .ls-post-hero__inner {
	/* media → kicker → title → meta, all centered. */
	align-items: center !important;
}

body.ls-visual-warm.single-archive_video .ls-post-hero__media {
	order: 0 !important;
	margin-top: 0 !important;
	margin-bottom: var(--wa-gap-sm) !important;
	box-shadow:
		0 36px 80px -30px rgba(7, 19, 35, 0.6),
		0 0 0 1px rgba(245, 215, 125, 0.22) inset !important;
}

body.ls-visual-warm.single-archive_video .ls-post-hero__kicker { order: 1 !important; }
body.ls-visual-warm.single-archive_video .ls-post-hero__title  { order: 2 !important; }
body.ls-visual-warm.single-archive_video .ls-post-hero__meta   { order: 3 !important; }

/* Reset the older right-offset / oversized video title from warm-home.css. */
body.ls-visual-warm.single-archive_video .ls-post-hero__title,
body.ls-visual-warm.single-archive_video .ls-post-hero__title h1 {
	max-width: min(40ch, 100%) !important;
	font-size: var(--wa-h1) !important;
	text-align: center !important;
}

body.ls-visual-warm.single-archive_video .ls-post-hero__media--video {
	border-radius: 14px !important;
	overflow: hidden;
}

body.ls-visual-warm.single-archive_video .ls-post-hero__media--video iframe,
body.ls-visual-warm.single-archive_video .ls-post-hero__media--video video {
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* ================================================================== */
/* Article body — one comfortable reading column + tamed headings.    */
/* ================================================================== */

body.ls-visual-warm.single-post .ls-post-content-section {
	padding-block: var(--wa-section-y) !important;
}

body.ls-visual-warm.single-post .ls-post-prose {
	width: 100% !important;
	max-width: var(--wa-text) !important;
	margin-inline: auto !important;
	color: var(--wa-ink-soft) !important;
	font-family: "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-body) !important;
	line-height: 2.0 !important;
	text-align: start !important;
}

body.ls-visual-warm.single-post .ls-post-prose > * {
	margin-block: 0 var(--wa-gap-md) !important;
}

/* Optional lead paragraph (first paragraph) reads a touch larger. */
body.ls-visual-warm.single-post .ls-post-prose > p:first-of-type {
	color: var(--wa-ink) !important;
	font-size: var(--wa-lead) !important;
	line-height: 1.95 !important;
}

/* In-body headings now sit clearly BELOW the page title. */
body.ls-visual-warm.single-post .ls-post-prose h2 {
	margin-block: 2.2rem 0.9rem !important;
	color: var(--wa-ink) !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-h2) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

body.ls-visual-warm.single-post .ls-post-prose h3 {
	margin-block: 1.8rem 0.7rem !important;
	color: var(--wa-ink) !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-h3) !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
}

/* Subtle gold tick before headings for editorial rhythm. */
body.ls-visual-warm.single-post .ls-post-prose h2::before {
	content: "";
	display: inline-block;
	inline-size: 1.5rem;
	block-size: 0.18rem;
	margin-inline-end: 0.6rem;
	vertical-align: middle;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ls-warm-gold-strong, #f5d77d), var(--ls-warm-red, #d23a34));
}

body.ls-visual-warm.single-post .ls-post-prose a {
	color: var(--wa-red) !important;
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}

body.ls-visual-warm.single-post .ls-post-prose blockquote {
	margin-inline: 0 !important;
	padding: 0.4rem 1.2rem !important;
	border-inline-start: 3px solid var(--ls-warm-red, #d23a34) !important;
	color: var(--wa-ink) !important;
	font-weight: 600;
}

body.ls-visual-warm.single-post .ls-post-prose img,
body.ls-visual-warm.single-post .ls-post-prose iframe,
body.ls-visual-warm.single-post .ls-post-prose video {
	max-width: 100% !important;
	border-radius: 12px !important;
	box-shadow: 0 20px 48px -22px rgba(28, 16, 4, 0.4) !important;
}

/* Video excerpt + transcript aside + tag chips share the reading column. */
body.ls-visual-warm.single-post .ls-post-prose,
body.ls-visual-warm.single-post .ls-post-tags,
body.ls-visual-warm.single-archive_video .ls-post-tags,
body.ls-visual-warm.single-archive_video .vaa-video-resources {
	width: 100% !important;
	max-width: var(--wa-text) !important;
	margin-inline: auto !important;
}

body.ls-visual-warm.single-post .ls-post-tags {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin-block-start: 2rem !important;
	padding-block-start: 1.4rem !important;
	border-block-start: 1px solid var(--wa-line) !important;
}

/* Hide the whole block (and its border + label) when the post has no terms. */
body.ls-visual-warm.single-post .ls-post-tags:not(:has(a)) {
	display: none !important;
}

/* Small leading "tags" label. */
body.ls-visual-warm.single-post .ls-post-tags::before {
	content: "الوسوم";
	display: inline-flex;
	align-items: center;
	margin-inline-end: 0.15rem;
	color: var(--wa-ink-mute);
	font-family: "IBM Plex Sans Arabic", sans-serif;
	font-size: 0.82rem;
	font-weight: 800;
}

/* Article post-terms wrapper: lay the links out as a pill row and zero out the
   "الوسوم: " prefix + " · " separator text nodes (font-size restored on links). */
body.ls-visual-warm.single-post .ls-post-tags .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0;
	font-size: 0;
}

/* The pill itself — shared by article post-terms links and video chip links. */
body.ls-visual-warm.single-post .ls-post-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.32rem 0.9rem !important;
	border: 1px solid rgba(183, 128, 42, 0.34) !important;
	border-radius: 999px;
	background: rgba(255, 250, 242, 0.78) !important;
	color: var(--wa-red) !important;
	font-family: "IBM Plex Sans Arabic", sans-serif !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

body.ls-visual-warm.single-post .ls-post-tags a:hover,
body.ls-visual-warm.single-post .ls-post-tags a:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(245, 215, 125, 0.9) !important;
	background: linear-gradient(135deg, #f5d77d, #fff0bf) !important;
	color: var(--wa-ink) !important;
}

/* ================================================================== */
/* Related "موضوعات مرشحة" — modern responsive card grid.             */
/* ================================================================== */

body.ls-visual-warm.single-post .ls-post-related {
	padding-block: var(--wa-section-y) !important;
	background:
		radial-gradient(900px 520px at 92% 0%, rgba(245, 215, 125, 0.14), transparent 60%),
		linear-gradient(180deg, #f8efe1 0%, #f3e2cd 100%) !important;
}

body.ls-visual-warm.single-post .ls-post-related__heading {
	width: 100% !important;
	max-width: var(--wa-wide) !important;
	margin: 0 auto var(--wa-gap-lg) !important;
	color: var(--wa-ink) !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-h2) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	text-align: start !important;
}

body.ls-visual-warm.single-post .ls-post-related__heading::after {
	content: "";
	display: block;
	inline-size: 3.2rem;
	block-size: 0.2rem;
	margin-block-start: 0.55rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ls-warm-gold-strong, #f5d77d), var(--ls-warm-red, #d23a34));
}

/* Flex-wrap (not auto-fill grid) so 2 related items stay centered and balanced
   instead of hugging one edge with empty tracks; 3 items fill a clean row. */
body.ls-visual-warm.single-post .ls-post-related__grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.6rem) !important;
	width: 100% !important;
	max-width: var(--wa-wide) !important;
	margin-inline: auto !important;
}

body.ls-visual-warm.single-post .ls-post-related__card {
	flex: 1 1 300px;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wa-line) !important;
	border-radius: 16px !important;
	background: var(--wa-card) !important;
	box-shadow: 0 18px 40px -26px rgba(28, 16, 4, 0.4) !important;
	transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease !important;
}

body.ls-visual-warm.single-post .ls-post-related__card:hover,
body.ls-visual-warm.single-post .ls-post-related__card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(210, 58, 52, 0.4) !important;
	box-shadow: 0 30px 60px -28px rgba(126, 29, 35, 0.45) !important;
}

body.ls-visual-warm.single-post .ls-post-related__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		radial-gradient(220px 140px at 15% 0%, rgba(245, 215, 125, 0.26), transparent 64%),
		linear-gradient(145deg, rgba(255, 250, 240, 0.92), rgba(239, 225, 202, 0.84)) !important;
}

body.ls-visual-warm.single-post .ls-post-related__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	filter: saturate(1.06) brightness(1.03) contrast(1.02);
	transition: transform 0.4s ease;
}

body.ls-visual-warm.single-post .ls-post-related__card:hover .ls-post-related__media img,
body.ls-visual-warm.single-post .ls-post-related__card:focus-within .ls-post-related__media img {
	transform: scale(1.05);
}

body.ls-visual-warm.single-post .ls-post-related__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.05rem 1.15rem 1.25rem !important;
}

body.ls-visual-warm.single-post .ls-post-related__date {
	display: none !important;
}

body.ls-visual-warm.single-post .ls-post-related__title {
	margin: 0 !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: 1.08rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

/* Warm ink, not the off-palette blue. */
body.ls-visual-warm.single-post .ls-post-related__title a {
	color: var(--wa-ink) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

body.ls-visual-warm.single-post .ls-post-related__card:hover .ls-post-related__title a {
	color: var(--wa-red) !important;
}

/* Quiet "read more" affordance appended after the title. */
body.ls-visual-warm.single-post .ls-post-related__body::after {
	content: "اقرأ المزيد ←";
	margin-block-start: 0.35rem;
	color: var(--wa-ink-mute);
	font-family: "IBM Plex Sans Arabic", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	transition: color 0.2s ease, transform 0.2s ease;
}

body.ls-visual-warm.single-archive_video .ls-post-related__body::after {
	content: "شاهد ←";
}

body.ls-visual-warm.single-post .ls-post-related__card:hover .ls-post-related__body::after {
	color: var(--wa-red);
}

/* ================================================================== */
/* Tablet & phone refinements.                                        */
/* ================================================================== */

@media (max-width: 768px) {
	body.ls-visual-warm.single-post .ls-post-hero__inner {
		gap: var(--wa-gap-sm);
	}

	body.ls-visual-warm.single-post .ls-post-related__heading {
		text-align: center !important;
	}

	body.ls-visual-warm.single-post .ls-post-related__heading::after {
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	body.ls-visual-warm.single-post .ls-post-hero__title,
	body.ls-visual-warm.single-post .ls-post-hero__title h1 {
		max-width: 100% !important;
	}

	body.ls-visual-warm.single-post .ls-post-related__grid {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   حل جذري: تباعُد أسطر عناوين كل المقالات (منع تداخل الأسطر)
   يُحمَّل هذا الملف أخيراً على صفحات المقال المفرد، وهذه الكتلة
   في نهايته وبأعلى أولوية — فتتجاوز أي قاعدة line-height في أي
   ملف آخر (theme.css / final-slides.css / warm-home*.css).
   يشمل: المقالات وفيديوهات الأرشيف، سطح المكتب والموبايل.
   ============================================================ */
body.ls-visual-warm.single-post .ls-post-hero__title,
body.ls-visual-warm.single-post .ls-post-hero__title h1,
body.ls-visual-warm.single-archive_video .ls-post-hero__title,
body.ls-visual-warm.single-archive_video .ls-post-hero__title h1,
body.ls-visual-warm.vaa-single-video-post .ls-post-hero__title,
body.ls-visual-warm.vaa-single-video-post .ls-post-hero__title h1 {
	line-height: 1.45 !important;
	overflow-wrap: break-word;
	text-wrap: balance;
}