/* ==========================================================================
   NFCR layout utilities for native WPBakery rows, columns and text blocks.
   Add the class names in each element's "Extra class name" field.

   ROW classes
     nfcr-section            page-width row with gutters + bottom spacing
     nfcr-gap-s|m|l          space between columns (16 / 26 / 48px)
     nfcr-space-tight|none   less space below the section (8px / 0)
     nfcr-space-m            a medium space below the section (26px, 0.9.15)

   ANY ELEMENT (Extra class name)
     nfcr-mt-s|m|l           space above the element (16 / 26 / 40px), e.g. a
                             button that follows a list or a stats grid

   COLUMN or TEXT BLOCK classes
     nfcr-panel              white rounded panel
     nfcr-panel--dark        navy rounded panel (use with nfcr-panel)
     nfcr-callout            tinted note box (a heading inside = orange label)
     nfcr-lead               larger intro paragraph
     nfcr-notice             slim note with an info icon (short disclaimers)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section row
   -------------------------------------------------------------------------- */
.nfcr-section {
	--nfcr-col-gap: 0px;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--nfcr-page-max);
	margin: 0 auto var(--nfcr-section-gap) !important; /* beats vc_row's -15px margins */
	padding-left: calc(var(--nfcr-gutter) - var(--nfcr-col-gap) / 2) !important;
	padding-right: calc(var(--nfcr-gutter) - var(--nfcr-col-gap) / 2) !important;
}

.nfcr-section.nfcr-gap-s { --nfcr-col-gap: 16px; }
.nfcr-section.nfcr-gap-m { --nfcr-col-gap: 26px; }
.nfcr-section.nfcr-gap-l { --nfcr-col-gap: 48px; }

.nfcr-section.nfcr-space-tight { margin-bottom: 8px !important; }
.nfcr-section.nfcr-space-none  { margin-bottom: 0 !important; }
.nfcr-section.nfcr-space-m     { margin-bottom: 26px !important; } /* 0.9.15: between a closing card row, its disclaimer and the Donate box */

/* Columns: half the gap on each side, so outer edges line up with the gutter */
.nfcr-section .wpb_column,
.nfcr-section .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}
.nfcr-section .wpb_column {
	padding-left: calc(var(--nfcr-col-gap) / 2);
	padding-right: calc(var(--nfcr-col-gap) / 2);
}

/* Inner rows (Row > Inner Row) */
.nfcr-section .vc_row.vc_inner {
	margin-left: calc(var(--nfcr-col-gap) / -2);
	margin-right: calc(var(--nfcr-col-gap) / -2);
}

/* Remove WPBakery's default bottom margins inside NFCR sections */
.nfcr-section .wpb_content_element,
.nfcr-section .wpb_text_column,
.nfcr-section .vc_empty_space { margin-bottom: 0; }
.nfcr-section .wpb_text_column :last-child { margin-bottom: 0; }

/* WordPress sometimes leaves empty paragraphs/line breaks between elements: hide them */
.nfcr-section .wpb_wrapper > p:empty,
.nfcr-section .wpb_wrapper > br { display: none; }

/* Columns stack on phones: keep a vertical gap between them */
@media (max-width: 767px) {
	.nfcr-section .wpb_column + .wpb_column { margin-top: max(var(--nfcr-col-gap), 16px); }
}

/* --------------------------------------------------------------------------
   Text blocks inside sections
   -------------------------------------------------------------------------- */
.nfcr-section .wpb_text_column {
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-body);
	line-height: var(--nfcr-lh-body);
	color: var(--nfcr-text);
}
.nfcr-section .wpb_text_column p {
	margin: 0 0 14px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.nfcr-section .wpb_text_column strong,
.nfcr-section .wpb_text_column b {
	font-weight: 600;
	color: var(--nfcr-navy);
}
.nfcr-section .wpb_text_column a {
	color: var(--nfcr-orange);
	font-weight: 600;
	text-decoration: none;
}
.nfcr-section .wpb_text_column a:hover { color: var(--nfcr-navy); }
.nfcr-section .wpb_text_column h3 {
	margin: 0 0 8px;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.3px;
	color: var(--nfcr-navy);
	text-transform: none;
}

.nfcr-section .wpb_text_column.nfcr-lead {
	font-size: var(--nfcr-fs-intro);
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
/* Works on a text block, or on a column (styles the column's inner box) */
.nfcr-panel:not(.wpb_column),
.wpb_column.nfcr-panel > .vc_column-inner {
	box-sizing: border-box;
	background: var(--nfcr-white);
	border-radius: var(--nfcr-r-section);
	padding: var(--nfcr-panel-pad-y) var(--nfcr-panel-pad-x) !important;
	box-shadow: var(--nfcr-shadow);
}

.nfcr-panel--dark:not(.wpb_column),
.wpb_column.nfcr-panel--dark > .vc_column-inner {
	background: var(--nfcr-navy);
	border-radius: var(--nfcr-r-section);
	box-shadow: none;
	padding: 52px 54px !important;
}
@media (max-width: 767px) {
	.nfcr-panel--dark:not(.wpb_column),
	.wpb_column.nfcr-panel--dark > .vc_column-inner { padding: 32px 22px !important; }
}

.nfcr-panel--dark .wpb_text_column,
.nfcr-section .nfcr-panel--dark.wpb_text_column { color: var(--nfcr-on-dark-text); }
.nfcr-panel--dark .wpb_text_column strong,
.nfcr-section .nfcr-panel--dark.wpb_text_column strong { color: #fff; }

/* Equal-height columns (row setting "Equal height") keep panels the same height */
.vc_row-o-equal-height .wpb_column.nfcr-panel > .vc_column-inner { height: 100%; }

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */
.nfcr-section .wpb_text_column.nfcr-callout,
.nfcr-callout {
	background: var(--nfcr-surface);
	border-radius: var(--nfcr-r-callout);
	padding: 18px 22px;
	font-size: var(--nfcr-fs-body);
	line-height: 1.68;
	font-weight: 500;
	color: var(--nfcr-navy);
}
.nfcr-section .wpb_text_column.nfcr-callout strong { font-weight: 700; }

/* A callout placed directly on the page background (not inside a white panel)
   would be invisible (same colour as the page), so it becomes a white card there. */
.nfcr-section .wpb_text_column.nfcr-callout {
	background: var(--nfcr-white);
	box-shadow: var(--nfcr-shadow);
}
.nfcr-panel .wpb_text_column.nfcr-callout,
.wpb_column.nfcr-panel .wpb_text_column.nfcr-callout,
.nfcr-panel .nfcr-callout {
	background: var(--nfcr-surface);
	box-shadow: none;
}
.nfcr-panel .wpb_text_column + .wpb_text_column.nfcr-callout,
.nfcr-panel .nfcr-callout { margin-top: 20px; }

/* Callout label: a heading inside a callout renders as a small orange label,
   e.g. "IMPACT" on scientist profiles. In the editor: type the word, choose
   Heading 4 from the paragraph-format menu. */
.nfcr-section .wpb_text_column .nfcr-callout :is(h2, h3, h4, h5, h6),
.nfcr-section .wpb_text_column.nfcr-callout :is(h2, h3, h4, h5, h6) {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--nfcr-orange);
}

/* --------------------------------------------------------------------------
   Small parts used inside elements and text blocks
   -------------------------------------------------------------------------- */
/* Uppercase label: "Treatment depends on", "Plain-language glossary" */
.nfcr-label {
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--nfcr-label);
}

/* Chips */
.nfcr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nfcr-chips .nfcr-label { margin-right: 4px; }
.nfcr-chip {
	display: inline-flex;
	align-items: center;
	background: var(--nfcr-white);
	border: 1px solid var(--nfcr-line-chip);
	border-radius: var(--nfcr-r-chip);
	padding: 7px 15px;
	font-size: var(--nfcr-fs-meta);
	font-weight: 600;
	line-height: 1.3;
	color: var(--nfcr-heading-muted);
}

/* Status tag: "Malignant", "Often benign" */
.nfcr-tag {
	display: inline-block;
	background: var(--nfcr-surface);
	border-radius: var(--nfcr-r-chip);
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--nfcr-heading-muted);
}

/* Chips row as its own element (NFCR Chips): sits between a Section Header and a list */
.nfcr-chips.nfcr-chips--block { margin: -10px 0 26px; font-family: var(--nfcr-font); }
.nfcr-chips--panel.nfcr-chips--block { margin: 0; }

/* --------------------------------------------------------------------------
   Space above an element (Extra class name)
   -------------------------------------------------------------------------- */
.nfcr-section .nfcr-mt-s { margin-top: 16px; }
.nfcr-section .nfcr-mt-m { margin-top: 26px; }
.nfcr-section .nfcr-mt-l { margin-top: 40px; }

/* Chips on a navy panel (NFCR Chips → Background: Navy panel): soft white pills, no border */
.nfcr-chips.nfcr-chips--block.nfcr-chips--dark { margin: 0 0 26px; }
.nfcr-chips--dark .nfcr-label { color: var(--nfcr-on-dark-muted); }
.nfcr-chips--dark .nfcr-chip {
	background: rgba(255, 255, 255, .12);
	border-color: transparent;
	padding: 7px 15px;
	font-size: var(--nfcr-fs-label);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Photo and sticky column (native WPBakery elements)
   -------------------------------------------------------------------------- */
/* Single Image → Extra class name "nfcr-photo": rounded photo, 220px tall, cropped to fit */
.nfcr-section .wpb_single_image.nfcr-photo .vc_figure,
.nfcr-section .wpb_single_image.nfcr-photo .vc_single_image-wrapper {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
}
.nfcr-section .wpb_single_image.nfcr-photo .vc_single_image-wrapper {
	height: 220px;
	overflow: hidden;
	border-radius: var(--nfcr-r-card);
	background: var(--nfcr-navy);
}
.nfcr-section .wpb_single_image.nfcr-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Column → Extra class name "nfcr-sticky": the column's content stays in view while the
   neighbouring column scrolls (History on Who We Are). Set the row's "Equal height" = Yes.
   Desktop only: stacked columns on tablets and phones just scroll normally. */
@media (min-width: 1025px) {
	.nfcr-section .wpb_column.nfcr-sticky > .vc_column-inner {
		position: sticky;
		top: 24px;
		align-self: flex-start;
		height: auto;
	}
}

/* A button that ends a column carries a 12px bottom margin (it keeps wrapped buttons apart).
   At the end of a row or panel that margin added 12px to the gap below the section; take it back.
   (:has() is supported by current browsers; older ones just keep the 12px.) */
.nfcr-section .wpb_wrapper:has(> .nfcr-btn-wrap:last-child) { margin-bottom: -12px; }

/* Chips as links (NFCR Chips → Link): pill with a firmer border, fills navy on hover */
.nfcr-chip--link {
	box-sizing: border-box;
	height: 44px;
	margin: 0;
	border: 1.5px solid var(--nfcr-line-soft);
	padding: 0 18px;
	white-space: nowrap;
	line-height: 1;
	font-size: var(--nfcr-fs-small);
	color: var(--nfcr-navy);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
a.nfcr-chip--link:hover,
a.nfcr-chip--link:focus-visible { background: var(--nfcr-navy); border-color: var(--nfcr-navy); color: #fff; }

/* Chips panel (NFCR Chips → White panel): heading on the left, chips on the right */
.nfcr-chips--panel {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 30px;
	align-items: center;
	padding: 30px 36px;
	background: var(--nfcr-white);
	border-radius: var(--nfcr-r-card);
	box-shadow: var(--nfcr-shadow);
}
.nfcr-chips--panel .nfcr-chips__title {
	margin: 0;
	padding: 0;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-h3-lg);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--nfcr-navy);
	text-transform: none;
}
.nfcr-chips--panel .nfcr-chips__list { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) {
	.nfcr-chips--panel { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 22px; }
}

/* Row class nfcr-vcenter: columns side by side, each column's content vertically centred against the tallest one
   (e.g. text next to a quote). Use it instead of WPBakery's "Content placement", which the theme overrides.
   On phones the columns stack as usual. */
.nfcr-section .vc_row.nfcr-vcenter { display: flex !important; flex-wrap: wrap; align-items: stretch !important; }
.nfcr-section .vc_row.nfcr-vcenter::before,
.nfcr-section .vc_row.nfcr-vcenter::after { display: none !important; }
.nfcr-section .vc_row.nfcr-vcenter > .wpb_column { float: none; display: flex; flex-direction: column; }
.nfcr-section .vc_row.nfcr-vcenter > .wpb_column > .vc_column-inner { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; }

/* --------------------------------------------------------------------------
   Notice (0.9.12): a slim white note with an info icon for short disclaimers
   ("This information is educational and is not a substitute for medical advice...").
   Text block: Extra class name `nfcr-notice`. Put it in a row with nfcr-section nfcr-space-m.
   -------------------------------------------------------------------------- */
/* 0.9.35: a disclaimer (nfcr-notice) belongs to the section above it. That section gets the tight bottom space automatically
   (the same as adding nfcr-space-tight by hand), also when empty spacer rows sit between them. */
.nfcr-section:has(+ .nfcr-section .nfcr-notice),
.nfcr-section:has(+ .vc_row:not(.nfcr-section) + .nfcr-section .nfcr-notice),
.nfcr-section:has(+ .vc_row:not(.nfcr-section) + .vc_row:not(.nfcr-section) + .nfcr-section .nfcr-notice) { margin-bottom: 8px !important; }

.nfcr-section .wpb_text_column.nfcr-notice {
	position: relative;
	box-sizing: border-box;
	padding: 16px 22px 16px 56px;
	background: var(--nfcr-white);
	border: 1px solid var(--nfcr-line-chip);
	border-radius: var(--nfcr-r-callout);
	box-shadow: none;
	font-size: var(--nfcr-fs-small);
	font-weight: 400;
	line-height: 1.55;
	color: var(--nfcr-text-2);
}
.nfcr-section .wpb_text_column.nfcr-notice::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 22px;
	width: 20px;
	height: 20px;
	background-color: var(--nfcr-heading-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nfcr-section .wpb_text_column.nfcr-notice p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.nfcr-section .wpb_text_column.nfcr-notice p + p { margin-top: 8px; }
@media (max-width: 767px) {
	.nfcr-section .wpb_text_column.nfcr-notice { padding: 14px 16px 14px 48px; }
	.nfcr-section .wpb_text_column.nfcr-notice::before { top: 16px; left: 16px; }
}

/* 0.9.14: linked chips keep their colours against the theme's link colour (text was orange, and unreadable on the navy hover) */
.nfcr-section .nfcr-chips a.nfcr-chip--link { color: var(--nfcr-navy); }
.nfcr-section .nfcr-chips a.nfcr-chip--link:hover,
.nfcr-section .nfcr-chips a.nfcr-chip--link:focus-visible { background: var(--nfcr-navy); border-color: var(--nfcr-navy); color: #fff; }

/* ---- 0.9.17: linked chips with an arrow (NFCR Chips → Arrow on linked chips), also on a navy panel ---- */
.nfcr-chip .nfcr-chip__arrow { display: inline-flex; margin-left: 8px; color: var(--nfcr-orange); }
a.nfcr-chip--link:hover .nfcr-chip__arrow,
a.nfcr-chip--link:focus-visible .nfcr-chip__arrow { color: var(--nfcr-orange-soft); }
.nfcr-chips--dark a.nfcr-chip--link,
.nfcr-section .nfcr-chips--dark a.nfcr-chip--link {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .24);
	color: #fff;
}
.nfcr-chips--dark a.nfcr-chip--link .nfcr-chip__arrow { color: var(--nfcr-orange-soft); }
.nfcr-chips--dark a.nfcr-chip--link:hover,
.nfcr-chips--dark a.nfcr-chip--link:focus-visible,
.nfcr-section .nfcr-chips--dark a.nfcr-chip--link:hover,
.nfcr-section .nfcr-chips--dark a.nfcr-chip--link:focus-visible { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .24); color: #fff; }

/* ---- 0.9.17: accent panel (orange top edge) and a disclaimer inside a panel ----
   Column or text block: Extra class name "nfcr-panel nfcr-panel--accent" (white panel with a 6px orange top edge).
   Text block inside a panel: "nfcr-notice nfcr-notice--inline" (info icon, divider above, no box). */
.nfcr-panel--accent:not(.wpb_column),
.wpb_column.nfcr-panel--accent > .vc_column-inner { border-top: 6px solid var(--nfcr-accent); }
.nfcr-section .wpb_text_column.nfcr-notice.nfcr-notice--inline {
	margin-top: 26px;
	padding: 20px 0 0 30px;
	background: none;
	border: 0;
	border-top: 1px solid var(--nfcr-line);
	border-radius: 0;
	box-shadow: none;
}
.nfcr-section .wpb_text_column.nfcr-notice.nfcr-notice--inline::before { top: 22px; left: 0; }

/* ---- 0.9.17: row class nfcr-rule-top: a thin rule above a second block inside a panel, with space above and below it
   (Patients & Caregivers: "Caregiving for someone you love" inside the navy caregivers panel). Put it on an inner row. ---- */
.nfcr-section .vc_row.nfcr-rule-top { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--nfcr-line-chip); }
.nfcr-panel--dark .vc_row.nfcr-rule-top,
.nfcr-section .nfcr-panel--dark .vc_row.nfcr-rule-top { border-top-color: var(--nfcr-on-dark-line); }

/* 0.9.17: space above dark chips (the navy-chips rule resets the margin and beat nfcr-mt-m) */
.nfcr-section .nfcr-chips.nfcr-chips--block.nfcr-chips--dark.nfcr-mt-s { margin-top: 16px; }
.nfcr-section .nfcr-chips.nfcr-chips--block.nfcr-chips--dark.nfcr-mt-m { margin-top: 26px; }
.nfcr-section .nfcr-chips.nfcr-chips--block.nfcr-chips--dark.nfcr-mt-l { margin-top: 40px; }

/* ---- 0.9.18 Callout, navy: a slim navy strip with a soft-orange label (Cancer Information: "A journey doesn't always move in a straight line").
   Text block, Extra class name `nfcr-callout nfcr-callout--dark`. Heading 4 = the label; **bold** = the closing line in white. */
.nfcr-section .wpb_text_column.nfcr-callout.nfcr-callout--dark,
.nfcr-section .nfcr-panel .wpb_text_column.nfcr-callout.nfcr-callout--dark {
	padding: 28px 34px;
	border-radius: var(--nfcr-r-section);
	background: var(--nfcr-navy);
	box-shadow: none;
	font-weight: 400;
	color: var(--nfcr-on-dark-text);
}
.nfcr-section .wpb_text_column.nfcr-callout--dark :is(h2, h3, h4, h5, h6) { color: var(--nfcr-orange-soft); letter-spacing: 1.2px; }
.nfcr-section .wpb_text_column.nfcr-callout--dark p { margin: 0; color: inherit; }
.nfcr-section .wpb_text_column.nfcr-callout--dark strong { font-weight: 600; color: #fff; }
@media (max-width: 767px) {
	.nfcr-section .wpb_text_column.nfcr-callout.nfcr-callout--dark { padding: 22px 22px; }
}

/* ---- 0.9.18b ---- */
/* Navy callout: the wave icon in a soft circle on the left (design: "A journey doesn't always move in a straight line") */
.nfcr-section .wpb_text_column.nfcr-callout.nfcr-callout--dark { position: relative; padding-left: 118px; }
.nfcr-section .wpb_text_column.nfcr-callout--dark::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 34px;
	width: 56px;
	height: 56px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c3-6 6 6 9 0s6 6 9 0'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
}
@media (max-width: 767px) {
	.nfcr-section .wpb_text_column.nfcr-callout.nfcr-callout--dark { padding: 90px 22px 22px; }
	.nfcr-section .wpb_text_column.nfcr-callout--dark::before { top: 22px; left: 22px; transform: none; }
}

/* Tinted box inside a white panel (column class: nfcr-panel nfcr-panel--tint) */
.wpb_column.nfcr-panel.nfcr-panel--tint > .vc_column-inner { background: var(--nfcr-surface); box-shadow: none; }

/* Statement: two lines under a thin rule, navy then orange (research panel) */
.nfcr-section .wpb_text_column.nfcr-statement { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--nfcr-line); }
.nfcr-section .wpb_text_column.nfcr-statement p { margin: 0; font-size: var(--nfcr-fs-small); font-weight: 600; line-height: 1.6; color: var(--nfcr-heading-muted); }
.nfcr-section .wpb_text_column.nfcr-statement p + p { margin-top: 4px; color: var(--nfcr-orange); }

/* Column class nfcr-fill: the column's single card grid stretches to the row's height (set the row's Equal height = Yes) */
.vc_row-o-equal-height .wpb_column.nfcr-fill > .vc_column-inner,
.vc_row-o-equal-height .wpb_column.nfcr-fill > .vc_column-inner > .wpb_wrapper { height: 100%; }
.nfcr-fill .nfcr-cards { height: 100%; grid-auto-rows: 1fr; }

/* Row class nfcr-rule-top: the rule is drawn inset by half the column gap, so it lines up with the content instead of running past it */
.nfcr-section .vc_row.nfcr-rule-top {
	border-top: 0;
	background: linear-gradient(var(--nfcr-line-chip), var(--nfcr-line-chip)) center top / calc(100% - var(--nfcr-col-gap)) 1px no-repeat;
}
.nfcr-panel--dark .vc_row.nfcr-rule-top,
.nfcr-section .nfcr-panel--dark .vc_row.nfcr-rule-top {
	background-image: linear-gradient(var(--nfcr-on-dark-line), var(--nfcr-on-dark-line));
}

/* ---- 0.9.22 Chips: star before the panel heading, orange stars inside a chip ---- */
.nfcr-chips--panel .nfcr-chips__title { display: flex; align-items: center; gap: 9px; }
.nfcr-chips--panel .nfcr-chips__icon { display: inline-flex; flex-shrink: 0; color: var(--nfcr-orange); }
.nfcr-chip .nfcr-chip__stars { color: var(--nfcr-orange); letter-spacing: 1px; }
/* Strip (panel + star): one slim white bar, heading left, chips right (Home trust bar) */
.nfcr-chips--strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding: 18px 30px; }
.nfcr-chips--strip .nfcr-chips__title { font-size: var(--nfcr-fs-ui); }
.nfcr-chips--strip .nfcr-chips__list { gap: 8px; }
.nfcr-chips--strip .nfcr-chip { font-size: var(--nfcr-fs-label); }
@media (max-width: 767px) { .nfcr-chips--strip { padding: 18px 22px; } }

/* ---- 0.9.22 Home: section rhythm, wider panel padding, fine print ---- */
.nfcr-section.nfcr-space-l  { margin-bottom: var(--nfcr-space-l) !important; }  /* 40px */
.nfcr-section.nfcr-space-xl { margin-bottom: var(--nfcr-space-xl) !important; } /* 84px: the Home page rhythm */

/* Panel padding classes go with nfcr-panel on a column (they style the inner box, like nfcr-panel itself) */
.nfcr-panel--roomy:not(.wpb_column),
.wpb_column.nfcr-panel--roomy > .vc_column-inner { padding: 64px 60px !important; }  /* timeline */
.nfcr-panel--band:not(.wpb_column),
.wpb_column.nfcr-panel--band > .vc_column-inner { padding: 52px 54px !important; }   /* numbers band */
@media (max-width: 1024px) {
	.nfcr-panel--roomy:not(.wpb_column), .wpb_column.nfcr-panel--roomy > .vc_column-inner,
	.nfcr-panel--band:not(.wpb_column), .wpb_column.nfcr-panel--band > .vc_column-inner { padding: 44px 32px !important; }
}
@media (max-width: 767px) {
	.nfcr-panel--roomy:not(.wpb_column), .wpb_column.nfcr-panel--roomy > .vc_column-inner,
	.nfcr-panel--band:not(.wpb_column), .wpb_column.nfcr-panel--band > .vc_column-inner { padding: 32px 20px !important; }
}

/* Foot of a navy band: thin rule, then the button (Home numbers band). Extra class name of the Button. */
.nfcr-section .nfcr-band-foot { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--nfcr-on-dark-line); }

/* Fine print: small grey note under a card row. Extra class name of a text block. */
.nfcr-section .wpb_text_column.nfcr-fineprint { font-size: var(--nfcr-fs-label); font-weight: 500; line-height: 1.5; color: var(--nfcr-text-2); }
.nfcr-section .wpb_text_column.nfcr-fineprint p { margin: 0; }

/* Stars in a chip: keep a gap before the name (chips are flex boxes, so the typed space collapses) */
.nfcr-chip .nfcr-chip__stars { margin-right: 6px; }
.nfcr-chips--strip .nfcr-chip--stars { color: var(--nfcr-orange); }
.nfcr-donband .nfcr-chips--dark .nfcr-chip { padding: 8px 15px; font-size: var(--nfcr-fs-label); }

/* Chips → Solid navy pills on a white panel (0.9.25, Who We Are: Financials) */
.nfcr-chips.nfcr-chips--block.nfcr-chips--solid { margin: 24px 0 30px; }
.nfcr-chips--solid .nfcr-chip {
	padding: 7px 15px;
	background: var(--nfcr-navy);
	border-color: var(--nfcr-navy);
	font-size: var(--nfcr-fs-label);
	font-weight: 600;
	color: #fff;
}

/* ==========================================================================
   0.9.25 (Who We Are): photo panel, two-tone panel row, foot line
   ========================================================================== */

/* Column class "nfcr-panel nfcr-panel--dark nfcr-panel--photo": a navy panel with a photo behind it. Choose the photo in the column's
   Design Options (Background image); the navy veil is added here, so the text stays readable. */
.wpb_column.nfcr-panel--photo > .vc_column-inner {
	position: relative;
	isolation: isolate;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}
.wpb_column.nfcr-panel--photo > .vc_column-inner::before {
	content: "";
	/* WPBakery gives every column box a clearfix ::before (display: table), which does not stretch: make it a block */
	display: block !important;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--nfcr-photo-veil-top), var(--nfcr-photo-veil-bottom));
}

/* (The two-tone panel is now its own element, NFCR Two-tone Panel: see duo-panel.css.) */

/* Row class "nfcr-foot": a thin rule, then a line of text on the left and a button on the right (Who We Are: under the team).
   Use an inner row with two columns (8/12 text, 4/12 button) or a normal row. */
.nfcr-section .vc_row.nfcr-foot {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	gap: 20px 40px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--nfcr-line-chip);
}
.nfcr-section .vc_row.nfcr-foot::before,
.nfcr-section .vc_row.nfcr-foot::after { display: none !important; }
.nfcr-section .vc_row.nfcr-foot > .wpb_column { float: none; width: auto; }
.nfcr-section .vc_row.nfcr-foot > .wpb_column:first-child { flex: 1 1 0; }
.nfcr-section .vc_row.nfcr-foot > .wpb_column > .vc_column-inner { padding: 0 !important; }
.nfcr-section .vc_row.nfcr-foot .wpb_text_column { max-width: 760px; margin: 0; }
.nfcr-section .vc_row.nfcr-foot .nfcr-btn-wrap { margin: 0; }
@media (max-width: 767px) {
	.nfcr-section .vc_row.nfcr-foot { flex-direction: column; align-items: stretch !important; }
	.nfcr-section .vc_row.nfcr-foot > .wpb_column { width: 100%; }
	.nfcr-section .vc_row.nfcr-foot .nfcr-btn { white-space: normal; text-align: left; }
}
