/**
 * Per-variation layout.
 *
 * A theme.json style variation can only set tokens — colours, fonts, spacing,
 * borders. It cannot rearrange a header, move a portrait, or turn a list into a
 * grid, because it never touches markup. That is why variations built purely in
 * theme.json all look like the same design in a different palette, however many
 * tokens they override.
 *
 * The active variation is put on the body by academician_active_style(), and
 * everything below rearranges the SAME markup into genuinely different layouts.
 * No template branching, no duplicated patterns — one set of blocks, seven
 * arrangements.
 */

/* ========================================================== Oxford ======= */
/* A centred journal. Title, navigation, headings and hero all on the axis. */

/*
 * align-items, not justify-content.
 *
 * In a column flex, justify-content works on the VERTICAL axis — it does
 * nothing to centre a header. And text-align cannot centre the site title
 * either, because the inner title/tagline group is shrink-to-fit, so the box is
 * only as wide as its text and there is nothing to centre within.
 */
.academician-style-oxford .wp-site-blocks > header .wp-block-group {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.academician-style-oxford .wp-site-blocks > header .wp-block-navigation {
	justify-content: center;
}

.academician-style-oxford main h2.wp-block-heading {
	text-align: center;
}

/* Portrait above the statement, both centred and still portrait-sized. */
.academician-style-oxford .academician-portrait img {
	max-inline-size: 200px;
}

.academician-style-oxford .wp-block-columns:has( .academician-portrait ) {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/*
 * align-self, not align-items alone. A wp-block-column carries an inline
 * flex-basis, and core's own layout rules give the column alignment of its
 * own — so the portrait column stayed pinned to the start and the picture sat
 * left of centred text.
 */
.academician-style-oxford .wp-block-columns:has( .academician-portrait ) .wp-block-column {
	align-self: center;
	flex-basis: auto !important;
	inline-size: auto;
}

/* Entries become a ruled list: year set small and italic, rule between rows. */
.academician-style-oxford .academician-entry {
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--rule);
}

.academician-style-oxford .academician-entry__when {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-style: italic;
}

/*
 * No tinted bands — hairlines do the separating, as in a printed journal.
 * Padding is reduced with the tint: padding exists to keep content off the edge
 * of a coloured band, and without the band it is just a gap.
 */
/*
 * One rule per band, not two. Consecutive bands each drawing a top AND bottom
 * border put two hairlines a few pixels apart at every join, and the section
 * heading's own rule lands just beneath — three lines where one was intended.
 */
.academician-style-oxford .academician-band {
	padding-block: var(--wp--preset--spacing--50) !important;
	background: none;
	border-block-start: 1px solid var(--wp--preset--color--rule);
	border-block-end: 0;
}

/* The heading rule is redundant once the band is ruled. */
.academician-style-oxford .academician-band h2.wp-block-heading::before {
	display: none;
}

/* ========================================================== Press ======== */
/* Loud editorial: inverted header, portrait demoted, year as a numeral. */

.academician-style-press .wp-site-blocks > header > .wp-block-group {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base);
}

.academician-style-press .wp-site-blocks > header a,
.academician-style-press .wp-site-blocks > header .wp-block-site-title,
.academician-style-press .wp-site-blocks > header .wp-block-site-tagline {
	color: var(--wp--preset--color--base) !important;
}

/* Statement first, portrait second and small. */
.academician-style-press .wp-block-columns:has( .academician-portrait ) {
	flex-direction: row-reverse;
}

.academician-style-press .academician-portrait img {
	max-inline-size: 180px;
}

/* The year is the loudest thing in the row. */
.academician-style-press .academician-entry {
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 2px solid var(--wp--preset--color--contrast);
}

.academician-style-press .academician-entry__when {
	flex-basis: 6rem !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: clamp( 1.5rem, 3vw, 2.25rem ) !important;
	font-weight: 800;
	line-height: 1;
}

/*
 * Flat — the thick rule above each heading carries the structure.
 *
 * The padding goes with the tint. Left in, it produced 160px of nothing
 * between the hero and the first heading: 96px of hero margin plus 64px of
 * padding, with no band colour to make either of them read as anything.
 */
.academician-style-press .academician-band {
	padding-block: 0 !important;
	background: none;
}

/* Editorial pacing is tight. The hero's own margin is too generous for it. */
.academician-style-press main > .wp-block-columns {
	margin-block-end: var(--wp--preset--spacing--50) !important;
}

/* ========================================================== Field ======== */
/* Soft and card-based. Navigation under a rule; entries become panels. */

.academician-style-field .wp-site-blocks > header .wp-block-group {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

/*
 * One horizontal division in the header, not two.
 *
 * The rule above the navigation is Field's distinguishing move. Every other
 * variation also tints the header band, and the edge where that tint meets the
 * page reads as a second line — so with both, the header ends in two
 * divisions and neither looks deliberate. A border is not the only thing that
 * draws a line; a change of background does it just as clearly.
 *
 * Field keeps the rule and drops the tint. Its header sits on the page, marked
 * only by the line above the navigation.
 */
.academician-style-field .wp-site-blocks > header {
	border-block-end: 0;
}

.academician-style-field .wp-site-blocks > header > .wp-block-group {
	background: transparent !important;
}

.academician-style-field .wp-site-blocks > header .wp-block-navigation {
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--rule);
	inline-size: 100%;
}

/* Portrait to the right of the statement. */
.academician-style-field .wp-block-columns:has( .academician-portrait ) {
	flex-direction: row-reverse;
}

.academician-style-field .academician-entry {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius, 10px);
}

.academician-style-field .academician-band .academician-entry {
	background: var(--wp--preset--color--base);
}

/* ========================================================== Atlas ======== */
/* Modern grid. Publications in two columns; navigation on its own line. */

.academician-style-atlas .wp-site-blocks > header .wp-block-group {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

@media ( min-width: 782px ) {
	.academician-style-atlas .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var(--wp--preset--spacing--50);
	}
}

.academician-style-atlas .academician-entry {
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--accent-2);
}

.academician-style-atlas .academician-entry__when {
	flex-basis: auto !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ========================================================== Studio ======= */
/* Expressive. Circular portrait, centred header, oversized year. */

.academician-style-studio .wp-site-blocks > header .wp-block-group {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.academician-style-studio .wp-site-blocks > header .wp-block-navigation {
	justify-content: center;
}

.academician-style-studio .academician-portrait img {
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}

.academician-style-studio .academician-entry {
	flex-direction: column;
	gap: 0;
}

.academician-style-studio .academician-entry__when {
	flex-basis: auto !important;
	color: var(--wp--preset--color--accent) !important;
	font-size: clamp( 1.25rem, 2.5vw, 1.75rem ) !important;
	font-weight: 600;
}

/* ======================================================== Nocturne ======= */
/* Dark and centred, with a rail down the side of every entry. */

/* Navigation on its own line, right-aligned, under a tagline that leads. */
.academician-style-nocturne .wp-site-blocks > header .wp-block-group.is-layout-flex {
	flex-direction: column;
	align-items: flex-end;
}

.academician-style-nocturne .wp-site-blocks > header .wp-block-group.is-layout-flex > :first-child {
	align-self: flex-start;
}

.academician-style-nocturne .academician-portrait img {
	max-inline-size: 200px;
}

.academician-style-nocturne .wp-block-columns:has( .academician-portrait ) {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.academician-style-nocturne .wp-block-columns:has( .academician-portrait ) .wp-block-column {
	align-self: center;
	flex-basis: auto !important;
	inline-size: auto;
}

.academician-style-nocturne .academician-entry {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 1px solid var(--wp--preset--color--rule);
}

.academician-style-nocturne main h2.wp-block-heading::before {
	inline-size: 100%;
	opacity: 0.5;
}

/* ---------------------------------------- centred variations, profile ---- */
/*
 * The profile identity is a stacked group rather than columns, so the hero's
 * :has(.academician-portrait) rules do not reach it. Centre it explicitly
 * wherever the variation centres.
 */
/*
 * Oxford and Nocturne centre their content; Studio centres only its header and
 * keeps the page left-aligned, so the two centred variations are not the same
 * idea twice.
 */
.academician-style-oxford .academician-identity,
.academician-style-nocturne .academician-identity {
	text-align: center;
}

.academician-style-oxford .academician-identity .wp-block-image,
.academician-style-nocturne .academician-identity .wp-block-image {
	display: flex;
	justify-content: center;
}

/* ==================================================== every variation ==== */
/*
 * Below the stacking breakpoint the arrangements converge. A two-column grid,
 * a row-reverse hero and a 6rem numeral all stop being ideas worth having on a
 * 360px screen.
 */
@media ( max-width: 781px ) {
	.wp-block-columns:has( .academician-portrait ) {
		flex-direction: column !important;
	}

	.wp-block-post-template {
		display: block !important;
	}
}

@media ( max-width: 600px ) {
	.academician-entry .academician-entry__when {
		flex-basis: 100% !important;
	}
}