/* ── Partner CTA 2026 ────────────────────────────────────────────────────────
 *
 * Light-background two-column section: content left, white card panel right.
 * Selectors: .vig-partner-cta-2026__* (BEM, section-scoped).
 * No .vg-partner selectors here — this is the purpose-built 2026 layout.
 *
 * Self-contained: the CTA button (.vig-partner-cta-2026__cta) is defined
 * locally so the section renders correctly on any page, not just the front
 * page (homepage.css button rules are scoped to body.home and won't apply
 * elsewhere).
 * ─────────────────────────────────────────────────────────────────────────── */

/* Section root */
.vig-partner-cta-2026 {
	background: var(--color-bg-light);
	padding: 80px 32px;
}

/* Inner wrapper: two-column grid */
.vig-partner-cta-2026__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

/* Single-column modifier: panel absent — collapse to full-width content */
.vig-partner-cta-2026--single .vig-partner-cta-2026__inner {
	grid-template-columns: 1fr;
	max-width: 760px;
}

/* ── Left column ── */

/* Orange-on-light: use --color-secondary-700 (#A85107) — the design-system's
 * darker orange variant that passes WCAG AA on light backgrounds.
 * --color-secondary-500 (#F48113) fails contrast; -700 preserves brand
 * feel while being accessible. Confirmed by Ben 2026-05-17. Pattern for
 * all light-bg uppercase eyebrows/labels going forward.
 */
.vig-partner-cta-2026__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-secondary-700);
	margin: 0;
}

.vig-partner-cta-2026__heading {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-primary-900);
	margin: 16px 0 18px;
}

/* <em> renders as accent orange, not italic, matching mockup.
 * Uses -600 (heading-accent orange): bright + AA-large on light bg. */
.vig-partner-cta-2026__heading em {
	font-style: normal;
	color: var(--color-secondary-600);
}

.vig-partner-cta-2026__body {
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-text-primary);
	max-width: 560px;
}

.vig-partner-cta-2026__body p {
	margin: 0 0 1em;
}

.vig-partner-cta-2026__body p:last-child {
	margin-bottom: 0;
}

.vig-partner-cta-2026__subline {
	margin-top: 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-text-light);
}

/* Image cropped to a cinematic band (21:9) to balance left column height
 * with the 4-item right panel. Native asset is 16:9; object-fit: cover
 * crops the vertical centre. */
.vig-partner-cta-2026__image {
	margin-top: 28px;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
}

.vig-partner-cta-2026__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Right column: panel card ── */
.vig-partner-cta-2026__panel {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: 36px 32px;
}

/* Uses -700 variant for AA contrast on light bg (see note above). */
.vig-partner-cta-2026__panel-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-secondary-700);
	margin: 0 0 18px;
}

.vig-partner-cta-2026__panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.vig-partner-cta-2026__panel-item {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--color-border);
}

.vig-partner-cta-2026__panel-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.vig-partner-cta-2026__panel-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-primary-900);
	margin: 0 0 6px;
}

.vig-partner-cta-2026__panel-copy {
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-text-primary);
	margin: 0;
}

.vig-partner-cta-2026__cta-group {
	margin-top: 24px;
}

/* ── CTA button: self-contained orange pill ─────────────────────────────── *
 * Matches the visual look of body.home .vig-btn--primary from homepage.css.
 * Defined here so the section works on any page, not just the front page.  */
.vig-partner-cta-2026__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 28px;
	border: 1px solid var(--color-secondary-500);
	border-radius: 999px;
	background: var(--color-secondary-500);
	color: var(--color-neutral-black);
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 16px 32px rgba(2, 2, 2, 0.12);
	transition:
		background-color 180ms ease-out,
		border-color 180ms ease-out,
		color 180ms ease-out,
		transform 180ms ease-out,
		box-shadow 180ms ease-out;
}

.vig-partner-cta-2026__cta:hover {
	background: #e67e0a;
	border-color: #e67e0a;
	color: var(--color-neutral-black);
	transform: translateY(-2px);
	box-shadow: 0 22px 42px rgba(6, 55, 21, 0.18);
	text-decoration: none;
}

.vig-partner-cta-2026__cta:active {
	background: #de7000;
	border-color: #de7000;
	transform: translateY(0);
	box-shadow: 0 10px 22px rgba(6, 55, 21, 0.14);
}

.vig-partner-cta-2026__cta:focus-visible {
	outline: 3px solid rgba(255, 181, 110, 0.96);
	outline-offset: 4px;
}

.vig-partner-cta-2026__note {
	margin-top: 16px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text-light);
}

/* ── Mobile breakpoint ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
	.vig-partner-cta-2026__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.vig-partner-cta-2026 {
		padding: 60px 20px;
	}
}