/**
 * Initiatives — a real, editable list of KCYPS programmes (the
 * "initiative" post type, functions.php), presented as a scroll-driven
 * stack: pure CSS position:sticky, no JS. Each .initiative-item pins
 * at the top of the viewport as you scroll past it, and the NEXT item
 * — sitting later in the stack with a higher z-index — slides up and
 * covers it. That's the whole trick: no scroll-hijacking, no jank,
 * degrades to plain stacked sections if sticky is unsupported.
 */
.initiatives-section {
	position: relative;
	background: var(--wp--preset--color--base);
}
/* Deliberately no overflow:hidden here — position:sticky on
   .initiative-item stops working the moment any ancestor clips
   overflow, since the browser has nowhere left for it to "stick"
   within. */

.initiatives-header {
	/* Fades into the first item's white background instead of cutting
	   sharply at the edge — there's no border between them (deliberately,
	   see .initiative-item__head above), so the color itself needs to
	   ease across that seam. */
	background: linear-gradient(to bottom, var(--wp--preset--color--paper), var(--wp--preset--color--base));
	padding: clamp(32px, 4vw, 56px) 8.75vw;
}

/* Same pattern as .initiative-item (outer padding) + .initiative-item__head
   (max-width + auto-margin, no padding of its own) — matching structures
   so the heading text and the "01"/"02" numbers land on the exact same
   left edge instead of double-applying the inset on one side only. */
.initiatives-header__inner {
	max-width: 1320px;
	margin: 0 auto;
}

.initiatives-header__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 14px;
}

.initiatives-header__row h2 {
	margin: 0;
	max-width: 620px;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
/* Same solid-to-hollow split as every other section heading. */
.initiatives-header__row h2 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #000;
}

.initiatives-header__arrow {
	display: inline-block;
	width: clamp(32px, 4vw, 48px);
	height: clamp(32px, 4vw, 48px);
	margin-left: 12px;
	color: var(--wp--preset--color--secondary);
	vertical-align: -0.3em;
}

/* ===== The stack ===== */
.initiatives-stack {
	position: relative;
	margin-top: 8px;
}

.initiative-item {
	position: sticky;
	top: 0;
	min-height: 440px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(16px, 3vw, 28px);
	background: var(--wp--preset--color--base);
	padding: clamp(24px, 4vw, 40px) 8.75vw;
	box-shadow: 0 -24px 60px rgba(40, 40, 40, 0.12);
}

.initiative-item__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
}

.initiative-item__number {
	display: inline-flex;
	align-items: flex-end;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
}

.initiative-item__number .dot {
	width: 10px;
	height: 10px;
	margin: 0 0 0.6em 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	flex: none;
}

.initiative-item__head h3 {
	margin: 0;
	max-width: 640px;
	text-align: right;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
}

.initiative-item__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
}

.initiative-item__media {
	position: relative;
}

.initiative-item__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(40, 40, 40, 0.12);
}
/* Sitewide featured-image fallback (nashon_get_post_image()) — contain
   the logo on a neutral ground instead of cropping it like a photo. */
.initiative-item__media--logo img {
	object-fit: contain;
	background: var(--wp--preset--color--paper);
	padding: 12%;
}

.initiative-item__text p {
	margin: 0 0 14px;
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.75;
}

/* "Read Full Story" gets its own hover instead of the shared
   darken-and-lift: it inverts to an outline instead, so it doesn't
   read as identical to every other button on the page. The transparent
   border is reserved up front so gaining a visible one on hover
   doesn't shift the button's size. */
.initiative-item__text a.btn--accent {
	border: 1.5px solid transparent;
}
.initiative-item__text a.btn--accent:hover,
.initiative-item__text a.btn--accent:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--secondary);
	box-shadow: none;
	border-color: var(--wp--preset--color--secondary);
	transform: translateY(-3px);
}

/* ===== Floating "Get Involved" card — first item only ===== */
.get-involved-card {
	position: absolute;
	z-index: 2;
	top: -28px;
	left: -28px;
	width: min(320px, calc(100% - 24px));
	background: linear-gradient(165deg, rgba(49, 161, 255, 0.08), var(--wp--preset--color--base) 55%);
	border-top: 5px solid var(--wp--preset--color--primary);
	border-radius: 4px 4px 12px 12px;
	box-shadow: 0 24px 48px rgba(40, 40, 40, 0.2);
	padding: 22px 24px 24px;
}

.get-involved-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.get-involved-card__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.get-involved-card h4 {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 1.05rem;
	font-weight: 800;
}

.get-involved-card form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.get-involved-card input,
.get-involved-card select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
}
.get-involved-card select {
	color: var(--wp--preset--color--muted);
}
.get-involved-card input:focus,
.get-involved-card select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.get-involved-card .btn {
	margin-top: 4px;
}
.get-involved-card .btn .wp-block-button__link {
	width: 100%;
	justify-content: center;
	padding: 13px 20px;
}

.get-involved-card__note {
	margin: 14px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: clamp(0.78rem, 0.73rem + 0.2vw, 0.9rem);
	line-height: 1.5;
}
.get-involved-card__note a {
	color: var(--wp--preset--color--primary);
}

.get-involved-card__status {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1.4;
}
.get-involved-card__status--success {
	background: rgba(49, 161, 255, 0.12);
	color: #1a71b3;
}
.get-involved-card__status--error {
	background: rgba(253, 169, 3, 0.15);
	color: #a6690a;
}

@media (max-width: 900px) {
	.initiative-item__body {
		grid-template-columns: 1fr;
	}
	.initiative-item__head h3 {
		text-align: left;
	}
	.get-involved-card {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: 24px;
	}
}

@media (max-width: 700px) {
	.initiatives-header__row {
		align-items: flex-start;
	}
	.initiative-item {
		position: static;
		min-height: 0;
		padding: 32px 24px;
		box-shadow: none;
	}
	.initiative-item__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.initiative-item__head h3 {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.initiative-item {
		position: static;
	}
}