/**
 * CCI Split Card
 *
 * A two-column card: a full-bleed image on one side and a stacked content
 * column on the other (heading with a gold gradient highlight, optional
 * description, an optional divider, a check list, an optional italic
 * disclaimer and an optional CTA). The List, Divider and CTA Button sub-blocks
 * reuse the markup and stylesheets of the CCI List, CCI Divider and CCI CTA
 * Button widgets (pulled in via get_style_depends()); the rules below only add
 * the card layout and the few contextual overrides the design needs.
 *
 * Responsive:
 *  - Desktop (>1024px): image and content side by side, image full height.
 *  - Tablet / Mobile (<=1024px): image becomes a banner on top, content below.
 *
 * Defaults match the Figma design; Elementor controls override colours,
 * spacing and typography via selectors.
 */
.cci-split-card {
	--cci-sc-bg: #010f22;
	--cci-sc-border-color: #23345a;
	--cci-sc-border-width: 0.5px;
	--cci-sc-radius: 16px;
	--cci-sc-media-basis: 50%;      /* image column width (desktop) */
	--cci-sc-media-fade: 30%;       /* how much of the image edge fades into the bg */
	--cci-sc-media-h: 260px;       /* image banner height (stacked; responsive) */
	--cci-sc-content-gap: 40px;
	--cci-sc-overlap: 0px;          /* how far content pulls up over the image (stacked) */

	display: flex;
	align-items: stretch;
	width: 100%;
	background-color: var(--cci-sc-bg);
	border: var(--cci-sc-border-width) solid var(--cci-sc-border-color);
	border-radius: var(--cci-sc-radius);
	overflow: hidden;
	box-sizing: border-box;
}

.cci-split-card *,
.cci-split-card *::before,
.cci-split-card *::after {
	box-sizing: border-box;
}

.cci-split-card--media-right {
	flex-direction: row-reverse;
}

/* -------- Media: an image column that fills the full card height. The image
   fits inside it per Image Fit — Contain shows the whole image (any spare space
   blends with the card background), Cover fills and may crop. -------- */
.cci-split-card__media {
	position: relative;
	z-index: 0;
	flex: 0 0 var(--cci-sc-media-basis);
	max-width: var(--cci-sc-media-basis);
	align-self: stretch;
	overflow: hidden;
	background-color: var(--cci-sc-bg);
}

.cci-split-card__media-picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* The image covers its column, filling the full height (cropping as needed).
   !important guards theme resets on the box size. */
.cci-split-card__media-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}

/* Gradient blend on the content-side edge of the image column. */
.cci-split-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(1, 15, 34, 0) calc(100% - var(--cci-sc-media-fade)),
		var(--cci-sc-bg) 100%
	);
}

.cci-split-card--media-right .cci-split-card__media::after {
	background: linear-gradient(
		to left,
		rgba(1, 15, 34, 0) calc(100% - var(--cci-sc-media-fade)),
		var(--cci-sc-bg) 100%
	);
}

/* -------- Content: sits beside the image. -------- */
.cci-split-card__content {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-width: 0;
	margin-top: calc(-1 * var(--cci-sc-overlap));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--cci-sc-content-gap);
	padding: 48px 48px 48px 40px;
}

.cci-split-card--media-right .cci-split-card__content {
	padding: 48px 40px 48px 48px;
}

/* -------- Heading (reuses the CCI Split Heading title markup: Title 1 solid,
   Title 2 CCI gold gradient). The values below are the base fallback; the
   Heading style controls override typography, colour and the Title 2 style. -- */
.cci-split-card__heading {
	margin: 0;
}

.cci-split-card__heading .cci-split-heading__title-line {
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 36px;
	line-height: 48px;
}

.cci-split-card__heading .cci-split-heading__title-line--one {
	color: #ffffff;
}

/* Title 2's gold gradient comes from the reused Split Heading stylesheet
   (.cci-split-heading__title-line--two); the Title 2 Style Type control can
   switch it to a solid colour. */

/* -------- Description -------- */
.cci-split-card__description {
	margin: 0;
	color: #d3d3d3;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.cci-split-card__description p {
	margin: 0;
}

.cci-split-card__description p + p {
	margin-top: 0.5em;
}

/* Bold runs in the description default to white (overridable via the Bold Text
   Colour control), matching the list's white-bold treatment. */
.cci-split-card .cci-split-card__description strong,
.cci-split-card .cci-split-card__description b {
	color: #ffffff;
}

/* -------- Divider (reuses .cci-divider) -------- */
.cci-split-card__divider {
	width: 100%;
}

/* -------- List (reuses .cci-list) — greyed body with white bold runs. -------- */
.cci-split-card .cci-list__text {
	color: #d3d3d3;
}

.cci-split-card .cci-list__text strong,
.cci-split-card .cci-list__text b {
	color: #ffffff;
}

/* -------- Disclaimer -------- */
.cci-split-card__disclaimer {
	margin: 0;
	color: #d3d3d3;
	font-family: "Inter", sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

.cci-split-card__disclaimer p {
	margin: 0;
}

/* -------- CTA (reuses .cci-cta-button) -------- */
/* Width + position are driven by align-self on the CTA block (set by the CTA
   Alignment control): "stretch" makes a full-width button; left / center /
   right let the block hug the button and align it, with the sub description
   centred beneath. Everything inside is 100% wide so it follows the block. */
.cci-split-card__cta {
	align-self: flex-start;
	max-width: 100%;
}

/* Width + sizing/typography for the embedded CTA button are shared across the
   card widgets in cci-cta-button.css; only the bg / hover colour is per-card. */

/* Solid default — skipped when the gold gradient (.bg-gold) is applied so the
   shared theme gradient shows through instead of a solid fill. */
.cci-split-card__cta .cci-cta-button__button:not(.bg-gold) {
	background-color: #0048b4;
}

.cci-split-card__cta .cci-cta-button__button:not(.bg-gold):hover,
.cci-split-card__cta .cci-cta-button__button:not(.bg-gold):focus {
	background-color: #003a90;
	color: #ffffff;
}

/* The gold gradient button (.bg-gold) and its hover treatment are handled once
   in the shared cci-cta-button.css, since this CTA reuses that markup. */

.cci-split-card__cta .cci-cta-button__sub-description {
	margin-top: 16px;
	color: #ffffff;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

/* -------- Tablet / Mobile: image becomes a top banner that fades into the
   content below (vertical overlap). -------- */
@media (max-width: 1024px) {
	.cci-split-card,
	.cci-split-card--media-right {
		flex-direction: column;
		--cci-sc-content-gap: 28px;
		--cci-sc-overlap: 40px;
	}

	/* The image becomes a fixed-height top banner and fills it (cover), with the
	   content stacked below and pulled up by the Image Overlap offset. */
	.cci-split-card__media {
		flex: 0 0 auto;
		align-self: stretch;
		width: 100%;
		max-width: none;
		height: var(--cci-sc-media-h);
	}

	/* Keep the image crisp, then fade it into the background at the bottom edge
	   where the content overlaps it. */
	.cci-split-card__media::after,
	.cci-split-card--media-right .cci-split-card__media::after {
		background: linear-gradient(
			to bottom,
			rgba(1, 15, 34, 0) 62%,
			var(--cci-sc-bg) 100%
		);
	}

	.cci-split-card__content,
	.cci-split-card--media-right .cci-split-card__content {
		margin-left: 0;
		margin-right: 0;
		justify-content: flex-start;
		padding: 8px 32px 32px;
	}

	.cci-split-card__heading .cci-split-heading__title-line {
		font-size: 32px;
		line-height: 40px;
	}

	/* Tablet + mobile disclaimer step-down. */
	.cci-split-card__disclaimer {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (max-width: 767px) {
	.cci-split-card {
		--cci-sc-content-gap: 24px;
	}

	.cci-split-card__media {
		height: var(--cci-sc-media-h);
	}

	.cci-split-card__content,
	.cci-split-card--media-right .cci-split-card__content {
		padding: 8px 24px 24px;
	}

	.cci-split-card__heading .cci-split-heading__title-line {
		font-size: 28px;
		line-height: 36px;
	}
}