/* CTA card — notched, image right. Pattern: patterns/cta-card.php.
 *
 * Every rule is scoped under .infinitus-section--cta-card so it cannot reach
 * another section, the global footer card, or the legacy ACF blocks.
 *
 * THIS IS THE FOOTER CARD'S CONSTRUCTION, PORTED. Drawn the same way
 * assets/scss/global/_footer-cta.scss draws it, because both are the same comp
 * frame and the client asked for this one to match that one. Read that file for
 * the provenance of each number; the comments here cover what had to CHANGE.
 *
 * ⚡ THREE DECORATIVE LAYERS FROM TWO ELEMENTS. The footer carries an <img> for
 * its backdrop, which frees both of the card's pseudo-elements. A pattern must not
 * carry a decorative image an editor can see and delete, so the backdrop takes
 * .cta-card__card::before, the scrim ::after, and the glow moves to
 * .cta-card__inner::before.
 *
 * THE PAINT ORDER IS WHAT THAT MOVE HAS TO PRESERVE: backdrop, scrim, glow, copy.
 * .cta-card__inner is z-index 2, so everything in its subtree — including a
 * z-index: -1 pseudo-element — paints above the card's own ::before and ::after.
 * Getting it backwards is not academic: the scrim over the glow tints the left
 * third of the ellipses toward Neutral 900.
 *
 * ⚡ THE ARTWORK FILES ARE THE FOOTER'S, shared rather than copied, so swapping an
 * asset moves both cards together.
 *
 * ⚡ THE PICTURE USES THE FOOTER'S OWN MASK. cta-collage-mask.svg is a STEP, not a
 * chamfer: two blocks offset diagonally, so the picture reads as two overlapping
 * frames of one photograph. A first pass approximated it with 45-degree chamfers
 * on the same two corners, reasoning that the real step would crop an arbitrary
 * upload badly; the client looked at it against the footer and said no.
 *
 * ⚑ THE MASK IS ASPECT-LOCKED at 286:288, and _footer-cta.scss records that a
 * portrait or panoramic replacement "would crop through the notch".
 * `object-fit: cover` at the mask's aspect is what holds that — an upload of any
 * shape is cropped to 286:288 first, so the step always lands where it was drawn.
 * A very tall or very wide source loses more of itself; that is inherent to the
 * mask, not to this implementation. */

.infinitus-section--cta-card {
	/* Named once, with provenance, the same way _footer-cta.scss names them.
	   copy-measure   605px — the node's text column.
	   media-width    286px — the intrinsic width of the footer's collage, kept so
	                  the two cards' pictures are the same size.
	   notch          the 45-degree cut across the top-right corner. Figma
	                  measures 103.16 x 96.97 on a 1240 card; squared to a true 45
	                  degrees and made fluid, because the file has no tablet or
	                  mobile frame for this band.
	   backdrop-bleed pushes the blurred edges outside the card so the feathering
	                  never enters frame. Figma dodges this by rendering the source
	                  at 1543x1094 for a 1240x383 hole.
	   pad-*          THE CARD'S PADDING, held as properties rather than written
	                  on the card, because the two overlay pseudo-elements have to
	                  cancel it with negative insets to cover the whole card. One
	                  source, so a padding change cannot leave an overlay behind. */
	--cta-card-copy-measure: 37.8125rem;
	--cta-card-media-width: 17.875rem;
	--cta-card-notch: clamp(2.5rem, 7.8vw, 6.25rem);
	--cta-card-backdrop-blur: 15px;
	--cta-card-backdrop-bleed: 3rem;
	--cta-card-glow-blur: 2rem;
	--cta-card-pad-block: var(--wp--preset--spacing--sp-8);
	--cta-card-pad-inline: var(--wp--preset--spacing--sp-6);
}

@media (min-width: 768px) {
	.infinitus-section--cta-card {
		--cta-card-pad-block: var(--wp--preset--spacing--sp-12);
		--cta-card-pad-inline: var(--wp--preset--spacing--sp-12);
	}
}

@media (min-width: 1025px) {
	.infinitus-section--cta-card {
		--cta-card-pad-inline: var(--wp--preset--spacing--sp-24);
	}
}

/* ── The card ─────────────────────────────────────────────────────────────
 * The notch is a clip-path, which composes with border-radius as an intersection
 * — so the other three corners keep the theme's md radius.
 *
 * `isolation: isolate` gives the pseudo-elements a stacking context of their own,
 * so their z-indexes are local and cannot reach past the card. */
.infinitus-section--cta-card .cta-card__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	clip-path: polygon(
		0 0,
		calc(100% - var(--cta-card-notch)) 0,
		100% var(--cta-card-notch),
		100% 100%,
		0 100%
	);
	padding: var(--cta-card-pad-block) var(--cta-card-pad-inline);
}

/* ── 1. Blurred backdrop photograph ───────────────────────────────────────
 * The bleed enlarges the box past the card on all four sides so the blur's
 * feathered edge never enters frame. z-index 0 rather than auto: above the
 * card's own background-color, below the scrim. */
.infinitus-section--cta-card .cta-card__card::before {
	content: "";
	position: absolute;
	inset: calc(var(--cta-card-backdrop-bleed) * -1);
	z-index: 0;
	pointer-events: none;
	background-image: url("../../images/footer-cta/cta-card-background.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(var(--cta-card-backdrop-blur));
}

/* ── 2. Dark scrim ───────────────────────────────────────────────────────
 * The left-to-right gray-900 to transparent wash that keeps 32px copy legible
 * across a 605px measure without dimming the picture. Held to 22.9% and gone by
 * 59.1%, the footer's stops. */
.infinitus-section--cta-card .cta-card__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--gray-900) 22.9%,
		transparent 59.1%
	);
}

/* ── Inner row ────────────────────────────────────────────────────────────
 * Two gutters, not one. The Figma-adjacent 120px gutter only fits once the
 * card's content box can hold 605 (copy) + 120 (gutter) + 286 (picture) =
 * 1011px, which needs a viewport of 1282 with a classic scrollbar. Below that
 * the gutter drops to 48px and the copy column shrinks instead. Same arithmetic
 * and the same threshold as the footer card, so the two break together. */
.infinitus-section--cta-card .cta-card__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sp-12);
}

@media (min-width: 1282px) {
	.infinitus-section--cta-card .cta-card__inner {
		gap: var(--wp--preset--spacing--sp-30);
	}
}

/* ── 3. Blue/cyan glow ───────────────────────────────────────────────────
 * Figma draws two 222.84px ellipses behind the picture under a large layer blur.
 * Reproduced as radial-gradients so the glow survives a backdrop swap and stays
 * on palette tokens. The extents are deliberately CONTAINED and the layer is
 * translucent: in the comp most of the blue is the blurred PHOTOGRAPH, and an
 * opaque card-wide gradient reads as a flat cerulean panel instead.
 *
 * On .cta-card__inner rather than on the card — see the paint-order note in the
 * header. The negative insets cancel the card's padding so the gradient
 * percentages resolve against the CARD's box, which is what the comp's
 * percentages are measured from. */
.infinitus-section--cta-card .cta-card__inner::before {
	content: "";
	position: absolute;
	inset: calc(var(--cta-card-pad-block) * -1)
		calc(var(--cta-card-pad-inline) * -1);
	z-index: -1;
	pointer-events: none;
	opacity: 0.62;
	filter: blur(var(--cta-card-glow-blur));
	background-image: radial-gradient(
			17% 58% at 70% 58%,
			var(--color-cerulean-325) 0%,
			var(--color-cerulean-325) 30%,
			transparent 100%
		),
		radial-gradient(
			16% 52% at 90% 60%,
			var(--color-cyan-300) 0%,
			var(--color-cyan-300) 26%,
			transparent 100%
		);
}

/* ── Copy column ─────────────────────────────────────────────────────────
 * `flex: 1 1 0` + max-width, not `flex: 0 1 605px`: flex-shrink cannot act until
 * the line is over-full and the row wraps, so a basis of 605 drops the picture
 * onto its own line before shrink ever runs. This makes 605 a CEILING the column
 * grows toward. `min-width: 0` is required, or the item's automatic minimum size
 * floors the column at its longest word and the wrap comes back.
 *
 * From 768 up, not 1025: BugHerd #80 held the footer card's copy/picture split
 * through tablet, so only mobile stacks. Same call here so the two match. */
.infinitus-section--cta-card .cta-card__copy {
	flex: 1 1 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.infinitus-section--cta-card .cta-card__copy {
		flex: 1 1 0;
		min-width: 0;
		max-width: var(--cta-card-copy-measure);
	}
}

/* Desktop/H3, 32 / 38 Light — node 1256:703. Size and leading travel as a pair:
   the theme.json presets carry no companion line-height, so a size set alone
   falls back to root 1.5, i.e. a 32px heading in a 48px line box. */
.infinitus-section--cta-card .cta-card__title {
	margin: 0;
	font-size: var(--fs-h3);
	font-weight: 300;
	line-height: var(--lh-h3);
}

/* Node 1256:704 is Desktop/Body Default 20 / 30, which is the --fs-body-xl rung.
   The footer card's own lede is Body Large because its heading runs three lines
   and the lede has to clear the collage; this card's node draws one line. 16px
   under the heading is sp-4, the footer's gap. */
.infinitus-section--cta-card .cta-card__lede {
	margin: var(--wp--preset--spacing--sp-4) 0 0;
	font-size: var(--fs-body-xl);
	line-height: var(--lh-body-xl);
}

/* Node 1256:705 sits 110px down an 82px copy stack, i.e. 28px under the lede.
   sp-8 is 32 and the nearest rung, and it is what the footer uses, so the two
   cards' buttons sit at the same height. */
.infinitus-section--cta-card .cta-card__actions {
	margin-block-start: var(--wp--preset--spacing--sp-8);
}

/* ── Button ───────────────────────────────────────────────────────────────
 * The DS Dark / Primary / LG pill. Geometry comes from the shared --btn-*
 * properties, the same ones .btn.btn-lg and the footer card read, so the three
 * cannot drift. core/button supplies the white fill and the gray-900 label from
 * its palette attributes; this adds the pill radius, the LG box and the invert on
 * hover, which core has no attribute for. */
.infinitus-section--cta-card .cta-card__button .wp-block-button__link {
	padding: var(--btn-padding-block-lg) var(--btn-padding-inline-lg);
	border: var(--btn-border-width) solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	white-space: nowrap;
	transition: background-color var(--wp--custom--duration--base)
			var(--wp--custom--easing--out),
		color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
		border-color var(--wp--custom--duration--base)
			var(--wp--custom--easing--out);
}

.infinitus-section--cta-card .cta-card__button .wp-block-button__link:hover,
.infinitus-section--cta-card
	.cta-card__button
	.wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

/* :active last on purpose — both match while pressed and this is the one that
   should win. Mirrors .theme-dark .btn-primary: re-solidify rather than stay on
   the outline treatment. */
.infinitus-section--cta-card .cta-card__button .wp-block-button__link:active {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--gray-900);
	box-shadow: var(--btn-shadow-active);
}

.infinitus-section--cta-card
	.cta-card__button
	.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* ── The picture ──────────────────────────────────────────────────────────
 * 286px wide at the footer collage's own aspect, so the two cards' pictures are
 * the same size and the card's proportions survive any upload. `object-fit`
 * rather than the mask — see the ⚡ in the header. */
.infinitus-section--cta-card .cta-card__media {
	flex: 0 0 auto;
	width: min(var(--cta-card-media-width), 100%);
}

.infinitus-section--cta-card .cta-card__image {
	margin: 0;
}

/* THE FOOTER'S STEPPED COLLAGE MASK, byte for byte the same file — see the ⚡ in
 * the header. No border-radius and no clip-path: the mask IS the silhouette, and
 * a radius would round corners the step has already removed. */
.infinitus-section--cta-card .cta-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 286 / 288;
	object-fit: cover;
	-webkit-mask-image: url("../../images/footer-cta/cta-collage-mask.svg");
	mask-image: url("../../images/footer-cta/cta-collage-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ── Stacked layout ───────────────────────────────────────────────────────
 * No tablet or mobile frame exists for this band, so this is the footer card's
 * mobile behaviour: the columns stack, the picture stays right, the scrim is
 * carried further right because the copy now runs the card's full width, and the
 * glow follows the picture to the bottom-right. */
@media (max-width: 767.98px) {
	/* One item on the wrapped second line lands left under space-between; push it
	   back so the stack still reads "copy left, picture right". */
	.infinitus-section--cta-card .cta-card__media {
		margin-inline-start: auto;
	}

	.infinitus-section--cta-card .cta-card__card::after {
		background-image: linear-gradient(
			90deg,
			var(--wp--preset--color--gray-900) 60%,
			transparent 100%
		);
	}

	.infinitus-section--cta-card .cta-card__inner::before {
		background-image: radial-gradient(
				34% 12% at 72% 92%,
				var(--color-cerulean-325) 0%,
				var(--color-cerulean-325) 30%,
				transparent 100%
			),
			radial-gradient(
				30% 10% at 92% 86%,
				var(--color-cyan-300) 0%,
				var(--color-cyan-300) 26%,
				transparent 100%
			);
	}
}

/* The only movement in this band is the button's colour transition. */
@media (prefers-reduced-motion: reduce) {
	.infinitus-section--cta-card .cta-card__button .wp-block-button__link {
		transition: none;
	}
}