/*
 * BROKEN EDITORIAL GRID — About and Visit/Contact pages only. Ported from
 * the approved prototype's `.about-*` rules (design-exploration/site-
 * foundation/concept-1-broken-grid/concept.css, from about.html's combined
 * about/visit/contact page) onto two separate production page templates —
 * 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.
 *
 * The prototype's three sections (about/visit/contact) lived on one page;
 * here About gets the "about" section's own column values and Visit/Contact
 * reuses the "visit" and "contact" sections' own (different) column values,
 * so each page still reads as its own deliberate break in the grid rather
 * than a repeated template.
 *
 * 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 (see the same note in assets/css/artist.css).
 */

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

/*
 * Page-specific title scale, deliberately smaller than --step-5 (still used
 * unchanged by the homepage hero and Exhibition detail). --step-5 read as an
 * oversized display heading sitting in a lot of empty space above a single
 * short line of prose; this clamp targets an optical cap-height around
 * 72–88px at 1440px, tapering to ~44–56px on mobile, scoped to these two
 * page templates only.
 */
.about-head h1 {
	grid-column: 1 / span 8;
	margin: 0;
	font-size: clamp( 46px, 2.9vw + 39px, 88px );
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

/* The optional featured image — not part of the prototype (which has no
   concept of a WordPress featured image) — is given its own offset span so
   it reads as a deliberate break rather than a centred hero. */
.fehrest-page-thumbnail {
	margin: 0;
	padding-block: clamp( 20px, 2.6vw, 36px );
}

.fehrest-page-thumbnail img {
	grid-column: 6 / span 7;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: saturate( 0.92 );
}

.about-section {
	padding-block: clamp( 34px, 4.4vw, 64px );
	border-block-start: 1px solid var( --ink );
}

/* Pulls the page's first section up against the (now much shorter) title
   band, instead of repeating the full rhythm-setting gap a second time. */
.about-section:first-of-type {
	padding-block-start: clamp( 16px, 2.4vw, 34px );
}

.about-section h2 {
	grid-column: 1 / span 3;
	margin: 0;
	font-size: var( --step--1 );
	letter-spacing: 0.08em;
	color: var( --ink-2 );
	padding-block-start: 4px;
}

.about-section .about-body {
	grid-column: 4 / span 7;
}

/*
 * About and Visit/Contact share the same .about-head/.about-section system,
 * but each page's own kicker column and body start/measure are deliberately
 * different — never the same template with different words. About: the
 * widest kicker (1/span4) against the latest-starting, narrowest body
 * (5/span6). Visit: the narrowest kicker (1/span2) against the
 * earliest-starting, widest body (3/span8) — directions and hours read best
 * with the most room. Contact: back to the default kicker against a short,
 * self-contained measure (4/span5) for the settings-backed dl.
 *
 * An ID selector (#about/#visit) is more specific than the plain
 * `.about-section h2`/`.about-body` the max-width:1000px block below resets
 * without !important, so — same as the Artist archive's row cycle in
 * artist.css — this whole override is scoped to min-width:1001px rather
 * than risk it winning at mobile widths too.
 */
@media ( min-width: 1001px ) {
	#about h2 {
		grid-column: 1 / span 4;
	}

	#about .about-body {
		grid-column: 5 / span 6;
	}

	#visit h2 {
		grid-column: 1 / span 2;
	}

	#visit .about-body {
		grid-column: 3 / span 8;
	}

	#contact .about-body {
		grid-column: 4 / span 5;
	}
}

/* --- Gutenberg block content (About's and Visit's own the_content()) ------
 * Restrained editorial styling for the block types an editor can actually
 * use here — headings, paragraphs, lists, images, groups, columns, quotes —
 * kept to the same measure and palette as the rest of the Broken Grid
 * language, never card/box treatment.
 */

.fehrest-page-content > * {
	margin-block: 0;
}

.fehrest-page-content > * + * {
	margin-block-start: var( --space-4 );
}

.fehrest-page-content h1,
.fehrest-page-content h2,
.fehrest-page-content h3,
.fehrest-page-content h4,
.fehrest-page-content h5,
.fehrest-page-content h6 {
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.fehrest-page-content h2 {
	font-size: var( --step-3 );
}

.fehrest-page-content h3 {
	font-size: var( --step-2 );
}

.fehrest-page-content h4,
.fehrest-page-content h5,
.fehrest-page-content h6 {
	font-size: var( --step-1 );
}

.fehrest-page-content p,
.fehrest-page-content li {
	font-size: var( --step-1 );
	line-height: 1.6;
}

.fehrest-page-content p {
	max-width: 56ch;
}

.fehrest-page-content ul,
.fehrest-page-content ol {
	padding-inline-start: 1.2em;
	display: grid;
	gap: 6px;
}

.fehrest-page-content img {
	max-width: 100%;
	height: auto;
}

.fehrest-page-content figure {
	margin: 0;
}

.fehrest-page-content a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid var( --rule );
	transition: border-color 0.18s ease, color 0.18s ease;
}

.fehrest-page-content a:hover,
.fehrest-page-content a:focus-visible {
	color: var( --accent );
	border-color: var( --accent );
}

.fehrest-page-content figcaption {
	font-size: var( --step--1 );
	color: var( --ink-3 );
	margin-block-start: 6px;
}

.fehrest-page-content blockquote {
	margin: 0;
	padding-inline-start: var( --space-4 );
	border-inline-start: 2px solid var( --accent );
	font-size: var( --step-1 );
	color: var( --ink-2 );
}

.fehrest-page-content .wp-block-columns {
	display: flex;
	gap: var( --space-4 );
}

.fehrest-page-content .wp-block-column {
	flex: 1;
}

.fehrest-page-content .wp-block-group {
	display: grid;
	gap: var( --space-3 );
}

/*
 * About: narrative-stage labels. The approved About copy already reads as
 * three chronological stages (the Merci café, the opening of Merci Gallery,
 * the present-day continuation as Fehrest) — each stage's own paragraph in
 * the Page content is preceded by a small `.story-label` paragraph (a place
 * or date already stated in that same paragraph, e.g. "Mehrshahr, Karaj" or
 * "Farvardin 1403"), giving the reader a visual anchor per stage without
 * adding any sentence the approved copy doesn't already contain.
 */
.fehrest-page-content .story-label {
	max-width: none;
	font-size: var( --step--1 ) !important;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var( --ink-3 );
	padding-block-start: var( --space-5 );
	border-block-start: 1px solid var( --ink );
}

.fehrest-page-content .story-label:first-child {
	padding-block-start: 0;
	border-block-start: none;
	margin-block-start: 0 !important;
}

.fehrest-page-content .story-label + p {
	margin-block-start: var( --space-2 ) !important;
}

/* --- Contact: settings-backed facts, never invented ------------------------ */

.about-spec {
	display: grid;
	gap: var( --space-4 );
	margin: 0;
	max-width: 60ch;
}

.about-spec div {
	display: grid;
	grid-template-columns: 9rem minmax( 0, 1fr );
	gap: var( --space-3 );
	padding-block-end: var( --space-3 );
	border-block-end: 1px solid var( --rule );
	font-size: var( --step-0 );
}

.about-spec dt {
	margin: 0;
	font-size: var( --step--1 );
	letter-spacing: 0.05em;
	color: var( --ink-3 );
}

.about-spec dd {
	margin: 0;
}

.about-spec a {
	color: var( --ink );
	text-decoration: none;
	border-block-end: 1px solid var( --rule );
	transition: border-color 0.18s ease, color 0.18s ease;
}

.about-spec a:hover {
	color: var( --accent );
	border-color: var( --accent );
}

/* --- narrow viewports: cancel the desktop offsets -------------------------- */

@media ( max-width: 1000px ) {
	.fehrest-page-thumbnail img,
	.about-section .about-body,
	#visit .about-body,
	#contact .about-body {
		grid-column: 1 / -1 !important;
		margin-inline: 0 !important;
		margin-block-start: 0 !important;
	}

	.about-section h2 {
		grid-column: 1 / -1;
		margin-block-end: var( --space-2 );
	}
}

@media ( max-width: 640px ) {
	.about-spec div {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}