/**
 * SCBL Alumni List block.
 *
 * Typography and color styles are token-driven via global theme variables.
 */

.scbl-alumni-list {
	background: var(--color-dark-50);
	color: var(--color-indigo-900);
	padding-block: clamp(4rem, 8vw, 7.5rem);
}

.scbl-alumni-list__wrap {
	display: grid;
	gap: clamp(2rem, 4.5vw, 3.5rem);
}

.scbl-alumni-list__head {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.scbl-alumni-list__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--color-orange-500);
}

.scbl-alumni-list__eyebrow::after {
	content: "";
	width: clamp(3.5rem, 10vw, 7.5rem);
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.scbl-alumni-list__title {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	text-transform: uppercase;
	font-size: var(--fs-display-3);
	line-height: 0.98;
	font-weight: var(--fw-extrabold);
}

.scbl-alumni-list__title-mid {
	color: var(--color-indigo-600);
}

.scbl-alumni-list__title-end {
	color: var(--color-orange-500);
}

.scbl-alumni-list__intro {
	margin: 0;
	max-width: 34ch;
	color: var(--color-dark-600);
}

.scbl-alumni-list__list {
	border-top: 2px solid var(--color-indigo-900);
}

.scbl-alumni-list__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: clamp(0.85rem, 2vw, 2rem);
	padding-block: clamp(0.85rem, 1.75vw, 1.35rem);
	border-bottom: 1px solid var(--color-dark-200);
	transition: background-color 220ms ease, color 220ms ease;
}

.scbl-alumni-list__index {
	color: var(--color-orange-500);
}

.scbl-alumni-list__name {
	margin: 0;
	color: var(--color-indigo-900);
	font-size: var(--fs-h4);
	line-height: 0.98;
	text-transform: uppercase;
	font-weight: var(--fw-extrabold);
}

.scbl-alumni-list__college {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--color-dark-600);
	text-align: right;
}

.scbl-alumni-list__college::before {
	content: "";
	width: 1.25rem;
	height: 2px;
	border-radius: 999px;
	background: var(--color-orange-500);
	transition: background-color 220ms ease;
}

.scbl-alumni-list__item {
	padding: 20px;
}

.scbl-alumni-list__item:nth-of-type(4n + 1) span { color: var(--color-orange-500); }
.scbl-alumni-list__item:nth-of-type(4n + 2) span { color: var(--color-indigo-600); }
.scbl-alumni-list__item:nth-of-type(4n + 3) span { color: var(--color-maroon-500, #190c28); }
.scbl-alumni-list__item:nth-of-type(4n + 4) span { color: var(--color-red-500, #e0301e); }
.scbl-alumni-list__item:nth-of-type(4n + 5) span { color: var(--color-black, #000); }

.scbl-alumni-list__item:nth-of-type(4n + 1) .scbl-alumni-list__college::before { background: var(--color-orange-500); }
.scbl-alumni-list__item:nth-of-type(4n + 2) .scbl-alumni-list__college::before { background: var(--color-indigo-600); }
.scbl-alumni-list__item:nth-of-type(4n + 3) .scbl-alumni-list__college::before { background: var(--color-maroon-500, #190c28); }
.scbl-alumni-list__item:nth-of-type(4n + 4) .scbl-alumni-list__college::before { background: var(--color-red-500, #e0301e); }

.scbl-alumni-list__item:nth-of-type(4n + 1):hover { background: var(--color-orange-500); }
.scbl-alumni-list__item:nth-of-type(4n + 2):hover { background: var(--color-indigo-600); }
.scbl-alumni-list__item:nth-of-type(4n + 3):hover { background: var(--color-maroon-500, #190c28); }
.scbl-alumni-list__item:nth-of-type(4n + 4):hover { background: var(--color-red-500, #e0301e); }
.scbl-alumni-list__item:nth-of-type(4n + 5):hover { background: var(--color-black, #000); }

.scbl-alumni-list__item:hover .scbl-alumni-list__college::before,
.scbl-alumni-list__item:focus-within .scbl-alumni-list__college::before {
	background: var(--color-white) !important;
}

.scbl-alumni-list__item:hover .scbl-alumni-list__index,
.scbl-alumni-list__item:hover .scbl-alumni-list__name,
.scbl-alumni-list__item:hover .scbl-alumni-list__college{
	color: var(--color-white)!important;
}

.scbl-alumni-list__empty {
	margin: 0;
	padding-top: 1.25rem;
	color: var(--color-dark-600);
}

@media (min-width: 56rem) {
	.scbl-alumni-list__head {
		grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
		align-items: start;
		column-gap: clamp(1.5rem, 4vw, 4rem);
	}
}

@media (max-width: 48rem) {
	.scbl-alumni-list__item {
		grid-template-columns: auto 1fr;
		row-gap: 0.5rem;
	}

	.scbl-alumni-list__college {
		grid-column: 1 / -1;
		justify-self: start;
		text-align: left;
	}
}