/*
 * The alumni questionnaire (templates/pages/alumni/page-alumni-join.php):
 * only its layout — the form beside the «Як це працює» column. The fields are
 * alumni-form.css, the boxes, strips and buttons page-alumni.css. Loaded by
 * the template-name convention.
 *
 * Same rules as the rest of the section: square corners, hairlines, semantic
 * tokens for paper and text so the dark theme follows; the mentor's brand
 * red and the navy button are fixed colours.
 */

.alumni-join__content {
	padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 96px) !important;
}

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

.alumni-join__aside {
	position: sticky;
	top: 100px;
	order: 2;
}

.alumni-join__main {
	display: grid;
	gap: var(--alumni-gap);
	min-width: 0;
}

/* The three steps numbered as the front page's mentoring steps are, red
   figures in a column of their own, flush with the heading's left edge. */
.alumni-join__steps {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 18px 0 0;
	list-style: none;
}

.alumni-join__step {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: baseline;
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.alumni-join__step-number {
	color: var(--alumni-blue);
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .alumni-join__step-number {
	color: var(--alumni-blue-light);
}

/* The privacy note under a hairline, in line with the steps' text. */
.alumni-page .alumni-join__private {
	margin: 18px 0 0;
	padding: 14px 0 0 30px;
	border-top: 1px solid var(--alumni-line);
	color: var(--color-text-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

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

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

	.alumni-join__aside {
		position: static;
		order: 0;
	}
}