/**
 * Marketing › Call to Action — scoped, token-driven styles.
 * Two tones: brand (primary-filled band) and neutral (surface band).
 */

.foundry-cta {
	padding-block: var(--wp--preset--spacing--2xl, clamp(3rem, 8vw, 6rem));
	padding-inline: var(--wp--preset--spacing--lg, clamp(1.5rem, 4vw, 3rem));
}

.foundry-cta__inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--lg, 2rem);
}

.foundry-cta__content {
	flex: 1 1 30ch;
}
.foundry-cta__title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--h-2, clamp(1.75rem, 4vw, 2.75rem));
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
}
.foundry-cta__text {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.5;
	margin: var(--wp--preset--spacing--sm, 1rem) 0 0;
	max-width: 56ch;
}

.foundry-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm, 1rem);
}
.foundry-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875em 1.75em;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--base, 1rem);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.foundry-cta__btn:hover { transform: translateY(-2px); }

/* ===========================================================================
 * Background image + overlay (same field shape as foundry/hero).
 * The layers sit inside whichever element carries the tone fill — the section
 * for a band, the card for a card — so both presentations stack identically:
 * image, overlay, content. Nothing here applies unless an image is authored.
 * ======================================================================== */

.foundry-cta--has-image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.foundry-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.foundry-cta__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.foundry-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fc-overlay-color, #0b0b0b);
	opacity: var(--fc-overlay-opacity, 0.55);
	pointer-events: none;
}

/* ---- Neutral tone ---- */
.foundry-cta--surface {
	background: var(--wp--preset--color--surface, #f7f7f5);
	color: var(--wp--preset--color--contrast, #1a1a1a);
}
.foundry-cta--surface .foundry-cta__text { color: var(--wp--preset--color--muted, #555); }
.foundry-cta--surface .foundry-cta__btn--primary {
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--on-primary, #fff);
	border-color: var(--wp--preset--color--primary, #2563eb);
}
.foundry-cta--surface .foundry-cta__btn--primary:hover {
	background: var(--wp--preset--color--primary-hover, #1d4ed8);
	border-color: var(--wp--preset--color--primary-hover, #1d4ed8);
}
.foundry-cta--surface .foundry-cta__btn--secondary {
	background: var(--wp--preset--color--secondary, #1a1a1a);
	color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--secondary, #1a1a1a);
}
.foundry-cta--surface .foundry-cta__btn--outline {
	color: var(--wp--preset--color--contrast, #111);
	border-color: var(--wp--preset--color--border, #d4d4d4);
}
.foundry-cta--surface .foundry-cta__btn--outline:hover {
	border-color: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--primary, #2563eb);
}

/* ---- Brand tone (primary-filled band) ---- */
.foundry-cta--primary {
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--on-primary, #fff);
}
.foundry-cta--primary .foundry-cta__text { color: var(--wp--preset--color--on-primary, #fff); opacity: 0.9; }
/* On a brand band, the prominent button inverts to a light fill. */
.foundry-cta--primary .foundry-cta__btn--primary {
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--primary, #2563eb);
	border-color: var(--wp--preset--color--base, #fff);
}
.foundry-cta--primary .foundry-cta__btn--primary:hover { opacity: 0.92; }
.foundry-cta--primary .foundry-cta__btn--secondary {
	background: var(--wp--preset--color--secondary, #1a1a1a);
	color: var(--wp--preset--color--base, #fff);
	border-color: var(--wp--preset--color--secondary, #1a1a1a);
}
.foundry-cta--primary .foundry-cta__btn--outline {
	color: var(--wp--preset--color--on-primary, #fff);
	border-color: var(--wp--preset--color--on-primary, #fff);
}
.foundry-cta--primary .foundry-cta__btn--outline:hover {
	background: var(--wp--preset--color--on-primary, #fff);
	color: var(--wp--preset--color--primary, #2563eb);
}

/* A photo band is a dark treatment by definition: the copy goes light in BOTH
   tones, and the outline button takes the light-on-media treatment. Placed
   after both tone blocks on purpose — these match at the same specificity
   (0,2,0) as `.foundry-cta--surface .foundry-cta__text`, so source order is
   what decides. The filled variants keep their tone colours. */
.foundry-cta--has-image .foundry-cta__title,
.foundry-cta--has-image .foundry-cta__text {
	color: var(--wp--preset--color--on-primary, #fff);
}
.foundry-cta--has-image .foundry-cta__text { opacity: 0.9; }
.foundry-cta--has-image .foundry-cta__btn--outline {
	color: var(--wp--preset--color--on-primary, #fff);
	border-color: var(--wp--preset--color--on-primary, #fff);
}
.foundry-cta--has-image .foundry-cta__btn--outline:hover {
	background: var(--wp--preset--color--on-primary, #fff);
	color: var(--wp--preset--color--primary, #2563eb);
}

/* ===========================================================================
 * Card style (style = "card") — a floating, rounded card with a soft glow
 * behind it and a slow shimmer sweep. The tone fill moves from the full-width
 * band onto the card; the section itself becomes a transparent stage. The glow
 * lives on the section (::before, overflow visible) so it can spill; the
 * shimmer lives on the card (::after, clipped by the card's overflow) — kept on
 * separate elements so neither clips the other. Both reuse the theme's
 * foundry-shimmer keyframe and are disabled under prefers-reduced-motion.
 * ======================================================================== */

.foundry-cta--card {
	background: transparent;
	position: relative;
}

/* Soft radial glow centred behind the card. */
.foundry-cta--card::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(880px, 82%);
	height: 78%;
	transform: translate(-50%, -50%);
	background: radial-gradient(
		closest-side,
		rgb(from var(--wp--preset--color--primary, #2563eb) r g b / 0.30),
		transparent 74%
	);
	pointer-events: none;
	z-index: 0;
}

/* On a card, the layers live in __inner, which already clips and stacks. The
   section itself must NOT clip (the glow spills past it by design), so the
   has-image overflow rule is walked back here. */
.foundry-cta--card.foundry-cta--has-image { overflow: visible; }
.foundry-cta--card .foundry-cta__bg,
.foundry-cta--card .foundry-cta__overlay { border-radius: inherit; }

.foundry-cta--card .foundry-cta__inner {
	position: relative;
	z-index: 1;
	isolation: isolate;
	max-width: 960px;
	overflow: hidden;
	border-radius: 20px;
	padding: clamp(2rem, 5vw, 3.5rem);
	box-shadow: var(--wp--preset--shadow--lg, 0 18px 40px -12px rgb(0 0 0 / 0.18));
	/* The card centres its content by default (the band's space-between flow
	   suits a full-width strip, not a contained card). */
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.foundry-cta--card .foundry-cta__actions { justify-content: center; }

/* Relocate the tone fill onto the card. */
.foundry-cta--card.foundry-cta--surface .foundry-cta__inner {
	background: var(--wp--preset--color--surface, #f7f7f5);
	color: var(--wp--preset--color--contrast, #1a1a1a);
	border: 1px solid var(--wp--preset--color--border, #e2e2e2);
}
.foundry-cta--card.foundry-cta--primary .foundry-cta__inner {
	background: var(--wp--preset--color--primary, #2563eb);
	color: var(--wp--preset--color--on-primary, #fff);
}

/* …unless a photo is already doing that job. Must follow both tone rules: it
   matches at the same specificity (0,3,0), so source order is what decides. */
.foundry-cta--card.foundry-cta--has-image .foundry-cta__inner {
	background: transparent;
	border-color: transparent;
}

/* Shimmer sweep, clipped to the card. */
.foundry-cta--card .foundry-cta__inner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.22), transparent);
	animation: foundry-shimmer var(--foundry-shimmer-duration, 3s) ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

/* Keep the content above the shimmer. */
.foundry-cta--card .foundry-cta__content,
.foundry-cta--card .foundry-cta__actions {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.foundry-cta--card .foundry-cta__inner::after {
		animation: none;
	}
}