/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Footer CTA — blocks/footer-cta/style.css
 *
 * Auto-enqueued by WordPress via "style": "file:./style.css" in block.json.
 * Never enqueue this manually in functions.php.
 *
 * Depends on tokens from css/global.css.
 * =====================================================================================================================
 */

.footer-cta {
	--fc-banner-pad   : 6rem 2rem;
	--fc-banner-inner : 48rem;      /* 768px ÷ 16 */
	--fc-lh-eyebrow   : 1.222;      /* 1.375rem at 1.125rem — only this block uses it */
	--fc-btn-width    : 19.1875rem; /* 307px ÷ 16 */
	--fc-btn-height   : 3.5rem;     /* 56px ÷ 16 */

	/* Scrim strength over the banner photograph. Measured against the
	   supplied artwork: white text sits at only 2.67:1 over its brightest
	   area unaided, and 0.35 lifts every band past 4.6:1 — enough for the
	   1.125rem eyebrow, not just the heading. Raise it if a darker photo
	   ever goes in; don't lower it without re-checking. */
	--fc-scrim        : 0.35;

	--fc-footer-pad   : 4rem 2rem;
}


/*
 * CTA banner
 * ---------------------------------------------------------------------------------------------------------------------
 */

.footer-cta__banner {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: var(--fc-banner-pad);
	overflow: hidden;
	background-color: var(--clr-cocoa);   /* holds the text legible before the photo paints */
}

.footer-cta__banner-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A warm scrim rather than flat black — black drains the photograph's
   colour, which is the only reason it is there. */
.footer-cta__banner-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--clr-cocoa);
	opacity: var(--fc-scrim);
}

.footer-cta__banner-inner {
	position: relative;
	box-sizing: border-box;
	max-width: var(--fc-banner-inner);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-cta__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--clr-white);
	text-align: center;
	font-family: var(--ff-body);
	font-size: var(--fs-body-md);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--fc-lh-eyebrow);
}

.footer-cta__heading {
	margin: 0;
	color: var(--clr-white);
	text-align: center;
	font-family: var(--ff-heading);
	font-size: clamp(1.875rem, 4vw, var(--fs-heading-md));
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading-tight);
	letter-spacing: var(--ls-heading-wide);
	text-wrap: balance;
}

.footer-cta__body {
	margin: 1rem 0 0;
	color: var(--clr-white);
	text-align: center;
	font-family: var(--ff-body);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-regular);
	line-height: var(--lh-loose);
}

.footer-cta__body > :first-child { margin-top: 0; }
.footer-cta__body > :last-child  { margin-bottom: 0; }

.footer-cta__body p {
	margin: 0 0 0.75rem;
	color: inherit;
	font: inherit;
}


/*
 * Banner button — the inverse of the pill used elsewhere
 * ---------------------------------------------------------------------------------------------------------------------
 * Rest is what every other block uses as its hover: the white-to-peach
 * gradient with a dark label. Against a warm photograph a solid copper pill
 * would half-disappear into the background, so the pale fill is doing real
 * work here rather than being a stylistic choice.
 *
 * That leaves hover needing somewhere brighter to go, and the only thing
 * brighter than the pale end of that gradient is solid white. So hover
 * resolves the gradient into a flat white pill and the label picks up the
 * copper — the button appears to "settle" rather than change colour, and a
 * flat white shape is the one thing guaranteed to read against any photo.
 */

.footer-cta a.footer-cta__button {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;   /* 10px ÷ 16 */

	margin-top: 2rem;
	inline-size: min(100%, var(--fc-btn-width));
	min-height: var(--fc-btn-height);
	padding: 0.5rem 1.75rem;

	border: 0 solid transparent;
	border-radius: var(--radius-pill);
	overflow: hidden;

	background: var(--gradient-cta-hover);
	color: var(--clr-charcoal-black);

	font-family: var(--ff-body);
	font-size: var(--fs-btn);
	font-style: normal;
	font-weight: var(--fw-medium);
	line-height: 1.1875rem;   /* 19px ÷ 16 */
	letter-spacing: var(--ls-btn);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;

	transition:
		transform var(--motion-med) var(--ease-out-soft),
		box-shadow var(--motion-med) var(--ease-out-soft),
		color var(--motion-med) var(--ease-in-out-soft);
}

/* Solid white cross-fades in over the gradient. */
.footer-cta a.footer-cta__button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: var(--clr-white);
	transition: opacity var(--motion-med) var(--ease-in-out-soft);
}

.footer-cta a.footer-cta__button:hover::before,
.footer-cta a.footer-cta__button:focus-visible::before {
	opacity: 1;
}

.footer-cta a.footer-cta__button:hover,
.footer-cta a.footer-cta__button:focus-visible {
	/* 4.62:1 on white — passes AA for this size. */
	color: var(--clr-copper-deep);
	transform: translateY(-1px);
	/* A soft white halo separates the pill from a busy photograph without
	   adding another shape to the design. */
	box-shadow:
		0 0 0 0.25rem rgb(255 255 255 / 0.25),
		0 0.75rem 1.5rem -0.5rem rgb(0 0 0 / 0.35);
}

.footer-cta a.footer-cta__button:active {
	transform: translateY(0);
}

.footer-cta a.footer-cta__button:focus-visible {
	outline: 2px solid var(--clr-white);
	outline-offset: 4px;
}

.footer-cta__button-label {
	position: relative;
	color: inherit;
}

.footer-cta__button-icon {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 1rem;
	height: 1rem;
	overflow: hidden;
}

.footer-cta__button-icon svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 1rem;
	height: 1rem;
}

.footer-cta__button-icon svg:last-child {
	transform: translateX(-170%);
}

@media (prefers-reduced-motion: no-preference) {

	.footer-cta__button-icon svg {
		transition: transform var(--motion-med) var(--ease-out-soft);
	}

	.footer-cta__button:hover .footer-cta__button-icon svg:first-child,
	.footer-cta__button:focus-visible .footer-cta__button-icon svg:first-child {
		transform: translateX(170%);
	}

	.footer-cta__button:hover .footer-cta__button-icon svg:last-child,
	.footer-cta__button:focus-visible .footer-cta__button-icon svg:last-child {
		transform: translateX(0);
		transition-delay: 60ms;
	}

}


/*
 * Footer
 * ---------------------------------------------------------------------------------------------------------------------
 */

.footer-cta__footer {
	background: var(--clr-espresso);
}

.footer-cta__footer-inner {
	box-sizing: border-box;
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--fc-footer-pad);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

.footer-cta__footer-brand {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.footer-cta__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 11.25rem;   /* 180px ÷ 16 */
}

.footer-cta__footer-body {
	color: var(--clr-white);
	/* NOTE: --ff-heading (Lora) here and on the link columns below is carried
	   over from the original stylesheet. Body copy and navigation in a serif
	   looks like a copy-paste slip rather than a decision — worth checking
	   with the designer. Swap both to --ff-body if so. */
	font-family: var(--ff-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: 1.625;   /* 1.625rem at 1rem */
}

.footer-cta__footer-body p {
	margin: 0 0 0.5rem;
	color: inherit;
	font: inherit;
}

.footer-cta__footer-body > :last-child { margin-bottom: 0; }

.footer-cta__footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.footer-cta__footer-column {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.footer-cta__column-heading {
	margin: 0 0 0.5rem;
	color: var(--clr-white);
	font-family: var(--ff-heading);
	font-size: var(--fs-body-md);
	font-style: normal;
	font-weight: var(--fw-bold);
	line-height: normal;
}

.footer-cta__column-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.footer-cta .footer-cta__column-links a {
	color: var(--clr-white);
	font-family: var(--ff-heading);
	font-size: var(--fs-body);
	font-style: normal;
	font-weight: var(--fw-regular);
	line-height: 1.625;
	text-decoration: none;
	transition: color var(--motion-med) var(--ease-in-out-soft);
}

.footer-cta .footer-cta__column-links a:hover,
.footer-cta .footer-cta__column-links a:focus-visible {
	color: var(--clr-peach);
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}


/*
 * Copyright bar
 * ---------------------------------------------------------------------------------------------------------------------
 */

.footer-cta__copyright {
	padding: 1.5rem 2rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.footer-cta__copyright-inner {
	box-sizing: border-box;
	max-width: var(--container-width);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	color: rgb(255 255 255 / 0.6);
	font-family: var(--ff-heading);
	font-size: 0.875rem;   /* 14px ÷ 16 */
	line-height: 1.5;
}

.footer-cta__copyright-text {
	flex-shrink: 0;
}

.footer-cta__copyright-links {
	text-align: right;
}

.footer-cta__copyright-links p {
	margin: 0;
}

.footer-cta .footer-cta__copyright-inner a {
	color: rgb(255 255 255 / 0.6);
	text-decoration: none;
	transition: color var(--motion-med) var(--ease-in-out-soft);
}

.footer-cta .footer-cta__copyright-inner a:hover,
.footer-cta .footer-cta__copyright-inner a:focus-visible {
	color: var(--clr-white);
	text-decoration: underline;
}


/*
 * Responsive
 * ---------------------------------------------------------------------------------------------------------------------
 */

@media only screen and (max-width: 56.25em) {   /* 900px */

	.footer-cta {
		--fc-footer-pad: 3rem 1.5rem;
	}

	.footer-cta__footer-inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.footer-cta__footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media only screen and (max-width: 37.5em) {   /* 600px */

	.footer-cta {
		--fc-banner-pad: 4rem 1.5rem;
	}

	.footer-cta__footer-columns {
		grid-template-columns: 1fr;
	}

	.footer-cta__heading br {
		display: none;
	}

	.footer-cta__copyright-inner {
		justify-content: flex-start;
	}

	.footer-cta__copyright-links {
		text-align: left;
	}

}