/**
 * About module — styles for template-about.php and its section partials
 * in template-parts/about/ (Brand Introduction, Philosophy, Craftsmanship,
 * Moroccan Identity, Imagery, Brand Statement).
 *
 * Loaded only on the About page template (see inc/enqueue.php) — nothing
 * here reaches Homepage, Shop, Product, Cart, Checkout or Account, which
 * keep using their own stylesheets untouched. Builds on tokens/base/
 * layout/components rather than redefining them: section spacing, image
 * ratios, buttons, .link and .section-heading__eyebrow are all reused
 * from the existing design system.
 *
 * Section rhythm mirrors the Homepage's editorial pacing (a sequence of
 * beats, not a flat repeated stack): a centered statement, a quiet text
 * pause, two alternating image/text spreads, a full-bleed gallery, and a
 * dark closing statement.
 */

/* ---------------------------------------------------------------------
   Brand Introduction — centered statement, then a full-bleed image.
--------------------------------------------------------------------- */

.about-intro {
	padding-bottom: 0;
	text-align: center;
}

.about-intro__statement {
	padding-bottom: var(--space-xl);
}

.about-intro__heading {
	margin: var(--space-2xs) 0 var(--space-md);
	font-size: var(--fs-2xl);
	letter-spacing: var(--ls-tight);
}

.about-intro__lead {
	max-width: 56ch;
	margin-inline: auto;
	font-size: var(--fs-md);
	color: var(--color-ink-muted);
}

.about-intro__media img,
.about-intro__media .module-placeholder {
	display: block;
}

@media (min-width: 1024px) {
	.about-intro__heading {
		font-size: var(--fs-3xl);
	}

	.about-intro__lead {
		font-size: var(--fs-lg);
	}
}

/* ---------------------------------------------------------------------
   Philosophy — quiet centered text pause, no imagery.
--------------------------------------------------------------------- */

.philosophy {
	background: var(--color-paper-alt);
	border-top: var(--border-width) solid var(--color-line);
	border-bottom: var(--border-width) solid var(--color-line);
	text-align: center;
}

.philosophy__intro {
	padding-bottom: var(--space-xl);
}

.philosophy__heading {
	margin: var(--space-2xs) 0 var(--space-md);
}

.philosophy__lead {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--color-ink-muted);
}

.philosophy__pillar {
	text-align: center;
	padding-top: var(--space-lg);
	border-top: var(--border-width) solid var(--color-line);
}

.philosophy__pillar-title {
	font-size: var(--fs-md);
	margin-bottom: var(--space-2xs);
}

.philosophy__pillar-text {
	color: var(--color-ink-muted);
	font-size: var(--fs-sm);
	max-width: 32ch;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.philosophy__pillar {
		text-align: left;
	}

	.philosophy__pillar-text {
		margin-inline: 0;
	}
}

/* ---------------------------------------------------------------------
   About spread — shared component for Craftsmanship + Moroccan Identity.
   Image + content, stacked on mobile (image always first), side by side
   above 1024px. The --reversed modifier swaps which side the image sits
   on so the two sections read as a facing pair rather than a repeated
   template; --alt swaps the surface color so the pair also reads as
   distinct "beats" rather than identical blocks back to back.
--------------------------------------------------------------------- */

.about-spread {
	border-top: var(--border-width) solid var(--color-line);
}

.about-spread--alt {
	background: var(--color-paper-alt);
}

.about-spread__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.about-spread__media {
	display: block;
	overflow: hidden;
	background: var(--color-paper-alt);
}

.about-spread__heading {
	margin: var(--space-2xs) 0 var(--space-sm);
}

.about-spread__copy {
	color: var(--color-ink-muted);
	max-width: 48ch;
	margin: 0 0 var(--space-md);
}

.about-spread__details {
	display: grid;
	gap: var(--space-2xs);
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
}

.about-spread__details li {
	padding-left: var(--space-sm);
	position: relative;
}

.about-spread__details li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 5px;
	height: 1px;
	background: var(--color-accent);
}

.about-spread__quote {
	margin: var(--space-md) 0 0;
	padding-left: var(--space-md);
	border-left: var(--border-width-md) solid var(--color-accent);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	max-width: 34ch;
}

.about-spread__quote p {
	margin: 0;
}

@media (min-width: 1024px) {
	.about-spread__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		align-items: center;
		gap: var(--space-2xl);
	}

	.about-spread--reversed .about-spread__media {
		grid-column: 1;
		grid-row: 1;
	}

	.about-spread--reversed .about-spread__content {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ---------------------------------------------------------------------
   Imagery — full-bleed-adjacent mosaic gallery, no body copy.
--------------------------------------------------------------------- */

.imagery {
	padding-top: var(--space-2xl);
}

.imagery__eyebrow {
	display: block;
	margin-bottom: var(--space-lg);
}

.imagery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}

.imagery__item img,
.imagery__item .module-placeholder {
	width: 100%;
}

.imagery__item:nth-child(1) { grid-column: span 1; }
.imagery__item:nth-child(4) { grid-column: span 1; }

@media (min-width: 768px) {
	.imagery__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-md);
	}

	.imagery__item:nth-child(1),
	.imagery__item:nth-child(4) {
		grid-column: span 1;
	}
}

/* ---------------------------------------------------------------------
   Brand Statement — dark closing moment, deliberately the visual
   opposite of the light-paper sections above it.
--------------------------------------------------------------------- */

.brand-statement {
	background: var(--color-ink);
	color: var(--color-paper);
	text-align: center;
}

.brand-statement__eyebrow {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: rgba(250, 248, 245, 0.65);
	margin-bottom: var(--space-md);
}

.brand-statement__text {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	margin: 0;
}

.brand-statement__attribution {
	display: block;
	margin-top: var(--space-md);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: rgba(250, 248, 245, 0.65);
}

@media (min-width: 1024px) {
	.brand-statement__text {
		font-size: var(--fs-2xl);
		max-width: 26ch;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------
   Optional ad-hoc Page content, rendered after the section stack.
--------------------------------------------------------------------- */

.about-page__body {
	padding-block: var(--space-xl);
}