/* Program cards grid component styles. Override the namespaced variables as needed. */
.sfc-program-cards {
	--sfc-program-cards-columns: var(--sfc-program-cards-mobile, 1);
	width: 100%;
	min-width: 0;
	/* Stay clickable when a page builder box is shorter than the component. */
	position: relative;
	z-index: 1;
	color: var(--sfc-program-cards-body-color, inherit);
}
.sfc-program-cards *, .sfc-program-cards *::before, .sfc-program-cards *::after { box-sizing: border-box; }
.sfc-program-cards [hidden] { display: none !important; }
.sfc-program-cards .sfc-program-cards__heading {
	margin: 0 0 28px;
	color: var(--sfc-program-cards-card-title-color, var(--sfc-blue, #002E5D));
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}
.sfc-program-cards .sfc-program-cards__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 28px; }
.sfc-program-cards .sfc-program-cards__filter {
	padding: 12px 24px;
	border: 0;
	border-radius: 6px;
	background: var(--sfc-prog-filter-background, var(--sfc-blue, #002E5D));
	color: var(--sfc-prog-filter-text, #FEFEFE);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}
.sfc-program-cards .sfc-program-cards__filter:hover,
.sfc-program-cards .sfc-program-cards__filter.is-active { background: var(--sfc-prog-filter-active-background, var(--sfc-gold, #DB9F0C)); color: var(--sfc-prog-filter-active-text, #FEFEFE); }
/* Inside the mobile drawer, hover shows the gold background with sfc-blue text. */
.sfc-program-cards__drawer-body .sfc-program-cards__filter:hover,
.sfc-program-cards__drawer-body .sfc-program-cards__filter.is-active:hover { background: var(--sfc-prog-filter-active-background, var(--sfc-gold, #DB9F0C)); color: var(--sfc-blue, #002E5D); }
.sfc-program-cards .sfc-program-cards__filter:focus-visible { outline: 2px solid var(--sfc-prog-filter-active-background, var(--sfc-gold, #DB9F0C)); outline-offset: 2px; }
.sfc-program-cards .sfc-program-cards__grid { display: grid; grid-template-columns: repeat(var(--sfc-program-cards-columns), minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (min-width: 640px) { .sfc-program-cards .sfc-program-cards__grid { grid-template-columns: repeat(var(--sfc-program-cards-tablet, 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sfc-program-cards .sfc-program-cards__grid { grid-template-columns: repeat(var(--sfc-program-cards-desktop, 4), minmax(0, 1fr)); } }
.sfc-program-cards .sfc-program-cards__card {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: var(--sfc-program-cards-border-width, 1px) solid var(--sfc-program-cards-border-color, rgba(0, 46, 93, 0.14));
	border-radius: var(--sfc-program-cards-border-radius, 14px);
	background: var(--sfc-program-cards-card-background, Canvas);
	transition: transform 160ms ease, box-shadow 160ms ease;
}
/* Entrance animation. The inline reveal script adds --pending before first paint,
   so cards without JavaScript never hide. Cleanup drops the class after revealing. */
.sfc-program-cards--pending .sfc-program-cards__card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.sfc-program-cards--pending .sfc-program-cards__card.is-revealed { opacity: 1; transform: none; }
/* Once a card has finished revealing it goes back to the snappy hover transition,
   even while other cards further down the page are still waiting to reveal. */
.sfc-program-cards--pending .sfc-program-cards__card.is-settled { transition: transform 160ms ease, box-shadow 160ms ease; will-change: auto; }
.sfc-program-cards .sfc-program-cards__card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 46, 93, 0.14); }
.sfc-program-cards .sfc-program-cards__card-image {
	position: relative;
	display: block;
	aspect-ratio: var(--sfc-program-cards-image-ratio, 16/10);
	/* Fixed Image height/width (Cards Appearance) beat the ratio; blank = auto.
	   A fixed width centers in the card and never runs wider than the card. */
	height: var(--sfc-program-cards-image-height, auto);
	width: var(--sfc-program-cards-image-width, auto);
	max-width: 100%;
	margin: 0 auto 18px;
	border-radius: 10px;
	overflow: hidden;
	background: color-mix(in srgb, var(--sfc-program-cards-border-color, #002E5D) 8%, Canvas);
}
.sfc-program-cards .sfc-program-cards__card-image img { display: block; width: 100%; height: 100%; object-fit: var(--sfc-program-cards-image-fit, cover); object-position: var(--sfc-program-cards-image-position, top right); transition: opacity 0.4s ease; }
/* Full image (natural shape): the picture renders uncropped at its own ratio;
   with a fixed Image height it letterboxes into the uniform box instead. */
.sfc-program-cards--image-fit-natural .sfc-program-cards__card-image { aspect-ratio: auto; }
.sfc-program-cards--image-fit-natural .sfc-program-cards__card-image img { height: var(--sfc-program-cards-image-height, auto); object-fit: contain; }
.sfc-program-cards .sfc-program-cards__card-image img[data-sfc-img-pending] { opacity: 0; }
/* Hover effects off (Cards Appearance): the card stays put. */
.sfc-program-cards--hover-off .sfc-program-cards__card:hover { transform: none; box-shadow: none; }
.sfc-program-cards .sfc-program-cards__card-body { display: flex; flex-direction: column; flex: 1; }
.sfc-program-cards .sfc-program-cards__card-title {
	/* Content gap (Cards Appearance): the vertical rhythm between the title,
	   the icon rows, and the button area. */
	margin: 0 0 var(--sfc-program-cards-content-gap, 16px);
	color: var(--sfc-program-cards-card-title-color, var(--sfc-blue, #002E5D));
	font-size: var(--sfc-program-cards-title-font-size, clamp(1.125rem, 1.5vw, 1.375rem));
	font-weight: 700;
	line-height: 1.25;
}
.sfc-program-cards .sfc-program-cards__card-title a { color: inherit; text-decoration: none; }
.sfc-program-cards .sfc-program-cards__card-title a:hover { color: var(--sfc-program-cards-button-hover, var(--sfc-gold, #DB9F0C)); }
.sfc-program-cards .sfc-program-cards__card-footer {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sfc-program-cards-footer-gap, 16px);
	padding-top: var(--sfc-program-cards-content-gap, 16px);
	border-top: 1px solid var(--sfc-program-cards-divider-color, rgba(0, 46, 93, 0.12));
}
.sfc-program-cards .sfc-program-cards__card-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: var(--sfc-program-cards-button-width, auto);
	padding: var(--sfc-program-cards-button-padding, 12px) var(--sfc-program-cards-button-padding-x, 22px);
	border-radius: var(--sfc-program-cards-button-radius, 24px);
	background: var(--sfc-program-cards-button-background, var(--sfc-blue, #002E5D));
	color: var(--sfc-program-cards-button-text, #FEFEFE);
	font: inherit;
	font-size: var(--sfc-program-cards-button-font-size, 0.95rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease;
}
.sfc-program-cards .sfc-program-cards__card-button:hover { background: var(--sfc-program-cards-button-hover, var(--sfc-gold, #DB9F0C)); color: var(--sfc-program-cards-button-hover-text, var(--sfc-blue, #002E5D)); }
.sfc-program-cards .sfc-program-cards__card-button:focus-visible { outline: 2px solid var(--sfc-program-cards-button-hover, var(--sfc-gold, #DB9F0C)); outline-offset: 2px; }
/* Icons: per-program numbered icon + text rows. Default layout sits under the
   title with the button pinned to the bottom; --inline moves it beside the
   button. Icon columns (1 or 2) is a per-device setting emitted as a variable;
   a row's bento-style grid-row/grid-column placement is inline on the li, and
   grid-auto-columns keeps any explicit column beyond the count even-width. */
.sfc-program-cards .sfc-program-cards__checklist { display: grid; grid-template-columns: repeat(var(--sfc-program-cards-checklist-columns, 1), minmax(0, 1fr)); grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--sfc-program-cards-row-gap, 6px); margin: 0 0 var(--sfc-program-cards-content-gap, 16px); padding: 0; list-style: none; font-size: var(--sfc-program-cards-text-font-size, 0.95rem); }
.sfc-program-cards .sfc-program-cards__checklist li { display: flex; align-items: center; gap: var(--sfc-program-cards-checklist-gap, 8px); margin: 0; }
.sfc-program-cards .sfc-program-cards__checklist li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sfc-program-cards .sfc-program-cards__checklist-icon { display: inline-flex; flex: none; }
.sfc-program-cards .sfc-program-cards__checklist svg { width: var(--sfc-program-cards-icon-size, 22px); height: var(--sfc-program-cards-icon-size, 22px); fill: var(--sfc-program-cards-icon-color, var(--sfc-blue, #002E5D)); }
.sfc-program-cards .sfc-program-cards__checklist--inline { flex: 1 1 0; min-width: 0; margin: 0; }
/* Inline layout: the button + checklist share one line on every screen size;
   the fact rows wrap below the row. */
.sfc-program-cards .sfc-program-cards__footer-row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sfc-program-cards-footer-gap, 16px); flex: 1 1 100%; min-width: 0; }
.sfc-program-cards--checklist-inline .sfc-program-cards__card-footer { align-items: center; }
/* Mobile: sticky Programs bar opens the left slide-in filter canvas. */
@media (max-width: 639px) {
	.sfc-program-cards .sfc-program-cards__filters > .sfc-program-cards__filter { display: none; }
	.sfc-program-cards .sfc-program-cards__mobilebar { display: block; margin: 12px; }
	.sfc-program-cards .sfc-program-cards__grid { gap: 14px; }
	.sfc-program-cards .sfc-program-cards__card { padding: 12px; }
	.sfc-program-cards .sfc-program-cards__card-image { margin-bottom: 12px; border-radius: 8px; }
	.sfc-program-cards .sfc-program-cards__card-footer { gap: var(--sfc-program-cards-footer-gap, 12px); }
}
.sfc-program-cards__mobilebar {
	display: none;
	position: sticky;
	/* top mirrors the 12px margin so the gap stays while the bar is stuck;
	   updateBarOffset() raises it further for sticky headers / the admin bar. */
	top: 12px;
	z-index: 40;
	margin: 12px;
}
.sfc-program-cards .sfc-program-cards__mobile-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--sfc-prog-filter-background, var(--sfc-blue, #002E5D));
	color: var(--sfc-prog-filter-text, #FEFEFE);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}
.sfc-program-cards .sfc-program-cards__mobile-toggle:hover,
.sfc-program-cards .sfc-program-cards__mobile-toggle[aria-expanded="true"] { background: var(--sfc-prog-filter-active-background, var(--sfc-gold, #DB9F0C)); color: var(--sfc-prog-filter-active-text, #FEFEFE); }
.sfc-program-cards .sfc-program-cards__mobile-toggle svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.sfc-program-cards .sfc-program-cards__mobile-active { margin-left: auto; font-weight: 500; opacity: 0.9; }
.sfc-program-cards__drawer { position: fixed; inset: 0; z-index: 99999; }
.sfc-program-cards__drawer[aria-hidden="true"] { visibility: hidden; transition: visibility 0s linear 0.3s; }
.sfc-program-cards__drawer[aria-hidden="false"] { visibility: visible; transition-delay: 0s; }
.sfc-program-cards__drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.sfc-program-cards__drawer.is-open .sfc-program-cards__drawer-scrim { opacity: 1; }
.sfc-program-cards__drawer-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(320px, 85vw);
	display: flex;
	flex-direction: column;
	background: var(--sfc-program-cards-card-background, #fff);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
}
.sfc-program-cards__drawer.is-open .sfc-program-cards__drawer-panel { transform: translateX(0); }
.sfc-program-cards__drawer-head {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--sfc-program-cards-card-background, #fff);
	border-bottom: 1px solid var(--sfc-program-cards-divider-color, rgba(0, 46, 93, 0.12));
	color: var(--sfc-program-cards-card-title-color, var(--sfc-blue, #002E5D));
	font-weight: 700;
}
.sfc-program-cards__drawer-close { display: flex; padding: 4px; border: 0; background: none; cursor: pointer; }
.sfc-program-cards__drawer-close svg { width: 22px; height: 22px; fill: var(--sfc-program-cards-card-title-color, var(--sfc-blue, #002E5D)); transition: fill 160ms ease; }
/* The theme paints its own button:hover background (pink); keep the × clean and
   turn the glyph gold on hover instead. */
.sfc-program-cards .sfc-program-cards__drawer-close:hover,
.sfc-program-cards .sfc-program-cards__drawer-close:focus-visible { background: none; }
.sfc-program-cards .sfc-program-cards__drawer-close:hover svg,
.sfc-program-cards .sfc-program-cards__drawer-close:focus-visible svg { fill: var(--sfc-gold, #DB9F0C); }
.sfc-program-cards__drawer-body { display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 14px 12px 18px; overflow-y: auto; }
.sfc-program-cards__drawer-body .sfc-program-cards__filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 18px;
	border-radius: 999px;
	text-align: left;
	font-size: 1rem;
}
@media (prefers-reduced-motion: reduce) {
	.sfc-program-cards .sfc-program-cards__filter,
	.sfc-program-cards .sfc-program-cards__card,
		.sfc-program-cards .sfc-program-cards__card-button
	.sfc-program-cards .sfc-program-cards__card:hover { transform: none; }
	.sfc-program-cards--pending .sfc-program-cards__card { opacity: 1; transform: none; transition: none; }
	.sfc-program-cards .sfc-program-cards__card-image img[data-sfc-img-pending] { opacity: 1; transition: none; }
}
