/* ==========================================================================
   NFCR page hero  [nfcr_page_hero]
   ========================================================================== */

.nfcr-hero {
	position: relative;
	overflow: hidden;
	margin-top: 26px;
	background: var(--nfcr-navy);
	border-radius: var(--nfcr-r-section);
	font-family: var(--nfcr-font);
	color: #fff;
	isolation: isolate;
}

.nfcr-hero .nfcr-hero__img {
	position: absolute;
	top: 0;
	right: 0;
	width: 46%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: -2;
}
.nfcr-hero .nfcr-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 60% 90% at 85% 10%, color-mix(in srgb, var(--nfcr-hero-glow, #9CA3AF) 22%, transparent) 0%, transparent 60%), /* glow = the ribbon colour */
		linear-gradient(90deg, var(--nfcr-navy) 46%, rgba(0, 44, 118, .82) 62%, rgba(0, 44, 118, .2) 100%);
}

.nfcr-hero .nfcr-hero__body {
	position: relative;
	max-width: 860px;
	padding: 56px 60px 44px;
}

/* Breadcrumb */
.nfcr-hero .nfcr-hero__crumbs { margin-bottom: 18px; }
.nfcr-hero .nfcr-hero__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--nfcr-fs-meta);
	font-weight: 500;
	line-height: 1.4;
}
.nfcr-hero .nfcr-hero__crumbs li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.nfcr-hero .nfcr-hero__crumbs li + li::before { content: "/"; color: #6E86B8; }
.nfcr-hero .nfcr-hero__crumbs a { color: var(--nfcr-on-dark-link); text-decoration: none; }
.nfcr-hero .nfcr-hero__crumbs a:hover { color: #fff; text-decoration: underline; }
.nfcr-hero .nfcr-hero__crumbs [aria-current] { color: #fff; font-weight: 600; }

/* Ribbon pill */
.nfcr-hero .nfcr-hero__ribbon {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	padding: 6px 15px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--nfcr-r-chip);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: #DDE5F4;
}
.nfcr-hero .nfcr-hero__ribbon-dot { width: var(--nfcr-dot); height: var(--nfcr-dot); border-radius: 50%; flex-shrink: 0; }

/* Title: *word* = orange */
.nfcr-hero .nfcr-hero__title {
	margin: 0;
	padding: 0;
	font-family: var(--nfcr-font);
	font-size: calc((22 + (60 - 22) * var(--nfcr-type-k)) * 1px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.037em;
	color: #fff;
	text-transform: none;
}
.nfcr-hero .nfcr-hero__title .nfcr-hl { color: var(--nfcr-orange-soft); }

.nfcr-hero .nfcr-hero__intro {
	max-width: 640px;
	margin: 18px 0 0;
	font-size: var(--nfcr-fs-intro);
	line-height: 1.72;
	color: #DDE5F4;
}

.nfcr-hero .nfcr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	margin-top: 28px;
}

/* Facts strip */
.nfcr-hero .nfcr-hero__facts {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--nfcr-facts, 3), minmax(0, 1fr));
	margin: 0;
	background: rgba(0, 30, 82, .78);
	border-top: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.nfcr-hero .nfcr-hero__fact {
	display: flex;
	flex-direction: column-reverse; /* number above label; markup keeps label first for screen readers */
	justify-content: flex-end;
	padding: 22px 26px;
	border-left: 1px solid rgba(255, 255, 255, .1);
}
.nfcr-hero .nfcr-hero__fact:first-child { border-left: 0; }
.nfcr-hero .nfcr-hero__fact-value {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.8px;
	color: var(--nfcr-orange-soft);
	white-space: nowrap;
}
.nfcr-hero .nfcr-hero__fact-label {
	margin: 4px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--nfcr-on-dark-text);
}

/* --------------------------------------------------------------------------
   Profile layout (scientists): round portrait left, text right
   -------------------------------------------------------------------------- */
.nfcr-hero--profile .nfcr-hero__shade {
	background: radial-gradient(ellipse 60% 90% at 85% 10%, color-mix(in srgb, var(--nfcr-accent) 16%, transparent) 0%, transparent 60%);
}
.nfcr-hero--profile .nfcr-hero__body {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 44px;
	align-items: center;
	max-width: none;
	padding: 56px 60px;
}
.nfcr-hero .nfcr-hero__portrait {
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 4px solid rgba(255, 255, 255, .18);
}
.nfcr-hero .nfcr-hero__portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.nfcr-hero__main { min-width: 0; }
.nfcr-hero--profile .nfcr-hero__crumbs { margin-bottom: 16px; }
.nfcr-hero--profile .nfcr-hero__title {
	font-size: calc((22 + (46 - 22) * var(--nfcr-type-k)) * 1px); /* XL, as section headers */
	line-height: 1.04;
	letter-spacing: -.0375em;
}
.nfcr-hero--profile .nfcr-hero__intro {
	margin-top: 12px;
	font-size: var(--nfcr-fs-intro);
	line-height: 1.6;
}

/* Orange highlight line (both layouts) */
.nfcr-hero .nfcr-hero__meta {
	margin: 8px 0 0;
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1.5;
	color: var(--nfcr-orange-soft);
}

/* Chips with optional links (both layouts) */
.nfcr-hero .nfcr-hero__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}
.nfcr-hero .nfcr-hero__chips-label {
	margin-right: 4px;
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	letter-spacing: .8px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--nfcr-on-dark-muted);
}
.nfcr-hero .nfcr-hero__chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--nfcr-r-chip);
	font-size: var(--nfcr-fs-meta);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}
.nfcr-hero a.nfcr-hero__chip:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---- Responsive (proposed) ---- */
@media (max-width: 1024px) {
	.nfcr-hero .nfcr-hero__body { padding: 44px 40px 36px; max-width: 640px; }
	.nfcr-hero .nfcr-hero__img { width: 52%; }
	.nfcr-hero--profile .nfcr-hero__body { grid-template-columns: 160px minmax(0, 1fr); gap: 32px; max-width: none; padding: 44px 40px; }
	.nfcr-hero .nfcr-hero__portrait { width: 160px; height: 160px; }
}
@media (max-width: 767px) {
	.nfcr-hero { margin-top: 16px; }
	.nfcr-hero .nfcr-hero__img { width: 100%; opacity: .35; }
	.nfcr-hero .nfcr-hero__shade { background: linear-gradient(180deg, rgba(0, 44, 118, .55) 0%, var(--nfcr-navy) 75%); }
	.nfcr-hero .nfcr-hero__body { padding: 30px 22px 28px; }
	.nfcr-hero--profile .nfcr-hero__body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 30px 22px 28px; }
	.nfcr-hero .nfcr-hero__portrait { width: 112px; height: 112px; border-width: 3px; }
	.nfcr-hero .nfcr-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nfcr-hero .nfcr-hero__fact { padding: 18px 22px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
	.nfcr-hero .nfcr-hero__fact:nth-child(2n) { border-left: 1px solid rgba(255, 255, 255, .1); }
	.nfcr-hero .nfcr-hero__fact:first-child,
	.nfcr-hero .nfcr-hero__fact:nth-child(2) { border-top: 0; }
	/* Odd number of facts: the last one spans the full width, so its divider does too */
	.nfcr-hero .nfcr-hero__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.nfcr-hero .nfcr-hero__fact-value { font-size: 24px; }
}

/* ==========================================================================
   0.9.10: search box under the intro (Cancer Types) and the source line under the facts
   ========================================================================== */
.nfcr-hero .nfcr-search {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 640px;
	margin: 28px 0 0;
	padding: 8px 8px 8px 22px;
	background: var(--nfcr-white);
	border-radius: var(--nfcr-r-pill);
	box-shadow: var(--nfcr-shadow-raised);
}
.nfcr-hero .nfcr-search:focus-within { outline: 3px solid var(--nfcr-orange-soft); outline-offset: 2px; }
/* Without JavaScript the field stays hidden: show the jump button on its own, no white pill */
.nfcr-hero .nfcr-search:has(.nfcr-search__field[hidden]) { padding: 0; background: none; box-shadow: none; }
.nfcr-hero .nfcr-search:has(.nfcr-search__field[hidden]):focus-within { outline: 0; }

.nfcr-hero .nfcr-search__field {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--nfcr-navy);
}
.nfcr-hero .nfcr-search__field[hidden] { display: none; }
.nfcr-hero .nfcr-search__field svg { flex-shrink: 0; }
.nfcr-hero .nfcr-search__input,
.nfcr-hero .nfcr-search__input:focus {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-ui);
	line-height: 1.4;
	color: var(--nfcr-navy);
}
.nfcr-hero .nfcr-search__input::placeholder { color: var(--nfcr-text-2); opacity: 1; }
.nfcr-hero .nfcr-search__button { flex-shrink: 0; margin-left: auto; }

/* Source line for the facts, below the dark box (darker than the design's #7E93BE: that is 2.9:1 on the page background) */
p.nfcr-hero__source {
	margin: 10px 4px 0;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-label);
	line-height: 1.5;
	color: var(--nfcr-text-2);
}

@media (max-width: 480px) {
	.nfcr-hero .nfcr-search { padding-left: 16px; }
}


/* ---- 0.9.11: lead line, soft-blue highlight, parts card on the photo (Prevention, Early Detection & Screening) ---- */
.nfcr-hero .nfcr-hero__lead {
	margin: 20px 0 0;
	max-width: 560px;
	font-size: var(--nfcr-fs-h3-lg);
	font-weight: 600;
	line-height: 1.45;
	color: #fff;
}
.nfcr-hero .nfcr-hero__lead + .nfcr-hero__intro { margin-top: 12px; }
.nfcr-hero--accent-blue .nfcr-hero__title .nfcr-hl { color: var(--nfcr-on-dark-muted); }

.nfcr-hero--parts .nfcr-hero__body { box-sizing: border-box; max-width: 53.5%; padding-right: 56px; } /* text never runs up to the photo */
.nfcr-hero .nfcr-hero__parts {
	box-sizing: border-box;
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--nfcr-facts, 5), minmax(0, 1fr));
	gap: 12px;
	width: calc(46% - 48px);
	margin: 0;
	padding: 20px 22px;
	list-style: none;
	background: var(--nfcr-white);
	border-radius: var(--nfcr-r-chip);
}
.nfcr-hero .nfcr-hero__part { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.nfcr-hero .nfcr-hero__part-label { font-size: 12.5px; font-weight: 700; letter-spacing: .8px; line-height: 1.4; text-transform: uppercase; color: var(--nfcr-orange); }
.nfcr-hero .nfcr-hero__part-title { font-size: var(--nfcr-fs-meta); font-weight: 600; line-height: 1.3; color: var(--nfcr-navy); }
.nfcr-hero .nfcr-hero__part-note { font-size: var(--nfcr-fs-label); line-height: 1.4; color: var(--nfcr-text-2); }
/* 0.9.35: a part is a link to the first topic of that part (added by guide.js), with a small down arrow */
.nfcr-hero .nfcr-hero__part-link { position: relative; display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.nfcr-hero .nfcr-hero__part-link:hover .nfcr-hero__part-title { text-decoration: underline; text-underline-offset: 3px; }
.nfcr-hero .nfcr-hero__part-link:focus-visible { outline: 2px solid var(--nfcr-navy); outline-offset: 4px; border-radius: 6px; }
.nfcr-hero .nfcr-hero__part-go { position: absolute; top: 1px; right: 0; width: 15px; height: 15px; color: var(--nfcr-orange); transition: transform .15s ease; }
.nfcr-hero .nfcr-hero__part-go svg { display: block; width: 100%; height: 100%; }
.nfcr-hero .nfcr-hero__part-link:hover .nfcr-hero__part-go { transform: translateY(2px); }

@media (max-width: 1024px) {
	.nfcr-hero--parts .nfcr-hero__body { max-width: 640px; }
	.nfcr-hero .nfcr-hero__parts { position: relative; right: auto; bottom: auto; width: auto; margin: 0 40px 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
}
@media (max-width: 767px) {
	.nfcr-hero .nfcr-hero__parts { margin: 0 22px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 0.9.11b: breadcrumb above the box, plain-dot ribbon and a hard-edged photo (parts layout) ---- */
.nfcr-hero__crumbs--outside { margin: 40px 0 20px; font-family: var(--nfcr-font); }
.nfcr-hero__crumbs--outside ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--nfcr-fs-meta); font-weight: 500; line-height: 1.4; color: var(--nfcr-text-2); }
.nfcr-hero__crumbs--outside li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.nfcr-hero__crumbs--outside li + li::before { content: "/"; color: var(--nfcr-text-2); }
.nfcr-hero__crumbs--outside a { color: var(--nfcr-navy); text-decoration: none; }
.nfcr-hero__crumbs--outside a:hover { text-decoration: underline; }
.nfcr-hero__crumbs--outside + .nfcr-hero { margin-top: 0; }
.nfcr-hero--parts .nfcr-hero__ribbon { padding: 0; background: none; border: 0; border-radius: 0; font-size: var(--nfcr-fs-ui); color: #fff; }
@media (min-width: 768px) {
	.nfcr-hero--parts .nfcr-hero__shade { background: none; }
	.nfcr-hero--parts .nfcr-hero__img { width: 46.5%; }
}

/* ---- 0.9.14: parts card without a photo: the right side is a soft blue panel (the design's photo placeholder) ---- */
@media (min-width: 768px) {
	.nfcr-hero--parts.nfcr-hero--nophoto::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		width: 46.5%;
		background: var(--nfcr-heading-muted);
	}
	.nfcr-hero--parts.nfcr-hero--nophoto .nfcr-hero__body { position: relative; z-index: 1; }
	.nfcr-hero--parts.nfcr-hero--nophoto .nfcr-hero__parts { z-index: 2; }
}

/* ---- 0.9.17: path cards that overlap the bottom of the hero (Patients & Caregivers) ---- */
.nfcr-hero--paths .nfcr-hero__body { padding-bottom: 96px; } /* room for the cards that overlap the box */
.nfcr-hero-paths {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(var(--nfcr-paths, 2), minmax(0, 1fr));
	gap: 16px;
	margin: -56px 32px 0;
	padding: 0;
	list-style: none;
	font-family: var(--nfcr-font);
}
.nfcr-hero-paths .nfcr-hero-paths__item { margin: 0; padding: 0; list-style: none; }
.nfcr-hero-paths a.nfcr-hero-path {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	height: 100%;
	padding: 24px 26px;
	background: var(--nfcr-white);
	border-radius: var(--nfcr-r-card);
	box-shadow: var(--nfcr-shadow-hover);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease;
}
.nfcr-hero-paths a.nfcr-hero-path:hover,
.nfcr-hero-paths a.nfcr-hero-path:focus-visible { box-shadow: var(--nfcr-shadow-raised); }
.nfcr-hero-path .nfcr-hero-path__photo { position: relative; display: block; width: 68px; height: 68px; overflow: hidden; border-radius: 50%; background: var(--nfcr-line-chip); }
.nfcr-hero-path .nfcr-hero-path__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nfcr-hero-path .nfcr-hero-path__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nfcr-hero-path .nfcr-hero-path__eyebrow { font-size: var(--nfcr-fs-label); font-weight: 700; letter-spacing: .9px; line-height: 1.4; text-transform: uppercase; color: var(--nfcr-orange); }
.nfcr-hero-path .nfcr-hero-path__title { font-size: var(--nfcr-fs-h3-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--nfcr-navy); }
.nfcr-hero-path .nfcr-hero-path__text { font-size: var(--nfcr-fs-meta); line-height: 1.55; color: var(--nfcr-text-2); }
.nfcr-hero-path .nfcr-hero-path__circle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--nfcr-orange); transition: background-color .15s ease; }
.nfcr-hero-path--navy .nfcr-hero-path__circle { background: var(--nfcr-navy); }
.nfcr-hero-paths a.nfcr-hero-path:hover .nfcr-hero-path__title,
.nfcr-hero-paths a.nfcr-hero-path:focus-visible .nfcr-hero-path__title { color: var(--nfcr-orange); }
.nfcr-hero-paths a.nfcr-hero-path:hover .nfcr-hero-path__circle { background: var(--nfcr-orange-hover); }
.nfcr-hero-paths a.nfcr-hero-path--navy:hover .nfcr-hero-path__circle { background: var(--nfcr-navy-hover); }
@media (max-width: 1024px) {
	.nfcr-hero--paths .nfcr-hero__body { padding-bottom: 88px; }
	.nfcr-hero-paths { margin-left: 24px; margin-right: 24px; }
	.nfcr-hero-paths a.nfcr-hero-path { gap: 16px; padding: 20px 20px; }
}
@media (max-width: 767px) {
	.nfcr-hero-paths { grid-template-columns: minmax(0, 1fr); margin: -48px 14px 0; }
	.nfcr-hero-paths a.nfcr-hero-path { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.nfcr-hero-path .nfcr-hero-path__photo { width: 56px; height: 56px; }
	.nfcr-hero-path .nfcr-hero-path__circle { width: 40px; height: 40px; }
}
@media print { .nfcr-hero-paths { margin-top: 16px; } }