/*
 * Services page closing CTA section (US-SER-03)
 *
 * A light surface band so it reads differently from the dark steps band that
 * closes the section above it. Asymmetric 40/60 split: the shop photo on the
 * left, the invitation + buttons + hours panel on the right.
 *
 * Desktop ≥1024px: two columns (40/60), photo left.
 * Tablet 640–1023px: single column, photo first at 16:9.
 * Mobile <640px: single column, buttons full width.
 *
 * Every colour, type, spacing, radius, shadow and duration value comes from
 * assets/css/design-tokens.css — no hardcoded hex values, no arbitrary pixels.
 */

.amber-cta-svc {
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	color: var(--color-text);
	font-family: var(--font-body);
}

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

.amber-cta-svc__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: center;
}

/* Moderate motion (50/100): the two columns ease up on load, the copy a beat
   after the photo. CSS only — a static page gets no JavaScript. Collapsed in
   the reduced-motion block at the foot of this file. */
.amber-cta-svc__media,
.amber-cta-svc__copy {
	animation: amber-cta-svc-rise var(--duration-slow) var(--ease-out) both;
}

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

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

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

/* ---------- media column ---------- */

.amber-cta-svc__media {
	margin: 0;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface-raised);
	box-shadow: var(--shadow-lg);
}

.amber-cta-svc__photo {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.amber-cta-svc__caption {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	background: var(--color-primary-900);
	color: var(--color-text-on-dark);
	font-size: var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
}

/* ---------- copy column ---------- */

.amber-cta-svc__eyebrow {
	margin: 0 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-accent-700);
}

.amber-cta-svc__heading {
	margin: 0;
	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);
}

.amber-cta-svc__body {
	margin: var(--space-5) 0 0;
	max-width: var(--measure);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

/* ---------- buttons ---------- */

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

.amber-cta-svc__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);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	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);
}

/* DESIGN.md: the brand slate is light, so buttons take the darker emerald
   action step for AA contrast against both the light and dark surfaces. */
.amber-cta-svc__btn--primary {
	background: var(--color-action);
	color: var(--color-on-action);
	box-shadow: var(--shadow-sm);
}

.amber-cta-svc__btn--primary:hover,
.amber-cta-svc__btn--primary:focus {
	background: var(--color-action-hover);
	box-shadow: var(--shadow-md);
}

.amber-cta-svc__btn--secondary {
	background: transparent;
	border-color: var(--color-primary-300);
	color: var(--color-primary-700);
}

.amber-cta-svc__btn--secondary:hover,
.amber-cta-svc__btn--secondary:focus {
	background: var(--color-primary-50);
	border-color: var(--color-primary-600);
}

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

/* ---------- hours / address panel ---------- */

.amber-cta-svc__panel {
	margin-top: var(--space-10);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.amber-cta-svc__panel-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: var(--letter-tight);
	color: var(--color-text);
}

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

.amber-cta-svc__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) 0;
}

.amber-cta-svc__row + .amber-cta-svc__row {
	border-top: 1px solid var(--color-border);
}

.amber-cta-svc__row-label {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--letter-wide);
	color: var(--color-text-muted);
}

.amber-cta-svc__row-value {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--color-text);
}

.amber-cta-svc__note {
	margin: var(--space-6) 0 0;
	max-width: var(--measure);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
}

/* ---------- mobile: stacked, full-width buttons ---------- */

@media (max-width: 639px) {
	.amber-cta-svc__actions {
		gap: var(--space-3);
	}

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

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

	.amber-cta-svc__heading {
		font-size: var(--text-2xl);
	}
}

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

@media (min-width: 640px) {
	.amber-cta-svc__row {
		flex-wrap: nowrap;
		align-items: baseline;
	}
}

/* ---------- desktop: 40/60 split ---------- */

@media (min-width: 1024px) {
	.amber-cta-svc__split {
		grid-template-columns: 4fr 6fr;
		gap: var(--space-16);
	}

	.amber-cta-svc__photo {
		aspect-ratio: 4 / 5;
	}

	.amber-cta-svc__heading {
		font-size: var(--text-4xl);
	}
}

/* ---------- dark theme ---------- */

[data-theme="dark"] .amber-cta-svc {
	background: var(--color-bg-dark);
	border-top-color: var(--color-primary-700);
	color: var(--color-text-on-dark);
}

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

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

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

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

[data-theme="dark"] .amber-cta-svc__row + .amber-cta-svc__row {
	border-top-color: var(--color-primary-700);
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.amber-cta-svc__btn {
		transition: none;
	}

	.amber-cta-svc__media,
	.amber-cta-svc__copy {
		animation: none;
		opacity: 1;
		transform: none;
	}
}