/*
 * Homepage CTA section — "Cta".
 * Scoped under .amber-cta so nothing leaks into the header nav or other
 * sections. Every value comes from assets/css/design-tokens.css.
 *
 * The translucent veil / glow / card surfaces are derived from the warm-stone
 * and emerald tokens with color-mix() rather than written as literal rgba(),
 * so re-theming design-tokens.css re-themes this band too.
 *
 * Fallback strategy for engines without color-mix() (Safari < 16.2,
 * Firefox < 113): the veil keeps a flat token colour but drops to
 * --amber-cta-veil-opacity, so the shop photo still reads through instead of
 * being hidden behind an opaque panel. The decorative glow simply does not
 * paint there.
 */

.amber-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--space-section);
	background-color: var(--color-bg-dark);
	font-family: var(--font-body);
	color: var(--color-text-on-dark);

	/*
	 * Token-derived surfaces used by this section only. The veil paints
	 * either a flat --amber-cta-veil-base fill OR a --amber-cta-veil-gradient,
	 * never both, so the two never compound into an over-dark overlay.
	 * Here it is the flat fill, held back by --amber-cta-veil-opacity.
	 */
	--amber-cta-veil-strong: var(--color-neutral-900);
	--amber-cta-veil-soft: var(--color-neutral-900);
	--amber-cta-veil-base: var(--amber-cta-veil-strong);
	--amber-cta-veil-gradient: none;
	--amber-cta-veil-opacity: 0.88;
	--amber-cta-glow: transparent;
	--amber-cta-card-bg: var(--color-surface-dark);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.amber-cta {
		--amber-cta-veil-strong: color-mix(in srgb, var(--color-neutral-900) 94%, transparent);
		--amber-cta-veil-soft: color-mix(in srgb, var(--color-neutral-900) 62%, transparent);
		/*
		 * The veil holds at full strength under the copy column, then fades
		 * toward the photo on the right. Stops before the first one are
		 * clamped, so a single 48% stop gives the hold without duplication.
		 * The flat fill steps aside so only the gradient paints.
		 */
		--amber-cta-veil-base: transparent;
		--amber-cta-veil-gradient: linear-gradient(
				100deg,
				var(--amber-cta-veil-strong) 48%,
				var(--amber-cta-veil-soft) 100%
			);
		--amber-cta-veil-opacity: 1;
		--amber-cta-glow: color-mix(in srgb, var(--color-secondary-500) 22%, transparent);
		--amber-cta-card-bg: color-mix(in srgb, var(--color-surface-dark) 84%, transparent);
	}
}

/* ---------- Photo backdrop + legibility overlay ---------- */

.amber-cta__backdrop {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.amber-cta__backdrop-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.amber-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--amber-cta-veil-base);
	background-image: var(--amber-cta-veil-gradient);
	opacity: var(--amber-cta-veil-opacity);
}

/* Soft emerald glow in the corner — decorative, token-coloured. */
.amber-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -12%;
	inset-inline-end: -8%;
	width: min(32rem, 55%);
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	background-image: radial-gradient(circle, var(--amber-cta-glow) 0%, transparent 68%);
	pointer-events: none;
}

/* ---------- Layout: asymmetric 60/40 split ---------- */

.amber-cta__container {
	position: relative;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

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

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

.amber-cta__copy {
	max-width: 36rem;
}

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

.amber-cta__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-tighter);
	color: var(--color-text-on-dark);
	text-wrap: balance;
}

.amber-cta__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-on-dark);
}

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

.amber-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: clamp(var(--space-6), 3vw, var(--space-8));
}

.amber-cta__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);
	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),
		transform var(--duration-normal) var(--ease-default),
		box-shadow var(--duration-normal) var(--ease-default);
}

.amber-cta__btn--primary {
	background-color: var(--color-accent-500);
	color: var(--color-neutral-900);
	box-shadow: var(--shadow-md);
}

.amber-cta__btn--primary:hover,
.amber-cta__btn--primary:focus-visible {
	background-color: var(--color-accent-400);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.amber-cta__btn--secondary {
	background-color: transparent;
	border-color: var(--color-primary-400);
	color: var(--color-text-on-dark);
}

.amber-cta__btn--secondary:hover,
.amber-cta__btn--secondary:focus-visible {
	background-color: var(--color-primary-800);
	border-color: var(--color-primary-200);
	transform: translateY(-2px);
}

.amber-cta__btn:focus-visible,
.amber-cta__card-link:focus-visible {
	outline: 2px solid var(--color-accent-400);
	outline-offset: 2px;
}

.amber-cta__note {
	margin: var(--space-6) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	color: var(--color-text-muted-on-dark);
}

/* ---------- Visit card ---------- */

.amber-cta__card {
	padding: clamp(var(--space-6), 3vw, var(--space-8));
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-lg);
	background-color: var(--amber-cta-card-bg);
	box-shadow: var(--shadow-xl);
	backdrop-filter: blur(6px);
}

.amber-cta__card-brand {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-highlight-300);
}

.amber-cta__card-title {
	margin: 0 0 var(--space-6);
	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-cta__rows {
	margin: 0;
}

.amber-cta__row {
	display: grid;
	gap: var(--space-1);
	padding-block: var(--space-4);
	border-top: 1px solid var(--color-border-dark);
}

.amber-cta__row:first-child {
	padding-block-start: 0;
	border-top: 0;
}

.amber-cta__row-label {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-text-muted-on-dark);
}

.amber-cta__row-value {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 500;
	line-height: var(--leading-snug);
	color: var(--color-text-on-dark);
	font-variant-numeric: tabular-nums;
}

.amber-cta__card-link {
	display: inline-block;
	margin-top: var(--space-6);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--color-accent-400);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-accent-300);
	transition:
		color var(--duration-normal) var(--ease-default),
		border-color var(--duration-normal) var(--ease-default);
}

.amber-cta__card-link:hover,
.amber-cta__card-link:focus-visible {
	color: var(--color-text-on-dark);
	border-color: var(--color-text-on-dark);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.amber-cta__split {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(var(--space-8), 5vw, var(--space-12));
		align-items: start;
	}

	.amber-cta__copy {
		max-width: var(--container-narrow);
	}

	/*
	 * Stacked layout puts copy over the middle of the photo, so the veil
	 * becomes a flat full-strength fill instead of fading to the right.
	 */
	.amber-cta {
		--amber-cta-veil-base: var(--amber-cta-veil-strong);
		--amber-cta-veil-gradient: none;
	}
}

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

@media (max-width: 600px) {
	.amber-cta__body {
		font-size: var(--text-base);
	}

	.amber-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.amber-cta__btn {
		width: 100%;
	}

	.amber-cta::after {
		display: none;
	}
}

/* ---------- Dark theme ---------- */

/*
 * The band is already dark in the light theme, so dark mode only deepens the
 * veil and the card so the section keeps separating from the dark page
 * background rather than merging into it. Declared both outside and inside an
 * @supports block so [data-theme="dark"] wins the cascade either way.
 *
 * NOTE: nothing in the theme sets data-theme yet, so these rules are
 * forward-looking. They follow the convention already established by
 * cta-services.css, about-about.css, services-services.css,
 * testimonials-home.css and the features stylesheets — every section carries
 * its dark block, so whichever story adds the attribute and the toggle lights
 * them all up at once. Kept consistent here deliberately rather than leaving
 * this one section as the gap.
 */
[data-theme="dark"] .amber-cta {
	--amber-cta-veil-strong: var(--color-bg-dark);
	--amber-cta-veil-soft: var(--color-bg-dark);
	--amber-cta-card-bg: var(--color-surface-dark-elevated);
	background-color: var(--color-bg-dark);
	color: var(--color-text-on-dark);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	[data-theme="dark"] .amber-cta {
		--amber-cta-veil-strong: color-mix(in srgb, var(--color-bg-dark) 96%, transparent);
		--amber-cta-veil-soft: color-mix(in srgb, var(--color-bg-dark) 72%, transparent);
		--amber-cta-glow: color-mix(in srgb, var(--color-secondary-500) 26%, transparent);
		--amber-cta-card-bg: color-mix(in srgb, var(--color-surface-dark-elevated) 88%, transparent);
	}
}

[data-theme="dark"] .amber-cta__card {
	border-color: var(--color-neutral-600);
}

[data-theme="dark"] .amber-cta__heading,
[data-theme="dark"] .amber-cta__row-value,
[data-theme="dark"] .amber-cta__card-title {
	color: var(--color-text-on-dark);
}

[data-theme="dark"] .amber-cta__body,
[data-theme="dark"] .amber-cta__note,
[data-theme="dark"] .amber-cta__row-label {
	color: var(--color-text-muted-on-dark);
}

[data-theme="dark"] .amber-cta__btn--secondary {
	border-color: var(--color-neutral-500);
}

[data-theme="dark"] .amber-cta__btn--secondary:hover,
[data-theme="dark"] .amber-cta__btn--secondary:focus-visible {
	background-color: var(--color-surface-dark-elevated);
	border-color: var(--color-neutral-400);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.amber-cta__btn,
	.amber-cta__card-link {
		transition: none;
	}

	.amber-cta__btn--primary:hover,
	.amber-cta__btn--primary:focus-visible,
	.amber-cta__btn--secondary:hover,
	.amber-cta__btn--secondary:focus-visible {
		transform: none;
	}
}