/* =============================================================
 * Eekad — main stylesheet
 * RTL-only, dark theme. Tokens mirror theme.json so PHP templates
 * and the block editor share one source of truth.
 * =========================================================== */

:root {
	/* ----- Brand ----- */
	--c-lime:         #d5fe77;
	--c-indigo:       #5851cf;
	--c-indigo-deep:  #5036c5;
	--c-indigo-muted: #474589;
	--c-coral:        #c54e45;

	/* ----- Surfaces ----- */
	--c-bg:      #363942;  /* page background */
	--c-surface: #393e3f;  /* card / alt surface */
	--c-ink:     #2a2f36;  /* text on light cards */

	/* ----- Greys ----- */
	--c-grey-50:  #eaecf1;
	--c-grey-100: #d8dbdd;
	--c-grey-200: #ccd0d1;
	--c-grey-300: #afb7b8;
	--c-grey-500: #787d7f;
	--c-white:    #ffffff;

	/* ----- Type ----- */
	--font-sans: "itf Somaya Arabic", "Tajawal", system-ui, -apple-system, sans-serif;
	--font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--fs-xs:   12px;
	--fs-sm:   17px;
	--fs-base: 20px;
	--fs-lg:   24px;
	--fs-h3:   30px;
	--fs-h2:   40px;
	--fs-h1:   52px;

	--lh-tight: 1.2;
	--lh-base:  1.6;

	/* ----- Layout ----- */
	--container:    1232px;
	--container-px: 24px;
}

/* ----- Font faces (loaded from /assets/fonts/) ----- */
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "itf Somaya Arabic";
	src: url("../fonts/SomayaArabic-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ----- Reset (minimal) ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-white);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	font-weight: 500;
	direction: rtl;
	text-align: right;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----- Layout primitives (will grow as templates need them) ----- */
.eekad-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

/* =============================================================
 * Site header
 *
 * Layout: 3-column grid — logo on the right (column 1 in RTL),
 * nav truly centered in the viewport (column 2), spacer left.
 *
 * Background is fully transparent at the top of the page. Once the
 * page scrolls > 12px, the .is-scrolled class is added by the small
 * script in footer.php and the header gains a translucent backdrop.
 * =========================================================== */
.eekad-site-header {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 100;
	background: transparent;
	border-block-end: 1px solid transparent;
	transition: background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
.eekad-site-header.is-scrolled {
	background-color: rgba(42, 47, 54, .72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-block-end-color: rgba(255, 255, 255, .06);
}
.eekad-site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding-inline: 40px;
}
.eekad-site-header__logo {
	position: absolute;
	inset-inline-start: 40px; /* RTL: visually right edge */
	top: 50%;
	/* Optical centering: the SVG viewBox (86×55) includes the small "EEKAD"
	   wordmark at the bottom (y=48..55), which weighs the bounding box down
	   relative to the main glyph. Nudge up so the main glyph's center lines
	   up with the nav text. */
	transform: translateY(calc(-50% - 10px));
}
.eekad-site-header__nav {
	display: flex;
}
.eekad-site-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--c-white);
	flex-shrink: 0;
}
.eekad-site-header__logo svg {
	width: 72px;
	height: auto;
	display: block;
}
.eekad-site-header__logo:hover { color: var(--c-lime); }

/* ----- Primary nav ----- */
.eekad-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 28px;
}
.eekad-nav li { display: inline-flex; }
.eekad-nav a {
	color: var(--c-white);
	font-size: 16px; /* editorial-scale nav, matches dossier tone */
	font-weight: 500;
	line-height: 1;
	padding-block: 6px;
	border-block-start: 2px solid transparent; /* mirror end border so box stays vertically symmetric with logo */
	border-block-end: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.eekad-nav a:hover,
.eekad-nav .current-menu-item > a,
.eekad-nav .current_page_item > a {
	color: var(--c-lime);
	border-block-end-color: var(--c-lime);
}

/* ----- Primary nav: dropdowns -----
   Items with children get a chevron next to the label and a hover/focus
   submenu panel. The submenu sits absolutely under the parent item, anchored
   to the inline-start (visual right in RTL). */
.eekad-nav .menu-item-has-children {
	position: relative;
}
.eekad-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.eekad-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-block-start: 2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
	transition: transform .2s ease;
}
.eekad-nav .menu-item-has-children:hover > a::after,
.eekad-nav .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}
.eekad-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	inset-inline-start: -16px; /* RTL: pinned to the visual right edge of the parent */
	min-width: 220px;
	background: rgba(42, 47, 54, .96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s linear;
	z-index: 50;
}
.eekad-nav .menu-item-has-children:hover > .sub-menu,
.eekad-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.eekad-nav .sub-menu li {
	display: block;
}
.eekad-nav .sub-menu a {
	display: block;
	padding: 10px 18px;
	font-size: 14px; /* one step below the 15px parent for clear hierarchy */
	font-weight: 400;
	line-height: 1.35;
	text-align: right;
	border-block-end: none;
	white-space: nowrap;
}
.eekad-nav .sub-menu a:hover,
.eekad-nav .sub-menu .current-menu-item > a {
	color: var(--c-lime);
	background: rgba(255, 255, 255, .04);
	border-block-end: none;
}

/* =============================================================
 * Reusable atoms
 * =========================================================== */

/* ----- Pill / badge ----- */
.eekad-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 4px;
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .2px;
}
.eekad-pill--lime {
	background: var(--c-lime);
	color: var(--c-ink);
}

/* ----- Buttons ----- */
.eekad-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 4px;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.eekad-btn--primary {
	background: var(--c-lime);
	color: var(--c-ink);
}
.eekad-btn--primary:hover {
	background: var(--c-white);
	transform: translateY(-1px);
}
.eekad-btn--ghost {
	background: transparent;
	color: var(--c-white);
	border-color: rgba(255, 255, 255, .35);
}
.eekad-btn--ghost:hover {
	border-color: var(--c-lime);
	color: var(--c-lime);
}

/* =============================================================
 * Homepage — Hero ("intelligence dossier" treatment)
 * =========================================================== */
/* Pin wrapper reserves one viewport of scroll per slide. The hero
   inside is sticky-positioned so it stays glued to the top while the
   user scrolls through the pin range, and JS swaps the active slide
   based on scroll progress. --hero-slides is set inline by PHP. */
.eekad-hero-pin {
	position: relative;
	height: calc(var(--hero-slides, 3) * 100vh);
}
.eekad-hero {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--c-white);
	padding-block-start: 80px; /* offset for the fixed header */
	overflow: hidden;
	isolation: isolate;
}
.eekad-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.eekad-hero__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity .9s ease;
}
.eekad-hero__media-img.is-active {
	opacity: 1;
}
/* The "fadable" content elements (title block, geo label, CTA) crossfade
   when the hero auto-rotates between slides. */
.eekad-hero__fadable {
	transition: opacity .38s ease;
}
.eekad-hero__fadable.is-fading {
	opacity: 0;
}
.eekad-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(42, 47, 54, .35) 0%, rgba(42, 47, 54, .25) 35%, rgba(42, 47, 54, .82) 100%);
}

/* ----- Decorative tech strip ----- */
.eekad-hero__tech {
	padding-block: 22px 8px;
	color: rgba(255, 255, 255, .9);
	opacity: .2; /* matches Figma — single faded SVG strip */
}
.eekad-hero__tech-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.eekad-hero__barcode {
	display: block;
	flex: 0 0 auto;
	width: 280px;
	height: 28px;
	background-image:
		repeating-linear-gradient( 90deg,
			currentColor 0 2px, transparent 2px 5px,
			currentColor 5px 6px, transparent 6px 9px,
			currentColor 9px 12px, transparent 12px 14px,
			currentColor 14px 15px, transparent 15px 19px );
}
.eekad-hero__qr {
	display: block;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
}
.eekad-hero__tech-code {
	font-family: var(--font-mono);
	font-size: 16px;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* ----- Content stack ----- */
.eekad-hero__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-block-end: 36px;
	position: relative;
}

/* ----- Folder badge ----- */
.eekad-hero__badge {
	align-self: flex-start; /* RTL: visually right */
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-block-start: 4px;
	color: var(--c-white);
}
.eekad-hero__badge-icon {
	display: inline-flex;
	width: 60px;
	height: 45px;
	color: var(--c-indigo);
	flex-shrink: 0;
}
.eekad-hero__badge-icon svg { width: 100%; height: 100%; display: block; }
.eekad-hero__badge-label {
	font-size: 30px;
	font-weight: 700; /* Bold per Figma */
	line-height: 1;
}

/* ----- Geo coordinate label ----- */
.eekad-hero__geo {
	margin-block: auto 12px; /* push toward middle */
	text-align: center;
	color: var(--c-white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.eekad-hero__geo-city {
	font-size: 40px;
	font-weight: 300;
	line-height: 1.1;
}
.eekad-hero__geo-coords {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .5px;
	color: var(--c-white);
	margin-block-start: 2px;
}

/* ----- Title row (lime polygon block with CTA notch) -----
   The whole row is a single .eekad-hero__title-block element. Inside it:
     - an inline SVG that paints the irregular Figma "Subtract" shape
       (rectangle with CTA-shaped notch on the left side + small step
       cuts at the top-right and bottom-left). preserveAspectRatio="none"
       lets it stretch to whatever width the row gets while staying
       locked at 167px tall.
     - a text container with the title + excerpt, padded so it never
       overlaps the CTA notch on the left.
     - the CTA button absolutely positioned into the notch.
*/
.eekad-hero__title-row {
	margin-block: 0 28px;
}
.eekad-hero__title-block {
	position: relative;
	height: 167px;
	max-width: 1031px;
	/* RTL: pin to the leading (visual right) edge. margin-inline-end: auto
	   puts the auto margin on the visual LEFT, pushing the block right. */
	margin-inline-end: auto;
}
.eekad-hero__title-block-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}
/* Text sits above the SVG, padded away from the CTA notch on the left.
   The notch occupies SVG x=0..128 of viewBox=1031, i.e. ~12.4% of width.
   We push the text past it via padding-inline-end (visual LEFT in RTL). */
.eekad-hero__title-block-text {
	position: relative;
	z-index: 1;
	height: 100%;
	box-sizing: border-box;
	padding: 16px 56px 16px calc(12.4% + 24px);
	color: var(--c-ink);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.eekad-hero__title {
	font-size: 32px;
	font-weight: 500; /* Medium */
	line-height: 1.12;
	margin: 0;
	text-align: right;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-hero__title a {
	color: inherit;
	transition: opacity .15s ease;
}
.eekad-hero__title a:hover { opacity: .82; }
.eekad-hero__excerpt {
	font-size: 15px;
	font-weight: 300; /* Light */
	line-height: 1.45;
	color: var(--c-ink);
	margin: 6px 0 0;
	text-align: right;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* The CTA slots into the SVG's left notch, vertically centered on the
   notch's range (y=53..110 of 167 → top: 53/167, height: 57/167). It's
   anchored to the physical left of the title block (in RTL, that's the
   visual left side, where the notch sits). */
.eekad-hero__cta {
	position: absolute;
	left: 0;
	top: calc(53 / 167 * 100%);
	height: calc(57 / 167 * 100%);
	width: 123px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	background: var(--c-indigo);
	color: var(--c-white);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 0;
	box-shadow: 0 8px 14px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .15);
	transition: background .15s ease, transform .15s ease;
}
.eekad-hero__cta:hover {
	background: var(--c-indigo-deep);
	transform: translateY(-1px);
}

/* ----- File carousel ----- */
.eekad-hero__files {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.eekad-hero__files-grid {
	display: flex;
	gap: 18px;
}
.eekad-hero__file {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	background: rgba(42, 47, 54, .82);
	color: var(--c-white);
	border-block-end: 3px solid transparent;
	transition: background .15s ease, border-color .15s ease;
	min-width: 0;
}
.eekad-hero__file:hover { background: rgba(42, 47, 54, .92); }
.eekad-hero__file.is-active {
	border-block-end-color: var(--c-lime);
}
.eekad-hero__file-icon {
	display: inline-flex;
	width: 28px;
	height: 26px;
	color: var(--c-grey-200);
	flex-shrink: 0;
}
.eekad-hero__file-icon svg { width: 100%; height: 100%; display: block; }
.eekad-hero__file-title {
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
/* ----- Hero timeline (under file carousel) -----
   Full-bleed dim line + lime "active range" band + 3 tick markers that
   align with the card columns above. The selected (featured) tick is a
   lime square with a smaller dark center; the others are plain dark
   squares interrupting the line. */
.eekad-hero__timeline {
	position: relative;
	height: 20px;
	margin-block-start: 18px;
}
.eekad-hero__timeline-line {
	position: absolute;
	top: 9px;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 2px;
	background: rgba(255, 255, 255, .35);
	z-index: 0;
}
.eekad-hero__timeline-active {
	position: absolute;
	top: 8px;
	/* Anchor to the inline-start edge — in RTL that's the visual RIGHT,
	   where the featured slide lives. The bar then grows leftward as
	   the selected tick moves to later slides. JS sets the width. */
	inset-inline-start: -32px;
	width: 38%; /* JS overrides this with a pixel value matching the selected tick */
	height: 4px;
	background: var(--c-lime);
	z-index: 1;
	transition: width .55s ease;
}
.eekad-hero__timeline-ticks {
	position: relative;
	display: flex;
	gap: 18px; /* matches .eekad-hero__files-grid */
	height: 100%;
	z-index: 2;
}
.eekad-hero__tick-slot {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.eekad-hero__tick {
	width: 20px;
	height: 20px;
	background: #2a2f36;
	flex-shrink: 0;
}
.eekad-hero__tick.is-selected {
	background: var(--c-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}
.eekad-hero__tick.is-selected::before {
	content: "";
	width: 10px;
	height: 10px;
	background: #2a2f36;
}

/* =============================================================
 * Homepage — Categories (5 full-bleed cards, horizontal scroll)
 * =========================================================== */
.eekad-categories {
	background: var(--c-ink);
	overflow: hidden;
}
.eekad-categories__row {
	display: flex;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.eekad-categories__row::-webkit-scrollbar { display: none; }

.eekad-category {
	position: relative;
	flex: 0 0 420px;
	height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 44px;
	overflow: hidden;
	scroll-snap-align: start;
	isolation: isolate;
	border-inline-end: 1px solid rgba(255, 255, 255, .04);
}
.eekad-category__bg {
	position: absolute;
	inset: 0;
	background-image: var(--cat-bg);
	background-size: cover;
	background-position: center;
	z-index: -2;
}
.eekad-category::after {
	/* Dark wash so the body content stays legible against the photo. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(42, 47, 54, .25) 0%, rgba(42, 47, 54, .55) 50%, rgba(42, 47, 54, .92) 100%);
	z-index: -1;
	pointer-events: none;
}
.eekad-category__glow {
	position: absolute;
	inset-inline-start: -200px;
	bottom: -200px;
	width: 900px;
	height: 700px;
	background: var(--cat-tint);
	filter: blur(120px);
	opacity: .9;
	z-index: -1;
	pointer-events: none;
}

.eekad-category__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	color: var(--c-white);
	text-align: center;
}
.eekad-category__icon {
	width: 95px;
	height: 95px;
	color: var(--cat-color);
	display: flex;
	align-items: center;
	justify-content: center;
}
.eekad-category__icon svg { width: 100%; height: 100%; }

.eekad-category__title {
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}
.eekad-category__desc {
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.55;
	color: var(--c-grey-300);
	margin: 0;
	max-width: 380px;
}
.eekad-category__stats {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-mono);
	font-size: 16px;
	color: var(--c-white);
	padding: 8px 12px;
}
.eekad-category__stats-sep {
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .35);
}
.eekad-category__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	background: var(--cat-color);
	color: var(--cat-on);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	transition: filter .15s ease, transform .15s ease;
}
.eekad-category__cta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* =============================================================
 * "الأكثر قراءة" — most-read section
 * =============================================================
 * Layout: a 2-column grid of 4 cards (top-right is the highlighted
 * "rank #1" card with an indigo background). Each card is a 3-column
 * mini-grid: big numeral on the visual LEFT, title + meta in the
 * middle, square thumbnail on the visual far edge. The section header
 * is a lime "tag" badge with the Figma Subtract path inlined as SVG.
 */
.eekad-most-read {
	padding-block: 88px 64px;
	background: var(--c-bg, #1c1f24);
	color: var(--c-white);
}
.eekad-most-read__header {
	display: flex;
	justify-content: flex-start; /* RTL: visual right */
	margin-block-end: 40px;
}
/* Lime tag badge.
   Inline SVG sits absolutely behind the text. The badge keeps a fixed
   60px height and the SVG stretches via preserveAspectRatio=none. */
.eekad-most-read__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding-inline: 22px 26px;
}
.eekad-most-read__badge-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	z-index: 0;
}
.eekad-most-read__badge-label {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--c-ink);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.eekad-most-read__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	/* Column-major flow so DOM order [1,2,3,4] lands as:
	     col 1 (right in RTL) → 1, 2
	     col 2 (left  in RTL) → 3, 4
	   matching the Figma layout. */
	grid-auto-flow: column;
	column-gap: 24px;
	row-gap: 8px;
}
/* Each card is a flex row containing [thumb, body, rank]. In an
   RTL flex row the first child sits on the visual right, so the
   thumbnail lands on the leading (visual right) edge, the title
   block sits in the middle, and the rank numeral sits on the
   trailing (visual left) edge — INSIDE the card. The featured
   card's indigo bg covers the whole card. */
.eekad-most-read__card {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	min-height: 156px;
	padding: 16px;
	color: var(--c-white);
	background: transparent;
	border-block-end: 1px solid rgba(255, 255, 255, .06);
	transition: background .2s ease;
}
.eekad-most-read__card:hover { background: rgba(255, 255, 255, .03); }
.eekad-most-read__card.is-featured {
	background: var(--c-indigo);
	border-block-end-color: transparent;
}
.eekad-most-read__card.is-featured:hover {
	background: var(--c-indigo-deep);
}
.eekad-most-read__rank {
	flex: 0 0 80px;
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 88px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, .12);
	text-align: center;
}
.eekad-most-read__body {
	flex: 1 1 0;
	min-width: 0; /* let the title truncate cleanly */
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eekad-most-read__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-white);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-most-read__views {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, .72);
}
.eekad-most-read__card.is-featured .eekad-most-read__views {
	color: rgba(255, 255, 255, .85);
}
.eekad-most-read__meta {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}
.eekad-most-read__sep {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, .35);
}
.eekad-most-read__cat { color: rgba(255, 255, 255, .72); }
.eekad-most-read__card.is-featured .eekad-most-read__meta,
.eekad-most-read__card.is-featured .eekad-most-read__cat {
	color: rgba(255, 255, 255, .85);
}
.eekad-most-read__thumb {
	flex: 0 0 124px;
	display: block;
	width: 124px;
	height: 124px;
	background-color: rgba(255, 255, 255, .04);
	background-size: cover;
	background-position: center;
}
.eekad-most-read__thumb.is-empty {
	background-image: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* =============================================================
 * "تحقق معنا" — verification carousel
 * =============================================================
 * Horizontal scroller of fact-check cards. Each card is a square
 * image stacked above a dark (or indigo, when featured) body that
 * contains a kicker line, the verdict title, and a CTA button. A
 * red "مضلل" / green "صحيح" sticker plus a small QR sticker are
 * pinned over the bottom edge of the image.
 */
.eekad-verify {
	position: relative;
	padding-block: 96px 96px;
	background: var(--c-bg, #1c1f24);
	color: var(--c-white);
	overflow: hidden;
	isolation: isolate;
}
/* Blurred photo background covering the whole section. The image is
   blown up + blurred so the section reads as an immersive backdrop
   behind the cards. A dark veil sits on top to keep contrast. */
.eekad-verify__bg {
	position: absolute;
	inset: -40px;
	z-index: -2;
	background-image: var(--verify-bg);
	background-size: cover;
	background-position: center;
	filter: blur(28px) saturate(.85);
	transform: scale(1.08);
}
.eekad-verify__bg-veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(28,31,36,.78) 0%, rgba(28,31,36,.62) 50%, rgba(28,31,36,.82) 100%);
}
.eekad-verify .eekad-container { position: relative; z-index: 1; }
.eekad-verify__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: 40px;
}
.eekad-verify__title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-white);
}
.eekad-verify__title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--c-lime);
	flex-shrink: 0;
}
.eekad-verify__title-icon svg { width: 22px; height: 22px; display: block; }
.eekad-verify__nav {
	display: inline-flex;
	gap: 12px;
}
.eekad-verify__nav-btn {
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	color: var(--c-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background .15s ease, border-color .15s ease;
}
.eekad-verify__nav-btn:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .5);
}
.eekad-verify__nav-btn svg { width: 22px; height: 22px; }

/* Carousel viewport masks the rail to the container; the rail
   itself is wider than the viewport and is translated by JS. */
.eekad-verify__viewport {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
/* Full-bleed wrapper: pads the leading edge so the rail starts aligned
   with .eekad-container's leading edge, but the trailing side runs all
   the way to the screen edge so the last card can extend past. */
.eekad-verify__viewport .eekad-container-bleed {
	padding-inline-start: max(var(--container-px), calc((100vw - var(--container)) / 2 + var(--container-px)));
}
.eekad-verify__rail {
	display: flex;
	gap: 32px;
	transition: transform .35s ease;
	will-change: transform;
}

/* Each card: ~360px wide, ~560px tall. The photo fills the entire
   card; the body is absolutely positioned over the bottom portion
   with a clip-path tab on the leading edge so the photo bleeds
   through the cutout (matches Figma boolean Subtract shape). */
.eekad-verify__card {
	flex: 0 0 360px;
	height: 560px;
	position: relative;
	background: transparent;
}

.eekad-verify__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0e1014;
}
.eekad-verify__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Verdict sticker — exported directly from Figma (nodes 94:1469
   red / 94:1767 lime). The SVG itself is a tilted parallelogram
   with all the contents (warning icon, verdict text, QR, hash
   pattern, "المصادر" label) baked in.
   Sits inside the card, straddling the photo/body boundary so its
   bottom edge crosses just into the body's stepped top area. */
.eekad-verify__sticker {
	position: absolute;
	display: block;
	width: 280px;
	height: auto;
	inset-inline-end: 24px; /* RTL: visual LEFT — sticker sits on the same side as the body's tab */
	bottom: 218px;            /* sits across the photo/body boundary, just above the body's tab */
	z-index: 2;
	pointer-events: none;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}

/* Body shape: NOT a plain rectangle. Matches Figma "Subtract"
   boolean op (94:1466 / 94:1764) exactly. Path:
     M294.377 22.417 H394.333 V219 H-0.667 V0 H294.377 V22.417 Z
   Read: the LEFT 75% of the body extends up to y=0 (full height),
   then steps DOWN to y≈10% for the RIGHT 25%. So the body has a
   TAB on its left side (visual left) — same side as the sticker,
   making the body wrap around it slightly. The photo behind the
   card bleeds through the recessed area on the right.
   In RTL, physical left of the box = visual left = where the
   sticker sits and where the tab pokes up. */
.eekad-verify__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 240px;
	padding: 56px 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: #20242b;
	z-index: 1;
	clip-path: polygon(
		0% 0%,
		74.5% 0%,
		74.5% 9.13%,
		100% 9.13%,
		100% 100%,
		0% 100%
	);
}
.eekad-verify__card.is-featured .eekad-verify__body {
	background: var(--c-indigo);
}
.eekad-verify__kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, .7);
	text-align: center;
}
.eekad-verify__card.is-featured .eekad-verify__kicker { color: rgba(255, 255, 255, .85); }
.eekad-verify__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--c-white);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-verify__heading a { color: inherit; }
.eekad-verify__heading a:hover { opacity: .85; }
.eekad-verify__cta {
	align-self: flex-start; /* RTL: visual right edge of body */
	margin-block-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	padding: 10px 20px;
	background: var(--c-indigo);
	color: var(--c-white);
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease, transform .15s ease;
}
.eekad-verify__card.is-featured .eekad-verify__cta {
	background: transparent;
	color: var(--c-lime);
	border: 1.5px solid var(--c-lime);
}
.eekad-verify__cta:hover {
	background: var(--c-indigo-deep);
	transform: translateY(-1px);
}
.eekad-verify__card.is-featured .eekad-verify__cta:hover {
	background: rgba(255, 255, 255, .22);
}

/* =============================================================
 * Skeleton page placeholder (delete once homepage is built)
 * =========================================================== */
.eekad-skeleton {
	max-width: 720px;
	margin: 80px auto;
	padding: 32px;
	background: var(--c-surface);
	border: 1px solid var(--c-indigo-muted);
	border-radius: 8px;
}
.eekad-skeleton h1 {
	font-size: var(--fs-h2);
	margin: 0 0 12px;
	color: var(--c-lime);
	font-weight: 700;
}
.eekad-skeleton p { color: var(--c-grey-200); margin: 0 0 8px; }
.eekad-skeleton code {
	font-family: var(--font-mono);
	color: var(--c-lime);
	background: var(--c-ink);
	padding: 2px 6px;
	border-radius: 3px;
}

/* =============================================================
 * Hot Articles section ("مقالات الساخنة") — Figma node 53:2
 * Two-column: featured card on the visual right, three small
 * cards stacked on the visual left. Indigo bg with subtle dot grid.
 * =========================================================== */
.eekad-hot {
	position: relative;
	padding-block: 96px 128px;
	background: var(--c-indigo);
	background-image:
		radial-gradient(circle, rgba(255,255,255,.10) 1.2px, transparent 1.6px);
	background-size: 32px 32px;
	background-position: 0 0;
	color: #fff;
	overflow: hidden;
}

/* --- Header --- */
.eekad-hot__header {
	display: flex;
	justify-content: flex-start; /* RTL: visually right */
	margin-block-end: 56px;
}
.eekad-hot__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
}
.eekad-hot__bracket {
	display: inline-block;
	width: 21px;
	height: 59px;
	flex: 0 0 21px;
}
.eekad-hot__bracket svg { display: block; width: 100%; height: 100%; }
.eekad-hot__title-text { display: inline-block; padding-inline: 4px; }

/* --- Two-column grid --- */
.eekad-hot__grid {
	display: grid;
	grid-template-columns: 1fr 650px; /* small stack | featured */
	gap: 32px;
	align-items: start;
}

/* --- Small cards stack --- */
.eekad-hot__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.eekad-hot__card {
	display: grid;
	grid-template-columns: 24px 1fr 174px;
	gap: 16px;
	align-items: stretch;
	height: 206px;
	padding: 16px;
	background: #2a2f36;
	color: #fff;
}
.eekad-hot__card-icon {
	display: block;
	width: 24px;
	height: 24px;
}
.eekad-hot__card-icon svg { width: 100%; height: 100%; display: block; }
.eekad-hot__card-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}
.eekad-hot__card-heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
}
.eekad-hot__card-heading a {
	color: inherit;
	text-decoration: none;
}
.eekad-hot__card-heading a:hover { color: var(--c-lime); }
.eekad-hot__card-thumb {
	width: 174px;
	height: 174px;
	overflow: hidden;
	background: #0e1014;
	align-self: center;
}
.eekad-hot__card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Featured card --- */
.eekad-hot__featured {
	position: relative;
	width: 650px;
	height: 650px;
}
.eekad-hot__featured-media {
	position: absolute;
	inset: 0;
	background: #0e1014;
	overflow: hidden;
	/* Subtract path: M522.658 40 H650 V650 H59 V596 H0 V0 H522.658 Z
	   Top-right notch (522.658×40) and bottom-left notch (59×54). */
	clip-path: polygon(
		80.41% 6.15%,
		100%   6.15%,
		100%   100%,
		9.08%  100%,
		9.08%  91.69%,
		0%     91.69%,
		0%     0%,
		80.41% 0%
	);
}
.eekad-hot__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.eekad-hot__featured-body {
	position: absolute;
	left: 44px;
	top: 388px;
	width: 561px;
	height: 219px;
	background: #2a2f36;
	color: #fff;
	/* Subtract path: M419.037 22.417 H561 V219 H71 V171 H0 V0 H419.037 Z
	   Top-right notch (142×22) and bottom-left notch (71×48). */
	clip-path: polygon(
		74.69% 10.24%,
		100%   10.24%,
		100%   100%,
		12.66% 100%,
		12.66% 78.08%,
		0%     78.08%,
		0%     0%,
		74.69% 0%
	);
}
.eekad-hot__featured-text {
	position: absolute;
	left: 228px; /* 272 - 44 */
	top: 66px;   /* 454 - 388 */
	width: 288px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eekad-hot__featured-heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: #fff;
}
.eekad-hot__featured-heading a { color: inherit; text-decoration: none; }
.eekad-hot__featured-heading a:hover { color: var(--c-lime); }
.eekad-hot__cta {
	position: absolute;
	left: 21px;  /* 65 - 44 */
	top: 21px;   /* 409 - 388 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 20px;
	background: var(--c-indigo);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	text-decoration: none;
	transition: background-color .15s ease;
}
.eekad-hot__cta:hover { background: var(--c-indigo-deep); }

/* --- Shared text styles for views + meta row --- */
.eekad-hot__views {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: #d8dbdd;
}
.eekad-hot__featured-text .eekad-hot__views { font-size: 18px; }
.eekad-hot__meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.3;
	color: #d8dbdd;
}
.eekad-hot__featured-text .eekad-hot__meta { font-size: 18px; }
.eekad-hot__meta-sep {
	display: inline-block;
	width: 21px;
	height: 1px;
	background: #d8dbdd;
}
.eekad-hot__featured-text .eekad-hot__meta-sep { width: 24px; }

/* --- Responsive: collapse below the desktop layout --- */
@media (max-width: 1100px) {
	.eekad-hot__grid {
		grid-template-columns: 1fr;
	}
	.eekad-hot__featured {
		width: 100%;
		max-width: 650px;
		margin-inline: auto;
		aspect-ratio: 1 / 1;
		height: auto;
	}
}
@media (max-width: 600px) {
	.eekad-hot__card {
		grid-template-columns: 24px 1fr;
		height: auto;
	}
	.eekad-hot__card-thumb { display: none; }
}

/* =============================================================
 * Featured Investigations section ("أبرز التحقيقات") — Figma 37:3671
 * Surveillance-style map overlay with corner ticks, top timestamp
 * row, center building marker, prev/next nav, and a 3-card strip.
 * =========================================================== */
.eekad-feat {
	position: relative;
	padding-block: 96px 96px;
	background: #1a1c21;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.eekad-feat__bg {
	position: absolute;
	inset: 0;
	background-image: var(--feat-bg);
	background-size: cover;
	background-position: center;
	z-index: -2;
}
.eekad-feat__bg-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(20,22,28,.55) 0%, rgba(20,22,28,.78) 100%);
	z-index: -1;
}
.eekad-feat .eekad-container {
	position: relative;
}

/* --- Header --- */
.eekad-feat__header {
	display: flex;
	justify-content: flex-start;
	margin-block-end: 32px;
}
.eekad-feat__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
}
.eekad-feat__bracket {
	display: inline-block;
	width: 21px;
	height: 59px;
	flex: 0 0 21px;
}
.eekad-feat__bracket svg { display: block; width: 100%; height: 100%; }
.eekad-feat__title-text { padding-inline: 4px; }

/* --- Map overlay rectangle --- */
.eekad-feat__overlay {
	position: relative;
	height: 638px;
	border: 1px solid rgba(205, 254, 100, .9);
	overflow: hidden;
	background: #0e1014;
	margin-block-end: 16px;
}
.eekad-feat__overlay-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
.eekad-feat__overlay-grad {
	position: absolute;
	left: 0;
	right: 0;
	height: 200px;
	z-index: 1;
	pointer-events: none;
}
.eekad-feat__overlay-grad--top {
	top: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
}
.eekad-feat__overlay-grad--bottom {
	bottom: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
}

/* Lime corner tick squares — pinned to the 4 corners, slightly offset
   so they straddle the border line. */
.eekad-feat__corner {
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--c-lime);
	z-index: 4;
}
.eekad-feat__corner--tl { top: -8px; left:  -8px; }
.eekad-feat__corner--tr { top: -8px; right: -8px; }
.eekad-feat__corner--bl { bottom: -8px; left:  -8px; }
.eekad-feat__corner--br { bottom: -8px; right: -8px; }

/* Top horizontal lime separator inside the box. */
.eekad-feat__topline {
	position: absolute;
	left: 32px;
	right: 32px;
	top: 72px;
	height: 3px;
	background: var(--c-lime);
	z-index: 3;
}

/* Top timestamp blocks — start = visual right (RTL leading edge),
   end = visual left. */
.eekad-feat__stamp {
	position: absolute;
	top: 32px;
	z-index: 4;
	color: var(--c-lime);
	font-family: var(--font-mono);
	font-weight: 500;
	max-width: 800px;
}
.eekad-feat__stamp--start { /* visual right in RTL */
	inset-inline-start: 32px;
}
.eekad-feat__stamp--end {   /* visual left in RTL */
	inset-inline-end: 32px;
}
.eekad-feat__stamp-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.eekad-feat__stamp-dot {
	display: block;
	width: 20px;
	height: 20px;
	background: var(--c-lime);
	position: relative;
}
.eekad-feat__stamp-dot::after {
	content: "";
	position: absolute;
	inset: 5px;
	background: #2a2f36;
}
.eekad-feat__stamp-date {
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: .02em;
}
.eekad-feat__desc {
	margin: 12px 0 0;
	max-width: 800px;
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
}

/* Center "building" marker — lime square outline with inner square
   and a horizontal arm to a label rectangle. */
.eekad-feat__marker {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 0;
	z-index: 4;
}
.eekad-feat__marker-box {
	width: 88px;
	height: 88px;
	border: 2px solid var(--c-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 88px;
}
.eekad-feat__marker-inner {
	display: block;
	width: 18px;
	height: 18px;
	background: var(--c-lime);
}
.eekad-feat__marker-arm {
	display: block;
	width: 56px;
	height: 2px;
	background: var(--c-lime);
}
.eekad-feat__marker-label {
	display: inline-block;
	padding: 6px 12px;
	background: var(--c-lime);
	color: #2a2f36;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
}

/* Bottom prev/next white nav buttons. */
.eekad-feat__nav {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 32px;
	display: flex;
	justify-content: space-between;
	z-index: 4;
}
.eekad-feat__nav-btn {
	width: 60px;
	height: 60px;
	background: #fff;
	border: 1px solid rgba(255,255,255,.6);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .15s ease;
	padding: 0;
}
.eekad-feat__nav-btn:hover { background: var(--c-lime); }
.eekad-feat__nav-btn svg { width: 26px; height: 26px; display: block; }

/* --- 3-card strip below the overlay --- */
.eekad-feat__cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	margin-block-start: 16px;
}
.eekad-feat__card {
	display: grid;
	grid-template-columns: 24px 1fr 102px;
	gap: 16px;
	align-items: center;
	height: 134px;
	padding: 16px;
	background: #2a2f36;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}
.eekad-feat__card.is-active {
	background: var(--c-indigo);
}
.eekad-feat__card:hover {
	background: var(--c-indigo-deep);
}
.eekad-feat__card-icon {
	display: block;
	width: 24px;
	height: 24px;
	align-self: start;
}
.eekad-feat__card-icon svg { width: 100%; height: 100%; display: block; }
.eekad-feat__card-text {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.eekad-feat__card-thumb {
	display: block;
	width: 102px;
	height: 102px;
	overflow: hidden;
	background: #0e1014;
}
.eekad-feat__card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.eekad-feat__overlay { height: 520px; }
	.eekad-feat__cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.eekad-feat__overlay { height: 440px; }
	.eekad-feat__desc { font-size: 15px; }
	.eekad-feat__stamp-date { font-size: 18px; }
	.eekad-feat__nav { left: 16px; right: 16px; bottom: 16px; }
	.eekad-feat__nav-btn { width: 48px; height: 48px; }
	.eekad-feat__topline { left: 16px; right: 16px; }
	.eekad-feat__stamp--start { inset-inline-start: 16px; }
	.eekad-feat__stamp--end   { inset-inline-end: 16px; }
}

/* =============================================================
 * Site footer — surveillance/intel dark theme matching the rest
 * of the site. Top tech strip + 3-column main + bottom bar.
 * =========================================================== */
.eekad-site-footer {
	background: #14171c;
	color: var(--c-grey-100);
	border-top: 1px solid rgba(205, 254, 100, .35);
	font-family: var(--font-sans);
}

/* --- Top tech strip --- */
.eekad-site-footer__tech {
	border-bottom: 1px solid rgba(205, 254, 100, .18);
	background: linear-gradient(180deg, rgba(205,254,100,.06) 0%, transparent 100%);
}
.eekad-site-footer__tech-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
}
.eekad-site-footer__tech-mark {
	display: inline-flex;
	width: 24px;
	height: 24px;
	background: var(--c-lime);
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
}
.eekad-site-footer__tech-mark svg {
	width: 16px;
	height: 16px;
	stroke: #2a2f36 !important;
}
.eekad-site-footer__tech-line {
	flex: 1 1 auto;
	height: 1px;
	background: rgba(205, 254, 100, .4);
}
.eekad-site-footer__tech-code {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--c-lime);
	white-space: nowrap;
}

/* --- Main grid --- */
.eekad-site-footer__main {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 64px;
	padding-block: 72px 56px;
	align-items: start;
}

/* --- Brand column --- */
.eekad-site-footer__logo {
	display: inline-block;
	color: var(--c-white);
	margin-block-end: 20px;
	transition: color .15s ease;
}
.eekad-site-footer__logo:hover { color: var(--c-lime); }
.eekad-site-footer__logo svg {
	display: block;
	height: 36px;
	width: auto;
}
.eekad-site-footer__logo-text {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .02em;
}
.eekad-site-footer__tagline {
	margin: 0 0 24px;
	max-width: 360px;
	color: var(--c-grey-200);
	font-size: 15px;
	line-height: 1.7;
}
.eekad-site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
}
.eekad-site-footer__social a {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .18);
	color: var(--c-grey-100);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.eekad-site-footer__social a:hover {
	background: var(--c-lime);
	border-color: var(--c-lime);
	color: #14171c;
}
.eekad-site-footer__social svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* --- Section headings (lime accent line) --- */
.eekad-site-footer__heading {
	margin: 0 0 20px;
	color: var(--c-white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	position: relative;
	padding-inline-start: 14px;
}
.eekad-site-footer__heading::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--c-lime);
}

/* --- Nav menu --- */
.eekad-site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}
.eekad-site-footer__menu li { margin: 0; }
.eekad-site-footer__menu a {
	color: var(--c-grey-100);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.6;
	transition: color .15s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.eekad-site-footer__menu a::before {
	content: "›";
	color: var(--c-lime);
	font-size: 16px;
	line-height: 1;
}
.eekad-site-footer__menu a:hover { color: var(--c-lime); }

/* --- Newsletter --- */
.eekad-site-footer__newsletter-blurb {
	margin: 0 0 16px;
	color: var(--c-grey-200);
	font-size: 14px;
	line-height: 1.6;
}
.eekad-site-footer__form {
	display: flex;
	gap: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .04);
	transition: border-color .15s ease;
}
.eekad-site-footer__form:focus-within {
	border-color: var(--c-lime);
}
.eekad-site-footer__form input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	background: transparent;
	border: none;
	color: var(--c-white);
	font-family: inherit;
	font-size: 14px;
}
.eekad-site-footer__form input::placeholder {
	color: var(--c-grey-300);
}
.eekad-site-footer__form input:focus { outline: none; }
.eekad-site-footer__form button {
	padding: 12px 20px;
	background: var(--c-lime);
	color: #14171c;
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
	white-space: nowrap;
}
.eekad-site-footer__form button:hover {
	background: #b6e84a;
}

/* --- Bottom bar --- */
.eekad-site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	background: rgba(0, 0, 0, .25);
}
.eekad-site-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-block: 20px;
	flex-wrap: wrap;
}
.eekad-site-footer__copy {
	margin: 0;
	color: var(--c-grey-300);
	font-size: 13px;
}
.eekad-site-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}
.eekad-site-footer__legal a {
	color: var(--c-grey-300);
	text-decoration: none;
	font-size: 13px;
	transition: color .15s ease;
}
.eekad-site-footer__legal a:hover { color: var(--c-lime); }

/* --- Responsive --- */
@media (max-width: 900px) {
	.eekad-site-footer__main {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-block: 56px 40px;
	}
	.eekad-site-footer__tagline { max-width: none; }
}
@media (max-width: 600px) {
	.eekad-site-footer__tech-code { font-size: 10px; letter-spacing: .04em; }
	.eekad-site-footer__menu { grid-template-columns: 1fr; }
	.eekad-site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =============================================================
 * Investigation single template — 3-column article grid
 *
 * Every direct child of .eekad-investigation__body lands in one of
 * three named columns:
 *   narrow  (~720px max)  default
 *   wide    (~960px max)  alignwide / .is-wide
 *   bleed   (100vw)       alignfull / .is-bleed
 * Block CSS only needs to size the inner content; placement is
 * handled by the grid here so blocks stay decoupled.
 * =========================================================== */
.eekad-investigation {
	background: #14171c;
	color: var(--c-grey-100);
	padding-block: 0 120px;
}
.eekad-investigation__body {
	display: grid;
	grid-template-columns:
		[bleed-start]
			minmax(var(--container-px), 1fr)
		[wide-start]
			minmax(0, 120px)
		[narrow-start]
			minmax(0, 720px)
		[narrow-end]
			minmax(0, 120px)
		[wide-end]
			minmax(var(--container-px), 1fr)
		[bleed-end];
	row-gap: 40px;
}
.eekad-investigation__body > * {
	grid-column: narrow;
	min-width: 0;
}
.eekad-investigation__body > .alignwide,
.eekad-investigation__body > .is-wide {
	grid-column: wide;
}
.eekad-investigation__body > .alignfull,
.eekad-investigation__body > .is-bleed {
	grid-column: bleed;
}

/* Default block typography — applies to core paragraph/heading/list. */
.eekad-investigation__body p,
.eekad-investigation__body li {
	font-family: var(--font-sans);
	font-size: 19px;
	line-height: 1.85;
	color: var(--c-grey-100);
	margin: 0;
}
.eekad-investigation__body p + p {
	margin-top: 1.4em;
}
.eekad-investigation__body h2,
.eekad-investigation__body h3 {
	font-family: var(--font-sans);
	color: var(--c-white);
	margin: 0;
}
.eekad-investigation__body h2 { font-size: 32px; line-height: 1.25; font-weight: 700; }
.eekad-investigation__body h3 { font-size: 24px; line-height: 1.3; font-weight: 700; }
.eekad-investigation__body a {
	color: var(--c-lime);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.eekad-investigation__body a:hover { color: #fff; }
.eekad-investigation__body ul,
.eekad-investigation__body ol {
	margin: 0;
	padding-inline-start: 24px;
}
.eekad-investigation__body ul li + li,
.eekad-investigation__body ol li + li {
	margin-top: .6em;
}

/* --- Cover block — full-bleed dossier hero --- */
.eekad-iv-cover {
	position: relative;
	min-height: 720px;
	display: flex;
	align-items: flex-end;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	margin-block: 0 64px;
}
.eekad-iv-cover__bg {
	position: absolute;
	inset: 0;
	background-image: var(--iv-cover-bg);
	background-size: cover;
	background-position: center;
	z-index: -2;
	transform: scale(1.04);
}
.eekad-iv-cover__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(20, 23, 28, .55) 0%,
			rgba(20, 23, 28, .15) 35%,
			rgba(20, 23, 28, .85) 100%);
	z-index: -1;
}
.eekad-iv-cover__inner {
	position: relative;
	width: 100%;
	max-width: var(--container);
	padding-block: 120px 64px;
	padding-inline: var(--container-px);
	margin-inline: auto;
}
.eekad-iv-cover__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 12px;
	background: var(--c-lime);
	color: #14171c;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-block-end: 28px;
}
.eekad-iv-cover__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #14171c;
}
.eekad-iv-cover__geo {
	display: flex;
	gap: 16px;
	margin-block-end: 20px;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--c-lime);
}
.eekad-iv-cover__title {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 64px);
	line-height: 1.1;
	color: #fff;
	max-width: 18ch;
}
.eekad-iv-cover__kicker {
	margin: 0 0 32px;
	max-width: 60ch;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.55;
	color: var(--c-grey-100);
}
.eekad-iv-cover__date {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--c-grey-200);
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

/* --- Lead block --- */
.eekad-iv-lead {
	font-family: var(--font-sans);
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 300;
	line-height: 1.65;
	color: #fff;
	margin: 24px 0;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--c-lime);
}
.eekad-iv-lead.has-drop-cap::first-letter {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 4.4em;
	float: inline-start;
	line-height: .85;
	margin-inline-end: 12px;
	color: var(--c-lime);
}

/* --- Section heading block --- */
.eekad-iv-section-heading {
	margin: 32px 0 8px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #fff;
	scroll-margin-top: 96px;
}
.eekad-iv-section-heading::before {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	width: 14px;
	height: 38px;
	border: 3px solid var(--c-lime);
	border-inline-end: none;
}
.eekad-iv-section-heading::after {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	width: 14px;
	height: 38px;
	border: 3px solid var(--c-lime);
	border-inline-start: none;
	margin-inline-end: auto;
}

/* --- Pull quote block --- */
.eekad-iv-pullquote {
	position: relative;
	margin: 48px 0;
	padding: 56px 40px 40px;
	background: var(--c-indigo);
	color: #fff;
	overflow: hidden;
}
.eekad-iv-pullquote::before {
	content: "\201D"; /* RTL closing quote — opens the quote in Arabic */
	position: absolute;
	top: -8px;
	inset-inline-start: 24px;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 140px;
	line-height: 1;
	color: var(--c-lime);
	pointer-events: none;
}
.eekad-iv-pullquote__text {
	margin: 0 0 24px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.4;
	color: #fff;
}
.eekad-iv-pullquote__cite {
	display: block;
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--c-lime);
	text-transform: uppercase;
}
.eekad-iv-pullquote__cite::before {
	content: "— ";
}

/* --- Figure block --- */
.eekad-iv-figure {
	margin: 32px 0;
}
.eekad-iv-figure__media {
	display: block;
	background: #0e1014;
	overflow: hidden;
}
.eekad-iv-figure__media img {
	width: 100%;
	height: auto;
	display: block;
}
.eekad-iv-figure__caption {
	margin-top: 14px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-grey-200);
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.eekad-iv-figure__caption::before {
	content: "";
	flex: 0 0 28px;
	height: 1px;
	background: var(--c-lime);
	margin-top: 11px;
}
.eekad-iv-figure__credit {
	display: block;
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-grey-300);
}

/* =============================================================
 * Investigation — Phase 2 blocks
 * =========================================================== */

/* ----- Findings / stats grid ------------------------------- */
.eekad-iv-stats {
	display: grid;
	gap: 24px;
	margin: 16px 0;
}
.eekad-iv-stats.has-cols-2 { grid-template-columns: repeat(2, 1fr); }
.eekad-iv-stats.has-cols-3 { grid-template-columns: repeat(3, 1fr); }
.eekad-iv-stats.has-cols-4 { grid-template-columns: repeat(4, 1fr); }

.eekad-iv-stat-card {
	position: relative;
	padding: 28px 24px 24px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-block-start: 2px solid var(--c-lime);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.eekad-iv-stat-card__num {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-lime);
}
.eekad-iv-stat-card__label {
	font-family: var(--font-sans);
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}
.eekad-iv-stat-card__body {
	font-size: 15px;
	color: var(--c-grey-200);
	margin: 0;
}

/* ----- Timeline -------------------------------------------- */
/* Note: selectors below use `ol.eekad-iv-timeline` to outrank
   `.eekad-investigation__body ol` (which sets padding-inline-start: 24px
   for prose lists). Without this, the line and the markers end up offset
   from each other by the body OL padding. */
ol.eekad-iv-timeline {
	list-style: none;
	margin: 16px 0;
	padding: 0;
	position: relative;
	--timeline-fill: 0px;
}
.eekad-investigation__body ol.eekad-iv-timeline li + li {
	margin-top: 0;
}
/* Base track — runs only between the FIRST and LAST marker centers.
   Endpoints are measured by JS and exposed as CSS variables. */
.eekad-iv-timeline::before {
	content: '';
	position: absolute;
	top: var(--timeline-track-start, 0);
	height: calc(var(--timeline-track-end, 0px) - var(--timeline-track-start, 0px));
	inset-inline-start: 11px;
	width: 2px;
	background: rgba(255, 255, 255, 0.18);
	z-index: 0;
}
/* Progress fill — lime line that grows from the first marker down to the
   current marker as the reader scrolls. */
.eekad-iv-timeline::after {
	content: '';
	position: absolute;
	top: var(--timeline-track-start, 0);
	height: max(0px, calc(var(--timeline-fill, 0px) - var(--timeline-track-start, 0px)));
	inset-inline-start: 11px;
	width: 2px;
	background: var(--c-lime);
	transition: height 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 1;
	box-shadow: 0 0 12px rgba(190, 242, 100, 0.4);
}
.eekad-iv-timeline__event {
	position: relative;
	padding-inline-start: 56px;
	padding-block: 16px;
}
/* Content (date/title/body) wrapper — hidden until this event becomes
   the current one. Reaching the dot reveals the entry. */
.eekad-iv-timeline__content {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s ease,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.eekad-iv-timeline__event.is-current .eekad-iv-timeline__content,
.eekad-iv-timeline__event.is-passed  .eekad-iv-timeline__content {
	opacity: 1;
	transform: translateY(0);
}
/* Marker — solid-fill ring. Background matches the page so the line
   passing behind it is *hidden* by the marker disc; only the segment of
   line above and below the disc remains visible, which makes the dots
   look like beads strung along the line. */
.eekad-iv-timeline__marker {
	position: absolute;
	box-sizing: border-box;
	inset-inline-start: 0;
	inset-block-start: 22px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #0e1116;
	border: 3px solid rgba(255, 255, 255, 0.28);
	z-index: 2;
	transition:
		background 0.5s ease,
		border-color 0.5s ease,
		box-shadow 0.5s ease;
}
/* Inner dot — appears when the event is current/passed. Starts collapsed,
   scales up when its parent gets `is-current` or `is-passed`. */
.eekad-iv-timeline__marker::after {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--c-lime);
	transform: scale(0);
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Passed (the reader is below this marker) — keep filled and lit, no pulse. */
.eekad-iv-timeline__event.is-passed .eekad-iv-timeline__marker {
	border-color: var(--c-lime);
	background: #0e1116;
	box-shadow: 0 0 14px rgba(190, 242, 100, 0.35);
}
.eekad-iv-timeline__event.is-passed .eekad-iv-timeline__marker::after {
	transform: scale(1);
}

/* Current (the marker the reader has just reached) — filled + pulsing. */
.eekad-iv-timeline__event.is-current .eekad-iv-timeline__marker {
	border-color: var(--c-lime);
	background: #0e1116;
	animation: eekad-timeline-pulse 1.8s ease-out infinite;
}
.eekad-iv-timeline__event.is-current .eekad-iv-timeline__marker::after {
	transform: scale(1);
}

@keyframes eekad-timeline-pulse {
	0% {
		box-shadow:
			0 0 0 0 rgba(190, 242, 100, 0.55),
			0 0 14px rgba(190, 242, 100, 0.4);
	}
	70% {
		box-shadow:
			0 0 0 14px rgba(190, 242, 100, 0),
			0 0 18px rgba(190, 242, 100, 0.5);
	}
	100% {
		box-shadow:
			0 0 0 0 rgba(190, 242, 100, 0),
			0 0 14px rgba(190, 242, 100, 0.4);
	}
}
.eekad-iv-timeline__date {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--c-lime);
	text-transform: uppercase;
	margin-block-end: 6px;
}
.eekad-iv-timeline__title {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
}
.eekad-iv-timeline__body {
	font-size: 16px;
	color: var(--c-grey-200);
	margin: 0;
	line-height: 1.65;
}
/* Reduced motion — show everything immediately, no transitions */
@media (prefers-reduced-motion: reduce) {
	.eekad-iv-timeline__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.eekad-iv-timeline::after {
		transition: none;
	}
	.eekad-iv-timeline__marker,
	.eekad-iv-timeline__marker::after {
		transition: none;
		animation: none;
	}
	.eekad-iv-timeline__event.is-current .eekad-iv-timeline__marker {
		animation: none;
	}
}

/* ----- Evidence gallery ------------------------------------ */
.eekad-iv-gallery { margin: 16px 0; }
.eekad-iv-gallery__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--c-lime);
	text-transform: uppercase;
	margin-block-end: 16px;
}
.eekad-iv-gallery__grid {
	display: grid;
	gap: 16px;
}
.eekad-iv-gallery.has-cols-2 .eekad-iv-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.eekad-iv-gallery.has-cols-3 .eekad-iv-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.eekad-iv-gallery.has-cols-4 .eekad-iv-gallery__grid { grid-template-columns: repeat(4, 1fr); }
.eekad-iv-gallery__cell {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.eekad-iv-gallery__media {
	position: relative;
	background: #20242b;
	overflow: hidden;
}
.eekad-iv-gallery__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
.eekad-iv-gallery__seq {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	background: #14171c;
	color: var(--c-lime);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	letter-spacing: .12em;
}
.eekad-iv-gallery__caption {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--c-grey-300);
	letter-spacing: .04em;
}

/* ----- Sources list ---------------------------------------- */
.eekad-iv-sources {
	margin: 16px 0;
	padding: 32px;
	background: rgba(255, 255, 255, 0.03);
	border-block-start: 2px solid var(--c-lime);
}
.eekad-iv-sources__label {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--c-lime);
	text-transform: uppercase;
	margin: 0 0 16px;
}
.eekad-iv-sources__list {
	margin: 0;
	padding-inline-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.eekad-iv-source {
	font-size: 15px;
	color: var(--c-grey-100);
	line-height: 1.5;
}
.eekad-iv-source__type {
	display: inline-block;
	background: var(--c-lime);
	color: #14171c;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	letter-spacing: .1em;
	margin-inline-end: 8px;
	vertical-align: middle;
}
.eekad-iv-source__title {
	color: #fff;
	text-decoration: none;
	border-block-end: 1px solid rgba(255, 255, 255, 0.2);
}
a.eekad-iv-source__title:hover { border-block-end-color: var(--c-lime); }
.eekad-iv-source__note {
	display: block;
	margin-block-start: 4px;
	color: var(--c-grey-300);
	font-size: 13px;
}

/* ----- Sticky scroll steps --------------------------------- */
.eekad-iv-sticky {
	position: relative;
	background: #0e1116;
	padding-block: 80px;
}
.eekad-iv-sticky__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding-inline: var(--container-px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}
.eekad-iv-sticky.is-side-end .eekad-iv-sticky__inner { direction: ltr; }
.eekad-iv-sticky.is-side-end .eekad-iv-sticky__media,
.eekad-iv-sticky.is-side-end .eekad-iv-sticky__steps { direction: rtl; }

.eekad-iv-sticky__media {
	position: sticky;
	top: 80px;
	height: calc(100vh - 160px);
	min-height: 480px;
	background: #0a0c10;
	overflow: hidden;
	border: 1px solid rgba(190, 242, 100, 0.18);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
/* Vignette + film-grain overlay sits above the slots */
.eekad-iv-sticky__media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center,
			transparent 55%,
			rgba(0, 0, 0, 0.55) 100%),
		linear-gradient(180deg,
			rgba(20, 23, 28, 0.35) 0%,
			transparent 22%,
			transparent 70%,
			rgba(20, 23, 28, 0.55) 100%);
}
/* Corner brackets — frame the media like a viewfinder */
.eekad-iv-sticky__media::after {
	content: '';
	position: absolute;
	inset: 14px;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(to right,  var(--c-lime) 0 24px, transparent 24px) top    left  / 24px 2px no-repeat,
		linear-gradient(to bottom, var(--c-lime) 0 24px, transparent 24px) top    left  / 2px 24px no-repeat,
		linear-gradient(to left,   var(--c-lime) 0 24px, transparent 24px) top    right / 24px 2px no-repeat,
		linear-gradient(to bottom, var(--c-lime) 0 24px, transparent 24px) top    right / 2px 24px no-repeat,
		linear-gradient(to right,  var(--c-lime) 0 24px, transparent 24px) bottom left  / 24px 2px no-repeat,
		linear-gradient(to top,    var(--c-lime) 0 24px, transparent 24px) bottom left  / 2px 24px no-repeat,
		linear-gradient(to left,   var(--c-lime) 0 24px, transparent 24px) bottom right / 24px 2px no-repeat,
		linear-gradient(to top,    var(--c-lime) 0 24px, transparent 24px) bottom right / 2px 24px no-repeat;
	opacity: .7;
}
.eekad-iv-sticky__slot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 0.8s ease, transform 6s ease-out;
}
.eekad-iv-sticky__slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.05) contrast(1.05);
}
.eekad-iv-sticky[data-active-step="0"] .eekad-iv-sticky__slot[data-step="0"],
.eekad-iv-sticky[data-active-step="1"] .eekad-iv-sticky__slot[data-step="1"],
.eekad-iv-sticky[data-active-step="2"] .eekad-iv-sticky__slot[data-step="2"],
.eekad-iv-sticky[data-active-step="3"] .eekad-iv-sticky__slot[data-step="3"],
.eekad-iv-sticky[data-active-step="4"] .eekad-iv-sticky__slot[data-step="4"],
.eekad-iv-sticky[data-active-step="5"] .eekad-iv-sticky__slot[data-step="5"],
.eekad-iv-sticky[data-active-step="6"] .eekad-iv-sticky__slot[data-step="6"],
.eekad-iv-sticky[data-active-step="7"] .eekad-iv-sticky__slot[data-step="7"] {
	opacity: 1;
	transform: scale(1);
}

.eekad-iv-sticky__steps {
	display: flex;
	flex-direction: column;
	gap: 75vh;
	padding-block: 25vh;
}
.eekad-iv-sticky__step {
	position: relative;
	background: linear-gradient(135deg,
		rgba(20, 23, 28, 0.92) 0%,
		rgba(14, 17, 22, 0.88) 100%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 36px 36px 36px 40px;
	border-inline-start: 2px solid var(--c-lime);
	box-shadow:
		0 24px 48px -24px rgba(0, 0, 0, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Step counter — "01 / 03" pinned to top corner */
.eekad-iv-sticky__step::before {
	content: counter(eekad-step, decimal-leading-zero);
	counter-increment: eekad-step;
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: 32px;
	background: var(--c-lime);
	color: #14171c;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	padding: 4px 10px;
}
.eekad-iv-sticky__steps {
	counter-reset: eekad-step;
}
.eekad-iv-sticky__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-lime);
	text-transform: uppercase;
	margin-block-end: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.eekad-iv-sticky__kicker::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--c-lime), transparent);
	opacity: .4;
}
.eekad-iv-sticky__body {
	font-size: 19px;
	color: #fff;
	line-height: 1.6;
	font-weight: 500;
}

/* ----- Before / after slider ------------------------------- */
.eekad-iv-ba {
	margin: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	--ba-pos: 50%;
}
.eekad-iv-ba__stage {
	position: relative;
	overflow: hidden;
	user-select: none;
	background: #14171c;
	aspect-ratio: 16 / 9;
}
.eekad-iv-ba__before,
.eekad-iv-ba__after {
	position: absolute;
	inset: 0;
}
.eekad-iv-ba__before img,
.eekad-iv-ba__after img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.eekad-iv-ba__after {
	clip-path: inset(0 0 0 var(--ba-pos));
}
.eekad-iv-ba__label {
	position: absolute;
	inset-block-start: 16px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	background: rgba(20, 23, 28, 0.85);
	color: var(--c-lime);
	padding: 6px 10px;
	z-index: 2;
}
.eekad-iv-ba__label.is-before { inset-inline-end: 16px; }
.eekad-iv-ba__label.is-after  { inset-inline-start: 16px; }
.eekad-iv-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	/* Physical left — JS computes from physical viewport edge,
	   so the handle must use physical `left` (not logical inset-inline-start),
	   otherwise it flips to the wrong side under RTL. */
	left: var(--ba-pos);
	transform: translateX(-50%);
	width: 44px;
	background: transparent;
	border: 0;
	cursor: ew-resize;
	z-index: 3;
	padding: 0;
}
.eekad-iv-ba__handle::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: var(--c-lime);
	box-shadow: 0 0 0 2px rgba(20, 23, 28, 0.6);
}
.eekad-iv-ba__handle::after {
	content: '⇆';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-lime);
	color: #14171c;
	display: grid;
	place-items: center;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
				0 0 0 3px rgba(20, 23, 28, 0.85);
}
.eekad-iv-ba.is-dragging { cursor: ew-resize; }
.eekad-iv-ba__caption {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--c-grey-300);
	letter-spacing: .04em;
}

/* ----- Map (Mapbox) ---------------------------------------- */
.eekad-iv-map {
	margin: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.eekad-iv-map__canvas {
	width: 100%;
	background: #0e1116;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.eekad-iv-map__caption {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--c-grey-300);
	letter-spacing: .04em;
}
.eekad-iv-map__error {
	display: grid;
	place-items: center;
	background: #20242b;
	border: 1px dashed rgba(255, 255, 255, 0.18);
	color: var(--c-grey-300);
	font-family: var(--font-mono);
	font-size: 12px;
	padding: 24px;
	text-align: center;
}
.eekad-iv-map__error code {
	background: #14171c;
	color: var(--c-lime);
	padding: 2px 6px;
	font-size: 11px;
}
.eekad-iv-map__pin {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c-lime);
	color: #14171c;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid #14171c;
	box-shadow: 0 0 0 2px var(--c-lime);
	cursor: pointer;
}
.mapboxgl-popup-content {
	background: #14171c !important;
	color: #fff !important;
	border-inline-start: 2px solid var(--c-lime);
	border-radius: 0 !important;
	font-family: var(--font-sans);
	padding: 14px 16px !important;
}
.mapboxgl-popup-content strong { color: var(--c-lime); display: block; margin-block-end: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.mapboxgl-popup-content p { margin: 0; font-size: 14px; }
.mapboxgl-popup-tip { display: none; }

/* Responsive tweaks */
@media (max-width: 800px) {
	.eekad-iv-cover { min-height: 560px; }
	.eekad-iv-cover__inner { padding-block: 96px 48px; }
	.eekad-iv-pullquote { padding: 48px 24px 32px; }
	.eekad-investigation__body { row-gap: 28px; }
	.eekad-investigation__body p,
	.eekad-investigation__body li { font-size: 17px; }

	.eekad-iv-stats.has-cols-3,
	.eekad-iv-stats.has-cols-4 { grid-template-columns: 1fr; }
	.eekad-iv-stats.has-cols-2 { grid-template-columns: 1fr; }
	.eekad-iv-gallery.has-cols-3 .eekad-iv-gallery__grid,
	.eekad-iv-gallery.has-cols-4 .eekad-iv-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.eekad-iv-sticky__inner { grid-template-columns: 1fr; gap: 32px; }
	.eekad-iv-sticky__media { position: relative; height: 60vh; min-height: 360px; top: auto; }
	.eekad-iv-sticky__steps { gap: 60vh; padding-block: 12vh; }

	.eekad-iv-immersive__card {
		max-width: 100%;
		margin-inline: 24px;
		padding: 28px 24px;
	}
}

/* =============================================================
 * Immersive Scroll — full-bleed cinematic scrollytelling
 * =========================================================== */
.eekad-iv-immersive {
	position: relative;
}

/* ----- Background plates: stacked, full-viewport, crossfading ----- */
.eekad-iv-immersive__bg {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: 0;
}

.eekad-iv-immersive__plate {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.eekad-iv-immersive__plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(1.08) contrast(1.04);
}

/* Dimming overlay per plate — controlled by --dim custom property */
.eekad-iv-immersive__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--dim, 0.55));
	pointer-events: none;
}

/* Active plate */
.eekad-iv-immersive[data-active-step="0"] .eekad-iv-immersive__plate[data-step="0"],
.eekad-iv-immersive[data-active-step="1"] .eekad-iv-immersive__plate[data-step="1"],
.eekad-iv-immersive[data-active-step="2"] .eekad-iv-immersive__plate[data-step="2"],
.eekad-iv-immersive[data-active-step="3"] .eekad-iv-immersive__plate[data-step="3"],
.eekad-iv-immersive[data-active-step="4"] .eekad-iv-immersive__plate[data-step="4"],
.eekad-iv-immersive[data-active-step="5"] .eekad-iv-immersive__plate[data-step="5"],
.eekad-iv-immersive[data-active-step="6"] .eekad-iv-immersive__plate[data-step="6"],
.eekad-iv-immersive[data-active-step="7"] .eekad-iv-immersive__plate[data-step="7"] {
	opacity: 1;
}

/* Vignette overlay on the bg container */
.eekad-iv-immersive__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center,
			transparent 40%,
			rgba(0, 0, 0, 0.5) 100%);
}

/* ----- Text track: scrolls over the sticky background ----- */
.eekad-iv-immersive__track {
	position: relative;
	z-index: 1;
	margin-top: -100vh; /* pull the track over the sticky bg */
	display: flex;
	flex-direction: column;
	gap: 80vh;
	padding-block: 40vh;
}

/* ----- Text cards ----- */
.eekad-iv-immersive__card {
	max-width: 480px;
	background: linear-gradient(135deg,
		rgba(14, 17, 22, 0.88) 0%,
		rgba(10, 12, 16, 0.82) 100%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 36px 36px 36px 40px;
	border-inline-start: 2px solid var(--c-lime);
	box-shadow:
		0 24px 64px -16px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	counter-increment: eekad-imm-step;
}

/* Step counter badge */
.eekad-iv-immersive__card::before {
	content: counter(eekad-imm-step, decimal-leading-zero);
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: 32px;
	background: var(--c-lime);
	color: #14171c;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	padding: 4px 10px;
}

.eekad-iv-immersive__track {
	counter-reset: eekad-imm-step;
}

/* Text position variants */
.eekad-iv-immersive.is-text-start .eekad-iv-immersive__card {
	margin-inline-start: max(24px, calc((100vw - 1280px) / 2 + 24px));
	margin-inline-end: auto;
}
.eekad-iv-immersive.is-text-end .eekad-iv-immersive__card {
	margin-inline-end: max(24px, calc((100vw - 1280px) / 2 + 24px));
	margin-inline-start: auto;
}
.eekad-iv-immersive.is-text-center .eekad-iv-immersive__card {
	margin-inline: auto;
	max-width: 560px;
	text-align: center;
	border-inline-start: none;
	border-bottom: 2px solid var(--c-lime);
}

/* Kicker */
.eekad-iv-immersive__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--c-lime);
	text-transform: uppercase;
	margin-block-end: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.eekad-iv-immersive__kicker::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--c-lime), transparent);
	opacity: .4;
}
.eekad-iv-immersive.is-text-center .eekad-iv-immersive__kicker {
	justify-content: center;
}
.eekad-iv-immersive.is-text-center .eekad-iv-immersive__kicker::after {
	display: none;
}

/* Body text */
.eekad-iv-immersive__body {
	font-size: 19px;
	color: #fff;
	line-height: 1.6;
	font-weight: 500;
}

/* ----- Editor styles ----- */
.eekad-iv-immersive__editor-hint {
	background: rgba(213, 254, 119, 0.08);
	border-inline-start: 3px solid var(--c-lime);
	color: #d8dbdd;
	font-size: 13px;
	padding: 10px 16px;
	margin-bottom: 16px;
}

.eekad-iv-immersive__step-edit {
	position: relative;
	min-height: 280px;
	background-color: #14171c;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 12px;
}

.eekad-iv-immersive__step-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.eekad-iv-immersive__step-content {
	position: relative;
	z-index: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
}