/*
 * BROKEN EDITORIAL GRID — Artist archive and detail pages only. Ported from
 * the approved prototype's `.aindex-*`/`.a-*` rules (design-exploration/
 * site-foundation/concept-1-broken-grid/concept.css) onto real WordPress
 * content — class names and design-token values (var(--step-N),
 * var(--space-N)) match the prototype directly. Every directional rule uses
 * logical properties, so Persian (RTL) and English (LTR) mirror naturally.
 *
 * Raw heading/paragraph/list/dl elements used as direct grid items don't get
 * browser margin-collapsing, so every such element below gets an explicit
 * margin:0 reset — the prototype's own base.css reset already prevents this
 * there; production needs the same reset scoped per-selector here (see the
 * Exhibition port's own note on this in assets/css/exhibition.css).
 *
 * fehrest_figure() always wraps its <img> in a <figure class="fehrest-figure
 * ...">, so every rule below targets .fehrest-figure/.fehrest-figure-img the
 * same way assets/css/exhibition.css already does, rather than the
 * prototype's raw `img` selectors.
 *
 * Exhibition archive/detail, About, and Visit/Contact pages are
 * intentionally not touched by this file.
 */

/* --- archive: a single ordered index, never a repeating card --------------
 * Column spans stay fixed per row (unlike the Exhibition bands, the Artist
 * index doesn't alternate) — the irregularity here is the row itself
 * breaking from a card grid into a running list, not a per-row variation.
 */

.aindex-head {
	padding-block: clamp( 18px, 2.6vw, 38px ) 0;
}

/*
 * Page-specific title scale — deliberately smaller than --step-5 (which the
 * homepage hero and Exhibition detail still use unchanged). --step-5 read as
 * an oversized display heading with excess empty space above the archive
 * list; this clamp targets an optical cap-height around 88–104px at 1440px
 * (measured against the archive title specifically) tapering to ~44–56px on
 * mobile, scoped to .aindex-head h1 only.
 */
.aindex-head h1 {
	grid-column: 1 / span 8;
	margin: 0;
	font-size: clamp( 48px, 4.5vw + 33px, 100px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.aindex-list {
	padding-block: clamp( 14px, 2vw, 26px ) clamp( 40px, 5vw, 70px );
}

.aindex-row {
	position: relative;
	border-block-start: 1px solid var( --rule );
	padding-block: clamp( 20px, 2.6vw, 34px );
	align-items: center;
	transition: background-color 0.22s ease;
}

.aindex-row:hover {
	background: var( --paper-2 );
}

.aindex-no {
	grid-column: 1 / span 1;
	grid-row: 1;
	margin: 0;
	font-size: var( --step--1 );
	color: var( --ink-3 );
}

.aindex-fig {
	grid-column: 2 / span 2;
	grid-row: 1;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.aindex-fig .fehrest-figure-img,
.aindex-fig.fehrest-figure--empty {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate( 0.92 );
	transition: filter 0.3s ease;
}

.aindex-row:hover .aindex-fig .fehrest-figure-img {
	filter: saturate( 1 );
}

.aindex-body {
	grid-column: 5 / span 5;
	grid-row: 1;
}

/*
 * No portrait on file: the figure is never rendered at all (see
 * template-parts/artist-index-row.php), so reclaim its column for the body
 * instead of leaving it as dead space. One rule per row-cycle variant below,
 * each matching that variant's own .aindex-fig start column through its
 * .aindex-body's own end column.
 */
.aindex-row:not( :has( .aindex-fig ) ) .aindex-body {
	grid-column: 2 / 10;
}

.aindex-name {
	margin: 0;
	font-size: var( --step-3 );
	font-weight: 600;
	letter-spacing: -0.012em;
	transition: color 0.2s ease;
}

.aindex-row:hover .aindex-name {
	color: var( --accent );
}

.aindex-bio {
	margin: 0;
	margin-block-start: 10px;
	font-size: var( --step-0 );
	color: var( --ink-2 );
	max-width: 46ch;
}

.aindex-meta {
	grid-column: 11 / span 2;
	/*
	 * Explicit, not auto: grid's sparse auto-placement advances a per-row
	 * cursor forward through DOM order and never backtracks it within a row
	 * — meta is the last child, so on the row-2 cycle variant below (which
	 * moves it to an EARLIER column, col2, behind the row number) auto
	 * placement would otherwise silently bump it onto its own implicit
	 * second row instead of sharing row 1 with everything else.
	 */
	grid-row: 1;
	font-size: var( --step--1 );
	color: var( --ink-3 );
	display: grid;
	gap: 4px;
	justify-items: end;
	align-self: start;
	padding-block-start: 4px;
}

.aindex-meta p {
	margin: 0;
}

[dir='rtl'] .aindex-meta {
	justify-items: start;
}

.aindex-link {
	position: absolute;
	inset: 0;
}

.aindex-link:focus-visible {
	outline-offset: -3px;
}

/*
 * A deterministic 4-row placement cycle (never runtime-random) so the index
 * reads as a broken grid rather than a plain table repeating one row shape.
 * Portrait column/width/aspect-ratio/vertical offset, the body's start
 * column and measure, and which outer column the location meta sits in all
 * change with row position — row number, portrait, name, bio, and location
 * content are untouched, only their placement. Numeric grid-column values
 * already mirror correctly under [dir='rtl'] (grid respects the container's
 * direction for column ordering), so no extra logical-property handling is
 * needed here beyond what .aindex-meta already does for its own text
 * alignment. Scoped to min-width:1001px — under that, the existing
 * max-width:1000px block below collapses every row to the same simplified
 * two-column mobile shape regardless of cycle position.
 */
@media ( min-width: 1001px ) {
	/* Row type 2 (2, 6, 10…): portrait widens and steps in a column, eases
	   down slightly; body narrows and starts later; meta moves in beside the
	   row number instead of trailing at the far edge. */
	.aindex-row:nth-child( 4n + 2 ) .aindex-fig {
		grid-column: 3 / span 3;
		aspect-ratio: 1 / 1;
		margin-block-start: 14px;
	}

	.aindex-row:nth-child( 4n + 2 ) .aindex-body {
		grid-column: 7 / span 5;
	}

	.aindex-row:nth-child( 4n + 2 ):not( :has( .aindex-fig ) ) .aindex-body {
		grid-column: 3 / 12;
	}

	.aindex-row:nth-child( 4n + 2 ) .aindex-bio {
		max-width: 34ch;
	}

	.aindex-row:nth-child( 4n + 2 ) .aindex-meta {
		grid-column: 2 / span 1;
		justify-items: start;
	}

	[dir='rtl'] .aindex-row:nth-child( 4n + 2 ) .aindex-meta {
		justify-items: end;
	}

	/* Row type 3 (3, 7, 11…): portrait steps in further and taller, body
	   starts later still with the narrowest measure, meta drifts one column
	   in from the trailing edge — a controlled empty column opens on each
	   side of the portrait. */
	.aindex-row:nth-child( 4n + 3 ) .aindex-fig {
		grid-column: 3 / span 2;
		aspect-ratio: 3 / 4;
		margin-block-start: 26px;
	}

	.aindex-row:nth-child( 4n + 3 ) .aindex-body {
		grid-column: 6 / span 4;
	}

	.aindex-row:nth-child( 4n + 3 ):not( :has( .aindex-fig ) ) .aindex-body {
		grid-column: 3 / 10;
	}

	.aindex-row:nth-child( 4n + 3 ) .aindex-bio {
		max-width: 30ch;
	}

	.aindex-row:nth-child( 4n + 3 ) .aindex-meta {
		grid-column: 10 / span 2;
	}

	/* Row type 4 (4, 8, 12…): portrait widens the other way (no vertical
	   easing, a deliberate contrast against row 3's offset), body shifts
	   later, meta pulls all the way to the trailing edge in a single narrow
	   column. */
	.aindex-row:nth-child( 4n ) .aindex-fig {
		grid-column: 2 / span 3;
		aspect-ratio: 4 / 3;
	}

	.aindex-row:nth-child( 4n ) .aindex-body {
		grid-column: 6 / span 5;
	}

	.aindex-row:nth-child( 4n ):not( :has( .aindex-fig ) ) .aindex-body {
		grid-column: 2 / 11;
	}

	.aindex-row:nth-child( 4n ) .aindex-meta {
		grid-column: 12 / span 1;
	}
}

/* --- detail: bled portrait, oversized name, two-column body --------------- */

.a-head {
	padding-block: clamp( 26px, 3.6vw, 50px ) clamp( 20px, 2.6vw, 36px );
	border-block-end: 1px solid var( --ink );
}

/* Same "hero" tier as the archive title (clamp(48px, 4.5vw + 33px, 100px)),
   not the old --step-5 — that read as disproportionately larger than the
   revised archive/informational scale below it. */
.a-title {
	grid-column: 1 / span 8;
	margin: 0;
	font-size: clamp( 48px, 4.5vw + 33px, 100px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.04;
}

.a-meta {
	grid-column: 9 / span 4;
	align-self: end;
	display: grid;
	gap: var( --space-3 );
	margin: 0;
	font-size: var( --step--1 );
	padding-block-start: var( --space-4 );
}

.a-meta div {
	display: grid;
	gap: 2px;
}

.a-meta dt {
	letter-spacing: 0.06em;
	color: var( --ink-3 );
	margin-block-end: 2px;
}

.a-meta dd {
	margin: 0;
	font-size: var( --step-0 );
}

.a-portrait-wrap {
	padding-block: clamp( 20px, 2.6vw, 36px );
}

.a-portrait-wrap .fehrest-figure {
	grid-column: 1 / span 7;
	margin-block: 0;
	width: calc( 100% + var( --pad ) );
	margin-inline: 0 calc( -1 * var( --pad ) );
}

.a-portrait-wrap .fehrest-figure-img,
.a-portrait-wrap .fehrest-figure--empty {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.a-body {
	padding-block: clamp( 26px, 3.4vw, 50px );
	row-gap: clamp( 24px, 3vw, 40px );
}

.a-statement {
	grid-column: 9 / span 4;
	align-self: start;
	/* Offset against the a-side track — without this the two tracks start on
	   the same baseline and read as a conventional two-column layout rather
	   than the deliberately interleaved rhythm used elsewhere (see the same
	   move on .detail-artists in assets/css/exhibition.css). */
	margin-block-start: clamp( 36px, 6vw, 100px );
	font-size: var( --step-1 );
	line-height: 1.55;
	color: var( --ink );
}

.a-statement p {
	margin: 0;
}

.a-statement p + p {
	margin-block-start: var( --space-3 );
}

.a-side {
	grid-column: 1 / span 6;
	margin: 0;
	display: grid;
	gap: var( --space-7 );
}

.a-exhibitions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-exhibitions li {
	border-block-end: 1px solid var( --rule );
}

.a-exhibitions a {
	display: flex;
	align-items: baseline;
	gap: var( --space-3 );
	padding-block: var( --space-3 );
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease, padding 0.18s ease;
}

.a-exhibitions a:hover {
	color: var( --accent );
	padding-inline-start: var( --space-2 );
}

.aex-title {
	font-size: var( --step-1 );
	font-weight: 600;
}

.aex-when {
	font-size: var( --step--1 );
	color: var( --ink-3 );
	margin-inline-start: auto;
}

.aex-status {
	font-size: var( --step--1 );
	color: var( --ink-2 );
	min-width: 5.5em;
}

.a-works-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --space-4 );
}

.awork-fig {
	margin: 0;
	display: grid;
	gap: var( --space-2 );
}

.awork-fig .fehrest-figure {
	margin: 0;
}

.awork-fig .fehrest-figure-img,
.awork-fig .fehrest-figure--empty {
	width: 100%;
	object-fit: cover;
	filter: saturate( 0.92 );
}

.awork-fig figcaption {
	display: flex;
	justify-content: space-between;
	gap: var( --space-2 );
	font-size: var( --step--1 );
	color: var( --ink-2 );
}

/* --- narrow viewports: cancel the desktop bleeds and asymmetric spans -----
 * Ported from concept.css's shared @media(max-width:1000px) block — only
 * the Artist-specific rules from it.
 */

@media ( max-width: 1000px ) {
	.a-title,
	.a-meta,
	.a-statement,
	.a-side {
		grid-column: 1 / -1 !important;
		margin-inline: 0 !important;
		margin-block-start: 0 !important;
	}

	.aindex-row {
		grid-template-columns: 84px minmax( 0, 1fr );
		row-gap: 10px;
	}

	/*
	 * Three explicit rows in the text column (number, body, meta) beside one
	 * portrait spanning all three in its own column — never implicit rows
	 * the browser has to guess at. Before this fix, .aindex-no shared
	 * .aindex-fig's column with no row of its own, so the portrait's opaque
	 * image painted over the row number; and .aindex-body/.aindex-meta both
	 * still carried the desktop base rule's explicit grid-row:1 (nothing in
	 * this media query reset it), so they occupied the identical cell and
	 * the location text overlapped the artist name. Every element below now
	 * gets its own explicit column AND row.
	 */
	.aindex-no {
		grid-column: 2;
		grid-row: 1;
	}

	.aindex-fig {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
	}

	.aindex-body {
		grid-column: 2;
		grid-row: 2;
	}

	.aindex-meta {
		grid-column: 2;
		grid-row: 3;
		justify-items: start;
		flex-direction: row;
		display: flex;
		gap: 14px;
	}

	[dir='rtl'] .aindex-meta {
		justify-items: start;
	}

	/* No portrait: collapse the reserved 84px image column entirely rather
	   than leaving it blank beside the text. */
	.aindex-row:not( :has( .aindex-fig ) ) {
		grid-template-columns: minmax( 0, 1fr );
	}

	.aindex-row:not( :has( .aindex-fig ) ) .aindex-no,
	.aindex-row:not( :has( .aindex-fig ) ) .aindex-body,
	.aindex-row:not( :has( .aindex-fig ) ) .aindex-meta {
		grid-column: 1;
	}

	.a-portrait-wrap .fehrest-figure {
		grid-column: 1 / -1;
		width: 100%;
		max-width: 100%;
		margin-inline-end: 0;
	}

	.a-side {
		margin-block-start: var( --space-6 );
	}
}

@media ( max-width: 640px ) {
	.a-works-grid {
		grid-template-columns: 1fr;
	}
}