/* ===========================================================================
   cta-split-panel — inverted action panel inset from the container
   ---------------------------------------------------------------------------
   Scope: .vbs-cta-split-panel
   Depends on: css/tokens.css, css/base.css

   A single rounded panel wearing .vb-invert, so it reads as a deliberate block
   of brand colour dropped onto the page rather than a full-width band. Copy
   holds the left, the action pair holds the right, and a token-tinted radial
   wash plus a concentric inline SVG anchor the top-right corner.

   Below 62rem the two halves become one centred column — a CTA is the last
   thing a phone reader sees, and centring keeps the buttons on the thumb line.

   Contains no literal colour, font, size, radius, shadow or duration.
   ========================================================================= */

.vbs-cta-split-panel__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--vb-radius-lg);
	padding: clamp(2rem, 5vw, 4rem);
	box-shadow: var(--vb-shadow-pop);

	display: grid;
	gap: clamp(2rem, 4vw, 2.75rem);
	justify-items: center;
	text-align: center;

	/* Inset from the container on wide screens: a CTA panel that runs the full
	   measure stops reading as an object and starts reading as a band. */
	max-inline-size: 76rem;
	margin-inline: auto;
}

/* Corner wash. Built from the accent role via color-mix so it survives every
   preset — including Tech, where .vb-invert flips to a light surface. */
.vbs-cta-split-panel__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		120% 90% at 100% 0%,
		color-mix(in srgb, var(--vb-color-accent) 26%, transparent) 0%,
		transparent 62%
	);
}

/* --- corner ornament ------------------------------------------------------
   Pushed past the corner so the panel's own overflow does the cropping. Kept
   deliberately small: its widest arc stops short of the action column, so no
   preset ever draws a hairline through the button labels. */
.vbs-cta-split-panel__deco {
	position: absolute;
	inset-block-start: -3rem;
	inset-inline-end: -3rem;
	inline-size: clamp(8.5rem, 15vw, 13rem);
	block-size: auto;
	z-index: -1;
	opacity: 0.3;
	color: var(--vb-color-accent);
	pointer-events: none;
}

/* --- copy ----------------------------------------------------------------- */
.vbs-cta-split-panel__copy { max-inline-size: 40rem; }

.vbs-cta-split-panel__title { margin-block-start: clamp(0.875rem, 2vw, 1.25rem); }

.vbs-cta-split-panel__lead {
	margin-block-start: clamp(0.875rem, 2vw, 1.25rem);
	max-inline-size: var(--vb-max-prose);
}

/* --- actions -------------------------------------------------------------- */
.vbs-cta-split-panel__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.125rem;
	inline-size: 100%;
	max-inline-size: 24rem;
}

.vbs-cta-split-panel__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	inline-size: 100%;
}

/* Once there is room for two pills side by side, stop stretching them. */
@media (min-width: 30rem) {
	.vbs-cta-split-panel__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		inline-size: auto;
	}
}

.vbs-cta-split-panel__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	text-align: center;
}
.vbs-cta-split-panel__note-icon {
	flex: none;
	color: var(--vb-color-accent);
}

/* --- the split, from 62rem ------------------------------------------------ */
@media (min-width: 62rem) {
	.vbs-cta-split-panel__panel {
		/* The action column is sized by its buttons, not by a ratio, so the
		   pair never wraps and the copy takes whatever is left. */
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		justify-items: stretch;
		text-align: start;
		gap: clamp(2.5rem, 6vw, 5rem);
		padding-inline: clamp(2.5rem, 5vw, 4.5rem);
	}

	.vbs-cta-split-panel__actions {
		align-items: flex-end;
		max-inline-size: none;
	}
	.vbs-cta-split-panel__buttons { justify-content: flex-end; }
	.vbs-cta-split-panel__note { justify-content: flex-end; text-align: end; }
}

.vbs-cta-split-panel[data-vb-compose] .vbs-cta-split-panel__panel { padding: var(--vb-section-gap); gap: var(--vb-section-gap); }
.vbs-cta-split-panel[data-vb-layout="centered"] .vbs-cta-split-panel__panel { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: calc(var(--vb-section-gap) * 2); }
.vbs-cta-split-panel[data-vb-layout="centered"] .vbs-cta-split-panel__actions { align-items: center; }
.vbs-cta-split-panel[data-vb-layout="centered"] .vbs-cta-split-panel__buttons { justify-content: center; }
.vbs-cta-split-panel[data-vb-layout="centered"] .vbs-cta-split-panel__copy { max-inline-size: 50rem; }
.vbs-cta-split-panel[data-vb-layout="centered"] .vbs-cta-split-panel__title { margin-inline: auto; }
.vbs-cta-split-panel[data-vb-layout="centered"] .vbs-cta-split-panel__lead { margin-inline: auto; }
.vbs-cta-split-panel[data-vb-layout="banner"] > .vb-container { max-width: none; }
.vbs-cta-split-panel[data-vb-layout="banner"] .vbs-cta-split-panel__panel { max-inline-size: none; border-radius: 0; }