/*
 * BROKEN EDITORIAL GRID — front page only (hero, introduction, and the
 * selected-artists strip). Ported from the approved prototype's homepage
 * rules (design-exploration/site-foundation/concept-1-broken-grid/
 * concept.css) onto real WordPress content — class names match the
 * prototype directly. Every directional rule uses logical properties, so
 * Persian (RTL) and English (LTR) mirror naturally; the two rules that must
 * stay pinned to the *physical* corner regardless of direction (the
 * halftone canvas, the RTL arrow flip) are called out below.
 *
 * The Exhibition/Artist archive and detail templates are intentionally not
 * touched by this file — see assets/css/public-content.css for those.
 */

/* --- homepage-only editorial primitive ------------------------------------
 * .section-head, .cta, and .arrow are truly shared (homepage, Exhibition
 * archive, and Exhibition detail all use them) and live in site-shell.css,
 * which every page loads. .eyebrow is homepage-hero-only.
 */

.eyebrow {
	/* sits above the title's paper plate, painted later in DOM order */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var( --accent );
	margin-block-end: 20px;
}

.eyebrow [data-star] {
	font-size: 9px;
}

/* --- hero: the grid break -------------------------------------------------- */

.hero {
	position: relative;
	padding-block: clamp( 34px, 5vw, 76px ) clamp( 60px, 9vw, 140px );
}

/*
 * The Growth composition's real content (artwork + metadata stack) already
 * ends well short of where the original bottom padding was tuned for (a
 * taller image-dominated column) — kept large there, it read as a big gap
 * before the intro. 48–64px is plenty of breathing room against the
 * lowest real content (the CTA); nothing about the hero's own height comes
 * from the growth-layer SVG, which is absolutely positioned and sized off
 * the very same content.
 */
.hero--growth {
	padding-block-end: clamp( 48px, 4vw, 64px );
}

/* The print grid, showing through like registration marks. */
.grid-lines {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	pointer-events: none;
	z-index: 0;
}

.grid-lines span {
	border-inline-start: 1px solid var( --rule );
	opacity: 0.55;
}

.grid-lines span:last-child {
	border-inline-end: 1px solid var( --rule );
}

/*
 * fehrest_figure() always renders "fehrest-figure hero-fig" together on the
 * same <figure>, so the compound selector below outranks public-content.css's
 * plain `.fehrest-figure { margin: 0 0 0.5em }` regardless of stylesheet
 * order, and can safely zero/override every side with logical properties.
 */
.hero-fig.fehrest-figure {
	position: relative;
	z-index: 1;
	/* explicit row: the figure and the title block share row 1 so they can
	   overlap — auto-placement would push the text to a new row. */
	grid-row: 1;
	grid-column: 1 / span 6;
	margin-block: 0;
	/* bleeds past the page padding — the first break in the grid */
	margin-inline: calc( -1 * var( --pad ) ) 0;
}

.hero-fig .fehrest-figure-img,
.hero-fig.fehrest-figure--empty {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: saturate( 0.92 );
}

.hero-text {
	position: relative;
	z-index: 2;
	grid-row: 1;
	/* clear of the image: body copy is never set over a work */
	grid-column: 7 / span 6;
	/* pushed down against the image — the second break */
	margin-block-start: clamp( 80px, 11.5vw, 178px );
}

.hero-title {
	font-size: clamp( 34px, 5.4vw, 76px );
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -0.015em;
	/* The one permitted layering move: the title — and only the title —
	   crosses into the image, carrying a paper plate behind each line so the
	   type stays legible and the overlap reads as deliberate. */
	display: inline;
	background: var( --paper );
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0.06em 0.24em;
	margin-inline-start: clamp( -150px, -9vw, -70px );
}

.hero-lede {
	max-width: 46ch;
	margin-block-start: 26px;
	font-size: 18.5px;
	color: var( --ink-2 );
}

.hero-rule {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 30px 22px;
	color: var( --accent );
}

.hero-rule i {
	display: block;
	height: 1px;
	width: clamp( 60px, 12vw, 190px );
	background: var( --accent );
}

/* The free decorative star's own seeded size (identity.js sets --star-size
   as an inline custom property, 32-48px visible), not the 1em default. */
.hero-rule .mark-star {
	width: var( --star-size, 40px );
	height: var( --star-size, 40px );
}

/*
 * Small, restrained caption under a hero image that is standing in for the
 * exhibition's own missing poster (fehrest_hero_artwork_credit() — prints
 * nothing at all otherwise, so this rule never shows for a real poster).
 * Explicit grid placement only matters in the non-growth branch, where this
 * is a direct sibling of .hero-fig/.hero-text inside .hero.grid12; inside
 * .hero--growth's .hero-artwork-stack (a plain block-flow container) these
 * properties are harmless no-ops and it simply follows the image in normal
 * flow instead.
 *
 * Sits at the image's own OUTER (bled) corner, not the inner edge facing the
 * text column: text-align:end here (non-growth branch — the image bleeds
 * toward inline-start, so its outer corner is inline-end) and text-align:
 * start below for the growth branch (image bleeds toward inline-end, so its
 * outer corner is inline-start) — both logical, so RTL mirrors correctly
 * with no separate [dir="rtl"] rule needed. One line by design at desktop
 * widths (nowrap + ellipsis, never wrapping into a second line that would
 * push .hero-below down further); the mobile media query below lifts that
 * back to normal wrapping, where the caption already sits full-width in its
 * own stacked row and a second line costs nothing.
 */
.hero-credit {
	grid-row: 2;
	grid-column: 1 / span 6;
	margin-block-start: 6px;
	font-size: 13px;
	color: var( --ink-3 );
	text-align: end;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hero-credit a {
	color: inherit;
	text-decoration: none;
}

.hero-credit a:hover,
.hero-credit a:focus-visible {
	text-decoration: underline;
}

.hero--growth .hero-artwork-stack .hero-credit {
	margin-block-start: 6px;
	text-align: start;
}

/*
 * The caption is a genuinely new line of content between the image and the
 * date/venue block, so it necessarily adds *some* height — this keeps that
 * addition to roughly the caption's own line height instead of compounding
 * with .hero-below's full original gap (24px), which was tuned for sitting
 * directly under the image, not under a caption under the image. Only
 * matches when a caption actually rendered (an adjacent-sibling selector,
 * not a PHP-side conditional class) — the real-poster case, where no
 * .hero-credit exists at all, is completely untouched.
 */
.hero-credit + .hero-below {
	margin-block-start: 14px;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px clamp( 20px, 3vw, 46px );
	font-size: 13.5px;
	margin-block-end: 26px;
}

.hero-meta div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hero-meta dt {
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var( --ink-3 );
}

.hero-meta dd {
	margin: 0;
	color: var( --ink );
}

/* --- the restrained follow-up list (more than one current exhibition) ---- */

.fehrest-front-more {
	padding-block: clamp( 20px, 3vw, 40px );
	border-block-start: 1px solid var( --rule );
}

/* --- introduction: the site's own editable front-page content ------------- */

.intro {
	position: relative;
	padding-block: clamp( 40px, 6vw, 90px );
	border-block-start: 1px solid var( --ink );
}

.intro-body {
	grid-column: 7 / span 6;
}

.intro-body p {
	font-size: clamp( 20px, 2.1vw, 27px );
	line-height: 1.5;
	letter-spacing: -0.005em;
}

.intro-body p + p {
	margin-block-start: 22px;
	font-size: 16.5px;
	line-height: 1.68;
	color: var( --ink-2 );
	max-width: 54ch;
}

/* --- selected artists: a horizontal index strip ---------------------------- */

.artists-strip {
	padding-block: clamp( 34px, 4.5vw, 64px );
}

.artists-list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.artists-list li {
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.artists-list a {
	font-size: clamp( 19px, 2.3vw, 31px );
	letter-spacing: -0.01em;
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid transparent;
	padding-block-end: 2px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.artists-list a:hover {
	color: var( --accent );
	border-block-end-color: var( --accent );
}

.artists-list .sep {
	color: var( --rule );
	font-size: 9px;
}

/*
 * Homepage hero halftone — pinned to the physical lower-right corner with
 * right/bottom (not a logical inset) so it stays there even when the
 * language switch flips dir to ltr. identity-halftone.js masks out
 * .hero-fig and .hero-text's live bounding rects at draw time, so no dot
 * ever reduces the legibility of the title, excerpt, or image.
 */
.hero-halftone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min( 46%, 620px );
	height: min( 38%, 320px );
	z-index: 0;
	pointer-events: none;
}

/* --- the Growth hero (inc/growth.php, assets/js/growth/) --------------------
 * The original Concept 1 Broken Grid composition — image, title, lede,
 * meta and CTA all keep their original relative relationship (same overlap,
 * same internal stacking, same .hero-title/.hero-lede/.hero-rule/.hero-meta
 * rules above, untouched) — as ONE unit that is reserved two columns of
 * headroom on the corridor's side and MIRRORED as a whole into the
 * remaining ten, rather than having its image and text columns swapped
 * independently (which would break the pairing and, in the previous pass,
 * put text where the corridor needed to be):
 *   - columns 1–2 (grid-line 1–3), the physical side the header hub sits
 *     on (right in RTL, left in LTR — see .hero-corridor, unchanged), stay
 *     completely empty;
 *   - the composition occupies columns 3–12 only: the text column (title,
 *     lede, meta, CTA) nearer the corridor at columns 3–7, the artwork at
 *     the far columns 8–12, each keeping the original's 50/50 split (five
 *     of the ten available columns, exactly as six of twelve was before);
 *   - the title still overlaps the artwork by the original clamp, just
 *     pulling toward the image's new (inline-end) side instead of
 *     inline-start — the same "the title crosses into the image" move,
 *     mirrored with the whole composition, not swapped on its own.
 * RTL (Persian): corridor right, artwork left, text/lede/meta/CTA
 * right-of-center. LTR (English): mirrored completely — corridor left,
 * artwork right, text left-of-center.
 */

.hero-corridor {
	grid-column: 1 / 3;
	grid-row: 1;
	margin-inline-start: calc( -1 * var( --pad ) );
	pointer-events: none;
}

.hero--growth .hero-text {
	grid-column: 3 / 8;
}

/*
 * Real document flow, not two separately grid-placed pieces: the artwork
 * and its metadata are both children of ONE grid item (.hero-artwork-stack,
 * itself placed at columns 8–12/row 1, exactly where .hero-fig alone used
 * to sit), stacked by normal block flow inside it. .hero-below therefore
 * always immediately follows the artwork's own rendered bottom — never a
 * second grid row sized (indirectly) by whichever of .hero-text/.hero-fig
 * happened to be taller, which is what the previous grid-row:2 approach
 * actually depended on.
 */
.hero--growth .hero-artwork-stack {
	position: relative;
	z-index: 1;
	grid-row: 1;
	grid-column: 8 / 13;
}

.hero--growth .hero-artwork-stack .hero-fig.fehrest-figure {
	margin-inline: 0 calc( -1 * var( --pad ) );
}

/*
 * 24px, exact, between the artwork's own visible bottom edge and the
 * metadata row below it — a plain margin-block-start inside the stack, not
 * a row-gap, so it is never at the mercy of the OTHER column's height.
 * Shares the artwork's bled physical edge and width via the same
 * margin-inline (its own left/right, not inherited from the grid track).
 */
.hero--growth .hero-below {
	margin-block-start: 24px;
	margin-inline: 0 calc( -1 * var( --pad ) );
}

.hero--growth .hero-below .hero-meta {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 6px 20px;
	margin-block-end: 0;
}

.hero--growth .hero-below .hero-meta div {
	min-width: 0; /* lets a long value wrap instead of overflowing its column */
}

.hero--growth .hero-below .cta {
	margin-block-start: 22px;
}

/*
 * .hero-title itself keeps its ORIGINAL, unmodified rule (margin-inline-
 * start: clamp(-150px,-9vw,-70px)) — the same "crosses into the image"
 * move, at the same scale. What changes is which physical side that
 * logical inline-start now resolves to: title-wrap's own `direction` is
 * flipped to the *opposite* of the page's, isolated with unicode-bidi so
 * only this one wrapper's flow direction changes and the Persian/English
 * text inside keeps rendering correctly (confirmed empirically — negative
 * margin only ever shifts an inline box's OWN leading edge, never its
 * trailing edge, so simply swapping which margin property is set — as the
 * previous attempt did — has no visual effect at all; the wrapper's own
 * flow direction has to change instead). Since the artwork is now on
 * the page's inline-end side (opposite the corridor) while the title's
 * natural leading edge still faces the corridor side, flipping the
 * wrapper's direction makes that leading edge face the artwork instead,
 * exactly mirroring the original.
 */
html[dir='rtl'] .hero--growth .hero-title-wrap {
	direction: ltr;
	unicode-bidi: isolate;
}

html:not( [dir='rtl'] ) .hero--growth .hero-title-wrap {
	direction: rtl;
	unicode-bidi: isolate;
}

.hero-title-wrap {
	--hero-title-size: clamp( 34px, 5.4vw, 76px );
}

/*
 * The marker is a normal in-flow sibling of the title now, not an
 * absolutely positioned overlay — it cannot land over the title's own
 * glyphs (or, after the direction-flip above, inside the title's overlap
 * zone the way it did previously) because it is never taken out of flow.
 * `display:flex` on title-wrap was tried first (the more usual way to do
 * this) and rejected: it blockifies `.hero-title`'s own `display:inline`
 * (required for its per-line box-decoration-break background), and that
 * specific combination makes the browser inject ~51px of phantom
 * margin-block on the title, pushing it down — verified by measurement,
 * not assumed, and unacceptable since the title's position is frozen. A
 * plain `display:inline-block` sibling in the SAME inline formatting
 * context as the title avoids blockifying the title at all, so its box
 * model — and therefore its position — is untouched.
 *
 * DOM order is title-then-marker (see front-page.php); under title-wrap's
 * flipped `direction` (ltr for a Persian page — see above) normal inline
 * flow renders the marker AFTER the title in the physical-right
 * direction, i.e. on the title's physical right in Persian, mirrored to
 * the left in English — the side facing away from the artwork, since the
 * title's own negative margin pulls it toward the artwork on the opposite
 * side and so only ever increases the gap from the marker, never closes
 * it. A longer title simply wraps the line, same collision-avoidance as
 * flex would have given, without disturbing the title itself.
 */
.hero-title-marker {
	display: inline-block;
	vertical-align: middle;
	/* .hero-title already carries an 0.24em inline-end padding as part of
	 * its own background box, so the marker's visible gap from the title's
	 * GLYPHS is this margin plus that padding — kept small here to land
	 * the combined gap in the requested 16-24px range. */
	margin-inline-start: 0;
	width: 24px;
	height: 24px;
	/* Every Growth engine's path terminates exactly at this star's own arm
	   tip (by construction — see markerArmTerminals()), but a static
	   (non-positioned) element paints BELOW a positioned one regardless of
	   z-index value, so without this the .growth-layer* stage (position:
	   absolute, z-index 0-2 depending on engine) would show the path's last
	   pixels across the star instead of stopping cleanly at its edge.
	   Raised above the highest engine z-index (website-hybrid-v1's stage,
	   2) so the star always masks it, on every engine, seed and viewport. */
	position: relative;
	z-index: 3;
	/* Stars always stay the theme's own accent color — Growth color (--fx-
	   growth-color) affects only .growth-layer/.growth-layer-builder-exact
	   path strokes, never any star. */
	color: var( --accent );
}

.hero-title-marker .mark-star {
	display: block;
	width: 24px;
	height: 24px;
}

/*
 * The second Growth target: the same static clean star used for the title
 * marker, reused in place — not another star — as a normal flex sibling of
 * the (now-hidden, see below) decorative rule line. Same static sizing as
 * the title marker.
 */
.hero-lede-marker {
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	color: var( --accent );
	/* Same masking reasoning as .hero-title-marker above. */
	position: relative;
	z-index: 3;
}

.hero-lede-marker .mark-star {
	display: block;
	width: 24px;
	height: 24px;
}

/*
 * The short decorative rule line duplicated a connector once Growth itself
 * draws a real, live-routed line to this same star — kept only for the
 * non-Growth composition, where the star is purely decorative and the line
 * is its only visual anchor.
 */
.hero--growth .hero-rule i {
	display: none;
}

/* No halftone canvas is rendered in the Growth composition at all (see
   front-page.php) — it was a purely decorative field with no relation to
   the artwork's own image, and it sat where the new .hero-below metadata
   now reads; removed rather than relocated, per design direction. */

/* The static, lattice-aligned clean stars (growth-identity.js cleanStar):
   the header hub and the title marker never rotate, breathe or drift. The
   hub's box is reserved before the script draws it, so nothing shifts. */
.mark-star--clean {
	animation: none;
	rotate: 0deg;
	scale: 1;
}

.brand-mark[data-growth-hub] {
	display: inline-block;
	width: 43px;
	height: 43px;
	color: var( --accent );
	/* Same masking reasoning as .hero-title-marker above — the trunk's root
	   point is this star's own tip too. */
	position: relative;
	z-index: 3;
}

.brand-mark[data-growth-hub] .mark-star {
	display: block;
}

/* One absolutely positioned SVG over the top of the document, in document
 * px (no viewBox). width:100% of the initial containing block keeps it
 * exactly page-wide (never a horizontal scroll); out of flow, so it never
 * affects layout; inert to pointer and assistive tech. */
.growth-layer {
	/* inset:0 pins the top-left corner; the explicit width/height below (the
	   CSS default plus growth-home.js's own inline width/height, sized to
	   exactly the hub+hero's document-space extent) always win over the
	   right/bottom this implies, so the layer never grows to fill an
	   ancestor and never determines the hero's own intrinsic height. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Growth color (--fx-growth-color) is scoped to exactly this element and
	   .growth-layer-builder-exact below — the Growth path strokes only.
	   Never applied to any star, text, or grid line. */
	color: var( --fx-growth-color, var( --accent ) );
}

.growth-layer path {
	fill: none;
	stroke: currentColor;
	stroke-linecap: butt;
	stroke-linejoin: miter;
	stroke-miterlimit: 4;
}

/* Builder Exact admin preview layer (growth-builder-exact.js) — same
   Growth color as the production Legacy layer above, via the same custom
   property, so a live drawer color change repaints both without a new
   engine run. Admin-only; never present for a public visitor. */
.growth-layer-builder-exact {
	color: var( --fx-growth-color, var( --accent ) );
}

/* Admin-only diagnostic overlay (Growth drawer "Debug boxes"): the exact
   obstacle/corridor rects the planner solved against, outline only. */
.growth-debug-box {
	fill: none;
	stroke: #2a7fff;
	stroke-width: 1;
	stroke-dasharray: 3 2;
}

.growth-debug-corridor {
	fill: rgba( 42, 127, 255, 0.06 );
	stroke: #2a7fff;
	stroke-width: 1;
}

/* --- narrow viewports: cancel the desktop bleeds and title/image overlap -- */

@media ( max-width: 1000px ) {
	.hero-fig,
	.hero-artwork-stack,
	.hero-text,
	.hero-credit,
	.intro-body {
		grid-column: 1 / -1 !important;
		margin-inline: 0 !important;
		margin-block-start: 0 !important;
	}

	/* Cancel the desktop hero's row-sharing trick: back to stacked rows. */
	.hero-fig,
	.hero-artwork-stack,
	.hero-text,
	.hero-credit {
		grid-row: auto !important;
	}

	.hero-credit {
		margin-block-start: 8px !important;
		text-align: start;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.hero-credit + .hero-below {
		margin-block-start: 14px !important;
	}

	.hero-text {
		margin-block-start: 26px !important;
	}

	.hero-title {
		background: none;
		padding: 0;
		margin-inline-start: 0;
	}

	.grid-lines {
		display: none;
	}

	.hero-halftone {
		width: min( 78%, 360px );
		height: min( 30%, 220px );
	}

	/* At mobile widths .hero-fig/.hero-text above already cancel the
	   desktop swap and stack full-width in DOM order (figure, then text) —
	   exactly the original narrow-viewport behaviour, untouched. The
	   corridor collapses to a slim reserved strip at the hub's own edge;
	   the title's overlap margin (now inline-end on desktop) is reset here
	   same as the original resets inline-start, since there is no
	   image/title overlap at this width either way. */
	.brand-mark[data-growth-hub] {
		width: 34px;
		height: 34px;
	}

	.hero--growth .hero-title {
		margin-inline-end: 0;
	}

	/* .hero-corridor keeps an explicit grid-row:1 at every width (it must
	   stay reachable from the hub above). Left at the base rule's
	   grid-row:auto, .hero-artwork-stack/.hero-text (both full-width here)
	   would be auto-placement-shifted to rows 2/3 to avoid overlapping that
	   explicit cell, leaving row 1 — and the corridor — zero height. Pin
	   them back to explicit rows 1/2 so they coexist with the corridor
	   exactly as the original narrow-viewport stacking order already
	   intends. The artwork and its metadata are one stacked unit now (see
	   .hero-artwork-stack above the media query), not a separate third row. */
	.hero--growth .hero-artwork-stack {
		grid-row: 1 !important;
	}

	.hero--growth .hero-text {
		grid-row: 2 !important;
	}

	/* Covers both rows (desktop's single shared row already covers
	   everything): row 1 is the artwork + its metadata stack, row 2 is the
	   title/marker/lede text column, and growth bounds are capped at the
	   corridor's own bottom edge, so it must reach at least that far down. */
	.hero--growth .hero-corridor {
		grid-row: 1 / 3;
	}

	.hero-title-wrap {
		gap: 12px;
	}

	.hero-title-marker {
		width: 16px;
		height: 16px;
	}

	.hero-title-marker .mark-star {
		width: 16px;
		height: 16px;
	}

	.hero-lede-marker {
		width: 16px;
		height: 16px;
	}

	.hero-lede-marker .mark-star {
		width: 16px;
		height: 16px;
	}

	/* .hero-below (date/venue/curator + CTA) is a normal-flow sibling of the
	   artwork inside .hero-artwork-stack now, not a separately grid-placed
	   element — it simply follows the artwork's own bottom here, same as on
	   desktop, just at full width. */
	.hero--growth .hero-below {
		margin-block-start: 20px;
		margin-inline: 0 !important;
	}

	.hero--growth .hero-below .hero-meta {
		display: flex;
		flex-wrap: wrap;
	}
}