/* =============================================================================
   RESIDENCES — Single Post Template (Living Guide)
   v1.0 — Editorial layout for native WordPress posts
   =============================================================================
   File:    wp-content/themes/<child-theme>/assets/css/single-post.css
   Loaded:  is_singular('post')   via wp_enqueue_scripts (priority 20)
            dependency: residences-news-archive (load order)
   Scope:   body.single-post       (Astra-safe specificity, auto-added by WP)

   Section index
     1.  Design tokens
     2.  Astra / Elementor resets
     3.  Outer container
     4.  Breadcrumbs
     5.  Header block (eyebrow · H1 · byline)
     6.  Hero image
     7.  Main 2-column layout
     8.  Reading column — body typography
         8a. Paragraphs + lead
         8b. Headings (H2, H3, H4)
         8c. Lists
         8d. Inline links + emphasis
         8e. Blockquote / pull quote
         8f. Images + captions
     9.  Mid-content blocks
         9a. ACF pull_quote wrapper
         9b. Legal disclaimer block
     10. Sidebar
         10a. Table of Contents (TOC)
         10b. Brand box
     11. Mobile TOC (collapsible)
     12. Related Projects section
     13. Related Posts ("Διαβάστε επίσης")
     14. Newsletter section
     15. Section heading shared styles
     16. Empty-state hiding (body.sp-no-related-projects)
     17. Focus-visible (a11y)
     18. Responsive — tablet (≤1023px)
     19. Responsive — mobile (≤640px)
     20. Print
     21. Reduced motion
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
body.single-post {
	--c-ivory:          #FAF7F2;
	--c-bronze:         #B8976A;
	--c-bronze-soft:    rgba(184, 151, 106, 0.4);
	--c-bronze-text:    #9A7D4F;
	--c-charcoal:       #2C2C2C;
	--c-sand:           #F0EAE0;
	--c-stone:          #E6E1D8;
	--c-muted:          rgba(44, 44, 44, 0.72);
	--c-line:           rgba(44, 44, 44, 0.08);
	--c-white:          #FFFFFF;

	--content-inset:    24px;
	--reading-width:    680px;
	--sidebar-width:    300px;
	--main-max:         1040px;
	--related-max:      1320px;
	--gap-cols:         60px;

	--sticky-top:       100px;

	--ff-serif:         "EB Garamond", Georgia, "Times New Roman", serif;
	--ff-sans:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--ease-out:         cubic-bezier(.22, 1, .36, 1);
}

body.single-post ::selection {
	background: var(--c-bronze);
	color: var(--c-white);
}


/* ---------------------------------------------------------------------------
   2. ASTRA / ELEMENTOR RESETS
   --------------------------------------------------------------------------- */
body.single-post .ast-archive-description,
body.single-post .entry-header,
body.single-post .ast-single-post-header,
body.single-post .entry-header .entry-title,
body.single-post .ast-author-details,
body.single-post .post-navigation {
	display: none !important;
}

body.single-post #primary,
body.single-post .site-content,
body.single-post .ast-container,
body.single-post .site-main,
body.single-post .ast-page-builder-template .entry-content {
	max-width: 100%;
	padding: 0;
	margin: 0;
}


/* ---------------------------------------------------------------------------
   3. OUTER CONTAINER  (#single-post via Elementor CSS ID OR body.single-post)
   --------------------------------------------------------------------------- */
body.single-post #single-post,
body.single-post .sp-article-wrap {
	background: var(--c-ivory);
	padding: 80px 0 120px;
	font-family: var(--ff-sans);
	color: var(--c-charcoal);
}


/* ---------------------------------------------------------------------------
   4. BREADCRUMBS
   --------------------------------------------------------------------------- */
body.single-post .sp-breadcrumbs {
	max-width: var(--main-max);
	margin: 0 auto 40px;
	padding: 0 var(--content-inset);
	font-family: var(--ff-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

body.single-post .sp-breadcrumbs a {
	color: var(--c-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}

body.single-post .sp-breadcrumbs a:hover {
	color: var(--c-bronze);
	border-color: var(--c-bronze-soft);
}

body.single-post .sp-breadcrumbs .breadcrumb_last,
body.single-post .sp-breadcrumbs [aria-current="page"] {
	color: var(--c-charcoal);
}


/* ---------------------------------------------------------------------------
   5. HEADER BLOCK  (eyebrow · H1 · byline)
   --------------------------------------------------------------------------- */
body.single-post .sp-header {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--content-inset);
	text-align: center;
}

/* Eyebrow */
body.single-post .sp-eyebrow {
	display: block;
	font-family: var(--ff-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-bronze);
	margin: 0 0 18px;
}

/* H1 — supports both .sp-title wrapper and direct h1 */
body.single-post .sp-title,
body.single-post .sp-title h1,
body.single-post .sp-header h1 {
	font-family: var(--ff-serif);
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.12;
	font-weight: 500;
	color: var(--c-charcoal);
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}

/* Byline row */
body.single-post .sp-byline {
	font-family: var(--ff-sans);
	font-size: 13px;
	color: var(--c-muted);
	letter-spacing: 0.04em;
	margin-top: 20px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
	align-items: center;
}

body.single-post .sp-byline-item {
	display: inline-block;
}

body.single-post .sp-byline-item + .sp-byline-item::before {
	content: "·";
	margin: 0 12px;
	color: var(--c-bronze);
	font-weight: 500;
}


/* ---------------------------------------------------------------------------
   6. HERO IMAGE
   --------------------------------------------------------------------------- */
body.single-post .sp-hero {
	max-width: var(--main-max);
	margin: 64px auto 80px;
	padding: 0 var(--content-inset);
}

body.single-post .sp-hero img,
body.single-post .sp-hero .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: cover;
	aspect-ratio: 16 / 9;
	border-radius: 2px;
}

body.single-post .sp-hero .elementor-widget-image,
body.single-post .sp-hero .elementor-widget-image .elementor-widget-container,
body.single-post .sp-hero .elementor-widget-image figure {
	margin: 0;
	padding: 0;
}


/* ---------------------------------------------------------------------------
   7. MAIN 2-COLUMN LAYOUT
   --------------------------------------------------------------------------- */
body.single-post .sp-main {
	max-width: var(--main-max);
	margin: 0 auto;
	padding: 0 var(--content-inset);
	display: flex;
	flex-direction: row;
	gap: var(--gap-cols);
	align-items: flex-start;
}

body.single-post .sp-content {
	flex: 1 1 auto;
	max-width: var(--reading-width);
	width: 100%;
	min-width: 0;
}


/* ---------------------------------------------------------------------------
   8. READING COLUMN — BODY TYPOGRAPHY
   --------------------------------------------------------------------------- */

/* 8a. Paragraphs + lead */
body.single-post .sp-content .elementor-widget-theme-post-content p,
body.single-post .sp-content .elementor-widget-text-editor p {
	font-family: var(--ff-sans);
	font-size: 17px;
	line-height: 1.75;
	color: var(--c-charcoal);
	margin: 0 0 24px;
	font-weight: 400;
}

/* Lead paragraph — first <p> in content */
body.single-post .sp-content .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type,
body.single-post .sp-content .elementor-widget-theme-post-content .elementor-widget-container > p:first-of-type {
	font-size: 20px;
	line-height: 1.6;
	color: var(--c-charcoal);
	font-weight: 400;
	margin-bottom: 40px;
}

/* 8b. Headings (in post content) */
body.single-post .sp-content .elementor-widget-theme-post-content h2 {
	font-family: var(--ff-serif);
	font-size: clamp(28px, 3.2vw, 36px);
	line-height: 1.2;
	font-weight: 500;
	color: var(--c-charcoal);
	margin: 64px 0 20px;
	letter-spacing: -0.005em;
	scroll-margin-top: var(--sticky-top);
}

body.single-post .sp-content .elementor-widget-theme-post-content h3 {
	font-family: var(--ff-serif);
	font-size: clamp(22px, 2.4vw, 26px);
	line-height: 1.3;
	font-weight: 500;
	color: var(--c-charcoal);
	margin: 40px 0 16px;
	scroll-margin-top: var(--sticky-top);
}

body.single-post .sp-content .elementor-widget-theme-post-content h4 {
	font-family: var(--ff-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-bronze);
	margin: 32px 0 12px;
}

/* 8c. Lists */
body.single-post .sp-content .elementor-widget-theme-post-content ul,
body.single-post .sp-content .elementor-widget-theme-post-content ol {
	font-family: var(--ff-sans);
	font-size: 17px;
	line-height: 1.75;
	color: var(--c-charcoal);
	margin: 0 0 28px;
	padding-left: 0;
	list-style: none;
}

body.single-post .sp-content .elementor-widget-theme-post-content ul li,
body.single-post .sp-content .elementor-widget-theme-post-content ol li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
}

body.single-post .sp-content .elementor-widget-theme-post-content ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 13px;
	width: 8px;
	height: 1px;
	background: var(--c-bronze);
}

body.single-post .sp-content .elementor-widget-theme-post-content ol {
	counter-reset: sp-ol;
}

body.single-post .sp-content .elementor-widget-theme-post-content ol li {
	counter-increment: sp-ol;
}

body.single-post .sp-content .elementor-widget-theme-post-content ol li::before {
	content: counter(sp-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--c-bronze);
	font-weight: 500;
	font-feature-settings: "tnum";
	min-width: 24px;
}

/* Nested lists */
body.single-post .sp-content .elementor-widget-theme-post-content ul ul,
body.single-post .sp-content .elementor-widget-theme-post-content ol ol,
body.single-post .sp-content .elementor-widget-theme-post-content ul ol,
body.single-post .sp-content .elementor-widget-theme-post-content ol ul {
	margin: 12px 0 0;
}

/* 8d. Inline links + emphasis */
body.single-post .sp-content .elementor-widget-theme-post-content a {
	color: var(--c-charcoal);
	text-decoration: underline;
	text-decoration-color: var(--c-bronze-soft);
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.3s ease, color 0.3s ease;
}

body.single-post .sp-content .elementor-widget-theme-post-content a:hover {
	color: var(--c-bronze);
	text-decoration-color: var(--c-bronze);
}

body.single-post .sp-content .elementor-widget-theme-post-content strong {
	font-weight: 600;
	color: var(--c-charcoal);
}

body.single-post .sp-content .elementor-widget-theme-post-content em {
	font-style: italic;
}

/* 8e. Blockquote (Gutenberg quote block) */
body.single-post .sp-content .elementor-widget-theme-post-content blockquote {
	margin: 48px 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--c-bronze);
}

body.single-post .sp-content .elementor-widget-theme-post-content blockquote p {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.45;
	color: var(--c-charcoal);
	margin: 0 0 12px;
}

body.single-post .sp-content .elementor-widget-theme-post-content blockquote cite {
	display: block;
	font-family: var(--ff-sans);
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* 8f. Images in content */
body.single-post .sp-content .elementor-widget-theme-post-content img {
	display: block;
	width: 100%;
	height: auto;
	margin: 32px 0;
	border-radius: 2px;
}

body.single-post .sp-content .elementor-widget-theme-post-content .wp-caption-text,
body.single-post .sp-content .elementor-widget-theme-post-content figcaption {
	font-family: var(--ff-sans);
	font-size: 13px;
	font-style: italic;
	color: var(--c-muted);
	margin-top: -16px;
	margin-bottom: 32px;
	text-align: center;
}

/* HR separator */
body.single-post .sp-content .elementor-widget-theme-post-content hr {
	border: 0;
	height: 1px;
	background: var(--c-line);
	margin: 56px auto;
	max-width: 120px;
}


/* ---------------------------------------------------------------------------
   9. MID-CONTENT BLOCKS
   --------------------------------------------------------------------------- */

/* 9a. ACF pull_quote wrapper */
body.single-post .sp-pullquote-wrapper {
	margin: 48px 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--c-bronze);
}

body.single-post .sp-pullquote-wrapper .elementor-widget-container,
body.single-post .sp-pullquote-wrapper p {
	font-family: var(--ff-serif) !important;
	font-style: italic;
	font-size: 24px !important;
	line-height: 1.45 !important;
	color: var(--c-charcoal) !important;
	margin: 0 !important;
}

/* 9b. Legal disclaimer block */
body.single-post .sp-disclaimer {
	margin: 56px 0 0;
	padding: 24px 28px;
	background: var(--c-sand);
	border-left: 3px solid var(--c-bronze);
	border-radius: 0 2px 2px 0;
}

body.single-post .sp-disclaimer .elementor-widget-container,
body.single-post .sp-disclaimer p {
	font-family: var(--ff-sans) !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--c-muted) !important;
	margin: 0 !important;
	font-style: italic;
}


/* ---------------------------------------------------------------------------
   10. SIDEBAR
   --------------------------------------------------------------------------- */
body.single-post .sp-sidebar {
	position: sticky;
	top: var(--sticky-top);
	width: var(--sidebar-width);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* 10a. Table of Contents */
body.single-post .sp-toc {
	padding: 28px 24px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 2px;
}

body.single-post .sp-toc-label {
	display: block;
	font-family: var(--ff-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-bronze);
	margin-bottom: 18px;
}

body.single-post .sp-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: sp-toc;
}

body.single-post .sp-toc-list li {
	counter-increment: sp-toc;
	margin-bottom: 14px;
	padding-left: 28px;
	position: relative;
	line-height: 1.5;
}

body.single-post .sp-toc-list li:last-child {
	margin-bottom: 0;
}

body.single-post .sp-toc-list li::before {
	content: counter(sp-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--ff-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--c-bronze-soft);
	font-feature-settings: "tnum";
	transition: color 0.3s ease;
}

body.single-post .sp-toc-list li.is-active::before {
	color: var(--c-bronze);
}

body.single-post .sp-toc-list a {
	font-family: var(--ff-serif);
	font-size: 15px;
	color: var(--c-muted);
	text-decoration: none;
	transition: color 0.3s ease;
	display: block;
}

body.single-post .sp-toc-list a:hover,
body.single-post .sp-toc-list li.is-active a {
	color: var(--c-charcoal);
}

/* 10b. Brand box */
body.single-post .sp-brand-box {
	padding: 32px 28px;
	background: var(--c-charcoal);
	color: var(--c-white);
	border-radius: 2px;
}

body.single-post .sp-brand-eyebrow {
	display: block;
	font-family: var(--ff-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-bronze);
	margin-bottom: 14px;
}

body.single-post .sp-brand-heading {
	font-family: var(--ff-serif);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--c-white);
	margin: 0 0 14px;
}

body.single-post .sp-brand-text {
	font-family: var(--ff-sans);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 22px;
}

body.single-post .sp-brand-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-bronze);
	text-decoration: none;
	transition: color 0.3s ease, gap 0.3s ease;
}

body.single-post .sp-brand-cta:hover {
	color: var(--c-white);
	gap: 10px;
}


/* ---------------------------------------------------------------------------
   11. MOBILE TOC (collapsible <details>)
   --------------------------------------------------------------------------- */
body.single-post .sp-toc-mobile-wrapper {
	display: none;
}

body.single-post .sp-toc-mobile {
	margin: 0 0 40px;
	padding: 0;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 2px;
}

body.single-post .sp-toc-mobile summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 24px;
	font-family: var(--ff-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-bronze);
	position: relative;
	user-select: none;
}

body.single-post .sp-toc-mobile summary::-webkit-details-marker {
	display: none;
}

body.single-post .sp-toc-mobile summary::after {
	content: "";
	position: absolute;
	right: 26px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--c-bronze);
	border-bottom: 1px solid var(--c-bronze);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.3s ease;
}

body.single-post .sp-toc-mobile[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

body.single-post .sp-toc-mobile .sp-toc-list {
	padding: 0 24px 22px;
}


/* ---------------------------------------------------------------------------
   12. RELATED PROJECTS SECTION
   --------------------------------------------------------------------------- */
body.single-post .sp-related-projects {
	max-width: var(--related-max);
	margin: 0 auto;
	padding: 100px var(--content-inset) 60px;
}

body.single-post .sp-related-projects .elementor-loop-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}


/* ---------------------------------------------------------------------------
   13. RELATED POSTS  ("Διαβάστε επίσης")
   --------------------------------------------------------------------------- */
body.single-post .sp-related-posts {
	max-width: var(--related-max);
	margin: 0 auto;
	padding: 60px var(--content-inset) 100px;
}

body.single-post .sp-related-posts .elementor-loop-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}


/* ---------------------------------------------------------------------------
   14. NEWSLETTER SECTION
   --------------------------------------------------------------------------- */
body.single-post .sp-newsletter {
	max-width: var(--main-max);
	margin: 0 auto;
	padding: 80px var(--content-inset);
	text-align: center;
	border-top: 1px solid var(--c-line);
}

body.single-post .sp-newsletter h2 {
	font-family: var(--ff-serif);
	font-size: clamp(28px, 3.4vw, 38px);
	line-height: 1.2;
	font-weight: 500;
	color: var(--c-charcoal);
	margin: 0 0 12px;
	letter-spacing: -0.005em;
}

body.single-post .sp-newsletter p {
	font-family: var(--ff-sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--c-muted);
	margin: 0 auto 32px;
	max-width: 520px;
}


/* ---------------------------------------------------------------------------
   15. SECTION HEADING SHARED  (Σχετικά Έργα, Διαβάστε επίσης)
   --------------------------------------------------------------------------- */
body.single-post .sp-related-projects > .elementor-element h2,
body.single-post .sp-related-projects > .elementor-widget h2,
body.single-post .sp-related-posts > .elementor-element h2,
body.single-post .sp-related-posts > .elementor-widget h2,
body.single-post .sp-section-heading h2 {
	font-family: var(--ff-serif);
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.2;
	font-weight: 500;
	color: var(--c-charcoal);
	margin: 0 0 40px;
	text-align: center;
	letter-spacing: -0.005em;
}


/* ---------------------------------------------------------------------------
   16. EMPTY-STATE HIDING
   When PHP detects no related projects, body.sp-no-related-projects is added.
   --------------------------------------------------------------------------- */
body.sp-no-related-projects.single-post .sp-related-projects {
	display: none;
}


/* ---------------------------------------------------------------------------
   17. FOCUS-VISIBLE (keyboard a11y)
   --------------------------------------------------------------------------- */
body.single-post a:focus-visible,
body.single-post button:focus-visible,
body.single-post summary:focus-visible {
	outline: 2px solid var(--c-bronze);
	outline-offset: 3px;
	border-radius: 2px;
}


/* ---------------------------------------------------------------------------
   18. RESPONSIVE — Tablet (≤1023px)
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {

	body.single-post {
		--content-inset: 20px;
		--gap-cols: 0;
	}

	body.single-post .sp-main {
		flex-direction: column;
		gap: 0;
	}

	body.single-post .sp-content {
		max-width: 100%;
	}

	body.single-post .sp-sidebar {
		display: none;
	}

	body.single-post .sp-toc-mobile-wrapper {
		display: block;
	}

	body.single-post .sp-related-projects .elementor-loop-container,
	body.single-post .sp-related-posts .elementor-loop-container {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}


/* ---------------------------------------------------------------------------
   19. RESPONSIVE — Mobile (≤640px)
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {

	body.single-post {
		--content-inset: 16px;
	}

	body.single-post #single-post,
	body.single-post .sp-article-wrap {
		padding: 48px 0 80px;
	}

	body.single-post .sp-breadcrumbs {
		font-size: 11px;
		margin-bottom: 32px;
	}

	body.single-post .sp-title,
	body.single-post .sp-title h1,
	body.single-post .sp-header h1 {
		font-size: clamp(28px, 7vw, 34px);
	}

	body.single-post .sp-eyebrow {
		font-size: 10px;
		margin-bottom: 14px;
	}

	body.single-post .sp-byline {
		font-size: 12px;
		margin-top: 16px;
	}

	body.single-post .sp-byline-item + .sp-byline-item::before {
		margin: 0 8px;
	}

	body.single-post .sp-hero {
		margin: 40px auto 56px;
	}

	body.single-post .sp-hero img,
	body.single-post .sp-hero .elementor-widget-image img {
		aspect-ratio: 4 / 3;
		max-height: 60vh;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type,
	body.single-post .sp-content .elementor-widget-theme-post-content .elementor-widget-container > p:first-of-type {
		font-size: 18px;
		margin-bottom: 32px;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content p,
	body.single-post .sp-content .elementor-widget-text-editor p,
	body.single-post .sp-content .elementor-widget-theme-post-content ul,
	body.single-post .sp-content .elementor-widget-theme-post-content ol {
		font-size: 16px;
		line-height: 1.7;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content h2 {
		font-size: 26px;
		margin: 48px 0 16px;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content h3 {
		font-size: 21px;
		margin: 32px 0 12px;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content blockquote {
		margin: 36px 0;
		padding-left: 20px;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content blockquote p,
	body.single-post .sp-pullquote-wrapper p,
	body.single-post .sp-pullquote-wrapper .elementor-widget-container {
		font-size: 20px !important;
	}

	body.single-post .sp-pullquote-wrapper {
		padding-left: 20px;
		margin: 36px 0;
	}

	body.single-post .sp-disclaimer {
		padding: 20px 22px;
	}

	body.single-post .sp-toc-mobile summary {
		padding: 16px 20px;
	}

	body.single-post .sp-toc-mobile .sp-toc-list {
		padding: 0 20px 18px;
	}

	body.single-post .sp-related-projects {
		padding-top: 64px;
		padding-bottom: 40px;
	}

	body.single-post .sp-related-posts {
		padding-top: 40px;
		padding-bottom: 64px;
	}

	body.single-post .sp-related-projects .elementor-loop-container,
	body.single-post .sp-related-posts .elementor-loop-container {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	body.single-post .sp-related-projects > .elementor-element h2,
	body.single-post .sp-related-projects > .elementor-widget h2,
	body.single-post .sp-related-posts > .elementor-element h2,
	body.single-post .sp-related-posts > .elementor-widget h2 {
		font-size: 24px;
		margin-bottom: 32px;
	}

	body.single-post .sp-newsletter {
		padding: 56px var(--content-inset);
	}

	body.single-post .sp-newsletter h2 {
		font-size: 26px;
	}
}


/* ---------------------------------------------------------------------------
   20. PRINT
   --------------------------------------------------------------------------- */
@media print {

	body.single-post {
		--c-ivory: #FFFFFF;
		--c-sand: #F5F0E8;
		--c-stone: #D8D4CB;
	}

	body.single-post .site-header,
	body.single-post .site-footer,
	body.single-post .sp-sidebar,
	body.single-post .sp-toc-mobile-wrapper,
	body.single-post .sp-toc-mobile,
	body.single-post .sp-related-projects,
	body.single-post .sp-related-posts,
	body.single-post .sp-newsletter,
	body.single-post .sp-breadcrumbs {
		display: none !important;
	}

	body.single-post #single-post,
	body.single-post .sp-article-wrap {
		padding: 0;
	}

	body.single-post .sp-hero img,
	body.single-post .sp-hero .elementor-widget-image img {
		max-height: 50vh !important;
		aspect-ratio: auto !important;
	}

	body.single-post .sp-main {
		flex-direction: column;
	}

	body.single-post .sp-content {
		max-width: 100% !important;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content h2,
	body.single-post .sp-content .elementor-widget-theme-post-content h3 {
		page-break-after: avoid;
	}

	body.single-post .sp-content .elementor-widget-theme-post-content p,
	body.single-post .sp-content .elementor-widget-theme-post-content blockquote,
	body.single-post .sp-pullquote-wrapper {
		page-break-inside: avoid;
	}

	body.single-post a {
		color: var(--c-charcoal) !important;
		text-decoration: none !important;
		border: 0 !important;
	}
}


/* ---------------------------------------------------------------------------
   21. REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.single-post .sp-breadcrumbs a,
	body.single-post .sp-content .elementor-widget-theme-post-content a,
	body.single-post .sp-toc-list a,
	body.single-post .sp-toc-list li::before,
	body.single-post .sp-toc-mobile summary::after,
	body.single-post .sp-brand-cta {
		transition: none !important;
	}
}

/* =============================================================================
   PATCH v1.0 — DCE Dynamic Content widget support
   Append to bottom of single-post.css
   Adds the same typography rules with DCE selectors as fallback.
   ============================================================================= */

/* DCE content wrapper — body paragraphs */
body.single-post .sp-content .elementor-widget-dyncontel-content,
body.single-post .sp-content .elementor-widget-dyncontel-content .dce-content-wrapper {
	font-family: var(--ff-sans);
	color: var(--c-charcoal);
}

body.single-post .sp-content .elementor-widget-dyncontel-content p,
body.single-post .sp-content .elementor-widget-dyncontel-content .dce-content-wrapper p {
	font-family: var(--ff-sans);
	font-size: 17px;
	line-height: 1.75;
	color: var(--c-charcoal);
	margin: 0 0 24px;
	font-weight: 400;
}

/* Lead paragraph — first <p> inside DCE wrapper */
body.single-post .sp-content .elementor-widget-dyncontel-content .dce-content-wrapper > p:first-of-type {
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 40px;
}

/* H2 / H3 / H4 inside DCE */
body.single-post .sp-content .elementor-widget-dyncontel-content h2 {
	font-family: var(--ff-serif);
	font-size: clamp(28px, 3.2vw, 36px);
	line-height: 1.2;
	font-weight: 500;
	color: var(--c-charcoal);
	margin: 64px 0 20px;
	letter-spacing: -0.005em;
	scroll-margin-top: var(--sticky-top);
}

body.single-post .sp-content .elementor-widget-dyncontel-content h3 {
	font-family: var(--ff-serif);
	font-size: clamp(22px, 2.4vw, 26px);
	line-height: 1.3;
	font-weight: 500;
	color: var(--c-charcoal);
	margin: 40px 0 16px;
	scroll-margin-top: var(--sticky-top);
}

body.single-post .sp-content .elementor-widget-dyncontel-content h4 {
	font-family: var(--ff-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-bronze);
	margin: 32px 0 12px;
}

/* Lists inside DCE */
body.single-post .sp-content .elementor-widget-dyncontel-content ul,
body.single-post .sp-content .elementor-widget-dyncontel-content ol {
	font-family: var(--ff-sans);
	font-size: 17px;
	line-height: 1.75;
	color: var(--c-charcoal);
	margin: 0 0 28px;
	padding-left: 0;
	list-style: none;
}

body.single-post .sp-content .elementor-widget-dyncontel-content ul li,
body.single-post .sp-content .elementor-widget-dyncontel-content ol li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
}

body.single-post .sp-content .elementor-widget-dyncontel-content ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 13px;
	width: 8px;
	height: 1px;
	background: var(--c-bronze);
}

body.single-post .sp-content .elementor-widget-dyncontel-content ol {
	counter-reset: sp-ol-dce;
}

body.single-post .sp-content .elementor-widget-dyncontel-content ol li {
	counter-increment: sp-ol-dce;
}

body.single-post .sp-content .elementor-widget-dyncontel-content ol li::before {
	content: counter(sp-ol-dce) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--c-bronze);
	font-weight: 500;
	font-feature-settings: "tnum";
	min-width: 24px;
}

/* Inline links inside DCE */
body.single-post .sp-content .elementor-widget-dyncontel-content a {
	color: var(--c-charcoal);
	text-decoration: underline;
	text-decoration-color: var(--c-bronze-soft);
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 0.3s ease, color 0.3s ease;
}

body.single-post .sp-content .elementor-widget-dyncontel-content a:hover {
	color: var(--c-bronze);
	text-decoration-color: var(--c-bronze);
}

body.single-post .sp-content .elementor-widget-dyncontel-content strong {
	font-weight: 600;
	color: var(--c-charcoal);
}

body.single-post .sp-content .elementor-widget-dyncontel-content em {
	font-style: italic;
}

/* Blockquote inside DCE */
body.single-post .sp-content .elementor-widget-dyncontel-content blockquote {
	margin: 48px 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--c-bronze);
}

body.single-post .sp-content .elementor-widget-dyncontel-content blockquote p {
	font-family: var(--ff-serif) !important;
	font-style: italic;
	font-size: 24px !important;
	line-height: 1.45 !important;
	color: var(--c-charcoal);
	margin: 0;
}

/* Images inside DCE */
body.single-post .sp-content .elementor-widget-dyncontel-content img {
	display: block;
	width: 100%;
	height: auto;
	margin: 32px 0;
	border-radius: 2px;
}

/* Mobile adjustments — DCE typography */
@media (max-width: 640px) {

	body.single-post .sp-content .elementor-widget-dyncontel-content .dce-content-wrapper > p:first-of-type {
		font-size: 18px;
		margin-bottom: 32px;
	}

	body.single-post .sp-content .elementor-widget-dyncontel-content p,
	body.single-post .sp-content .elementor-widget-dyncontel-content ul,
	body.single-post .sp-content .elementor-widget-dyncontel-content ol {
		font-size: 16px;
		line-height: 1.7;
	}

	body.single-post .sp-content .elementor-widget-dyncontel-content h2 {
		font-size: 26px;
		margin: 48px 0 16px;
	}

	body.single-post .sp-content .elementor-widget-dyncontel-content h3 {
		font-size: 21px;
		margin: 32px 0 12px;
	}

	body.single-post .sp-content .elementor-widget-dyncontel-content blockquote {
		margin: 36px 0;
		padding-left: 20px;
	}

	body.single-post .sp-content .elementor-widget-dyncontel-content blockquote p {
		font-size: 20px !important;
	}
}

/* =================== END PATCH v1.0 — DCE support =================== */
/* =============================================================================
   PATCH v1.1 — Sticky sidebar fix για Elementor e-con-boxed wrapping
   ============================================================================= */

/* Ο πραγματικός flex container είναι το .e-con-inner του Elementor,
   όχι το .sp-main. Στοχεύουμε αυτό. */
body.single-post .sp-main > .e-con-inner {
	display: flex;
	flex-direction: row;
	gap: var(--gap-cols);
	align-items: flex-start;
	width: 100%;
}

/* Sidebar — sticky με όλες τις απαραίτητες ιδιότητες */
body.single-post .sp-sidebar {
	position: sticky;
	top: var(--sticky-top);
	align-self: flex-start;
	height: fit-content;
	max-height: calc(100vh - var(--sticky-top) - 40px);
	overflow-y: auto;
}

/* Defensive — αν οποιοσδήποτε ancestor έχει overflow:hidden,
   κόβει το sticky. Force visible σε όλη την αλυσίδα. */
body.single-post .sp-main,
body.single-post .sp-main > .e-con-inner,
body.single-post .sp-content {
	overflow: visible;
}

/* Mobile — στοχεύουμε το .e-con-inner αντί για .sp-main */
@media (max-width: 1023px) {
	body.single-post .sp-main > .e-con-inner {
		flex-direction: column;
		gap: 0;
	}
}

/* =================== END PATCH v1.1 — Sticky sidebar =================== */

/* =============================================================================
   PATCH v1.3 — Related Projects card refinement (overrides loop template)
   Append to bottom of single-post.css
   
   Targets the existing loop template (id 985) which renders:
     .project-card
       .project-card__meta-row  (contains title)
       .project-card__media     (contains image + side-label + status)
   
   Without editing the Elementor template, we use CSS to:
   - Force image to a reasonable height
   - Re-order via flex so image goes FIRST
   - Style title, side-label, status consistently
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Force card to flex column with explicit ordering
   ----------------------------------------------------------------------------- */
body.single-post .sp-related-projects .project-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

body.single-post .sp-related-projects .project-card:hover {
	border-color: var(--c-bronze-soft);
	transform: translateY(-2px);
}

/* Image container — order FIRST */
body.single-post .sp-related-projects .project-card__media {
	order: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

/* Title row — order SECOND (after image) */
body.single-post .sp-related-projects .project-card__meta-row {
	order: 2 !important;
	margin: 0 !important;
	padding: 20px 22px 6px !important;
	background: var(--c-white) !important;
}

body.single-post .sp-related-projects .project-card__meta-row > .e-con-inner {
	padding: 0 !important;
	margin: 0 !important;
}

/* -----------------------------------------------------------------------------
   Image — force reasonable aspect ratio, not 500px tower
   The image is a <figure> with background-image, inside .dynamic-content-featuredimage-bg
   ----------------------------------------------------------------------------- */
body.single-post .sp-related-projects .project-card__media .dce-featured-image {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-post .sp-related-projects .project-card__media .dce-featured-image a,
body.single-post .sp-related-projects .project-card__media .mask,
body.single-post .sp-related-projects .project-card__media .wrap-filters {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

body.single-post .sp-related-projects .project-card__media .dynamic-content-featuredimage-bg {
	height: 240px !important;
	aspect-ratio: 4 / 3;
	background-position: center center !important;
	background-size: cover !important;
}

/* On medium screens — slightly taller for prominence */
@media (min-width: 1024px) {
	body.single-post .sp-related-projects .project-card__media .dynamic-content-featuredimage-bg {
		height: 260px !important;
	}
}

/* -----------------------------------------------------------------------------
   Title styling — clean editorial typography
   ----------------------------------------------------------------------------- */
body.single-post .sp-related-projects .project-card__title h3,
body.single-post .sp-related-projects .project-card__title .elementor-heading-title {
	font-family: var(--ff-serif) !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	font-weight: 500 !important;
	color: var(--c-charcoal) !important;
	margin: 0 !important;
	letter-spacing: -0.005em;
}

body.single-post .sp-related-projects .project-card__title a {
	color: inherit !important;
	text-decoration: none !important;
	border: none !important;
}

body.single-post .sp-related-projects .project-card__title a:hover {
	color: var(--c-bronze) !important;
}

/* -----------------------------------------------------------------------------
   Side label (location) → repurpose as eyebrow pill over image
   The HTML places it absolutely inside .project-card__media
   ----------------------------------------------------------------------------- */
body.single-post .sp-related-projects .project-card__side-label {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	z-index: 2;
	display: inline-block !important;
	padding: 6px 12px !important;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	font-family: var(--ff-sans) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--c-charcoal) !important;
	line-height: 1 !important;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Status row — order LAST, subtle meta text under title
   ----------------------------------------------------------------------------- */
body.single-post .sp-related-projects .project-card__status {
	order: 3 !important;
	margin: 0 !important;
	padding: 4px 22px 22px !important;
	font-family: var(--ff-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--c-bronze-text) !important;
	background: var(--c-white) !important;
}

/* The status was nested inside .project-card__media originally; force it out
   visually by detaching from the media container's flow */
body.single-post .sp-related-projects .project-card__media .project-card__status {
	position: relative;
	z-index: 1;
}

/* -----------------------------------------------------------------------------
   Grid — slightly wider single card so it doesn't feel cramped
   ----------------------------------------------------------------------------- */
body.single-post .sp-related-projects .elementor-loop-container {
	grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
	gap: 28px;
	justify-content: center;
}

/* When there's only 1 card, give it a bit more presence */
body.single-post .sp-related-projects .elementor-loop-container:has(> :only-child) {
	grid-template-columns: minmax(320px, 420px);
}

/* -----------------------------------------------------------------------------
   Mobile
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
	body.single-post .sp-related-projects .elementor-loop-container {
		grid-template-columns: 1fr;
		max-width: 100%;
		gap: 20px;
	}

	body.single-post .sp-related-projects .project-card__media .dynamic-content-featuredimage-bg {
		height: 220px !important;
	}

	body.single-post .sp-related-projects .project-card__title h3 {
		font-size: 20px !important;
	}

	body.single-post .sp-related-projects .project-card__meta-row {
		padding: 18px 20px 4px !important;
	}

	body.single-post .sp-related-projects .project-card__status {
		padding: 4px 20px 20px !important;
	}
}

/* =================== END PATCH v1.3 — Project card refinement =================== */
/* =================== END Single Post Template v1.0 =================== */