/*
 * About Contact page "about" section — US-ABO-02
 *
 * A light band placed under the dark hero, so adjacent sections differ in both
 * layout and background. Desktop: asymmetric 40/60 split (photo | story) plus
 * a 3-column card grid · Tablet (<=1024px): single-column split, 2-column
 * cards · Mobile (<=640px): fully stacked, 1-column cards, full-width button.
 *
 * Every colour / type / spacing / shadow / motion value comes from
 * assets/css/design-tokens.css — no hardcoded hex values, no arbitrary px.
 */

.amber-about-sec {
	position: relative;
	padding: var(--space-section) 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.amber-about-sec__container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}

/* ---------- asymmetric 40/60 split: photo | story ---------- */

.amber-about-sec__split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(var(--space-8), 5vw, var(--space-16));
	align-items: center;
}

/* photo column */

.amber-about-sec__figure {
	position: relative;
	margin: 0;
}

.amber-about-sec__figure::before {
	content: "";
	position: absolute;
	inset: auto auto calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
	width: 45%;
	height: 55%;
	border-radius: var(--radius-lg);
	background: var(--color-highlight-100);
	z-index: 0;
}

.amber-about-sec__photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.amber-about-sec__caption {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	max-width: 80%;
	margin: calc(-1 * var(--space-8)) 0 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.amber-about-sec__caption-text {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	color: var(--color-text);
}

.amber-about-sec__caption-meta {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* story column */

.amber-about-sec__copy {
	max-width: var(--measure);
}

.amber-about-sec__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.amber-about-sec__heading {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tighter);
	color: var(--color-text);
}

.amber-about-sec__lead {
	margin: 0 0 var(--space-4);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: var(--color-text);
}

.amber-about-sec__body {
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
}

.amber-about-sec__points {
	display: grid;
	gap: var(--space-4);
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
}

.amber-about-sec__point {
	position: relative;
	padding-left: var(--space-8);
}

.amber-about-sec__point::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: var(--space-4);
	height: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-accent-500);
	box-shadow: 0 0 0 var(--space-1) var(--color-accent-100);
}

.amber-about-sec__point-label {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	color: var(--color-text);
}

.amber-about-sec__point-note {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.amber-about-sec__cta-wrap {
	margin: 0;
}

.amber-about-sec__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--color-primary-600);
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	text-decoration: none;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.amber-about-sec__btn:hover,
.amber-about-sec__btn:focus {
	background: var(--color-primary-700);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.amber-about-sec__btn:focus-visible {
	outline: 2px solid var(--color-accent-500);
	outline-offset: 2px;
}

/* ---------- card grid: what we brew ---------- */

.amber-about-sec__cards-block {
	margin-top: clamp(var(--space-12), 6vw, var(--space-20));
}

.amber-about-sec__cards-head {
	max-width: var(--container-narrow);
	margin: 0 0 var(--space-10);
}

.amber-about-sec__cards-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tight);
	color: var(--color-text);
}

.amber-about-sec__cards-intro {
	margin: 0;
	color: var(--color-text-muted);
}

.amber-about-sec__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.amber-about-sec__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
	/* Moderate motion (DESIGN.md): the cards rise in, staggered by
	   --amber-as-delay set per card in the template. CSS only — no scroll JS
	   on a static page.
	   Fill mode is `backwards`, not `both`, on purpose: backwards holds the
	   transparent `from` state through the stagger delay, then releases the
	   properties when the animation ends. A filled-forwards animation would
	   keep winning over the :hover rule below and kill the card lift. */
	animation: amber-as-rise var(--duration-slow) var(--ease-out) backwards;
	animation-delay: var(--amber-as-delay, 0ms);
}

@keyframes amber-as-rise {
	from {
		opacity: 0;
		transform: translateY(var(--space-4));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.amber-about-sec__card:hover,
.amber-about-sec__card:focus-within {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.amber-about-sec__card-media {
	overflow: hidden;
	background: var(--color-surface-raised);
}

.amber-about-sec__card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.amber-about-sec__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
}

.amber-about-sec__card-kicker {
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-highlight-700);
}

.amber-about-sec__card-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: var(--letter-tight);
	color: var(--color-text);
}

.amber-about-sec__card-text {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ---------- dark surface roles (tokens, never hardcoded light panels) ---------- */

[data-theme="dark"] .amber-about-sec {
	background: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-about-sec__heading,
[data-theme="dark"] .amber-about-sec__lead,
[data-theme="dark"] .amber-about-sec__point-label,
[data-theme="dark"] .amber-about-sec__cards-title,
[data-theme="dark"] .amber-about-sec__card-title,
[data-theme="dark"] .amber-about-sec__caption-text {
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-about-sec__body,
[data-theme="dark"] .amber-about-sec__point-note,
[data-theme="dark"] .amber-about-sec__cards-intro,
[data-theme="dark"] .amber-about-sec__card-text,
[data-theme="dark"] .amber-about-sec__caption-meta {
	color: var(--color-text-muted-on-dark);
}

[data-theme="dark"] .amber-about-sec__eyebrow {
	color: var(--color-accent-300);
}

[data-theme="dark"] .amber-about-sec__card-kicker {
	color: var(--color-highlight-300);
}

[data-theme="dark"] .amber-about-sec__card,
[data-theme="dark"] .amber-about-sec__caption {
	border-color: var(--color-primary-700);
	background: var(--color-surface-dark);
}

[data-theme="dark"] .amber-about-sec__card-media {
	background: var(--color-primary-700);
}

[data-theme="dark"] .amber-about-sec__figure::before {
	background: var(--color-primary-700);
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.amber-about-sec__split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.amber-about-sec__copy {
		max-width: none;
	}

	.amber-about-sec__photo {
		aspect-ratio: 16 / 9;
	}

	.amber-about-sec__heading {
		font-size: var(--text-2xl);
	}

	.amber-about-sec__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
	.amber-about-sec__figure::before {
		display: none;
	}

	.amber-about-sec__photo {
		aspect-ratio: 4 / 3;
	}

	.amber-about-sec__caption {
		max-width: none;
		margin: var(--space-4) 0 0;
	}

	.amber-about-sec__heading {
		font-size: var(--text-xl);
	}

	.amber-about-sec__lead {
		font-size: var(--text-base);
	}

	.amber-about-sec__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.amber-about-sec__card-body {
		padding: var(--space-5);
	}

	.amber-about-sec__btn {
		width: 100%;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.amber-about-sec__btn,
	.amber-about-sec__card {
		transition: none;
	}

	/* No entrance animation at all: the delay must never leave a card
	   holding the animation's transparent `from` state. */
	.amber-about-sec__card {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.amber-about-sec__btn:hover,
	.amber-about-sec__btn:focus,
	.amber-about-sec__card:hover,
	.amber-about-sec__card:focus-within {
		transform: none;
	}
}