/*
 * BROKEN EDITORIAL GRID — Exhibition archive and detail pages only. Ported
 * from the approved prototype's archive-band and detail-page 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.
 *
 * Artist archive/detail, About, and Visit pages are intentionally not
 * touched by this file — see assets/css/public-content.css for those.
 */

/* --- archive: horizontal bands, alternating indentation -------------------
 * No repeating card: each row's indentation, image span, and image aspect
 * ratio changes with its position (deterministic by :nth-child, never
 * randomized), so the eye tracks a changing edge instead of scanning a
 * matrix of equal cards.
 */

.archive-group {
	padding-block: clamp( 26px, 3.4vw, 50px );
}

.band {
	position: relative;
	border-block-start: 1px solid var( --rule );
	padding-block: clamp( 22px, 2.8vw, 40px );
	align-items: start;
	transition: background-color 0.25s ease;
}

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

.band-year {
	grid-column: 1 / span 1;
	margin: 0;
	font-size: 12.5px;
	color: var( --ink-3 );
	letter-spacing: 0.04em;
	padding-block-start: 6px;
}

.band-text {
	grid-column: 2 / span 5;
}

/* the alternating break: every other band steps inward */
.band:nth-child( even ) .band-text {
	grid-column: 3 / span 5;
}

.band:nth-child( 3n ) .band-text {
	grid-column: 4 / span 5;
}

.band-title {
	margin: 0;
	font-size: clamp( 24px, 3.1vw, 42px );
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.012em;
	transition: color 0.2s ease;
}

.band:hover .band-title {
	color: var( --accent );
}

.band-dates {
	margin: 0;
	margin-block-start: 10px;
	font-size: 13.5px;
	color: var( --ink-2 );
}

.band-excerpt {
	margin: 0;
	margin-block-start: 14px;
	font-size: 15px;
	color: var( --ink-2 );
	max-width: 48ch;
}

/* Each fact is its own element with a flex gap: joining them into one string
   with a separator character produces bidi artefacts in Persian. */
.band-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	margin-block-start: 16px;
	font-size: 12px;
	color: var( --ink-3 );
	letter-spacing: 0.04em;
}

.band-tags span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.band-tags span + span::before {
	content: '';
	width: 3px;
	height: 3px;
	background: var( --rule );
	border-radius: 50%;
	flex: none;
}

/*
 * Wraps .band-fig plus its optional fallback-artwork credit line — the grid
 * placement that used to live on .band-fig directly now lives here, since
 * .band-fig is no longer always the only child (a poster never gets a
 * credit line and renders exactly as before; a daily fallback artwork picks
 * up a caption right under it, per exhibition_hero_image()'s `artwork`
 * value — see template-parts/exhibition-band.php). Entirely absent, rather
 * than an empty gray box, when an exhibition has neither.
 */
.band-media {
	grid-column: 8 / span 5;
}

/* varying image heights keep the bands from becoming a card rhythm */
.band:nth-child( even ) .band-media {
	grid-column: 9 / span 4;
}

.band-fig {
	margin: 0;
}

.band-fig .fehrest-figure-img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
	filter: saturate( 0.9 );
	transition: filter 0.3s ease;
}

.band:nth-child( 3n ) .band-fig .fehrest-figure-img {
	aspect-ratio: 4 / 3;
}

.band:nth-child( even ) .band-fig .fehrest-figure-img {
	aspect-ratio: 1 / 1;
}

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

/*
 * The fallback-artwork credit (fehrest_hero_artwork_credit()'s shared
 * .hero-credit markup — same small, muted, localized formatter as the
 * homepage hero). homepage.css's own .hero-credit rules never reach this
 * page (homepage.css is only enqueued on the front page), so this is a
 * fresh, self-contained position for the band's narrower column instead of
 * homepage.css's `grid-row`/`grid-column` values — deliberately just a
 * small caption sitting close under the image, not a second content block,
 * so the band's height doesn't grow to match its text column.
 */
.band-media .hero-credit {
	margin: 0;
	margin-block-start: 8px;
	font-size: 12px;
	color: var( --ink-3 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

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

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

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

/* --- exhibition detail: two interleaved tracks ---------------------------- */

.detail-head {
	padding-block: clamp( 30px, 4vw, 64px ) clamp( 26px, 3.4vw, 48px );
	border-block-end: 1px solid var( --ink );
}

.detail-title {
	grid-column: 1 / span 8;
	margin: 0;
	font-size: clamp( 36px, 6.4vw, 92px );
	line-height: 1.02;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.detail-meta {
	grid-column: 9 / span 4;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	font-size: 13.5px;
	padding-block-start: 20px;
}

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

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

.detail-meta dd {
	margin: 0;
}

.detail-hero {
	padding-block: clamp( 24px, 3vw, 44px );
}

/* bleeds past the inline-end edge — the figure is itself the grid item, so
   the width has to grow as well as shift. */
.detail-hero .fehrest-figure {
	grid-column: 2 / span 11;
	margin-block: 0;
	margin-inline: 0 calc( -1 * var( --pad ) );
	width: calc( 100% + var( --pad ) );
}

.detail-hero .fehrest-figure-img,
.detail-hero .fehrest-figure--empty {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* text track and image/artists track run at different rhythms */
.detail-body {
	padding-block: clamp( 30px, 4vw, 60px );
	row-gap: clamp( 24px, 3vw, 40px );
}

.detail-text {
	grid-column: 2 / span 5;
	display: grid;
	gap: 20px;
	font-size: 16.5px;
	color: var( --ink-2 );
}

.detail-text p {
	margin: 0;
}

.detail-text p:first-child {
	font-size: 20px;
	color: var( --ink );
	line-height: 1.55;
}

.detail-artists {
	grid-column: 8 / span 5;
	align-self: start;
	/* offset against the text track — the interleave */
	margin-block-start: clamp( 40px, 7vw, 120px );
}

.detail-artists ul {
	display: grid;
	gap: 2px;
	margin: 0;
	margin-block-start: 14px;
	list-style: none;
	padding: 0;
}

.detail-artists li a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-block: 7px;
	border-block-end: 1px solid var( --rule );
	font-size: 16px;
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease, padding 0.18s ease;
}

.detail-artists li a:hover {
	color: var( --accent );
	padding-inline-start: 8px;
}

.detail-back {
	padding-block: 28px;
}

/* --- works: numbered, breaking out of the text column --------------------- */

.works {
	padding-block: clamp( 30px, 4vw, 56px );
	row-gap: clamp( 40px, 5vw, 78px );
}

.work {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	align-items: start;
}

.work-fig {
	grid-column: 1 / span 6;
	margin: 0;
}

.work:nth-child( even ) .work-fig {
	grid-column: 7 / span 6;
}

/* every third work breaks wider than the rest */
.work:nth-child( 3n ) .work-fig {
	grid-column: 2 / span 8;
}

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

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

.work-caption {
	grid-column: 8 / span 4;
	display: flex;
	gap: 14px;
	font-size: 14px;
	padding-block-start: 6px;
}

.work:nth-child( even ) .work-caption {
	grid-column: 2 / span 4;
}

.work:nth-child( 3n ) .work-caption {
	grid-column: 11 / span 2;
}

.work-num {
	color: var( --accent );
	font-size: 12px;
	padding-block-start: 4px;
	flex: none;
}

.work-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.work-artist {
	margin: 0;
	margin-block-start: 4px;
	color: var( --ink-2 );
}

.work-artist a {
	color: inherit;
}

.work-tech {
	margin: 0;
	margin-block-start: 8px;
	color: var( --ink-3 );
	font-size: 13px;
	line-height: 1.5;
}

/* --- installation gallery -------------------------------------------------- */

.installs {
	padding-block: clamp( 26px, 3.4vw, 52px );
	row-gap: var( --gutter );
}

.installs .fehrest-figure {
	margin: 0;
}

.installs .fehrest-figure:nth-child( 4n + 1 ) {
	grid-column: 1 / span 7;
}

.installs .fehrest-figure:nth-child( 4n + 2 ) {
	grid-column: 8 / span 5;
	margin-block-start: clamp( 30px, 5vw, 74px );
}

.installs .fehrest-figure:nth-child( 4n + 3 ) {
	grid-column: 3 / span 5;
}

.installs .fehrest-figure:nth-child( 4n ) {
	grid-column: 8 / span 5;
}

.installs .fehrest-figure-img,
.installs .fehrest-figure--empty {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: saturate( 0.9 );
	transition: filter 0.35s ease;
}

.installs .fehrest-figure:hover .fehrest-figure-img {
	filter: saturate( 1 );
}

/* --- narrow viewports: cancel the desktop bleeds and asymmetric spans ----- */

@media ( max-width: 1000px ) {
	.band-text,
	.band-media,
	.detail-title,
	.detail-meta,
	.detail-text,
	.detail-artists,
	.work-fig,
	.work-caption {
		grid-column: 1 / -1 !important;
		margin-inline: 0 !important;
		margin-block-start: 0 !important;
	}

	.band {
		row-gap: 18px;
	}

	.band-year {
		grid-column: 1 / -1;
	}

	.detail-artists {
		margin-block-start: 0 !important;
	}

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

	.installs .fehrest-figure {
		grid-column: 1 / -1 !important;
		margin-block-start: 0 !important;
	}
}