/*
 * LAU home - closing CTA banner support layer.
 *
 * The flat ink colour, other colours, padding and every gap come from block
 * attributes and theme.json presets. Only what Gutenberg has no control for
 * lives here:
 * the bronze glow, its stacking, the secondary button's outline-to-solid swap
 * and the reveal.
 *
 * Every selector is scoped to .lau-cta, so nothing here can reach the header,
 * the hero or the other sections.
 */

/*
 * Flat, uniform background, no gradient or glow layer of any kind - a bronze
 * radial reflection was tried here and rejected: even at low stop opacities
 * it read as a visible oval halo behind the copy, which the brief now
 * explicitly rules out in favour of a plain, even surface. The colour itself
 * comes from the block's own `backgroundColor: spx-section-dark` attribute
 * (theme.json), not from a rule here - no override needed once the class
 * carries the right token.
 *
 * Padding stays pinned to literal values rather than spacing presets:
 * 88px/84px measured against the reference (previously 48px/py-12, which
 * measurement against the reference showed was too short - the reference
 * runs close to 390-400px tall at ~1365px wide, this does not).
 */
.lau-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: 88px !important;
	padding-bottom: 84px !important;
}

@media (max-width: 639.98px) {
	.lau-cta {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

.lau-cta > * {
	position: relative;
	z-index: 1;
}

/*
 * Kept in the DOM (some browsers/tooling assume a section's decorative hooks
 * exist) but stripped of anything that could paint: no content, not
 * rendered, no background. This is what replaced the bronze radial glow.
 */
.lau-cta::before,
.lau-cta::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.lau-cta__intro > * {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Secondary button ---------- */

/*
 * The outline button fills solid paper on hover, mirroring the same swap the
 * hero's own WhatsApp button already uses. Preset colour classes are emitted
 * with `!important`, so the swap needs the same weight to win.
 */
.lau-cta__whatsapp .wp-block-button__link {
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

.lau-cta__whatsapp .wp-block-button__link:hover,
.lau-cta__whatsapp .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--spx-paper) !important;
	color: var(--wp--preset--color--spx-ink) !important;
}

/* ---------- Reveal ---------- */

/*
 * Scroll-driven, so it needs no JavaScript, and guarded twice: browsers
 * without `animation-timeline` never run it and show the content as it is,
 * and a reduced-motion preference opts out. The content is therefore never
 * hidden by a timeline that failed to resolve.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lau-cta__intro,
		.lau-cta__actions {
			animation: lau-cta-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		@keyframes lau-cta-reveal {
			from {
				opacity: 0;
				transform: translateY(1.25rem);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}