/*
 * 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 (page-alumni-home.css): a navy
 * header that opens with the Association's line, the faint arms in their own
 * colours, a bold white title; 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 */

/*
 * The navy header, as the front page opens: the Association's line with the
 * university's arms, and a bold white title. !important against css-components/google-table.css, which sets
 * every .page-hero's padding with it on every page.
 */
.alumni-hero {
	isolation: isolate;
	padding: clamp(14px, 2vh, 24px) 0 clamp(36px, 5vh, 56px) !important;
	background:
		radial-gradient(ellipse 60% 70% at 88% 100%, rgba(var(--color-blue-100--rgb), 0.55), transparent 70%),
		var(--color-blue-200) !important;
}

.alumni-hero::after {
	content: none;
}

.alumni-hero > .page-container {
	width: 100%;
	padding-inline: clamp(16px, 1.6vw, 28px);
}

@media (max-width: 899px) {
	/* The page starts under the fixed header on a phone. */
	.alumni-hero {
		padding-top: 52px !important;
	}
}

/* The line every navy header opens with: the breadcrumbs, and the arms with
   «Асоціація випускників» on the right (zp_alumni_bar_html()). */
.alumni-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: clamp(10px, 1.6vh, 18px);
}

.alumni-page .alumni-bar__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--color-white);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.alumni-bar__arms {
	flex: none;
	width: 34px;
	height: auto;
}

.alumni-bar__crumbs,
.alumni-bar__crumbs a,
.alumni-bar__crumbs span {
	color: var(--alumni-on-navy-muted) !important;
	font-size: 0.875rem;
	text-decoration: none;
}

.alumni-bar__crumbs a:hover {
	color: var(--color-white) !important;
}

/* 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-hero .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,
.alumni-hero .alumni-link {
	color: var(--color-white);
	text-decoration-color: var(--alumni-blue-light);
}

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

/* The breadcrumbs, the profile's links, the networks: the same easing. */
.alumni-bar__crumbs a,
.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-hero__intro {
	max-width: 820px;
	margin-top: clamp(20px, 3vh, 40px);
}

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

.alumni-hero__title.page-title {
	font-size: clamp(2.2rem, 1rem + 3vw, 3.6rem);
	line-height: 1.05;
}

.alumni-hero__desc {
	max-width: 720px;
	margin-top: 18px;
	color: var(--alumni-on-navy);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ----------------------------------------------------------------- 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;
}

/* Compact minimalist alumni grid: 4 columns on desktop, 5 on wide displays, down to 2 on tablet */
.alumni-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1380px) {
	.alumni-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px;
	}
}

.alumni-card {
	display: flex;
	flex-direction: column;
}

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

/* Minimalist card: sharp corners (0 radius), generous padding, clean surface */
.alumni-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--alumni-line);
	border-radius: 0;
	background-color: var(--color-surface-card);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.alumni-card__inner:hover {
	transform: translateY(-3px);
	border-color: var(--alumni-accent-text);
	box-shadow: var(--alumni-card-shadow);
}

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

/* Compact square photo: clean sharp rectangle */
.alumni-card__picture {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	background: var(--color-bg-tertiary);
}

.alumni-card__photo {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.alumni-card__photo .alumni-photo__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
	transition: transform 0.3s ease;
}

.alumni-card__inner:hover .alumni-photo__img {
	transform: scale(1.03);
}

/* No photo: clean initials on neutral background, no emblem watermark */
.alumni-card__photo.alumni-photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	background: var(--color-bg-tertiary);
	color: var(--color-text-heading);
	font-weight: 600;
}

.alumni-card__photo.alumni-photo--initials::before {
	content: none !important;
}

/* Card Body: comfortable breathing rhythm */
.alumni-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: 14px;
}

/* Roles slot */
.alumni-card__meta {
	margin-bottom: 6px;
	display: flex;
	align-items: center;
}

/* Roles over the name: clean text separated by a hyphen */
.alumni-card-roles {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.alumni-card-roles__item {
	display: inline;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-text-muted);
}

.alumni-card-roles__item--mentor {
	color: var(--alumni-accent-text);
	font-weight: 700;
}

.alumni-card-roles__item + .alumni-card-roles__item::before {
	content: " - ";
	white-space: pre;
	color: var(--color-text-muted);
	font-weight: 400;
}

/* Name: readable heading */
.alumni-card__name {
	margin: 0 0 6px;
	color: var(--color-text-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.015em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.alumni-card__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.alumni-card__inner:hover .alumni-card__link {
	color: var(--alumni-accent-text);
}

/* The whole card opens the profile */
.alumni-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 0;
}

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

/* Position & company: standard readable body */
.alumni-page .alumni-card__bio {
	margin: 0 0 8px;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Education line: year + faculty */
.alumni-page .alumni-card__edu {
	margin: 0 0 4px;
	font-size: 0.8125rem;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--color-text-muted);
}

.alumni-page .alumni-card__year {
	color: var(--alumni-accent-text);
	font-weight: 600;
}

.alumni-card__edu-sep {
	margin: 0 5px;
	color: var(--color-text-muted);
}

.alumni-page .alumni-card__faculty {
	color: var(--color-text-muted);
}

/* Single divider line for footer actions section */
.alumni-card__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--alumni-line);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Mentor button: clean solid bar */
.alumni-card__btn-mentor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--alumni-button-bg);
	border-radius: 0;
	background: var(--alumni-button-bg);
	color: var(--color-white);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	z-index: 2;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.alumni-card__btn-mentor:hover {
	background: var(--alumni-button-hover);
	border-color: var(--alumni-button-hover);
}

/* Bottom row: networks on left, Read more on right */
.alumni-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
	position: relative;
	z-index: 2;
}

.alumni-card__networks {
	display: flex;
	align-items: center;
	min-height: 28px;
}

.alumni-card-networks {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alumni-card-networks__link {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--alumni-line);
	border-radius: 0;
	background: var(--alumni-chip-bg);
	color: var(--color-text-secondary);
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.alumni-card-networks__link:hover {
	border-color: var(--alumni-accent-text);
	color: var(--alumni-accent-text);
	background: var(--alumni-accent-wash);
}

.alumni-card__btn-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	color: var(--color-link);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.alumni-card__btn-more:hover {
	color: var(--color-blue-050);
}

.alumni-card__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.alumni-card__btn-more:hover .alumni-card__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.alumni-card__photo .alumni-photo__img,
	.alumni-card__inner {
		transition: none;
	}

	.alumni-card__inner:hover .alumni-photo__img,
	.alumni-card__inner:hover {
		transform: none;
	}
}

/* Breakpoints for compact cards */
@media (max-width: 1199px) {
	.alumni-filters__search {
		flex-basis: 100%;
	}

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

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

	.alumni-card__inner {
		padding: 14px;
	}
}

@media (max-width: 599px) {
	.alumni-filters__field {
		flex-basis: calc(50% - 4px);
		max-width: none;
	}

	.alumni-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.alumni-card__inner {
		padding: 12px;
	}

	.alumni-card__body {
		padding-top: 10px;
	}

	.alumni-card__name {
		font-size: 0.9375rem;
	}

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

/* One card to a row: a square photo the width of the screen would make every
   graduate a screen high, so the photo goes to the side, the size of an avatar. */
@media (max-width: 480px) {
	.alumni-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.alumni-card__inner {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
	}

	.alumni-card__body {
		padding-top: 0;
	}

	/* Beside the avatar the line is too short for a faculty's name on one
	   line, and cut it says nothing: it wraps instead. */
	.alumni-page .alumni-card__edu {
		white-space: normal;
	}
}

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

.alumni-head {
	display: grid;
	grid-template-columns: clamp(200px, 20vw, 300px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	margin-top: clamp(16px, 2.4vh, 28px);
}

/* 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-hero .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, 1rem + 2.6vw, 3.4rem);
	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-hero .alumni-tags__item:not(.alumni-tags__item--mentor) {
	border-color: var(--alumni-on-navy-line);
	color: var(--color-white);
}

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

.alumni-hero .alumni-networks__link:hover,
.alumni-hero .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;
}

.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 */

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

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

.alumni-memory__photo {
	margin: 0;
}

.alumni-memory__img {
	display: block;
	width: 100%;
	height: auto;
}

.alumni-memory__photo 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 {
		grid-template-columns: minmax(0, 1fr);
	}

	.alumni-memory__photo {
		max-width: 240px;
	}

	/* 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-card__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;
	}
}