/**
 * Philosophy page (page-philosophy.php)
 *
 * Editorial manifesto: centred intro, a wide hero, alternating numbered rows,
 * then the principles grid, process chain and closing statement.
 */

.philosophy {
	padding-block: var(--space-10) var(--space-24);
}

.philosophy__header {
	text-align: center;
	margin-bottom: var(--space-12);
}

.philosophy__label {
	font-size: var(--text-2xs);
	color: var(--color-heading);
	margin: 0;
}

/* --- Intro --- */

.philosophy__intro {
	width: min(100%, 34rem);
	margin: 0 auto var(--space-16);
	text-align: center;
}

.philosophy__intro p {
	font-size: var(--text-sm);
	line-height: var(--line-relaxed);
	text-wrap: pretty;
	color: var(--color-text);
	margin: 0 0 var(--space-6);
}

.philosophy__intro p:last-child {
	margin-bottom: 0;
}

/* --- Hero --- */

.philosophy__hero {
	aspect-ratio: 16 / 9;
	margin: 0 0 var(--space-24);
	overflow: hidden;
	background: var(--color-surface-muted);
}

.philosophy__hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.philosophy__hero--empty {
	display: grid;
	place-content: center;
}

/* --- Numbered rows --- */

.philosophy__sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	margin-bottom: var(--space-24);
}

.philosophy-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	gap: var(--space-12);
	align-items: start;
}

/*
 * Mirrored placement keeps the text first in source order for screen readers.
 * The column ratio flips too, so the images stay on the wide side either way.
 */
.philosophy-row--media-left {
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}

.philosophy-row--media-left .philosophy-row__text {
	grid-column: 2;
	grid-row: 1;
}

.philosophy-row--media-left .philosophy-row__media {
	grid-column: 1;
	grid-row: 1;
}

.philosophy-row__number {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	color: var(--color-muted);
	margin: 0 0 var(--space-6);
}

.philosophy-row__title {
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading);
	text-wrap: balance;
	margin: 0 0 var(--space-6);
}

.philosophy-row__body p {
	font-size: var(--text-sm);
	line-height: var(--line-relaxed);
	color: var(--color-muted);
	margin: 0 0 var(--space-4);
}

.philosophy-row__body p:last-child {
	margin-bottom: 0;
}

.philosophy-row__media {
	display: grid;
	gap: var(--space-2);
}

.philosophy-row__media--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.philosophy-row__figure {
	margin: 0;
	overflow: hidden;
	background: var(--color-surface-muted);
}

.philosophy-row__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A lone image runs wide; a pair stands slightly portrait. */
.philosophy-row__media--single .philosophy-row__figure {
	aspect-ratio: 3 / 2;
}

.philosophy-row__media--pair .philosophy-row__figure {
	aspect-ratio: 4 / 5;
}

.philosophy-row__figure--empty {
	display: grid;
	place-content: center;
}

/* --- Shared block heading (principles, process) --- */

.philosophy-block {
	margin-bottom: var(--space-24);
}

.philosophy-block__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
	text-align: center;
}

.philosophy-block__number {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	color: var(--color-muted);
	margin: 0;
}

.philosophy-block__title {
	font-size: var(--text-xl);
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading);
	margin: 0;
}

.philosophy-block__rule {
	display: block;
	width: var(--space-8);
	border-top: var(--border-width) solid var(--color-border-strong);
}

/* --- Principles --- */

.philosophy-principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-8) 0;
	margin: 0;
	padding: var(--space-8) 0;
	list-style: none;
	border-block: var(--border-width) solid var(--color-border);
}

.philosophy-principles__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-inline: var(--space-6);
	border-left: var(--border-width) solid var(--color-border);
}

.philosophy-principles__item:first-child {
	border-left: 0;
}

.philosophy-principles__number {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	color: var(--color-muted);
}

.philosophy-principles__text {
	font-size: var(--text-sm);
	line-height: var(--line-snug);
	color: var(--color-heading);
	text-wrap: balance;
}

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

.philosophy-process {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.philosophy-process__item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-heading);
}

/* Connecting rule between stages, never after the last one. */
.philosophy-process__item:not(:last-child)::after {
	content: "";
	display: block;
	width: clamp(var(--space-6), 5vw, var(--space-16));
	border-top: var(--border-width) solid var(--color-border);
}

/* --- Closing statement --- */

.philosophy-closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	text-align: center;
}

.philosophy-closing__text {
	font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl));
	font-weight: var(--weight-medium);
	line-height: var(--line-snug);
	letter-spacing: var(--tracking-tight);
	color: var(--color-heading);
	text-wrap: balance;
	margin: 0;
}

/* Free-form page body, when the editor adds one under the manifesto. */
.philosophy__free {
	width: min(100%, var(--container-md));
	margin: var(--space-24) auto 0;
}

@media (max-width: 60rem) {
	.philosophy {
		padding-bottom: var(--space-16);
	}

	.philosophy__intro,
	.philosophy__hero {
		margin-bottom: var(--space-12);
	}

	.philosophy__sections {
		gap: var(--space-16);
		margin-bottom: var(--space-16);
	}

	.philosophy-row {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	/* Stacked: image always follows its text. */
	.philosophy-row--media-left .philosophy-row__text,
	.philosophy-row--media-left .philosophy-row__media {
		grid-column: 1;
		grid-row: auto;
	}

	.philosophy-block {
		margin-bottom: var(--space-16);
	}

	.philosophy-block__head {
		margin-bottom: var(--space-8);
	}

	.philosophy-principles__item {
		padding-inline: var(--space-4);
	}

	.philosophy-principles__item:nth-child(odd) {
		border-left: 0;
	}
}