/**
 * O nama (About) page sections.
 *
 * Each section is a block pattern in /patterns/about-*.php, carrying its own
 * `className` (e.g. .about-hero) so these rules attach to stable hooks
 * rather than core's generated wrappers.
 *
 * Mobile first. The 900px breakpoint switches to the 1440 desktop design.
 * Values come from theme.json only — no raw hex, no magic numbers, except
 * one-off layout dimensions with no matching token (matches the convention
 * already used in home.css, e.g. the hero's 809px min-height).
 *
 * @package Boxara
 */

.site-main--about {
	padding: 0;
	margin: 0;
	max-width: none;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.about-hero {
	display: flex;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--24) var(--wp--preset--spacing--48);
	background-color: var(--wp--custom--color--bg-primary);
}

.about-hero.wp-block-cover {
	min-height: 0;
}

.about-hero .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}

/* Flat 80% black overlay — matches the Figma spec exactly, no gradient. */
.about-hero .about-hero__scrim {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.8);
}

.about-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.about-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--24);
	width: 100%;
}

/* Reveal timing — lede settles in once the (single-row) title mask has
   finished rising (~750ms). */
.about-hero__eyebrow.js-reveal-section {
	transition-delay: 0ms;
}

.about-hero__lede.js-reveal-section {
	transition-delay: 650ms;
}

.about-hero__eyebrow {
	margin: 0;
	font-size: var(--wp--custom--font-size--display-sm);
	line-height: 1;
	color: var(--wp--custom--color--brand-primary);
}

.about-hero__title {
	margin: 0;
	font-size: var(--wp--custom--font-size--display-lg);
	line-height: 1.1;
	letter-spacing: var(--wp--custom--letter-spacing--none);
	color: var(--wp--custom--color--text-primary);
}

.about-hero__title mark,
.about-hero__title .has-brand-color {
	background: none;
	color: var(--wp--custom--color--brand-primary);
}

.about-hero__lede {
	max-width: 60ch;
	margin: 0;
	font-size: var(--wp--custom--font-size--body-md);
	line-height: 1.625;
	color: var(--wp--custom--color--text-secondary);
}

@media (min-width: 900px) {

	.about-hero {
		align-items: center;
		padding: 160px var(--wp--custom--container--gutter-desktop);
	}

	.about-hero__inner {
		gap: var(--wp--preset--spacing--48);
	}

	.about-hero__eyebrow {
		font-size: var(--wp--custom--font-size--display-md);
	}

	.about-hero__title {
		font-size: var(--wp--custom--font-size--display-2-xl);
		line-height: var(--wp--custom--line-height--display-lg);
	}

	.about-hero__lede {
		max-width: 760px;
		font-size: var(--wp--custom--font-size--body-lg);
		line-height: 1.556;
	}
}

/* -------------------------------------------------------------------------
 * Story
 * ---------------------------------------------------------------------- */

.about-story {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
	max-width: none;
	padding: 80px var(--wp--preset--spacing--24);
	background-color: var(--wp--custom--color--bg-primary);
}

.about-story__col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.about-story__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--12);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--custom--font-size--label-md);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--ultra-wide);
	color: var(--wp--custom--color--brand-primary);
}

.about-story__title {
	margin: 0;
	font-size: var(--wp--custom--font-size--display-md);
	line-height: 1.1;
	color: var(--wp--custom--color--text-primary);
}

.about-story__title mark,
.about-story__title .has-brand-color {
	background: none;
	color: var(--wp--custom--color--brand-primary);
}

.about-story__tagline {
	margin: var(--wp--preset--spacing--12) 0 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--custom--font-size--label-lg);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--custom--color--brand-primary);
}

.about-story__text {
	margin: 0;
	font-size: var(--wp--custom--font-size--body-md);
	line-height: 1.625;
	color: var(--wp--custom--color--text-tertiary);
}

.about-story__text + .about-story__text {
	margin-top: var(--wp--preset--spacing--16);
}

.about-story__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--color--bg-secondary);
}

.about-story__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {

	.about-story {
		flex-direction: row;
		align-items: center;
		gap: 80px;
		padding: 160px var(--wp--custom--container--gutter-desktop);
	}

	.about-story__col {
		flex: 1 0 0;
		min-width: 0;
		gap: var(--wp--preset--spacing--32);
	}

	.about-story__title {
		font-size: var(--wp--custom--font-size--display-xl);
		line-height: var(--wp--custom--line-height--display-sm);
	}

	.about-story__text {
		font-size: var(--wp--custom--font-size--body-md);
	}

	.about-story__text + .about-story__text {
		margin-top: var(--wp--preset--spacing--24);
	}

	.about-story__image {
		flex: 1 0 0;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
 * Values
 * ---------------------------------------------------------------------- */

.about-values {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
	padding: 80px var(--wp--preset--spacing--24);
	background-color: var(--wp--custom--color--bg-tertiary);
	border-top: 1px solid var(--wp--custom--color--stroke-muted);
	border-bottom: 1px solid var(--wp--custom--color--stroke-muted);
}

.about-values__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

.about-values__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--custom--font-size--label-md);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--ultra-wide);
	color: var(--wp--custom--color--brand-primary);
}

.about-values__title {
	margin: 0;
	font-size: var(--wp--custom--font-size--display-md);
	line-height: 1.1;
	color: var(--wp--custom--color--text-primary);
}

.about-values__title mark,
.about-values__title .has-brand-color {
	background: none;
	color: var(--wp--custom--color--brand-primary);
}

.about-values__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	width: 100%;
}

.about-values__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--24);
	border: 1px solid var(--wp--custom--color--stroke-muted);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--color--bg-secondary);
}

.about-values__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.about-values__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--font-size--heading-xl);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--custom--color--brand-primary);
}

.about-values__icon {
	display: flex;
	color: var(--wp--custom--color--brand-primary);
}

.about-values__icon .boxara-icon {
	width: 24px;
	height: 24px;
}

.about-values__card-title {
	margin: 0 0 var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--custom--font-size--body-sm);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--custom--color--text-primary);
}

.about-values__card-desc {
	margin: 0;
	font-size: var(--wp--custom--font-size--body-sm);
	line-height: 1.625;
	color: var(--wp--custom--color--text-tertiary);
}

@media (min-width: 900px) {

	.about-values {
		gap: var(--wp--preset--spacing--48);
		padding: 100px var(--wp--custom--container--gutter-desktop);
	}

	.about-values__title {
		font-size: var(--wp--custom--font-size--display-lg);
	}

	.about-values__row {
		flex-direction: row;
		gap: var(--wp--preset--spacing--24);
	}

	.about-values__card {
		flex: 1 0 0;
		min-width: 0;
		gap: var(--wp--preset--spacing--24);
		padding: var(--wp--preset--spacing--32);
	}

	.about-values__card-title {
		font-size: var(--wp--custom--font-size--body-sm);
	}

	.about-values__card-desc {
		font-size: var(--wp--custom--font-size--body-md);
	}
}

/* -------------------------------------------------------------------------
 * Team
 * ---------------------------------------------------------------------- */

.about-team {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
	padding: 80px var(--wp--preset--spacing--24);
	background-color: var(--wp--custom--color--bg-primary);
}

.about-team__heading {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

.about-team__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--custom--font-size--label-md);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--ultra-wide);
	color: var(--wp--custom--color--brand-primary);
}

.about-team__title {
	margin: 0;
	font-size: var(--wp--custom--font-size--display-md);
	line-height: 1.1;
	color: var(--wp--custom--color--text-primary);
}

.about-team__title mark,
.about-team__title .has-brand-color {
	background: none;
	color: var(--wp--custom--color--brand-primary);
}

.about-team__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	width: 100%;
}

.about-team__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--stroke-muted);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--custom--color--bg-secondary);
}

.about-team__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--custom--color--bg-elevated);
}

.about-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-team__photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	color: var(--wp--custom--color--stroke-warm);
}

.about-team__photo-placeholder .boxara-icon {
	width: 64px;
	height: 64px;
}

.about-team__details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
	padding: var(--wp--preset--spacing--24);
}

.about-team__id {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
}

.about-team__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--custom--font-size--heading-xl);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--custom--color--text-primary);
}

.about-team__role {
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--custom--color--brand-primary);
}

.about-team__bio {
	margin: 0;
	font-size: var(--wp--custom--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--custom--color--text-muted);
}

@media (min-width: 900px) {

	.about-team {
		gap: var(--wp--preset--spacing--48);
		padding: 160px var(--wp--custom--container--gutter-desktop);
	}

	.about-team__title {
		font-size: var(--wp--custom--font-size--display-lg);
	}

	.about-team__row {
		flex-direction: row;
		gap: var(--wp--preset--spacing--32);
	}

	.about-team__card {
		flex: 1 0 0;
		min-width: 0;
		flex-direction: row;
		align-items: center;
	}

	.about-team__photo {
		flex-shrink: 0;
		width: 260px;
		height: 340px;
		aspect-ratio: auto;
	}

	.about-team__details {
		gap: var(--wp--preset--spacing--16);
		padding: var(--wp--preset--spacing--32);
	}

	.about-team__bio {
		font-size: var(--wp--custom--font-size--body-md);
		line-height: 1.625;
	}
}

/* -------------------------------------------------------------------------
 * CTA
 * ---------------------------------------------------------------------- */

.about-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--32);
	max-width: none;
	padding: 80px var(--wp--preset--spacing--24);
	text-align: center;
	background-color: var(--wp--custom--color--bg-primary);
}

.about-cta__icon {
	display: flex;
	width: 64px;
	height: 64px;
}

.about-cta__icon .boxara-icon {
	width: 64px;
	height: 64px;
}

.about-cta__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
}

.about-cta__title {
	max-width: 20ch;
	margin: 0;
	font-size: var(--wp--custom--font-size--heading-xl);
	line-height: 1.1;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	color: var(--wp--custom--color--text-primary);
}

.about-cta__lede {
	max-width: 46ch;
	margin: 0;
	font-size: var(--wp--custom--font-size--body-sm);
	line-height: 1.6;
	color: var(--wp--custom--color--text-tertiary);
}

.about-cta__buttons {
	width: 100%;
	max-width: 400px;
}

.about-cta__buttons .wp-block-button {
	width: 100%;
}

.about-cta__buttons .wp-block-button__link {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--custom--font-size--label-md);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--base);
	line-height: 1.34;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.about-cta__buttons .is-style-fill .wp-block-button__link {
	border: 1px solid var(--wp--custom--color--brand-primary);
	background-color: var(--wp--custom--color--brand-primary);
	color: var(--wp--preset--color--white);
}

.about-cta__buttons .is-style-fill .wp-block-button__link:hover,
.about-cta__buttons .is-style-fill .wp-block-button__link:focus-visible {
	border-color: var(--wp--custom--color--brand-dark);
	background-color: var(--wp--custom--color--brand-dark);
}

@media (min-width: 900px) {

	.about-cta {
		gap: var(--wp--preset--spacing--48);
		padding: 160px var(--wp--custom--container--gutter-desktop);
	}

	.about-cta__title {
		max-width: none;
		font-size: var(--wp--custom--font-size--display-md);
	}

	.about-cta__lede {
		max-width: 600px;
		font-size: var(--wp--custom--font-size--body-md);
		line-height: 1.625;
	}

	.about-cta__buttons {
		width: auto;
	}

	.about-cta__buttons .wp-block-button {
		width: auto;
	}

	.about-cta__buttons .wp-block-button__link {
		width: auto;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		font-size: var(--wp--custom--font-size--label-lg);
		letter-spacing: var(--wp--custom--letter-spacing--wide);
	}
}