/*
 * Alumni: the catalog (templates/pages/alumni/page-alumni.php) and every
 * graduate's page (page-alumni-profile.php), which share the navy header, the
 * photos, the tags and the network buttons. Loaded on the catalog by the
 * template-name convention and on the other pages of the section by
 * enqueue.php's map.
 *
 * In the manner of the section's front page: the navy opening every page of
 * the section starts with (parts/alumni-hero.php, «header» below), in the
 * sizes of /applicants/; under it plain paper without boxes, bold navy
 * headings, links underlined in the arms' red, photos cut like a tab with a
 * red copy behind. Paper and the text on it are semantic tokens and follow
 * the dark theme; the navy and the red are fixed colours.
 */

.alumni-page {
	--alumni-gap: clamp(16px, 1.6vw, 24px);
	--alumni-wall: var(--color-bg-secondary);
	--alumni-card: var(--color-surface-card);
	--alumni-line: var(--color-border);
	--alumni-strip: rgba(var(--color-tint--rgb), 0.06);
	--alumni-tint: rgba(var(--color-tint--rgb), 0.08);
	--alumni-on-navy: rgba(255, 255, 255, 0.82);
	--alumni-on-navy-muted: rgba(255, 255, 255, 0.62);
	--alumni-on-navy-line: rgba(255, 255, 255, 0.28);
	/* Corporate blue tones strictly from variables.css:
	   - --alumni-blue: lighter corporate blue var(--color-blue-100) (#265aa6) for light surfaces
	   - --alumni-blue-hover: bright corporate blue var(--color-blue-050) (#347ce9)
	   - --alumni-blue-light: light corporate blue var(--color-blue-030) (#4facfe) for navy & dark mode
	   - --alumni-red: kept as backward-compatible alias to --alumni-blue */
	--alumni-blue: var(--color-blue-100);
	--alumni-blue-hover: var(--color-blue-050);
	--alumni-blue-light: var(--color-blue-030);
	--alumni-red: var(--alumni-blue);
	--alumni-mentor-bg: var(--color-blue-100);
	--alumni-mentor-text: var(--color-white);
	/* Blue words and lines on paper: the corporate blue, lighter in the dark. */
	--alumni-accent-text: var(--color-blue-100);
	--alumni-accent-wash: rgba(var(--color-blue-100--rgb), 0.06);
	--alumni-button-bg: var(--color-blue-100);
	--alumni-button-hover: var(--color-blue-050);
	--alumni-card-shadow: 0 10px 24px rgba(var(--color-blue-200--rgb), 0.08);
	--alumni-chip-bg: var(--color-bg-primary);
	--alumni-dialog-bg: var(--color-bg-primary);
	--alumni-dialog-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);

	background: var(--color-bg-primary);
}

html[data-theme="dark"] .alumni-page {
	--alumni-accent-text: var(--color-blue-030);
	--alumni-accent-wash: rgba(79, 172, 254, 0.1);
	--alumni-button-bg: var(--color-blue-100);
	--alumni-button-hover: var(--color-blue-050);
	--alumni-card-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
	--alumni-chip-bg: var(--color-bg-secondary);
	--alumni-dialog-bg: var(--color-surface-card);
	--alumni-dialog-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.alumni-page section {
	padding: 0;
}

.alumni-page .ph-icon {
	flex: none;
}

/* ---------------------------------------------------------------- header */

/* /applicants/' hero: navy, the photo behind it under a light navy shade —
   deeper on the left where the words stand — the breadcrumbs, the title, a
   line under it, the buttons, and the page's parts as a two-column jump
   menu; on the right, the university's arms. */
.alumni-intro {
	--alumni-intro-top: 100px;
	--alumni-intro-bottom: 40px;

	position: relative;
	isolation: isolate;
	align-items: flex-start !important;
	padding-top: var(--alumni-intro-top) !important;
	padding-bottom: var(--alumni-intro-bottom) !important;
	overflow: hidden;
	background: var(--color-blue-200);
	color: var(--color-white);
}

.alumni-intro__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.alumni-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(var(--color-blue-200--rgb), 0.82) 0%, rgba(var(--color-blue-200--rgb), 0.62) 45%, rgba(var(--color-blue-200--rgb), 0.3) 100%),
		linear-gradient(to bottom, transparent 40%, rgba(var(--color-blue-200--rgb), 0.35));
}

.alumni-intro__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	width: 100%;
}

.alumni-intro__main > * {
	max-width: 760px;
}

/* The arms, large, centred in the right column: the opening's whole height
   but 24px above and below, through its paddings, a little past the column's
   sides if they must. Out of the flow, so they never make the opening taller
   than /applicants/' is. */
.alumni-intro__side {
	position: relative;
	align-self: stretch;
	pointer-events: none;
}

.alumni-intro__arms {
	position: absolute;
	top: calc(24px - var(--alumni-intro-top));
	left: -10%;
	display: block;
	width: 120%;
	height: calc(100% + var(--alumni-intro-top) + var(--alumni-intro-bottom) - 48px);
	object-fit: contain;
	object-position: center;
}

.alumni-intro__crumbs {
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.875rem;
	line-height: 1.6;
}

.alumni-intro__crumbs a {
	color: var(--color-white) !important;
	font-weight: 600;
	text-decoration: none;
}

.alumni-page .alumni-intro__title {
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--color-white);
	font-size: clamp(2.2rem, 3.5vw, 3.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em;
	text-shadow: none;
}

.alumni-page .alumni-intro__desc {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	font-weight: 500;
	line-height: 1.6;
}

.alumni-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 40px;
}

/* On the front page its three buttons share the row, as on /applicants/;
   one or two elsewhere keep their own width. */
.alumni-home .alumni-intro__actions .alumni-neo {
	flex: 1 1 auto;
}

@media (min-width: 1200px) and (max-width: 1400px) {
	.alumni-intro {
		--alumni-intro-top: 50px;
	}
}

@media (max-width: 1199px) {
	.alumni-intro__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.alumni-intro__side {
		display: none;
	}

	.alumni-page .alumni-intro__title {
		font-size: clamp(2.2rem, 8vw, 2.8rem) !important;
	}
}

@media (max-width: 991px) {
	.alumni-intro {
		--alumni-intro-bottom: 50px;
	}

	.alumni-intro__crumbs {
		margin-bottom: 20px;
	}
}

/* Phones, as /applicants/ has them (page-applicants-update.css): the opening
   starts under the fixed header with no gap of its own, the title and the line
   take the site's phone scale, the first button has a row to itself and the
   others share the next. */
@media (max-width: 767px) {
	.alumni-intro {
		--alumni-intro-top: calc(var(--header-height, 56px) + 20px);
		--alumni-intro-bottom: 28px;

		margin-top: 0 !important;
	}

	.alumni-intro__main {
		min-width: 0;
	}

	.alumni-intro__crumbs {
		margin-bottom: 14px;
	}

	.alumni-page .alumni-intro__title {
		margin-bottom: 10px !important;
		font-size: var(--fs-title) !important;
		line-height: 1.15 !important;
		letter-spacing: -0.02em;
	}

	.alumni-page .alumni-intro__desc {
		margin-bottom: 22px;
		font-size: var(--fs-body);
		line-height: 1.5;
	}

	.alumni-intro__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 10px;
		margin-bottom: 24px;
	}

	.alumni-intro__actions .alumni-neo {
		flex: 1 1 auto;
		min-height: 44px;
		padding: 10px 16px;
		font-size: 0.9375rem;
		box-shadow: none;
	}

	.alumni-intro__actions .alumni-neo:first-child {
		flex-basis: 100%;
	}

	.alumni-intro__actions .alumni-neo--outline {
		border-width: 1px;
	}

	/* With nothing under the buttons the opening ends with them. */
	.alumni-intro__actions:last-child {
		margin-bottom: 0;
	}

	/* A navy button on paper («Усі події», «Обрати ментора») across the
	   screen, as a phone's main action. */
	.alumni-neo--navy {
		width: 100%;
		min-height: 44px;
	}
}

/* ------------------------------------------------------- opening buttons */

/* The buttons of /applicants/ (.btn-neo-*): square, bold, a 2px border and a
   hard shadow that the button slides into when pointed at. Light and outline
   on navy, navy on paper. */
.alumni-neo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 22px;
	border: 2px solid var(--color-white);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.alumni-neo svg {
	flex-shrink: 0;
}

.alumni-neo--light {
	background: var(--color-white);
	color: var(--color-blue-200) !important;
	box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.2);
}

.alumni-neo--outline {
	/* The navy under the words, as the jump menu's, against the photo. */
	background: rgba(var(--color-blue-200--rgb), 0.82);
	color: var(--color-white) !important;
	box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.15);
}

.alumni-neo--navy {
	padding: 10px 20px;
	border-color: var(--color-blue-200);
	background: var(--color-blue-200);
	color: var(--color-white) !important;
	font-size: 0.95rem;
	box-shadow: 4px 4px 0 rgba(var(--color-blue-200--rgb), 0.25);
}

@media (hover: hover) and (pointer: fine) {
	.alumni-neo:hover {
		transform: translate(2px, 2px);
	}

	.alumni-neo--light:hover {
		background: transparent;
		color: var(--color-white) !important;
		box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.1);
	}

	.alumni-neo--outline:hover {
		background: rgba(255, 255, 255, 0.1);
		box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.05);
	}

	.alumni-neo--navy:hover {
		box-shadow: 2px 2px 0 rgba(var(--color-blue-200--rgb), 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.alumni-neo {
		transition: none;
	}
}

/* A photo cut like a tab — two opposite corners bevelled — with a red copy of
   the same shape set off behind it, the arms' red as a printed register mark.
   No rounded corners anywhere. Its picture (an <img>, or a profile's photo or
   initials) fills it. */
.alumni-cut {
	--alumni-cut-size: clamp(24px, 3.4vw, 64px);
	--alumni-cut-red: var(--alumni-red);
	--alumni-cut-shape: polygon(var(--alumni-cut-size) 0, 100% 0, 100% calc(100% - var(--alumni-cut-size)), calc(100% - var(--alumni-cut-size)) 100%, 0 100%, 0 var(--alumni-cut-size));

	position: relative;
	margin: 0 10px 10px 0;
}

.alumni-cut::before {
	content: "";
	position: absolute;
	inset: 10px -10px -10px 10px;
	background: var(--alumni-cut-red);
	clip-path: var(--alumni-cut-shape);
}

.alumni-cut > * {
	position: relative;
	display: block;
	width: 100%;
	clip-path: var(--alumni-cut-shape);
}

.alumni-cut img {
	width: 100%;
	object-fit: cover;
}

/* On navy the accent lifted to pleasant sky azure, so that it reads cleanly. */
.alumni-intro .alumni-cut {
	--alumni-cut-red: var(--alumni-blue-light);
}

.alumni-link {
	color: var(--color-link);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--alumni-blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: color 0.25s ease, text-decoration-color 0.25s ease, text-underline-offset 0.25s ease, text-decoration-thickness 0.25s ease;
}

.alumni-link:hover {
	color: var(--alumni-blue-hover);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.alumni-intro .alumni-link,
.alumni-invite .alumni-link {
	color: var(--color-white);
	text-decoration-color: var(--alumni-blue-light);
}

.alumni-intro .alumni-link:hover,
.alumni-invite .alumni-link:hover {
	color: var(--alumni-blue-light);
}

/* The breadcrumbs, the profile's links, the networks: the same easing. */
.alumni-info__row a,
.alumni-info__links a {
	transition: color 0.25s ease;
}

/* The heading of a section: bold navy, nothing around it. */
.alumni-page .alumni-title {
	margin: 0 0 clamp(24px, 3vw, 36px) !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--color-text-heading);
	font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.6rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.025em;
}

.alumni-head__name.page-title {
	margin: 0;
	color: var(--color-white);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-shadow: none;
}

/* ----------------------------------------------------------------- photos */

.alumni-photo {
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--color-bg-tertiary);
}

.alumni-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

/* No photo: clean initials on neutral background without emblem overlay */
.alumni-photo--initials {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-tertiary);
	color: var(--color-text-heading);
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 0;
}

/* ------------------------------------------------------------------- tags */

.alumni-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alumni-tags__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border: 1px solid var(--alumni-line);
	color: var(--color-text-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.alumni-tags__item--mentor {
	border-color: var(--alumni-mentor-bg);
	background: var(--alumni-mentor-bg);
	color: var(--alumni-mentor-text);
}

/* -------------------------------------------------------- network buttons */

.alumni-networks {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alumni-networks__link {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background: var(--alumni-tint);
	color: var(--color-text-heading);
	font-size: 18px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alumni-networks__link:hover,
.alumni-networks__link:focus-visible {
	background: var(--color-accent);
	color: var(--color-white);
}

/* The heading of a block — the profile's sections, the forms' parts: bold
   navy words over a navy rule, as the front page's columns are headed. */
.alumni-page .alumni-strip {
	margin: 0;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--color-blue-200);
	background: none;
	color: var(--color-text-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
}

html[data-theme="dark"] .alumni-page .alumni-strip {
	border-bottom-color: var(--color-accent);
}

/* =============================================================== catalog */

.alumni-list {
	padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 96px) !important;
}

.alumni-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 0;
}

.alumni-filters[hidden] {
	display: none;
}

.alumni-filters__search {
	position: relative;
	flex: 1 1 280px;
	min-width: 0;
}

.alumni-filters__search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	color: var(--color-text-muted);
	pointer-events: none;
}

/* Two classes: the reset's input[type="search"] sets content-box and outranks
   one, and the padding for the icon would push the field over its neighbours. */
.alumni-filters .alumni-filters__input,
.alumni-filters .alumni-filters__select {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	border: 1px solid var(--alumni-line);
	border-radius: 0;
	background-color: var(--color-bg-primary);
	color: var(--color-text-primary);
	font: inherit;
	font-size: 0.9375rem;
	transition: border-color 0.2s ease;
}

/* The padding needs !important: search.css gives every input on a wide
   screen padding-bottom: 0.5rem !important, and the site's placeholder is
   18px; both set the words above the selects' line (as in
   page-memory-book.css). */
.alumni-filters .alumni-filters__input {
	padding: 0 14px 0 42px !important;
	line-height: normal;
}

.alumni-filters .alumni-filters__input::placeholder {
	color: var(--color-text-muted);
	font-size: inherit;
	line-height: normal;
}

.alumni-filters__field {
	flex: 1 1 160px;
	min-width: 0;
}

.alumni-filters__select {
	padding: 0 36px 0 12px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2386939b'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	cursor: pointer;
	text-overflow: ellipsis;
}

.alumni-filters__input:focus,
.alumni-filters__select:focus {
	outline: none;
	border-color: var(--color-accent);
}

.alumni-filters__reset {
	height: 44px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: var(--color-link);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}

.alumni-filters__reset:hover {
	text-decoration: underline;
}

.alumni-filters__reset[hidden] {
	display: none;
}

/* The count, as the front page's column labels: small capitals, quiet. */
.alumni-page .alumni-list__count {
	margin: clamp(24px, 3vw, 36px) 0 clamp(20px, 2.4vw, 28px);
	color: var(--color-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.alumni-list__count strong {
	color: var(--color-text-heading);
	font-weight: 700;
}

.alumni-list__empty {
	margin: 20px 0 0;
	padding: 40px 24px;
	border-top: 1px solid var(--alumni-line);
	border-bottom: 1px solid var(--alumni-line);
	color: var(--color-text-secondary);
	text-align: center;
}

.alumni-list__empty[hidden] {
	display: none;
}

/* The way into the catalog for those not in it yet: a line under a navy
   rule, the question and the button on one level. */
.alumni-list__join {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-top: clamp(48px, 6vw, 88px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 2px solid var(--color-blue-200);
}

html[data-theme="dark"] .alumni-list__join {
	border-top-color: var(--color-accent);
}

.alumni-page .alumni-list__join-text {
	max-width: 640px;
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 1rem;
	line-height: 1.55;
}

.alumni-list__join-text strong {
	display: block;
	margin-bottom: 4px;
	color: var(--color-text-heading);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* The graduates as a wall of portraits, edge to edge with a hairline of
   paper between them (parts/alumni-card.php): four to a row on a wide screen,
   three on a narrow one, two on a phone. Every tile is square, the portrait
   filling it; the data stand on it at the foot under a navy shade, white. */
.alumni-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alumni-card {
	margin: 0;
}

.alumni-card[hidden] {
	display: none;
}

.alumni-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--color-blue-200);
	color: var(--color-white);
}

.alumni-tile__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
}

.alumni-tile__photo .alumni-photo__img {
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* No portrait: the initials, large and faint, on the navy. */
.alumni-tile__photo.alumni-photo--initials {
	align-items: flex-start;
	padding-top: 18%;
	background: var(--color-blue-200);
	color: rgba(255, 255, 255, 0.22);
	font-size: clamp(3rem, 7vw, 6rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* The shade under the words: clear at the top, navy at the foot. */
.alumni-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 30%, rgba(var(--color-blue-200--rgb), 0.55) 58%, rgba(var(--color-blue-200--rgb), 0.95) 100%);
	transition: opacity 0.35s ease;
}

.alumni-tile__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 20px 18px;
}

.alumni-tile-roles {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 2px;
	padding: 0;
	list-style: none;
}

.alumni-tile-roles__item {
	color: var(--color-blue-010, #b3d4fc);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.alumni-tile-roles__item + .alumni-tile-roles__item::before {
	content: "·";
	margin: 0 6px;
}

.alumni-page .alumni-tile__name {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.alumni-tile__link {
	color: var(--color-white) !important;
	text-decoration: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* The name is the profile's link and covers the tile. */
.alumni-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.alumni-tile__link:focus-visible {
	outline: none;
}

.alumni-tile:focus-within {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.alumni-page .alumni-tile__bio,
.alumni-page .alumni-tile__edu {
	margin: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.875rem;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alumni-page .alumni-tile__edu {
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.8125rem;
}

/* Over the tile's link, so it opens the request rather than the profile. */
.alumni-tile__mentor {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	margin-top: 10px;
	padding: 8px 14px;
	border: 2px solid var(--color-white);
	background: var(--color-white);
	color: var(--color-blue-200);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alumni-tile__mentor:hover,
.alumni-tile__mentor:focus-visible {
	background: transparent;
	color: var(--color-white);
}

/* The graduate's links in the top corner, over the tile's link too. */
.alumni-tile-networks {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alumni-tile-networks__link {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: rgba(var(--color-blue-200--rgb), 0.7);
	color: var(--color-white);
	font-size: 16px;
	backdrop-filter: blur(4px);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alumni-tile-networks__link:hover,
.alumni-tile-networks__link:focus-visible {
	background: var(--color-white);
	color: var(--color-blue-200);
}

@media (hover: hover) and (pointer: fine) {
	.alumni-tile:hover .alumni-photo__img {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.alumni-tile__photo .alumni-photo__img,
	.alumni-tile__mentor,
	.alumni-tile-networks__link {
		transition: none;
	}
}

@media (max-width: 1199px) {
	.alumni-filters__search {
		flex-basis: 100%;
	}

	.alumni-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.alumni-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}

	.alumni-tile__body {
		padding: 12px 12px 10px;
	}

	.alumni-page .alumni-tile__name {
		font-size: 0.9375rem !important;
	}

	.alumni-page .alumni-tile__bio {
		font-size: 0.75rem;
	}

	.alumni-page .alumni-tile__edu {
		display: none;
	}

	.alumni-tile__mentor {
		margin-top: 6px;
		padding: 6px 8px;
		font-size: 0.6875rem;
	}

	.alumni-tile-networks {
		display: none;
	}
}

@media (max-width: 599px) {
	/* The filters compact on a phone: lower fields, smaller words, tighter
	   gaps, so the search and the four choices take three short rows. */
	.alumni-filters {
		gap: 6px;
	}

	.alumni-filters__field {
		flex-basis: calc(50% - 3px);
		max-width: none;
	}

	.alumni-filters .alumni-filters__input,
	.alumni-filters .alumni-filters__select,
	.alumni-filters__reset {
		height: 40px;
		font-size: 0.875rem;
	}

	.alumni-filters .alumni-filters__input {
		padding: 0 12px 0 36px !important;
	}

	.alumni-filters .alumni-filters__select {
		padding: 0 28px 0 10px;
		background-position: right 10px center;
		background-size: 12px;
	}

	.alumni-filters__search-icon {
		left: 12px;
		width: 16px;
		height: 16px;
	}

	.alumni-list__join .alumni-button {
		width: 100%;
	}
}

/* =============================================================== profile */

.alumni-head {
	display: grid;
	grid-template-columns: clamp(180px, 16vw, 240px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 3vw, 40px);
}

/* The portrait is a plain photo: no bevelled corners and no coloured copy
   behind it, which the section's own photos on the front page keep. */
.alumni-head__photo {
	margin: 0;
}

.alumni-head__photo > * {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	height: auto;
	font-size: clamp(2.6rem, 4vw, 4rem);
}

.alumni-head__photo img {
	height: 100%;
	object-fit: cover;
}

.alumni-head__photo > .alumni-photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Initials in the navy header: a lighter square of the same navy. */
.alumni-intro .alumni-photo--initials {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.9);
	outline: 1px solid var(--alumni-on-navy-line);
	outline-offset: -1px;
}


.alumni-head__name.page-title {
	font-size: clamp(2rem, 2.8vw, 2.9rem);
	line-height: 1.05;
}

.alumni-head__work {
	margin: 12px 0 0;
	color: var(--alumni-on-navy);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
	line-height: 1.45;
}

.alumni-head__facts {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--alumni-on-navy-line);
	color: var(--alumni-on-navy-muted);
	font-size: 0.9375rem;
}

.alumni-head__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 18px;
}

.alumni-head__request {
	margin-top: 20px;
}

.alumni-intro .alumni-tags__item:not(.alumni-tags__item--mentor) {
	border-color: var(--alumni-on-navy-line);
	color: var(--color-white);
}

.alumni-intro .alumni-networks__link {
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-white);
	font-size: 20px;
}

.alumni-intro .alumni-networks__link:hover,
.alumni-intro .alumni-networks__link:focus-visible {
	background: var(--color-white);
	color: var(--color-blue-200);
}

/* --------------------------------------------------- information and story */

.alumni-profile__content {
	padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 96px) !important;
}

/* A graduate's page is one column of reading width, centred, as a person's
   page in the Book of Memory: the header's contents and the body below share
   it, so the story's text runs to the end of its headings' rules instead of
   stopping short of them on a wide screen. */
.alumni-profile {
	--alumni-column: 1080px;
}

.alumni-profile .page-container {
	max-width: calc(var(--alumni-column) + 2 * var(--wrap));
	margin-left: auto;
	margin-right: auto;
}

/* The opening keeps to the same column, without the arms, so the portrait
   and the name line up with «Інформація» and the story below. */
.alumni-intro--no-arms .alumni-intro__inner {
	grid-template-columns: minmax(0, 1fr);
}

.alumni-intro--no-arms .alumni-intro__main > * {
	max-width: none;
}

.alumni-body {
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 5vw, 80px);
}

/* A block on the alumni pages (the profile's story, the forms' parts, the
   questionnaire's aside): no frame, the heading carries it. */
.alumni-page .alumni-section {
	border: 0;
	background: none;
}

.alumni-info__list {
	margin: 0;
	padding: 6px 0 0;
}

.alumni-info__row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--alumni-line);
}

.alumni-info__row dt {
	color: var(--color-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.alumni-info__row dd {
	margin: 0;
	color: var(--color-text-primary);
	font-size: 0.875rem;
	line-height: 1.5;
}

.alumni-info__row a,
.alumni-info__links a {
	color: var(--color-link);
	text-decoration: none;
}

.alumni-info__row a:hover,
.alumni-info__links a:hover {
	text-decoration: underline;
}

.alumni-info__links {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 16px 0 0;
	list-style: none;
}

.alumni-info__links a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-size: 0.875rem;
}

.alumni-info__links .ph-icon {
	width: 18px;
	height: 18px;
	color: var(--color-text-secondary);
}

.alumni-info__links span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alumni-story {
	display: grid;
	gap: clamp(32px, 4vw, 48px);
}

.alumni-section__text,
.alumni-memory {
	padding: 16px 0 0;
}

.alumni-section__text,
.alumni-memory .typography {
	font-size: 1rem;
	line-height: 1.7;
}

.alumni-section__text > :first-child,
.alumni-memory .typography > :first-child {
	margin-top: 0;
}

.alumni-section__text > :last-child,
.alumni-memory .typography > :last-child {
	margin-bottom: 0;
}

.alumni-section__empty {
	margin: 0;
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------- memories */

/* The photos above the memories, the column's width; «lead» beside them.
   The layouts are the profile's «Вигляд фото» (page-alumni-profile.php). */
.alumni-memory {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(20px, 3vw, 32px);
}

.alumni-memory--beside {
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
}

.alumni-memory__photos {
	min-width: 0;
	margin: 0;
}

.alumni-memory__photo {
	display: block;
	overflow: hidden;
	background: var(--alumni-strip);
	cursor: zoom-in;
}

.alumni-memory__photo:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.alumni-memory__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.alumni-memory__photo:hover .alumni-memory__img {
	opacity: 0.88;
}

/* Lead: the first photo whole, the rest as square thumbnails under it. */
.alumni-memory--lead .alumni-memory__photos {
	max-width: 640px;
}

.alumni-memory--lead .alumni-memory__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

.alumni-memory--beside .alumni-memory__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alumni-memory--lead .alumni-memory__photo {
	aspect-ratio: 1;
}

.alumni-memory--lead .alumni-memory__photo--lead {
	grid-column: 1 / -1;
	aspect-ratio: auto;
}

.alumni-memory__photo--lead .alumni-memory__img {
	height: auto;
}

/* Grid: equal tiles, cropped alike. */
.alumni-memory--grid .alumni-memory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
}

.alumni-memory--grid .alumni-memory__photo {
	aspect-ratio: 4 / 3;
}

/* Mosaic: every photo whole, in columns, as old prints of all sizes. */
.alumni-memory--masonry .alumni-memory__grid {
	columns: 3 180px;
	column-gap: 8px;
}

.alumni-memory--masonry .alumni-memory__photo {
	margin: 0 0 8px;
	break-inside: avoid;
}

.alumni-memory--masonry .alumni-memory__img {
	height: auto;
}

/* Slider: one photo at a time, whole, on the section's tint; arrows and
   the count in the corner, as the departments' project photos. */
.alumni-slider {
	position: relative;
}

.alumni-slider__swiper {
	background: var(--alumni-strip);
}

.alumni-slider .swiper-slide {
	height: auto;
}

.alumni-slider .alumni-memory__photo {
	aspect-ratio: 3 / 2;
	background: none;
}

.alumni-slider .alumni-memory__img {
	object-fit: contain;
}

.alumni-slider__bar {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	align-items: stretch;
	background: rgba(10, 20, 45, 0.55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--color-white);
}

.alumni-slider__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.alumni-slider__btn .ph-icon {
	width: 16px;
	height: 16px;
}

.alumni-slider__btn:hover,
.alumni-slider__btn:focus-visible {
	background: var(--color-white);
	color: var(--color-blue-200);
	outline: none;
}

.alumni-slider__btn.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* Two classes: Swiper makes the count its pagination and places that across
   the slide's foot (swiper-bundle.min.css). Here it sits between the arrows. */
.alumni-slider__bar .alumni-slider__count {
	position: static;
	inset: auto;
	z-index: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	width: auto;
	min-width: 52px;
	margin: 0;
	transform: none;
	padding: 0 10px;
	line-height: 1;
	white-space: nowrap;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.alumni-memory__photos figcaption {
	margin-top: 8px;
	color: var(--color-text-muted);
	font-size: 0.8125rem;
}

/* The quote itself is the site's blockquote (wp-blocks.css), as in any article. */
.alumni-page .alumni-memory__quote {
	margin-top: 0 !important;
}

.alumni-memory__question {
	margin: 0 0 10px;
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	font-style: italic;
}

/* ------------------------------------------------------------------- back */

.alumni-back {
	margin: 8px 0 0;
}



/* ----------------------------------------------------------------- narrow */

@media (max-width: 1023px) {
	.alumni-body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column: the story, then «Інформація», then the way back to the
	   catalog last, not stranded between the two. The story's blocks join
	   the column so that the link can be ordered after the list. */
	.alumni-story {
		display: contents;
	}

	.alumni-info {
		order: 2;
	}

	.alumni-back {
		order: 3;
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.alumni-head {
		grid-template-columns: 120px minmax(0, 1fr);
		align-items: start;
		gap: 16px 18px;
	}

	.alumni-head__photo > * {
		font-size: 2rem;
	}

	.alumni-head__name.page-title {
		font-size: 1.6rem;
	}

	.alumni-head__work {
		margin-top: 8px;
		font-size: 0.9375rem;
	}

	/* Under the photo, across the whole header, not squeezed beside it. */
	.alumni-head__facts,
	.alumni-head__row {
		grid-column: 1 / -1;
	}

	.alumni-head__body {
		display: contents;
	}

	.alumni-head__name,
	.alumni-head__work {
		grid-column: 2;
	}

	.alumni-head__name {
		grid-row: 1;
		align-self: end;
		margin-top: 0 !important;
	}

	.alumni-head__work {
		grid-row: 2;
		align-self: start;
	}

	.alumni-head__photo {
		grid-row: 1 / span 2;
	}

	.alumni-head__facts {
		grid-row: 3;
		margin-top: 0;
	}

	.alumni-head__row {
		grid-row: 4;
		margin-top: 0;
	}

	/* On a phone the request is the page's one action: the header's width. */
	.alumni-head__request {
		grid-column: 1 / -1;
		grid-row: 5;
		justify-self: stretch;
		justify-content: center;
		width: 100%;
		margin-top: 0;
	}

	.alumni-info__row {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.alumni-memory--beside {
		grid-template-columns: minmax(0, 1fr);
	}

	.alumni-memory--beside .alumni-memory__photos {
		max-width: 360px;
	}

	.alumni-memory--grid .alumni-memory__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.alumni-memory--masonry .alumni-memory__grid {
		columns: 2;
	}

	/* wp-blocks.css sets every blockquote's text with !important. */
	.alumni-page .alumni-memory__quote .typography p {
		font-size: 1rem !important;
	}
}

/* =============================================================== buttons */

/* Shared by every alumni page; square, as everything here, and words only.
   Navy is the brand's, red the arms'. The front page's own sections are
   page-alumni-home.css. */
.alumni-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.alumni-button:hover {
	transform: translateY(-2px);
}

.alumni-button:active {
	transform: translateY(0);
}

.alumni-button .ph-icon {
	width: 20px;
	height: 20px;
}

.alumni-button--light {
	background: var(--color-white);
	color: var(--color-blue-200);
}

.alumni-button--light:hover {
	background: rgba(255, 255, 255, 0.86);
}

.alumni-button--red {
	background: var(--alumni-red);
	color: var(--color-white);
}

.alumni-button--red:hover {
	background: var(--alumni-blue-hover);
}

.alumni-button--navy {
	background: var(--color-blue-200);
	color: var(--color-white);
}

.alumni-button--navy:hover {
	background: var(--color-blue-100);
}

.alumni-button--outline {
	border-color: var(--color-accent);
	color: var(--color-link);
}

.alumni-button--outline:hover {
	background: var(--color-accent);
	color: var(--color-white);
}

/* On the navy header only: an outline in the header's own white. */
.alumni-button--ghost {
	border-color: var(--alumni-on-navy-line);
	color: var(--color-white);
}

.alumni-button--ghost:hover {
	border-color: var(--color-white);
	background: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.alumni-link,
	.alumni-button:hover,
	.alumni-tile__link,
	.alumni-networks__link,
	.alumni-button {
		transition: none;
	}
}

/* ========================================================= Mentoring Modal */

.alumni-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.alumni-modal[hidden] {
	display: none !important;
}

.alumni-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 18, 38, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.alumni-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--alumni-dialog-bg);
	border: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: var(--alumni-dialog-shadow);
	padding: clamp(24px, 4vw, 36px);
	box-sizing: border-box;
}

.alumni-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--alumni-line);
	border-radius: 0;
	background: var(--color-bg-secondary);
	color: var(--color-text-primary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.alumni-modal__close:hover {
	background: var(--color-blue-100);
	border-color: var(--color-blue-100);
	color: var(--color-white);
}

.alumni-modal__header {
	margin-bottom: 16px;
	padding-right: 40px;
}

.alumni-modal__badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--alumni-accent-text);
	margin-bottom: 4px;
}

.alumni-modal__title {
	margin: 0;
	font-size: clamp(1.4rem, 2.5vw, 1.8rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text-heading);
}

.alumni-modal__mentor-name {
	margin: 6px 0 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--alumni-accent-text);
}

/* «Хто такий ментор Політехніки?» — the question, with the answer in a
   tooltip that opens on hover, on focus and on a tap (alumni-form.js). The
   tooltip is a navy note, the same in both themes. */
.alumni-tip {
	position: relative;
	margin-bottom: 20px;
}

.alumni-tip__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-link);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}

.alumni-tip__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.6875rem;
	line-height: 1;
	text-decoration: none;
}

.alumni-tip__bubble {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 2;
	width: min(420px, 100%);
	padding: 12px 16px;
	background: var(--color-blue-200);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
	color: var(--color-white);
	font-size: 0.8125rem;
	line-height: 1.55;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.alumni-tip__bubble::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 18px;
	border: 6px solid transparent;
	border-top: 0;
	border-bottom-color: var(--color-blue-200);
}

.alumni-tip:hover .alumni-tip__bubble,
.alumni-tip__toggle:focus-visible + .alumni-tip__bubble,
.alumni-tip.is-open .alumni-tip__bubble {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.alumni-tip__bubble {
		transition: none;
	}
}

.alumni-modal .alumni-form__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.alumni-modal .alumni-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.alumni-modal .alumni-form__send {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--alumni-line);
}

@media (max-width: 599px) {
	.alumni-modal .alumni-form__row {
		grid-template-columns: 1fr;
	}
	.alumni-modal__dialog {
		padding: 20px 16px;
	}
}