/*
 * About Contact page "team" section — US-ABO-03
 *
 * A dark band (primary-900) placed under the light About story block, so
 * adjacent sections differ in both background and layout.
 *   Desktop (>1024px): asymmetric 55/45 intro split (copy | photo),
 *                       4-column people grid, note row as copy | button.
 *   Tablet (<=1024px):  single-column intro, 2-column people grid.
 *   Mobile (<=640px):   fully stacked, 1-column grid, full-width button.
 *
 * Every colour / type / spacing / radius / shadow / motion value comes from
 * assets/css/design-tokens.css — no hardcoded hex values, no arbitrary px.
 * Motion is minimal: hover/focus transitions only, disabled under
 * prefers-reduced-motion.
 */

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

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

/* ---------- intro: asymmetric 55/45 split ---------- */

.amber-team-abo__intro {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: clamp(var(--space-8), 5vw, var(--space-16));
	align-items: center;
}

.amber-team-abo__intro-copy {
	min-width: 0;
}

.amber-team-abo__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-highlight-300);
}

.amber-team-abo__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-tight);
	color: var(--color-text-on-dark);
}

.amber-team-abo__lead {
	margin: 0;
	max-width: var(--measure);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-text-muted-on-dark);
}

/* short facts under the intro copy */

.amber-team-abo__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6) var(--space-10);
	margin: var(--space-8) 0 0;
}

.amber-team-abo__fact {
	min-width: 0;
}

.amber-team-abo__fact-label {
	margin: 0 0 var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-accent-300);
}

.amber-team-abo__fact-value {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--color-text-on-dark);
}

/* ---------- group photo ---------- */

.amber-team-abo__figure {
	position: relative;
	margin: 0;
}

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

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

.amber-team-abo__caption {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted-on-dark);
}

.amber-team-abo__caption-text {
	font-weight: 500;
	color: var(--color-text-on-dark);
}

.amber-team-abo__caption-meta {
	font-size: var(--text-xs);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-primary-300);
}

/* ---------- people grid: cards, never bare text ---------- */

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

.amber-team-abo__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--color-surface-dark);
	border: 1px solid var(--color-primary-700);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition:
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
	/* Moderate motion (DESIGN.md): the people cards rise in, staggered by
	   --amber-tm-delay set per card in the template. CSS only — a static page
	   ships no JavaScript, so there is no scroll observer here.
	   Fill mode is `backwards`, not `both`, on purpose: backwards holds the
	   transparent `from` state through the stagger delay and then releases the
	   properties, where `both` would keep winning over the :hover rule below
	   and kill the card lift. Mirrors .amber-about-sec__card. */
	animation: amber-tm-rise var(--duration-slow) var(--ease-out) backwards;
	animation-delay: var(--amber-tm-delay, 0ms);
}

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

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

.amber-team-abo__card:hover,
.amber-team-abo__card:focus-within {
	transform: translateY(-4px);
	border-color: var(--color-accent-500);
	box-shadow: var(--shadow-lg);
}

.amber-team-abo__card-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.amber-team-abo__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-12);
	height: var(--space-12);
	border-radius: var(--radius-full);
	background: var(--color-highlight-500);
	color: var(--color-primary-900);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: var(--letter-normal);
}

.amber-team-abo__card-ids {
	min-width: 0;
}

.amber-team-abo__name {
	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-on-dark);
}

.amber-team-abo__role {
	margin: var(--space-1) 0 0;
	font-size: var(--text-sm);
	color: var(--color-accent-300);
}

.amber-team-abo__bio {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted-on-dark);
}

/* signature drink strip — real image-kit photo, never an empty box */

.amber-team-abo__drink {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-primary-700);
}

.amber-team-abo__drink-img {
	flex: 0 0 auto;
	width: var(--space-12);
	height: var(--space-12);
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.amber-team-abo__drink-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.amber-team-abo__drink-label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-primary-300);
}

.amber-team-abo__drink-name {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-highlight-300);
}

/* ---------- hiring note ---------- */

.amber-team-abo__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	margin: var(--space-16) 0 0;
	padding: clamp(var(--space-6), 3vw, var(--space-10));
	background: var(--color-surface-dark);
	border: 1px solid var(--color-primary-700);
	border-radius: var(--radius-xl);
}

.amber-team-abo__note-copy {
	flex: 1 1 32ch;
	min-width: 0;
}

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

.amber-team-abo__note-text {
	margin: 0;
	max-width: var(--measure);
	font-size: var(--text-base);
	color: var(--color-text-muted-on-dark);
}

.amber-team-abo__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-8);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-accent-500);
	color: var(--color-primary-900);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	text-decoration: none;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.amber-team-abo__btn:hover,
.amber-team-abo__btn:focus {
	background: var(--color-accent-400);
	transform: translateY(-2px);
}

.amber-team-abo__btn:focus-visible,
.amber-team-abo__card a:focus-visible {
	outline: 2px solid var(--color-highlight-400);
	outline-offset: 2px;
}

/* ---------- dark surface roles ---------- */

/*
 * This band is dark in both themes, so nothing here needs rescuing from a
 * light-on-light panel. What does need handling is the band rhythm: when the
 * dark surface roles are active the About section above also paints
 * --color-bg-dark, which would merge the two sections into one flat slab. The
 * team band therefore lifts one step to --color-surface-dark and its panels to
 * --color-surface-dark-elevated, so adjacent sections still read as separate
 * bands. Every value is a token — no hardcoded colour.
 */

[data-theme="dark"] .amber-team-abo {
	background: var(--color-surface-dark);
	border-top: 1px solid var(--color-border-dark);
	border-bottom: 1px solid var(--color-border-dark);
}

[data-theme="dark"] .amber-team-abo__card,
[data-theme="dark"] .amber-team-abo__note {
	background: var(--color-surface-dark-elevated);
	border-color: var(--color-border-dark);
}

[data-theme="dark"] .amber-team-abo__drink {
	border-top-color: var(--color-border-dark);
}

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

@media (max-width: 1024px) {
	.amber-team-abo__intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.amber-team-abo__figure {
		order: -1;
	}

	.amber-team-abo__heading {
		font-size: var(--text-2xl);
	}

	.amber-team-abo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: var(--space-12);
	}

	.amber-team-abo__note {
		margin-top: var(--space-12);
	}
}

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

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

	.amber-team-abo__heading {
		font-size: var(--text-xl);
	}

	.amber-team-abo__lead {
		font-size: var(--text-base);
	}

	.amber-team-abo__facts {
		gap: var(--space-4) var(--space-6);
	}

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

	.amber-team-abo__note {
		justify-content: flex-start;
	}

	.amber-team-abo__btn {
		width: 100%;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.amber-team-abo__card,
	.amber-team-abo__btn {
		transition: none;
	}

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

	.amber-team-abo__card:hover,
	.amber-team-abo__card:focus-within,
	.amber-team-abo__btn:hover,
	.amber-team-abo__btn:focus {
		transform: none;
	}
}