/* ABOUTME: Front-end styles for the Pre-K Splitband block. */
/* ABOUTME: Two-card comparison layout with blurred decorative background. */

/* ── Section wrapper ─────────────────────────────────────────── */

.ca-upk-splitband {
	position: relative;
	overflow: hidden;
	background: #eaf3fa;
	padding: clamp(28px, 4.8vw, 72px) 0;
}

/* Blurred decorative background image.
   background-image is injected via scoped inline <style> when set. */
.ca-upk-splitband::before {
	content: "";
	position: absolute;
	inset: -60px;
	background-size: cover;
	background-position: center;
	filter: blur(6px) saturate(0.95) contrast(1.08);
	opacity: 0.09;
	transform: scale(1.04);
	pointer-events: none;
}

/* Gradient overlay for depth. */
.ca-upk-splitband::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		rgba(6, 55, 88, 0.14),
		rgba(234, 243, 250, 0.74) 55%,
		rgba(138, 183, 145, 0.10)
	);
	mix-blend-mode: multiply;
	opacity: 0.38;
	pointer-events: none;
}

/* ── Inner container ─────────────────────────────────────────── */

.ca-upk-splitband-inner {
	position: relative;
	z-index: 2;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ── Section title ───────────────────────────────────────────── */

.ca-upk-splitband-title {
	margin: 0 0 clamp(14px, 2vw, 22px);
	font-size: clamp(32px, 3.9vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-align: center;
}

/* ── Two-card grid ───────────────────────────────────────────── */

.ca-upk-splitband-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 2vw, 22px);
	align-items: stretch;
}

/* ── Individual card ─────────────────────────────────────────── */

.ca-upk-splitband-card {
	position: relative;
	border-radius: 18px;
	border: 2px solid rgba(6, 55, 88, 0.14);
	background: rgba(255, 255, 255, 0.8);
	padding: clamp(16px, 2vw, 24px);
	height: 100%;
}

/* Accent color bar across the top of each card.
   Color driven by --ca-upk-accent custom property set in markup. */
.ca-upk-splitband-card::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	top: 12px;
	height: 6px;
	border-radius: 999px;
	background: rgba(var(--ca-upk-accent, 6, 55, 88), 0.90);
	pointer-events: none;
}

/* ── Card header ─────────────────────────────────────────────── */

.ca-upk-splitband-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	padding-top: 10px;
}

/* Emoji icon badge. */
.ca-upk-splitband-card-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	border: 2px solid rgba(6, 55, 88, 0.12);
	background: rgba(var(--ca-upk-accent, 255, 255, 255), 0.24);
	flex: 0 0 auto;
}

/* Card title. */
.ca-upk-splitband-card-title {
	margin: 0;
	font-size: clamp(18px, 1.55vw, 22px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* ── Card body ───────────────────────────────────────────────── */

.ca-upk-splitband-card-body p {
	margin: 0;
	font-size: 16px;
	line-height: 1.62;
}

.ca-upk-splitband-card-body p + p {
	margin-top: 10px;
}

.ca-upk-splitband-card-body a {
	font-weight: 800;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 900px) {
	.ca-upk-splitband-cards {
		grid-template-columns: 1fr;
	}
}