/*
 * What is the Journey? page sections:
 * alj/what-hero, alj/what-mission, alj/what-ethiopia, alj/what-associates,
 * alj/what-principles, alj/what-commitments, alj/what-apply.
 * Classes are prefixed .alj-what-.
 */

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

/* A little taller than other inner pages so the savannah, mesa and acacia read. */
.alj-page-hero.alj-what-hero.wp-block-cover {
	min-height: min(56vh, 520px) !important;
}

/* The dawn illustration is light: keep its sky glowing and darken only under the words,
   in a warm brown rather than the ink used on photo heroes. */
.alj-page-hero.alj-what-hero::before {
	background:
		linear-gradient(0deg, rgba(58, 22, 10, 0.88) 0%, rgba(58, 22, 10, 0.66) 42%, rgba(58, 22, 10, 0) 82%),
		linear-gradient(90deg, rgba(58, 22, 10, 0.4) 0%, rgba(58, 22, 10, 0) 62%);
}

/* ------------------------------------------------- Mission and Vision -- */

.alj-what-statement {
	max-width: 60rem;
	margin-inline: auto !important;
	text-align: center;
}

/* "The Journey's Mission" is set as a small label above the big statement. */
.alj-what-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block: 0 clamp(1.5rem, 3vw, 2.25rem) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--alj-clay);
}

.alj-what-kicker::before,
.alj-what-kicker::after {
	content: "";
	flex: 0 0 2.5rem;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.alj-what-statement__text {
	margin: 0 auto;
	max-width: 32em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.45rem, 3vw, 2.3rem);
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: -0.012em;
	color: var(--alj-ink);
	text-wrap: balance;
}

/*
 * Below 1024px the statement scales with its column, so its lines break in the same places at
 * every width and never split "life-on-life" or "10-year" at the hyphen.
 */
@media (max-width: 1023px) {
	.alj-what-statement__text {
		font-size: 3.33vw;
	}
}

@media (max-width: 781px) {
	.alj-what-statement__text {
		font-size: 4.6vw;
	}
}

.alj-what-vision {
	margin-block-start: clamp(2.5rem, 5vw, 4rem) !important;
	padding-block-start: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--alj-line);
}

.alj-what-vision .alj-lead {
	margin-block-start: 0;
}

.alj-what-vision .wp-block-column > p:not(.alj-lead) {
	font-size: 1.0625rem;
	line-height: 1.8;
}

/* Keep the reading measure near 75 characters on wide screens. */
.alj-what-vision > .wp-block-column:last-child > * {
	max-width: 39rem;
}

/* Heading column used beside long text (Vision, Guiding Principles). */
.alj-what-aside .alj-title {
	margin-block-start: 0;
}

/* Short gold rule above the left-aligned section headings. */
.alj-what-aside .alj-title::before,
.alj-what-ethiopia .alj-title::before,
.alj-what-apply .alj-title::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-block-end: 1.4rem;
	border-radius: 2px;
	background: var(--alj-gold);
}

@media (min-width: 1024px) {
	.alj-what-aside {
		position: sticky;
		top: calc(var(--alj-header-h) + var(--wp-admin--admin-bar--height, 0px) + 2.5rem);
		align-self: flex-start;
	}
}

/*
 * Tablets (782–1023px): a heading squeezed into a third of the width looks cramped,
 * so the Vision and Guiding Principles rows stack, as they do on phones.
 */
@media (min-width: 782px) and (max-width: 1023px) {
	.alj-what-mission .alj-what-vision,
	.alj-what-principles .alj-split {
		flex-wrap: wrap !important;
		row-gap: clamp(2rem, 5vw, 3rem) !important;
	}

	.alj-what-mission .alj-what-vision > .wp-block-column,
	.alj-what-principles .alj-split > .wp-block-column {
		flex-basis: 100% !important;
	}

}

/* ------------------------------------------- Overview of the Ethiopian -- */

/* Savannah-at-sunset banner carrying the heading, then the text on ink below. */
/* Only the vertical padding: the side padding is what lets the two full-width parts bleed. */
.alj-what-ethiopia {
	padding-block: 0;
	background: var(--alj-ink);
}

.wp-block-cover.alj-what-ethiopia__banner {
	min-height: clamp(240px, 30vw, 420px);
	padding-block: clamp(2rem, 4vw, 3rem);
	padding-inline: var(--wp--style--root--padding-left, 1.5rem) var(--wp--style--root--padding-right, 1.5rem);
	align-items: flex-start;
	isolation: isolate;
}

/* Darken only the sky behind the heading; let the sun and the acacia glow. */
.wp-block-cover.alj-what-ethiopia__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(28, 12, 8, 0.55) 0%, rgba(28, 12, 8, 0.15) 45%, rgba(28, 12, 8, 0) 70%, rgba(28, 24, 21, 0.9) 100%);
	pointer-events: none;
}

.wp-block-cover.alj-what-ethiopia__banner .wp-block-cover__inner-container {
	z-index: 2;
	width: 100%;
}

.alj-what-ethiopia__banner .alj-title {
	margin: 0 auto;
	color: var(--wp--preset--color--white);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.alj-what-ethiopia__banner .alj-title::before {
	margin-inline: auto;
}

.alj-what-ethiopia__body {
	margin-block-start: 0 !important;
}

.alj-what-ethiopia .alj-lead {
	margin-block-start: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 2.2vw, 1.65rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
}

.alj-what-ethiopia__body p {
	color: rgba(255, 255, 255, 0.88);
}

.alj-what-ethiopia .alj-lead sup,
.alj-what-ethiopia .alj-footnotes sup {
	color: var(--alj-gold);
}

.alj-what-ethiopia .alj-footnotes {
	border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 781px) {
	.alj-what-ethiopia__body .alj-split {
		row-gap: 1.25rem !important;
	}
}

/* --------------------------------------------------------- Associates -- */

.alj-what-cards {
	max-width: 1080px;
	margin-inline: auto !important;
}

.alj-what-cards .alj-card {
	position: relative;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border: 0;
	transition: transform 0.25s var(--alj-ease), box-shadow 0.25s var(--alj-ease);
}

.alj-what-cards .alj-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.alj-what-cards .alj-card__num {
	/* Deeper ochre than the shared gold: 3.6:1 on white (gold is 1.9:1). */
	color: #ad7e24 !important;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-block-end: 1.25rem !important;
}

.alj-what-cards .alj-card__num::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--alj-line);
}

.alj-what-cards .alj-card h3 {
	margin-block-end: 0.75rem;
}

.alj-what-cards .alj-card p:not(.alj-card__num):not(.alj-ref) {
	color: var(--wp--preset--color--text);
}

.alj-what-cards .alj-ref {
	margin-block-start: 1.4rem;
	padding-block-start: 1.1rem;
	border-top: 1px solid var(--alj-line);
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* ------------------------------------------------ Numbered accordions -- */

.alj-what-principles .alj-what-numbered,
.alj-what-commit-grid {
	counter-reset: alj-what;
}

.alj-what-numbered .wp-block-details {
	counter-increment: alj-what;
}

.alj-what-numbered summary {
	justify-content: flex-start;
}

.alj-what-numbered summary::before {
	content: counter(alj-what, decimal-leading-zero);
	flex: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--alj-clay);
	font-variant-numeric: tabular-nums;
}

.alj-what-numbered summary::after {
	margin-inline-start: auto;
}

@media (min-width: 600px) {
	.alj-what-numbered .wp-block-details > :not(summary) {
		padding-inline-start: calc(1.4rem + 1.75rem + 1rem);
		padding-inline-end: 2rem;
	}
}

.alj-what-numbered .wp-block-details > p:not(.alj-ref) {
	color: var(--wp--preset--color--text);
}

.alj-what-numbered .alj-ref {
	padding-block-start: 0.25rem !important;
}

/* --------------------------------------------------------- Principles -- */

.alj-what-principles .alj-accordion summary {
	padding-block: 1.35rem;
}

/* -------------------------------------------------------- Commitments -- */

.alj-what-commit-head p:not(.alj-title) {
	max-width: 44rem;
	margin-block-start: 1.5rem;
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text);
	text-wrap: balance;
}

.alj-what-commit-grid {
	max-width: 1080px;
	margin-inline: auto !important;
	align-items: start;
	row-gap: 0.75rem;
}

/* ------------------------------------------------------------ Applying -- */

.alj-section.alj-what-apply {
	overflow: hidden;
	background:
		radial-gradient(ellipse 55% 80% at 0% 100%, rgba(163, 49, 42, 0.28), rgba(163, 49, 42, 0) 70%),
		var(--alj-ink);
}

.alj-what-apply .alj-lead {
	margin-block-start: 1.25rem;
}

.alj-what-apply .alj-checklist {
	margin-block: 2rem 0;
	gap: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.0625rem;
}

.alj-what-apply .alj-checklist li {
	padding-block: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.alj-what-apply .alj-checklist li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.alj-what-apply .alj-checklist li::before {
	top: calc(1rem + 0.1em);
}

/* Status card: the "Join a community…" line, the CLOSED pill and the note. */
.alj-what-status.alj-card {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 4.5vw, 3.25rem);
	border: 0;
	border-radius: var(--alj-radius-l);
	background: var(--alj-clay);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.9);
	/* Same height as the requirements list beside it; content centred within. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.alj-what-status.alj-card::after {
	/* Faint outline of Africa from the logo, as a watermark. */
	content: "";
	position: absolute;
	right: -14%;
	bottom: -20%;
	width: 62%;
	aspect-ratio: 1;
	background: url("../../images/africa-outline-white.png") center / contain no-repeat;
	opacity: 0.08;
	pointer-events: none;
}

.alj-what-status > * {
	position: relative;
	z-index: 1;
}

.alj-what-status.alj-card .alj-what-status__line {
	margin-block: 0 2rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.45rem, 2.5vw, 1.95rem);
	font-weight: 450;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	text-wrap: balance;
}

.alj-what-status .alj-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	background: rgba(28, 24, 21, 0.28);
	border-color: rgba(255, 255, 255, 0.3);
}

.alj-what-status .alj-pill::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--alj-gold);
}

.alj-what-status.alj-card .alj-what-status__note {
	margin-block: 0.9rem 0;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

/* ---------------------------------------------------------- Responsive -- */

@media (max-width: 781px) {
	.alj-page-hero.alj-what-hero.wp-block-cover {
		min-height: min(54vh, 460px) !important;
	}

	.alj-what-aside .alj-title::before {
		margin-block-end: 1.1rem;
	}


	/* The long Commitments intro reads better left-aligned on a phone. */
	.alj-what-commit-head {
		text-align: start;
	}

	.alj-what-commit-head p:not(.alj-title) {
		margin-inline: 0 !important;
		color: var(--wp--preset--color--text);
	}
}

@media (max-width: 480px) {
	.alj-what-statement__text {
		font-size: calc((100vw - 2.5rem) * 0.0617);
		line-height: 1.38;
	}

	.alj-what-kicker {
		gap: 0.75rem;
		letter-spacing: 0.14em;
	}

	.alj-what-kicker::before,
	.alj-what-kicker::after {
		flex-basis: 1.5rem;
	}

	.alj-what-cards .alj-card h3 {
		font-size: 1.3rem;
	}

	.alj-what-numbered summary {
		padding-inline: 1.1rem;
		font-size: 1.125rem;
		gap: 0.75rem;
	}

	.alj-what-numbered summary::before {
		flex-basis: 1.5rem;
	}

	.alj-what-numbered .wp-block-details > :not(summary) {
		padding-inline: 1.1rem;
	}
}