/**
 * Gallery page closing CTA section — US-GAL-03.
 *
 * Every colour, size, radius, shadow and duration is a design token from
 * assets/css/design-tokens.css. Overlays and hairlines need per-channel alpha,
 * which a hex token cannot express, so the channel triplets of the tokens they
 * stand for are declared once below and consumed as rgba(var(--…), a) — that
 * keeps them on the warm brand ramp instead of drifting to an off-palette blue.
 *
 * Band colour sits between the light photo grid above and the near-black footer
 * below (primary-800/900 over the shop photo), so no two adjacent sections share
 * a background. Scoped entirely under .amber-cta-gal so nothing can leak into
 * the header navigation or any other section.
 */

.amber-cta-gal {
	/* Channel triplets of the tokens named in each comment. */
	--amber-cta-gal-shade: 44, 48, 54; /* --color-primary-900 #2c3036 */
	--amber-cta-gal-shade-soft: 68, 73, 82; /* --color-primary-800 #444952 */
	--amber-cta-gal-ink: 28, 25, 23; /* --color-neutral-900 #1c1917 */
	--amber-cta-gal-tint: 250, 250, 249; /* --color-neutral-50 #fafaf9 */

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: var(--space-section) 0;
	background-color: var(--color-primary-800);
	color: var(--color-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

/* Full-bleed shop photo, darkened enough to keep the headline legible. */
.amber-cta-gal--has-backdrop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--amber-cta-gal-backdrop);
	background-size: cover;
	background-position: center;
	opacity: 0.32;
}

.amber-cta-gal--has-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		105deg,
		rgba(var(--amber-cta-gal-shade), 0.96) 0%,
		rgba(var(--amber-cta-gal-shade), 0.82) 48%,
		rgba(var(--amber-cta-gal-shade-soft), 0.68) 100%
	);
}

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

/* --- Layout: asymmetric 60/40 split (DESIGN.md) ------------------------- */

.amber-cta-gal__split {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--space-12);
	align-items: center;
}

/* Moderate motion (feature brief: 50/100) — a short staggered rise on load.
   Pure CSS keyframes, so this section still ships no JavaScript and cannot
   touch the theme's global controls. Switched off in the reduced-motion block
   at the foot of this file. */
.amber-cta-gal__copy,
.amber-cta-gal__card {
	animation: amber-cta-gal-rise var(--duration-slow) var(--ease-out) both;
}

.amber-cta-gal__card {
	animation-delay: var(--duration-fast);
}

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

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

/* --- Copy column -------------------------------------------------------- */

.amber-cta-gal__copy {
	min-width: 0;
}

.amber-cta-gal__eyebrow {
	margin: 0 0 var(--space-4);
	color: var(--color-highlight-300);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: var(--letter-wide);
	line-height: var(--leading-snug);
	text-transform: uppercase;
}

.amber-cta-gal__heading {
	margin: 0 0 var(--space-5);
	max-width: 22ch;
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: var(--letter-tighter);
	line-height: var(--leading-tight);
}

.amber-cta-gal__body {
	margin: 0 0 var(--space-8);
	max-width: 52ch;
	color: var(--color-text-muted-on-dark);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
}

/* --- Buttons ------------------------------------------------------------ */

.amber-cta-gal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0 0 var(--space-8);
}

.amber-cta-gal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: var(--letter-normal);
	line-height: var(--leading-snug);
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default),
		color var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default),
		transform var(--duration-normal) var(--ease-default);
}

.amber-cta-gal__btn--primary {
	background-color: var(--color-neutral-50);
	border-color: var(--color-neutral-50);
	color: var(--color-primary-800);
	box-shadow: var(--shadow-md);
}

.amber-cta-gal__btn--primary:hover,
.amber-cta-gal__btn--primary:focus-visible {
	background-color: var(--color-highlight-200);
	border-color: var(--color-highlight-200);
	color: var(--color-primary-900);
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

.amber-cta-gal__btn--secondary {
	background-color: transparent;
	border-color: var(--color-primary-300);
	color: var(--color-text-on-dark);
}

.amber-cta-gal__btn--secondary:hover,
.amber-cta-gal__btn--secondary:focus-visible {
	background-color: rgba(var(--amber-cta-gal-tint), 0.12);
	border-color: var(--color-neutral-50);
	transform: translateY(-2px);
}

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

.amber-cta-gal__note {
	margin: 0;
	max-width: 46ch;
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-accent-500);
	color: var(--color-primary-200);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

/* --- Photo + details card ---------------------------------------------- */

.amber-cta-gal__card {
	min-width: 0;
	overflow: hidden;
	background-color: var(--color-surface-dark);
	border: 1px solid rgba(var(--amber-cta-gal-tint), 0.14);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
}

.amber-cta-gal__media {
	position: relative;
	margin: 0;
}

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

.amber-cta-gal__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--space-6) var(--space-5) var(--space-3);
	background: linear-gradient(
		to top,
		rgba(var(--amber-cta-gal-ink), 0.88) 0%,
		rgba(var(--amber-cta-gal-ink), 0) 100%
	);
	color: var(--color-neutral-50);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: var(--letter-normal);
	line-height: var(--leading-snug);
}

.amber-cta-gal__panel {
	padding: var(--space-6) var(--space-5);
}

.amber-cta-gal__panel-title {
	margin: 0 0 var(--space-4);
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
}

.amber-cta-gal__rows {
	margin: 0;
}

.amber-cta-gal__row {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) 0;
	border-top: 1px solid rgba(var(--amber-cta-gal-tint), 0.12);
}

.amber-cta-gal__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.amber-cta-gal__row-label {
	color: var(--color-primary-200);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.amber-cta-gal__row-value {
	margin: 0;
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 500;
	letter-spacing: var(--letter-normal);
}

.amber-cta-gal__panel-tagline {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-4);
	border-top: 1px solid rgba(var(--amber-cta-gal-tint), 0.12);
	color: var(--color-highlight-300);
	font-size: var(--text-sm);
	font-style: italic;
	line-height: var(--leading-snug);
}

/* --- Tablet (DESIGN.md: stack the split, card stays full width) --------- */

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

	.amber-cta-gal__heading {
		max-width: 28ch;
		font-size: var(--text-2xl);
	}

	.amber-cta-gal__card {
		max-width: 560px;
	}
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 640px) {
	.amber-cta-gal__split {
		gap: var(--space-8);
	}

	.amber-cta-gal__heading {
		max-width: none;
		font-size: var(--text-xl);
	}

	.amber-cta-gal__body {
		margin-bottom: var(--space-6);
		font-size: var(--text-base);
	}

	.amber-cta-gal__actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: var(--space-6);
	}

	.amber-cta-gal__btn {
		width: 100%;
	}

	.amber-cta-gal__card {
		max-width: none;
	}

	.amber-cta-gal__photo {
		aspect-ratio: 3 / 2;
	}

	.amber-cta-gal__panel {
		padding: var(--space-5) var(--space-4);
	}
}

/* --- Dark mode ----------------------------------------------------------
 * The band is dark by design, but its surfaces must still come from the dark
 * tokens when [data-theme="dark"] is set on the document — otherwise the card
 * and the deep-shade overlay stay keyed to the light palette and the section
 * reads a shade lighter than the page it sits on.
 */

[data-theme="dark"] .amber-cta-gal {
	--amber-cta-gal-shade: 28, 25, 23; /* --color-neutral-900 #1c1917 */
	--amber-cta-gal-shade-soft: 41, 37, 36; /* --color-surface-dark #292524 */

	background-color: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-cta-gal__heading,
[data-theme="dark"] .amber-cta-gal__panel-title,
[data-theme="dark"] .amber-cta-gal__row-value {
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-cta-gal__body,
[data-theme="dark"] .amber-cta-gal__note,
[data-theme="dark"] .amber-cta-gal__row-label {
	color: var(--color-text-muted-on-dark);
}

[data-theme="dark"] .amber-cta-gal__eyebrow,
[data-theme="dark"] .amber-cta-gal__panel-tagline {
	color: var(--color-accent-300);
}

[data-theme="dark"] .amber-cta-gal__card {
	background-color: var(--color-surface-dark);
	border-color: var(--color-border-dark);
}

[data-theme="dark"] .amber-cta-gal__row,
[data-theme="dark"] .amber-cta-gal__panel-tagline {
	border-top-color: var(--color-border-dark);
}

[data-theme="dark"] .amber-cta-gal__row:first-child {
	border-top: 0;
}

[data-theme="dark"] .amber-cta-gal__btn--secondary {
	border-color: var(--color-primary-400);
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-cta-gal__btn--secondary:hover,
[data-theme="dark"] .amber-cta-gal__btn--secondary:focus-visible {
	background-color: var(--color-surface-dark-elevated);
	border-color: var(--color-primary-200);
}

/* --- Reduced motion: tokens already zero the durations, drop the lift --- */

@media (prefers-reduced-motion: reduce) {
	.amber-cta-gal__btn:hover,
	.amber-cta-gal__btn:focus-visible {
		transform: none;
	}

	.amber-cta-gal__copy,
	.amber-cta-gal__card {
		animation: none;
		opacity: 1;
		transform: none;
	}
}