/**
 * ICpEP-Qatar single News & Updates article — template-parts/single.php.
 *
 * A dedicated editorial layout, distinct from css/page.css's general
 * prose column: a wider reading measure (760px vs 720px), a larger type
 * scale (1.125rem/1.75 vs the sitewide --icpep-fs-base), and treatments
 * (meta chips, accent headings, glass callouts, prev/next nav) specific
 * to a long-form article rather than a short marketing page.
 *
 * Enqueued only for single `post` views (see inc/scripts.php), after
 * css/components.css for its tokens (--icpep-cyan-deep, --icpep-mist,
 * --icpep-shadow-*, --icpep-card-border).
 */

:root {
	--icpep-article-max-width: 760px;
}

/*
 * Full-bleed override. Same root cause and fix as css/front-page.css and
 * css/page.css: Hello Elementor's parent theme.css applies a Bootstrap-
 * style responsive max-width (1140px at this viewport) to `.site-main`
 * whenever the <body> lacks an `elementor-page-*` class — which a
 * classic (non-Elementor) single post never carries. Without this, the
 * whole article — including the header band's edge-to-edge mesh — sits
 * boxed inside that 1140px column instead of reaching the viewport
 * edges, the same "small boxed card" bug the Home hero had.
 */
body:not( [class*='elementor-page-'] ) .icpep-article {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* ==========================================================
   Header band — breadcrumb, meta chips, title
   ========================================================== */

.icpep-article-header {
	position: relative;
	width: 100%;
	max-width: 100vw;
	background-color: #ffffff;
	overflow: hidden;
}

/* Same dot-grid + radial-glow recipe as .icpep-page-header__mesh
   (css/page.css) — every header band on the site reads as one visual
   system. */
.icpep-article-header__mesh {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient( circle at 12% 15%, rgba( 0, 163, 224, 0.14 ) 0%, rgba( 0, 163, 224, 0 ) 45% ),
		radial-gradient( circle at 88% 20%, rgba( 138, 21, 56, 0.08 ) 0%, rgba( 138, 21, 56, 0 ) 40% ),
		radial-gradient( circle at 1.5px 1.5px, rgba( 11, 19, 43, 0.07 ) 1.5px, transparent 0 );
	background-size: auto, auto, 28px 28px;
	background-repeat: no-repeat, no-repeat, repeat;
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 65%, transparent 100% );
	mask-image: linear-gradient( to bottom, #000 0%, #000 65%, transparent 100% );
}

.icpep-article-header__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	/* The header is position:fixed sitewide (css/header-footer.css) and
	   out of document flow, so this band — the first thing in <main> —
	   needs its own clearance or the fixed header overlaps the title on
	   load. */
	padding: calc( var( --icpep-header-height, 76px ) + 4rem ) 1.5rem 3.5rem;
}

.icpep-article-crumb {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-sm );
	color: var( --icpep-cyan-deep );
	text-decoration: none;
	margin-bottom: 1.5rem;
	transition: gap 0.15s ease, color 0.15s ease;
}

.icpep-article-crumb__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.icpep-article-crumb:hover,
.icpep-article-crumb:focus-visible {
	color: var( --icpep-cyan-deeper );
	gap: 0.55rem;
}

.icpep-article-crumb:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 3px;
	border-radius: 2px;
}

.icpep-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.icpep-article-meta__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 30px;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-xs );
	color: var( --e-global-color-text, #1f2937 );
	background-color: rgba( 255, 255, 255, 0.6 );
	backdrop-filter: blur( 10px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 10px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 999px;
	padding: 0.4em 0.9em;
	box-shadow: var( --icpep-shadow-sm );
}

.icpep-article-meta__icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	color: var( --icpep-cyan-deep );
}

.icpep-article-meta__chip--category {
	color: #ffffff;
	background-color: var( --e-global-color-accent, #8a1538 );
	border-color: transparent;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media ( prefers-reduced-transparency: reduce ) {
	.icpep-article-meta__chip {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: var( --icpep-card-border );
	}
}

.icpep-article-title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 2rem, 1.5rem + 2vw, 3rem );
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var( --e-global-color-primary, #0b132b );
	margin: 0 0 1.5rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-article-crumb,
	.icpep-article-crumb__icon {
		transition: none;
	}
}

/* ==========================================================
   Featured image banner
   ========================================================== */

.icpep-article-banner {
	max-width: 1000px;
	margin: 0 auto;
	padding-inline: clamp( 1.25rem, 4vw, 3rem );
	margin-top: clamp( -2rem, -4vw, -1.5rem );
	position: relative;
	z-index: 1;
}

.icpep-article-banner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: var( --icpep-shadow-lg );
}

/* ==========================================================
   Content column
   ========================================================== */

.icpep-article-content-wrap {
	background-color: #ffffff;
}

.icpep-article-content {
	/* Deliberately narrower than .icpep-article-header__inner's 900px —
	   the header can afford more breathing room since it's just a title
	   and a few chips, but 900px is too wide a measure for sustained
	   body-copy reading, so the column steps in slightly here. Both
	   share the same centering mechanism (max-width + margin: 0 auto),
	   just at different widths. */
	max-width: var( --icpep-article-max-width );
	margin: 3rem auto;
	padding: 0 1.5rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var( --e-global-color-text, #1f2937 );
}

.icpep-article-content > *:first-child {
	margin-top: 0;
}

.icpep-article-content p {
	margin: 0 0 1.5rem;
}

/*
 * Lead paragraph — the article's opening line reads as a deliberate
 * editorial choice, not just the first line the eye happens to land on.
 * `:first-of-type` rather than `:first-child` so this still lands on
 * the article's actual opening paragraph even when content starts with
 * something else (an image, a list) before its first <p>.
 */
.icpep-article-content > p:first-of-type {
	font-size: 1.25rem;
	line-height: 1.8;
	color: #1e293b;
	font-weight: 500;
}

.icpep-article-content strong {
	color: var( --e-global-color-primary, #0b132b );
	font-weight: 600;
}

.icpep-article-content a {
	color: var( --icpep-cyan-deep );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.icpep-article-content a:hover,
.icpep-article-content a:focus-visible {
	color: var( --e-global-color-accent, #8a1538 );
}

.icpep-article-content a:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 3px;
	border-radius: 2px;
}

.icpep-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-article-content a {
		transition: none;
	}
}

/* ---------- Section headings ---------- */

.icpep-article-content h2 {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 1.5rem, 1.25rem + 1vw, 1.875rem );
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var( --e-global-color-primary, #0b132b );
	border-left: 3px solid var( --icpep-cyan-deep );
	padding-left: 1rem;
	margin: 3rem 0 1.25rem;
}

.icpep-article-content h2:first-child {
	margin-top: 0;
}

.icpep-article-content h3 {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: clamp( 1.2rem, 1.1rem + 0.5vw, 1.4rem );
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary, #0b132b );
	margin: 2.5rem 0 1rem;
}

.icpep-article-content h4 {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-md );
	letter-spacing: -0.005em;
	color: var( --icpep-cyan-deep );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 2.25rem 0 0.85rem;
}

/* ---------- Lists ---------- */

.icpep-article-content ul,
.icpep-article-content ol {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.icpep-article-content ul li,
.icpep-article-content ol li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.75rem;
}

.icpep-article-content ul li:last-child,
.icpep-article-content ol li:last-child {
	margin-bottom: 0;
}

/* Real article content wraps list-item text in its own <p> (block
   editor output) — reset that inner margin so vertical rhythm is
   governed by the <li>'s own margin-bottom instead of stacking both. */
.icpep-article-content li > p {
	margin: 0;
}

.icpep-article-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var( --icpep-cyan-deep );
}

.icpep-article-content ol {
	counter-reset: icpep-article-ol;
}

.icpep-article-content ol li::before {
	counter-increment: icpep-article-ol;
	content: counter( icpep-article-ol );
	position: absolute;
	left: 0;
	top: 0.05em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var( --icpep-mist );
	color: var( --icpep-cyan-deep );
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: 0.7rem;
}

.icpep-article-content li > ul,
.icpep-article-content li > ol {
	margin-top: 0.75rem;
}

/* ---------- Callouts (blockquote) ---------- */

/*
 * Frosted-glass callout — for spotlight content editors want to set
 * apart from the surrounding prose (a featured-speaker bio, a pull
 * quote, a key takeaway): wrap it in a Quote block/<blockquote> and it
 * gets this treatment automatically.
 */
.icpep-article-content blockquote {
	position: relative;
	margin: 2.5rem 0;
	padding: clamp( 1.5rem, 4vw, 2.25rem );
	background-color: rgba( 255, 255, 255, 0.6 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 20px;
	box-shadow: var( --icpep-shadow-md ), inset 0 1px 0 rgba( 255, 255, 255, 0.6 );
	font-style: normal;
}

.icpep-article-content blockquote::before {
	content: '';
	position: absolute;
	top: clamp( 1.5rem, 4vw, 2.25rem );
	left: 0;
	width: 3px;
	height: 28px;
	background-color: var( --icpep-cyan-deep );
	border-radius: 0 3px 3px 0;
}

.icpep-article-content blockquote p {
	font-size: 1.05em;
	line-height: 1.65;
	color: var( --e-global-color-primary, #0b132b );
}

.icpep-article-content blockquote p:last-child {
	margin-bottom: 0;
}

.icpep-article-content blockquote strong {
	color: var( --e-global-color-primary, #0b132b );
}

@media ( prefers-reduced-transparency: reduce ) {
	.icpep-article-content blockquote {
		background-color: var( --icpep-mist );
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: var( --icpep-card-border );
	}
}

/* ---------- Pagination (wp_link_pages, multi-page posts) ---------- */

.icpep-article-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
	font-size: var( --icpep-fs-sm );
	font-weight: 600;
}

.icpep-article-pagination a {
	color: var( --icpep-cyan-deep );
}

/* ==========================================================
   Previous / Next article footer nav
   ========================================================== */

.icpep-article-nav {
	background-color: var( --icpep-mist );
	padding-block: clamp( 2.5rem, 6vw, 3.5rem );
}

.icpep-article-nav__inner {
	max-width: var( --icpep-article-max-width );
	margin: 0 auto;
	padding-inline: clamp( 1.25rem, 4vw, 2rem );
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.icpep-article-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.5rem;
	background-color: rgba( 255, 255, 255, 0.72 );
	backdrop-filter: blur( 16px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 16px ) saturate( 180% );
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 18px;
	box-shadow: var( --icpep-shadow-sm ), inset 0 1px 0 rgba( 255, 255, 255, 0.5 );
	text-decoration: none;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.icpep-article-nav__link:hover,
.icpep-article-nav__link:focus-visible {
	transform: translateY( -4px );
	box-shadow: var( --icpep-shadow-lg ), inset 0 1px 0 rgba( 255, 255, 255, 0.6 );
	border-color: rgba( 0, 163, 224, 0.35 );
}

.icpep-article-nav__link:focus-visible {
	outline: 2px solid var( --icpep-cyan-deep );
	outline-offset: 3px;
}

.icpep-article-nav__link--next {
	text-align: right;
	align-items: flex-end;
}

.icpep-article-nav__label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	font-weight: 600;
	font-size: var( --icpep-fs-xs );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --icpep-cyan-deep );
}

.icpep-article-nav__label svg {
	width: 14px;
	height: 14px;
}

.icpep-article-nav__title {
	font-family: var( --e-global-typography-primary-font-family, 'Plus Jakarta Sans' ), sans-serif;
	font-weight: 700;
	font-size: var( --icpep-fs-base );
	line-height: 1.4;
	color: var( --e-global-color-primary, #0b132b );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.icpep-article-nav__spacer {
	display: block;
}

@media ( prefers-reduced-transparency: reduce ) {
	.icpep-article-nav__link {
		background-color: #ffffff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-color: var( --icpep-card-border );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.icpep-article-nav__link {
		transition: none;
	}

	.icpep-article-nav__link:hover,
	.icpep-article-nav__link:focus-visible {
		transform: none;
	}
}

/* ==========================================================
   Mobile (375–430px)
   ========================================================== */

@media ( max-width: 640px ) {
	.icpep-article-nav__inner {
		grid-template-columns: 1fr;
	}

	.icpep-article-nav__link--next {
		text-align: left;
		align-items: flex-start;
	}

	.icpep-article-banner {
		margin-top: -1rem;
	}

	.icpep-article-banner img {
		border-radius: 16px;
		aspect-ratio: 4 / 3;
	}
}