/* Bento grid component styles ([sfc_bento]). Override the namespaced variables as needed. */
.sfc-bento {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
}
.sfc-bento *, .sfc-bento *::before, .sfc-bento *::after { box-sizing: border-box; }
.sfc-bento .sfc-bento__heading {
	margin: 0 0 28px;
	color: var(--sfc-bento-title-color, #fff);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
}
.sfc-bento .sfc-bento__grid {
	display: grid;
	grid-template-columns: repeat(var(--sfc-bento-cols, 4), minmax(0, 1fr));
	grid-auto-rows: minmax(var(--sfc-bento-row-h, 240px), auto);
	gap: var(--sfc-bento-gap, 18px);
}
.sfc-bento .sfc-bento__card {
	position: relative;
	min-width: 0;
	border-radius: var(--sfc-bento-radius, 24px);
}
/* Cards painted nowhere flow full-width under the placed ones. */
.sfc-bento .sfc-bento__card--unplaced { grid-column: 1 / -1; }
.sfc-bento .sfc-bento__link {
	position: relative;
	display: block;
	height: 100%;
	min-height: inherit;
	overflow: hidden;
	border-radius: inherit;
	background: var(--sfc-bento-overlay, #001A33);
	box-shadow: 0 10px 30px rgba(0, 20, 40, 0.12);
	cursor: pointer;
	transition: box-shadow 200ms ease;
}
.sfc-bento .sfc-bento__link:hover { box-shadow: 0 16px 40px rgba(0, 20, 40, 0.22); }
.sfc-bento .sfc-bento__link:focus-visible { outline: 3px solid var(--sfc-bento-accent, var(--sfc-gold, #DB9F0C)); outline-offset: 3px; }
.sfc-bento .sfc-bento__link img {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The photos carry the college logo in their top-right: anchor the crop
	   (and the hover zoom) there, so the top of the picture always stays
	   visible and the bottom is what gets cropped away. */
	object-position: right top;
	transform-origin: top right;
	transition: transform 400ms ease, opacity 0.4s ease;
}
.sfc-bento .sfc-bento__link img[data-sfc-img-pending] { opacity: 0; }
.sfc-bento .sfc-bento__link:hover img { transform: scale(1.04); }
.sfc-bento .sfc-bento__image--empty {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(135deg, transparent 55%, var(--sfc-bento-accent, var(--sfc-gold, #DB9F0C)) 55%),
		var(--sfc-bento-overlay, #001A33);
	opacity: 0.5;
}
/* Rest scrim: two configurable stops. The bottom color pools dark at the base
   and fades into the top color (fully transparent by default) by a third of
   the way up, so photos stay clear at the top. */
.sfc-bento .sfc-bento__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		var(--sfc-bento-overlay-top, transparent) 0%,
		var(--sfc-bento-overlay-top, transparent) var(--sfc-bento-overlay-top-pos, 30%),
		var(--sfc-bento-overlay-bottom, #001a33aa) 100%
	);
	/* The configured rest strength scales the whole gradient. */
	opacity: var(--sfc-bento-overlay-op, 100%);
	pointer-events: none;
}
/* Hover: one uniform layer of the base overlay color; its opacity IS the
   configured hover strength. */
.sfc-bento .sfc-bento__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--sfc-bento-overlay, #001A33);
	opacity: 0;
	transition: opacity 260ms ease;
	pointer-events: none;
}
.sfc-bento .sfc-bento__link:hover::before,
.sfc-bento .sfc-bento__link:focus-visible::before { opacity: var(--sfc-bento-overlay-op-h, 75%); }
/* Badge: badge text and icon over the picture, top left. Chip background,
   padding, text color, and icon size/color come from the Badge settings. */
.sfc-bento .sfc-bento__badge {
	position: absolute;
	z-index: 3;
	top: 22px;
	left: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100% - 110px);
	padding: var(--sfc-bento-badge-py, 0px) var(--sfc-bento-badge-px, 0px);
	background: var(--sfc-bento-badge-bg, transparent);
	border-radius: var(--sfc-bento-badge-radius, 8px);
	color: var(--sfc-bento-badge-text, var(--sfc-bento-title-color, #fff));
	transition: opacity 200ms ease;
}
.sfc-bento .sfc-bento__badge-label {
	font-size: var(--sfc-bento-badge-size, 0.72rem);
	font-weight: var(--sfc-bento-badge-weight, 700);
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}
.sfc-bento .sfc-bento__badge img {
	position: static;
	width: auto;
	height: var(--sfc-bento-badge-icon-size, 42px);
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.sfc-bento .sfc-bento__badge-icon {
	width: var(--sfc-bento-badge-icon-size, 42px);
	height: var(--sfc-bento-badge-icon-size, 42px);
	fill: var(--sfc-bento-badge-icon-color, var(--sfc-bento-accent, var(--sfc-gold, #DB9F0C)));
	flex: none;
}
/* Rest state: circle arrow, top right. */
.sfc-bento .sfc-bento__arrow {
	position: absolute;
	z-index: 3;
	top: 18px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1.5px solid color-mix(in srgb, var(--sfc-bento-title-color, #fff) 75%, transparent);
	border-radius: 50%;
	color: var(--sfc-bento-title-color, #fff);
	transition: opacity 220ms ease, transform 220ms ease;
}
.sfc-bento .sfc-bento__arrow svg { width: 22px; height: 22px; stroke-width: var(--sfc-bento-go-arrow, 2px); }
/* Rest state: plain title, bottom left. */
.sfc-bento .sfc-bento__title {
	position: absolute;
	z-index: 3;
	left: 24px;
	right: 24px;
	bottom: 20px;
	margin: 0;
	color: var(--sfc-bento-title-color, #fff);
	font-size: var(--sfc-bento-title-size, var(--sfc-bento-title-d, clamp(1.1rem, 1.6vw, 1.45rem)));
	font-weight: var(--sfc-bento-title-weight, 800);
	line-height: 1.15;
	text-wrap: balance;
	transition: opacity 220ms ease, transform 220ms ease;
}
/* Hover: the plain title steps aside for the details block. */
.sfc-bento .sfc-bento__link:hover .sfc-bento__title,
.sfc-bento .sfc-bento__link:focus-visible .sfc-bento__title { opacity: 0; transform: translateY(8px); }
/* Hover: "Go to X" pill replaces the circle arrow. All of it is styled from
   the Go button settings (colors, hover colors, padding). */
.sfc-bento .sfc-bento__go {
	position: absolute;
	z-index: 4;
	top: 18px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(72%, 420px);
	padding: var(--sfc-bento-go-py, 12px) var(--sfc-bento-go-px, 20px);
	border-radius: 999px;
	background: var(--sfc-bento-go-bg, #fff);
	color: var(--sfc-bento-go-text, #001A33);
	font-size: var(--sfc-bento-go-size, 0.95rem);
	font-weight: var(--sfc-bento-go-weight, 700);
	line-height: 1.2;
	box-shadow: 0 8px 22px rgba(0, 20, 40, 0.25);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 220ms ease, transform 220ms ease, background-color 160ms ease, color 160ms ease;
	pointer-events: auto;
}
.sfc-bento .sfc-bento__go-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfc-bento .sfc-bento__go svg { width: 20px; height: 20px; stroke-width: var(--sfc-bento-go-arrow, 2px); flex: none; }
/* Hovering the pill itself swaps to its hover colors. */
.sfc-bento .sfc-bento__link:hover .sfc-bento__go:hover,
.sfc-bento .sfc-bento__link:focus-visible .sfc-bento__go:hover {
	background: var(--sfc-bento-go-hover-bg, #DB9F0C);
	color: var(--sfc-bento-go-hover-text, #fff);
}
.sfc-bento .sfc-bento__link:hover .sfc-bento__go,
.sfc-bento .sfc-bento__link:focus-visible .sfc-bento__go { opacity: 1; transform: translateY(0); }
.sfc-bento .sfc-bento__link:hover .sfc-bento__arrow,
.sfc-bento .sfc-bento__link:focus-visible .sfc-bento__arrow { opacity: 0; transform: translateY(-6px); }
/* Hover: facts block slides up over the picture. */
.sfc-bento .sfc-bento__details {
	position: absolute;
	z-index: 3;
	left: 24px;
	right: 24px;
	bottom: 20px;
	color: var(--sfc-bento-title-color, #fff);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 240ms ease, transform 240ms ease;
	pointer-events: none;
}
.sfc-bento .sfc-bento__link:hover .sfc-bento__details,
.sfc-bento .sfc-bento__link:focus-visible .sfc-bento__details { opacity: 1; transform: translateY(0); }
.sfc-bento .sfc-bento__details p { margin: 0; }
.sfc-bento .sfc-bento__fact { display: flex; align-items: baseline; gap: 16px; }
.sfc-bento .sfc-bento__wage {
	color: var(--sfc-bento-wage-color, var(--sfc-bento-accent, var(--sfc-gold, #DB9F0C)));
	font-size: var(--sfc-bento-wage-size, clamp(1.3rem, 2.4vw, 2rem));
	font-weight: var(--sfc-bento-wage-weight, 800);
	line-height: 1.1;
}
.sfc-bento .sfc-bento__credential {
	color: var(--sfc-bento-credential-color, var(--sfc-bento-title-color, #fff));
	font-size: var(--sfc-bento-credential-size, 0.8rem);
	font-weight: var(--sfc-bento-credential-weight, 700);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.9;
}
.sfc-bento .sfc-bento__fact-label {
	margin-top: 2px !important;
	color: var(--sfc-bento-wage-label-color, var(--sfc-bento-title-color, #fff));
	font-size: var(--sfc-bento-wage-label-size, 0.7rem);
	font-weight: var(--sfc-bento-wage-label-weight, 600);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}
.sfc-bento .sfc-bento__name {
	margin-top: 10px !important;
	font-size: var(--sfc-bento-title-size, var(--sfc-bento-title-d, clamp(1.1rem, 1.6vw, 1.45rem)));
	font-weight: var(--sfc-bento-title-weight, 800);
	line-height: 1.15;
	text-wrap: balance;
}
.sfc-bento .sfc-bento__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 40px;
	margin: 14px 0 0 !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid color-mix(in srgb, var(--sfc-bento-title-color, #fff) 30%, transparent);
	list-style: none;
}
.sfc-bento .sfc-bento__stats li { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sfc-bento .sfc-bento__stat-value { color: var(--sfc-bento-stat-value-color, var(--sfc-bento-title-color, #fff)); font-size: var(--sfc-bento-stat-value-size, clamp(1.05rem, 1.8vw, 1.5rem)); font-weight: var(--sfc-bento-stat-value-weight, 800); line-height: 1.2; }
.sfc-bento .sfc-bento__stat-value em {
	color: var(--sfc-bento-accent, var(--sfc-gold, #DB9F0C));
	font-style: italic;
	font-weight: 600;
	font-size: 0.85em;
}
.sfc-bento .sfc-bento__stat-label {
	color: var(--sfc-bento-stat-label-color, var(--sfc-bento-title-color, #fff));
	font-size: var(--sfc-bento-stat-label-size, 0.65rem);
	font-weight: var(--sfc-bento-stat-label-weight, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}
/* Editor notice when the grid has no cards yet. */
p.sfc-bento__empty { padding: 18px; border: 1px dashed #c3c4c7; background: #fff; }
/* Mobile: the matrix releases, every card stacks full width. The !important is
   what lets the media query beat each card's inline grid-area. */
@media (max-width: 639px) {
	.sfc-bento .sfc-bento__grid {
		grid-template-columns: 1fr;
		/* Row height and gap come from the per-device vars; the mobile media
		   block in the instance stylesheet overrides them when set. */
		gap: var(--sfc-bento-gap, 12px);
	}
	.sfc-bento .sfc-bento__card,
	.sfc-bento .sfc-bento__card--unplaced { grid-area: auto / 1 / auto / 2 !important; }
	.sfc-bento .sfc-bento__title, .sfc-bento .sfc-bento__name { font-size: var(--sfc-bento-title-size, 1.3rem); }
	.sfc-bento .sfc-bento__badge { top: 14px; left: 16px; }
	.sfc-bento .sfc-bento__title, .sfc-bento .sfc-bento__details { left: 16px; right: 16px; bottom: 14px; }
	.sfc-bento .sfc-bento__arrow, .sfc-bento .sfc-bento__go { top: 12px; right: 12px; }
	.sfc-bento .sfc-bento__arrow { width: 38px; height: 38px; }
}
/* Entrance animation, driven by the inline reveal script. */
.sfc-bento--pending .sfc-bento__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-bento--pending .sfc-bento__card.is-revealed { opacity: 1; transform: none; }
.sfc-bento--pending .sfc-bento__card.is-settled { transition: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
	.sfc-bento .sfc-bento__link,
	.sfc-bento .sfc-bento__link img,
	.sfc-bento .sfc-bento__link::before,
	.sfc-bento .sfc-bento__title,
	.sfc-bento .sfc-bento__badge,
	.sfc-bento .sfc-bento__go,
	.sfc-bento .sfc-bento__arrow,
	.sfc-bento .sfc-bento__details { transition: none; }
	.sfc-bento .sfc-bento__link:hover img { transform: none; }
	.sfc-bento--pending .sfc-bento__card { opacity: 1; transform: none; transition: none; }
}