/*
 * Landing page sections.
 *
 * Every section uses a different layout family so a long page never reads as
 * the same block repeated with new words:
 *   hero       asymmetric split
 *   pain       offset two-column stack
 *   manifesto  full-width typographic band
 *   process    horizontal sequence on a hairline
 *   program    two panels of unequal visual weight
 *   audience   horizontal scroll-snap rail
 *   mentors    profile cards
 *   pricing    tinted band with a display figure
 *   faq        disclosure list
 *   apply      sticky intro beside the form
 */

/* ----------------------------------------------------------------- Hero */

.eg-hero {
	/* dvh, not vh: the iOS address bar must not cause a layout jump. */
	min-height: min(100dvh, 900px);
	display: flex;
	align-items: center;
	padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

.eg-hero__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	width: 100%;
}

@media (min-width: 1000px) {
	.eg-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
	}
}

.eg-hero__title {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	font-weight: 600;
	margin: 0 0 var(--sp-5);
	max-width: 12ch;
}

.eg-hero__lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-ink-2);
	max-width: 46ch;
	margin-bottom: var(--sp-7);
}

.eg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

/*
 * The program card is the hero's visual asset. It carries real content rather
 * than decoration, and upgrades to include photography the moment a featured
 * image is set on the landing page.
 */
.eg-hero__card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-lg);
	padding: var(--sp-6);
	overflow: hidden;
}

.eg-hero__media {
	margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
}

.eg-hero__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.eg-hero__cohort {
	margin-top: var(--sp-5);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
}

.eg-hero__cohort-label {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--c-ink-3);
	margin: 0 0 var(--sp-1);
}

.eg-hero__cohort-value {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--c-accent);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Pain */

.eg-section--pain {
	background: var(--c-surface);
	border-block: 1px solid var(--c-line);
}

.eg-pains {
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 800px) {
	.eg-pains {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-8) var(--sp-9);
	}

	/*
	 * Offsetting the second column keeps the block from reading as a table.
	 * Done with margin rather than transform: the scroll-reveal system owns
	 * the transform property on these elements and would overwrite it.
	 */
	.eg-pains > :nth-child(even) {
		margin-top: var(--sp-7);
	}
}

.eg-pain {
	border-top: 1px solid var(--c-line-strong);
	padding-top: var(--sp-4);
}

.eg-pain__title {
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
	margin-bottom: var(--sp-2);
}

.eg-pain__body {
	color: var(--c-ink-2);
	font-size: var(--fs-sm);
	margin: 0;
}

.eg-pain__close {
	margin-top: clamp(4rem, 9vw, 7rem);
	max-width: 58ch;
	padding-left: var(--sp-6);
	border-left: 2px solid var(--c-accent);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

/* ------------------------------------------------------------ Manifesto */

.eg-section--manifesto {
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.eg-manifesto {
	margin: 0;
	max-width: none;
	text-align: center;
	font-family: var(--ff-display);
	font-size: var(--fs-h2);
	line-height: 1.18;
	letter-spacing: var(--ls-h2);
	font-weight: 600;
	display: grid;
	gap: var(--sp-2);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	border-block: 1px solid var(--c-line);
}

/*
 * The rules above and below the statement now run the full container width,
 * which is what makes this read as a band. The statement itself keeps a short
 * measure and is centred between them: two lines of display type set across
 * 1100px would break wherever the viewport decided.
 */
.eg-manifesto__quiet,
.eg-manifesto__loud {
	max-width: 30ch;
	margin-inline: auto;
}

.eg-manifesto__quiet {
	color: var(--c-ink-3);
}

.eg-manifesto__loud {
	color: var(--c-ink);
}

/* -------------------------------------------------------------- Process */

.eg-process {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-7);
}

.eg-process__item {
	position: relative;
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line-strong);
}

@media (min-width: 860px) {
	.eg-process {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-6);
	}

	/*
	 * One continuous rule behind all four nodes, drawn on the list rather than
	 * per item, so the last step has no dangling tail.
	 */
	.eg-process::before {
		content: "";
		position: absolute;
		top: 5px;
		left: 0;
		right: 0;
		height: 1px;
		background: var(--c-line-strong);
	}

	.eg-process__item {
		border-top: 0;
	}
}

/* The node straddles the rule, whichever direction the rule runs. */
.eg-process__node {
	position: absolute;
	top: -5px;
	left: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--c-canvas);
	border: 2px solid var(--c-accent);
}

@media (min-width: 860px) {
	.eg-process__node {
		top: 0;
	}
}

.eg-process__title {
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
	margin-bottom: var(--sp-2);
}

.eg-process__body {
	color: var(--c-ink-2);
	font-size: var(--fs-sm);
	margin: 0;
}

/* -------------------------------------------------------------- Program */

.eg-section--program {
	background: var(--c-surface);
	border-block: 1px solid var(--c-line);
}

.eg-panels {
	display: grid;
	gap: var(--sp-5);
}

@media (min-width: 900px) {
	.eg-panels {
		/* Unequal split: the outcome panel carries more weight than the inventory. */
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--sp-6);
	}
}

.eg-panel {
	border-radius: var(--r-lg);
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.eg-panel--plain {
	background: var(--c-canvas);
	border: 1px solid var(--c-line);
}

.eg-panel--accent {
	background: var(--c-accent-soft);
	border: 1px solid var(--c-accent-line);
}

.eg-panel__title {
	font-size: var(--fs-h3);
	letter-spacing: var(--ls-h3);
	margin-bottom: var(--sp-5);
}

/* ------------------------------------------------------------- Audience */

.eg-rail {
	margin-top: var(--sp-7);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: var(--sp-2) var(--sp-5);
}

.eg-rail::-webkit-scrollbar {
	display: none;
}

.eg-rail__track {
	list-style: none;
	margin: 0;
	padding-inline: var(--gutter);
	display: flex;
	gap: var(--sp-4);
	width: max-content;
}

/* Centre the rail on wide screens so it aligns with the container. */
@media (min-width: 1240px) {
	.eg-rail__track {
		padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	}
}

.eg-rail__card {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: min(21rem, 78vw);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	display: flex;
	align-items: flex-start;
	transition: border-color var(--d-base) var(--e-out),
		box-shadow var(--d-base) var(--e-out);
}

.eg-rail__card:hover {
	border-color: var(--c-accent-line);
	box-shadow: var(--sh-md);
}

.eg-rail__card p {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--c-ink-2);
}

/* -------------------------------------------------------------- Mentors */

.eg-section--mentors {
	background: var(--c-surface);
	border-block: 1px solid var(--c-line);
}

.eg-mentors {
	display: grid;
	gap: var(--sp-6);
}

@media (min-width: 760px) {
	.eg-mentors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {
	.eg-mentors {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.eg-mentor {
	background: var(--c-canvas);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.eg-mentor__portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--c-accent-soft);
	overflow: hidden;
}

/*
 * The three portraits come from three different sources: one studio shot on a
 * warm ground, one on light grey, one black and white on black. Side by side in
 * colour the row reads as three photos that happen to be next to each other
 * rather than one set. Desaturating all three removes the colour-temperature
 * mismatch and makes the dark frame read as intent instead of accident.
 *
 * Delete this filter and the one on the single-mentor portrait once all three
 * are reshot against a common background.
 */
.eg-mentor__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.02);
	transition: transform var(--d-slow) var(--e-out);
}

.eg-mentor:hover .eg-mentor__photo {
	transform: scale(1.03);
}

/*
 * Initials tile, shown until a real portrait is uploaded to the Voditeljica
 * entry. It is a deliberate placeholder, not a permanent design choice.
 */
.eg-mentor__monogram {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent 65%),
		var(--c-accent-soft);
}

.eg-mentor__monogram span {
	font-family: var(--ff-display);
	font-size: clamp(3rem, 7vw, 4.25rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--c-accent);
	opacity: 0.75;
}

.eg-mentor__body {
	padding: var(--sp-5) var(--sp-5) var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	flex: 1;
}

.eg-mentor__name {
	font-size: 1.3rem;
	letter-spacing: -0.02em;
	margin: 0;
}

.eg-mentor__role {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-ink-3);
}

.eg-mentor__bio {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--c-ink-2);
	overflow: hidden;
}

/* Collapsed by default; the toggle animates the height with a spring. */
.eg-mentor__bio[data-eg-clamp]:not(.is-open) {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
}

.eg-mentor__bio p {
	margin: 0 0 var(--sp-3);
	max-width: none;
}

.eg-mentor__contribution {
	margin: 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-ink);
}

.eg-mentor__links {
	margin: auto 0 0;
	padding-top: var(--sp-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.eg-mentor__links a {
	color: var(--c-accent);
}

/* Single mentor page */
.eg-mentor-single__grid {
	display: grid;
	gap: var(--sp-8);
	padding-top: var(--header-h);
}

@media (min-width: 900px) {
	.eg-mentor-single__grid {
		grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
		align-items: start;
	}
}

.eg-mentor-single__portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--c-accent-soft);
}

/* Matches the treatment on the landing cards, see .eg-mentor__photo. */
.eg-mentor-single__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.02);
}

.eg-mentor-single__body {
	display: grid;
	gap: var(--sp-4);
	align-content: start;
}

.eg-mentor-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

/* -------------------------------------------------------------- Pricing */

.eg-price {
	background: var(--c-accent-soft);
	border: 1px solid var(--c-accent-line);
	border-radius: var(--r-xl);
	padding: clamp(2rem, 5vw, 3.5rem);
	display: grid;
	gap: var(--sp-7);
	align-items: center;
}

@media (min-width: 860px) {
	.eg-price {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(2.5rem, 6vw, 5rem);
	}
}

.eg-price__amount {
	font-family: var(--ff-display);
	font-size: clamp(3.25rem, 8vw, 5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c-accent);
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.eg-price__note {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-2);
}

.eg-price__capacity {
	margin: var(--sp-5) 0 0;
	font-size: var(--fs-sm);
	color: var(--c-ink-2);
}

.eg-price__actions {
	margin-top: var(--sp-6);
}

/* ------------------------------------------------------------------ FAQ */

/*
 * Heading beside the list rather than above it.
 *
 * The disclosure list wants a measure -- an answer set 1100px wide is hard to
 * come back from at the end of a line -- but capping the whole section at that
 * measure left a narrow strip in the middle of the page. Giving the heading its
 * own column spends the leftover width on something instead of on nothing, and
 * the questions land at about --measure without being told to.
 */
@media (min-width: 62rem) {
	.eg-faq__layout {
		display: grid;
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 5rem);
		align-items: start;
	}

	.eg-faq__layout .eg-section__head {
		margin-bottom: 0;
	}
}

.eg-faq {
	border-top: 1px solid var(--c-line);
}

.eg-faq__item {
	border-bottom: 1px solid var(--c-line);
}

.eg-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	padding: var(--sp-5) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	letter-spacing: var(--ls-h3);
	transition: color var(--d-fast) var(--e-out);
}

.eg-faq__q::-webkit-details-marker {
	display: none;
}

.eg-faq__q:hover {
	color: var(--c-accent);
}

/* Chevron drawn from two borders on a rotated square. */
.eg-faq__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--c-accent);
	border-bottom: 1.5px solid var(--c-accent);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--d-base) var(--e-out);
}

.eg-faq__item[open] .eg-faq__chevron {
	transform: rotate(225deg) translate(-2px, -2px);
}

/*
 * Animate the disclosure natively. interpolate-size makes the intrinsic height
 * animatable and allow-discrete keeps the content in the box while it closes.
 * Browsers without support simply snap open, which is the correct fallback for
 * a control whose job is to reveal text.
 */
.eg-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition:
		block-size var(--d-base) var(--e-out),
		content-visibility var(--d-base) allow-discrete,
		opacity var(--d-fast) var(--e-out);
}

.eg-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eg-faq__item::details-content {
		transition: opacity 150ms linear;
		block-size: auto;
	}
}

.eg-faq__a {
	padding-bottom: var(--sp-6);
	color: var(--c-ink-2);
	max-width: var(--measure);
}

.eg-faq__a p {
	margin: 0 0 var(--sp-3);
}

/* ---------------------------------------------------------------- Apply */

.eg-section--apply {
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
}

.eg-section--apply-solo {
	padding-top: calc(var(--header-h) + var(--section-y));
}

.eg-apply {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 1000px) {
	.eg-apply {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	}

	/* The argument stays in view while the reader works through the form. */
	.eg-apply__intro {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-6));
	}
}

.eg-apply__lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--c-ink-2);
	margin-top: var(--sp-4);
}

.eg-apply__closing {
	margin-top: var(--sp-6);
	padding-left: var(--sp-5);
	border-left: 2px solid var(--c-accent);
}

.eg-apply__closing-title {
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.45;
	color: var(--c-ink);
}

.eg-apply__closing p:last-child {
	font-size: var(--fs-sm);
	color: var(--c-ink-2);
}

/* Reduced motion: drop the decorative hover scale on portraits. */
@media (prefers-reduced-motion: reduce) {
	.eg-mentor:hover .eg-mentor__photo {
		transform: none;
	}
}