/* ==========================================================================
   NFCR page header  [nfcr_page_hero layout="intro"]
   Light header for top-level pages: Section Header (display size) + buttons
   on the left, photo with a stat card on the right.
   ========================================================================== */

.nfcr-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	padding-top: 56px;
	font-family: var(--nfcr-font);
}
.nfcr-intro--media { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
/* 0.9.35: Ways to Give: the right column (photo + questions card) is much taller than the text, so centring pushed the text ~70px lower than on the other pages. The text starts level with the photo instead. */
@media (min-width: 1025px) {
	.nfcr-intro--media:has(.nfcr-intro__media--stack) { align-items: start; }
}

.nfcr-intro .nfcr-sh .nfcr-sh__intro {
	max-width: 560px;
	font-size: var(--nfcr-fs-intro);
	line-height: 1.65;
	color: var(--nfcr-text-2);
}
.nfcr-intro .nfcr-sh .nfcr-sh__lead { margin-top: 18px; }

.nfcr-intro .nfcr-intro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-top: 26px;
}

/* Photo + stat card */
.nfcr-intro .nfcr-intro__media {
	position: relative;
	min-height: 380px;
	overflow: hidden;
	border-radius: var(--nfcr-r-section);
	background: var(--nfcr-navy);
}
.nfcr-intro .nfcr-intro__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.nfcr-intro .nfcr-intro__stat {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 18px 22px;
	border-radius: var(--nfcr-r-callout);
	background: var(--nfcr-navy); /* fallback */
	background: color-mix(in srgb, var(--nfcr-navy) 82%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}
.nfcr-intro .nfcr-intro__stat-value {
	flex-shrink: 0;
	font-size: var(--nfcr-fs-h2-sm);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
	white-space: nowrap;
}
.nfcr-intro .nfcr-intro__stat-label {
	font-size: var(--nfcr-fs-body);
	font-weight: 500;
	line-height: 1.5;
}

/* Trust line: lock + "Secure donation" + "· 501(c)(3) · Tax ID" */
.nfcr-intro .nfcr-intro__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 18px 0 0;
	font-size: var(--nfcr-fs-small);
	line-height: 1.5;
	color: var(--nfcr-text-2);
}
.nfcr-intro .nfcr-intro__trust svg { flex-shrink: 0; color: var(--nfcr-success); }
.nfcr-intro .nfcr-intro__trust-label { font-weight: 600; color: var(--nfcr-success); }

/* Ways to Give: short photo above a navy help card (no stat card) */
.nfcr-intro .nfcr-intro__media--stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
}
.nfcr-intro .nfcr-intro__photo {
	position: relative;
	height: 210px;
	overflow: hidden;
	border-radius: var(--nfcr-r-section);
	background: var(--nfcr-line-chip);
}
.nfcr-intro .nfcr-intro__aside {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 34px 36px;
	border-radius: var(--nfcr-r-section);
	background: var(--nfcr-navy);
	color: #fff;
}
.nfcr-intro .nfcr-intro__aside-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
}
.nfcr-intro .nfcr-intro__aside-title {
	margin: 0;
	padding: 0;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-h3-xl);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.025em;
	text-transform: none;
	color: #fff;
}
.nfcr-intro .nfcr-intro__aside-text {
	margin: 0;
	font-size: var(--nfcr-fs-body);
	line-height: 1.7;
	color: var(--nfcr-on-dark-link);
}
.nfcr-intro .nfcr-intro__aside-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: 4px;
}
.nfcr-intro .nfcr-intro__aside-link {
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--nfcr-orange-soft) !important;
	text-decoration: none !important;
}
.nfcr-intro .nfcr-intro__aside-link:hover { color: #fff !important; }
.nfcr-intro .nfcr-intro__aside-link svg { display: inline-block; margin-left: 2px; vertical-align: -1px; }

@media (max-width: 1024px) {
	.nfcr-intro--media { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.nfcr-intro .nfcr-intro__media { min-height: 320px; }
	.nfcr-intro .nfcr-intro__media--stack { min-height: 0; }
}
@media (max-width: 767px) {
	.nfcr-intro { padding-top: 32px; }
	.nfcr-intro .nfcr-intro__media { min-height: 260px; }
	.nfcr-intro .nfcr-intro__media--stack { min-height: 0; }
	.nfcr-intro .nfcr-intro__photo { height: 180px; }
	.nfcr-intro .nfcr-intro__aside { padding: 26px 22px; }
	.nfcr-intro .nfcr-intro__stat { left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; gap: 14px; }
}

/* Page header without a photo (Who We Are): more room for the intro text */
.nfcr-intro:not(.nfcr-intro--media) .nfcr-sh .nfcr-sh__intro { max-width: 720px; }

/* ---- Stat as a stand-alone navy card (no photo): Financials 73% ---- */
.nfcr-intro .nfcr-intro__media--card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	padding: 38px 40px;
	overflow: visible;
}
.nfcr-intro .nfcr-intro__card-value {
	margin: 0;
	font-size: calc(var(--nfcr-fs-h1) * 1.2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.05em;
	color: #fff;
}
.nfcr-intro .nfcr-intro__card-label {
	margin: 0;
	font-size: var(--nfcr-fs-body);
	line-height: 1.7;
	color: var(--nfcr-on-dark-link);
}
.nfcr-intro .nfcr-intro__card-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: 8px;
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	color: var(--nfcr-orange-soft);
	text-decoration: none;
}
.nfcr-intro .nfcr-intro__card-link:hover,
.nfcr-intro .nfcr-intro__card-link:focus-visible { color: #fff; }

/* ---- Anchor buttons: pills that jump to a section of the page ---- */
.nfcr-intro .nfcr-intro__anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}
.nfcr-intro .nfcr-intro__anchor {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 44px;
	margin: 0;
	padding: 0 20px;
	white-space: nowrap;
	background: var(--nfcr-white);
	border: 1.5px solid var(--nfcr-line-soft);
	border-radius: var(--nfcr-r-pill);
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1;
	color: var(--nfcr-navy);
	text-decoration: none;
	transition: border-color .15s ease;
}
.nfcr-intro .nfcr-intro__anchor:hover,
.nfcr-intro .nfcr-intro__anchor:focus-visible { border-color: var(--nfcr-navy); color: var(--nfcr-navy); }

/* Caption on the photo (Discoveries): small label + one line over a fade at the bottom */
.nfcr-intro .nfcr-intro__media--caption::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 45%, var(--nfcr-navy)); /* fallback */
	background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--nfcr-navy) 88%, transparent));
}
.nfcr-intro .nfcr-intro__caption {
	position: absolute;
	z-index: 1;
	left: 28px;
	right: 28px;
	bottom: 26px;
	margin: 0;
	color: #fff;
}
.nfcr-intro .nfcr-intro__caption-label {
	display: block;
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--nfcr-orange-soft);
}
.nfcr-intro .nfcr-intro__caption-text {
	display: block;
	margin-top: 6px;
	font-size: var(--nfcr-fs-h3-xl);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.4px;
}
@media (max-width: 767px) {
	.nfcr-intro .nfcr-intro__caption { left: 18px; right: 18px; bottom: 18px; }
}

/* ---- Site search (0.9.20, Latest): text left, white search pill right, bottom-aligned ---- */
.nfcr-intro--search { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.nfcr-intro .nfcr-intro__search {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 320px;
	padding: 8px 22px;
	border-radius: var(--nfcr-r-bar);
	background: var(--nfcr-white);
	color: var(--nfcr-text-2);
}
.nfcr-intro .nfcr-intro__search:focus-within { outline: var(--nfcr-focus); outline-offset: 2px; }
.nfcr-intro .nfcr-intro__search svg { flex-shrink: 0; }
.nfcr-intro .nfcr-intro__search-input,
.nfcr-intro .nfcr-intro__search-input:focus {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: none;
	box-shadow: none;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-ui);
	line-height: 1.4;
	color: var(--nfcr-navy);
}
.nfcr-intro .nfcr-intro__search-input::placeholder { color: var(--nfcr-text-2); opacity: 1; }
@media (max-width: 1024px) {
	.nfcr-intro--search { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.nfcr-intro .nfcr-intro__search { min-width: 0; max-width: 520px; }
}

/* ---- 0.9.22 Home: stats in a glass strip along the bottom of the photo ---- */
.nfcr-intro .nfcr-intro__media--facts { min-height: 480px; }
.nfcr-intro .nfcr-intro__media--facts::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--nfcr-navy) 75%, transparent));
	pointer-events: none;
}
.nfcr-intro .nfcr-intro__facts {
	position: absolute;
	z-index: 1;
	left: 22px;
	right: 22px;
	bottom: 22px;
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 16px 0;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 20px;
	background: color-mix(in srgb, var(--nfcr-navy) 88%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
}
.nfcr-intro .nfcr-intro__fact {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0 22px;
	list-style: none;
}
.nfcr-intro .nfcr-intro__fact + .nfcr-intro__fact { border-left: 1px solid rgba(255, 255, 255, .3); }
.nfcr-intro .nfcr-intro__fact-value {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.5px;
}
.nfcr-intro .nfcr-intro__fact-label {
	display: block;
	margin-top: 2px;
	font-size: var(--nfcr-fs-label);
	font-weight: 500;
	line-height: 1.4;
}
@media (max-width: 1024px) {
	.nfcr-intro .nfcr-intro__media--facts { min-height: 420px; }
}
@media (max-width: 767px) {
	.nfcr-intro .nfcr-intro__media--facts { min-height: 460px; }
	.nfcr-intro .nfcr-intro__facts { left: 14px; right: 14px; bottom: 14px; flex-direction: column; padding: 8px 0; }
	.nfcr-intro .nfcr-intro__fact { padding: 10px 16px; }
	.nfcr-intro .nfcr-intro__fact + .nfcr-intro__fact { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
}

/* ---- 0.9.22 Hero photo slider ---- */
.nfcr-intro .nfcr-intro__media--slider .nfcr-intro__slide { opacity: 0; transition: opacity .7s ease; }
.nfcr-intro .nfcr-intro__media--slider .nfcr-intro__slide.is-active { opacity: 1; }
.nfcr-intro .nfcr-intro__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: color-mix(in srgb, var(--nfcr-navy) 55%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.nfcr-intro .nfcr-intro__arrow[hidden], .nfcr-intro .nfcr-intro__dots[hidden] { display: none; }
.nfcr-intro .nfcr-intro__arrow:hover { background: color-mix(in srgb, var(--nfcr-navy) 85%, transparent); }
.nfcr-intro .nfcr-intro__arrow:focus-visible, .nfcr-intro .nfcr-intro__dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.nfcr-intro .nfcr-intro__arrow--prev { left: 16px; }
.nfcr-intro .nfcr-intro__arrow--next { right: 16px; }
.nfcr-intro .nfcr-intro__dots { position: absolute; z-index: 2; top: 12px; left: 50%; display: flex; transform: translateX(-50%); }
.nfcr-intro .nfcr-intro__dot { position: relative; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.nfcr-intro .nfcr-intro__dot::after {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .55);
	transition: width .3s ease, left .3s ease, background-color .3s ease;
}
.nfcr-intro .nfcr-intro__dot.is-active::after { left: -1px; width: 26px; background: var(--nfcr-accent); }
@media (prefers-reduced-motion: reduce) {
	.nfcr-intro .nfcr-intro__media--slider .nfcr-intro__slide, .nfcr-intro .nfcr-intro__dot::after { transition: none; }
}

/* ---- Collage + statement (0.9.25, Who We Are) ---- */
.nfcr-intro .nfcr-intro__statement {
	max-width: 560px;
	margin: 28px 0 0;
	padding-left: 20px;
	border-left: 3px solid var(--nfcr-accent);
	font-size: var(--nfcr-fs-h3-lg);
	font-weight: 600;
	line-height: 1.45;
	color: var(--nfcr-navy);
	text-wrap: pretty;
}
.nfcr-intro .nfcr-intro__statement + .nfcr-intro__actions { margin-top: 32px; }

.nfcr-intro.nfcr-intro--collage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
.nfcr-intro--collage .nfcr-sh .nfcr-sh__intro { max-width: 600px; }
.nfcr-intro .nfcr-intro__media--collage {
	height: 560px;
	min-height: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
}
.nfcr-intro .nfcr-intro__pic { position: absolute; overflow: hidden; background: var(--nfcr-navy); }
.nfcr-intro .nfcr-intro__pic--main { inset: 0 0 70px 60px; border-radius: 28px; }
.nfcr-intro .nfcr-intro__pic--small {
	left: 0;
	bottom: 0;
	width: 250px;
	height: 200px;
	border: 6px solid var(--nfcr-bg);
	border-radius: var(--nfcr-r-card);
	background: var(--nfcr-line-chip);
}
.nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat {
	left: auto;
	right: 24px;
	bottom: 24px;
	gap: 16px;
	padding: 20px 24px;
	border-radius: var(--nfcr-r-chip);
	background: #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 14px 36px rgba(2, 20, 60, .16);
	color: var(--nfcr-navy);
}
.nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat-value {
	font-size: var(--nfcr-fs-stat);
	line-height: 1;
	letter-spacing: -1.5px;
	color: var(--nfcr-orange);
}
.nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat-label {
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1.4;
}
@media (max-width: 1024px) {
	.nfcr-intro.nfcr-intro--collage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.nfcr-intro .nfcr-intro__media--collage { height: 440px; }
}
@media (max-width: 767px) {
	.nfcr-intro .nfcr-intro__media--collage { height: 340px; }
	.nfcr-intro .nfcr-intro__pic--main { inset: 0 0 50px 28px; }
	.nfcr-intro .nfcr-intro__pic--small { width: 150px; height: 120px; border-width: 4px; }
	.nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat { right: 12px; top: 12px; bottom: auto; padding: 12px 14px; gap: 10px; }
	.nfcr-intro .nfcr-intro__media--collage .nfcr-intro__stat-value { font-size: 30px; }
}

/* ---- 0.9.36 Stats that belong to one slider photo (Home) ----
   Every photo has its own strip (up to 3 stats); only the strip of the photo showing is visible, fading with it.
   The strip sizes itself to its stats: 3 = full width, 2 = about three quarters, 1 = about half, always centred. */
.nfcr-intro .nfcr-intro__facts--slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.nfcr-intro .nfcr-intro__facts--slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.nfcr-intro .nfcr-intro__facts[data-count="1"],
.nfcr-intro .nfcr-intro__facts[data-count="2"] { margin-right: auto; margin-left: auto; }
.nfcr-intro .nfcr-intro__facts[data-count="1"] { width: calc((100% - 44px) * .52); min-width: min(280px, calc(100% - 44px)); }
.nfcr-intro .nfcr-intro__facts[data-count="2"] { width: calc((100% - 44px) * .78); min-width: min(380px, calc(100% - 44px)); }
@media (prefers-reduced-motion: reduce) {
	.nfcr-intro .nfcr-intro__facts--slide, .nfcr-intro .nfcr-intro__facts--slide.is-active { transition: none; }
}

/* ---- 0.9.40 A stat with text only (no number): the label reads as a short statement ---- */
.nfcr-intro .nfcr-intro__fact--text .nfcr-intro__fact-label { margin-top: 0; font-size: var(--nfcr-fs-body); font-weight: 600; line-height: 1.4; }
