/* ==========================================================================
   IELTS registration support band — template-parts/home/ielts-support.php
   Also used on page-ielts-registration.php (.checklist).
   ========================================================================== */

.ielts-support__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	padding: clamp(32px, 5vw, 64px);
	border-radius: var(--r-xl);
	background:
		radial-gradient(60% 90% at 100% 0%, rgb(0 164 80 / 0.5), transparent 60%),
		linear-gradient(135deg, var(--dli-night-800), var(--dli-night-950));
	color: var(--color-on-dark);
	overflow: hidden;
}

@media (max-width: 900px) {
	.ielts-support__panel { grid-template-columns: 1fr; }
}

.ielts-support__panel h2 {
	color: #fff;
}

.ielts-support__panel .eyebrow {
	color: var(--dli-green-300);
}

.ielts-support__panel .section-lead {
	color: var(--color-on-dark-muted);
}

.ielts-support__panel .checklist .icon {
	color: var(--dli-green-300);
}

.ielts-support__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.ielts-support__steps {
	display: grid;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ielts-support__steps li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--r-lg);
	background: rgb(255 255 255 / 0.06);
	color: #fff;
	font-weight: 700;
}

.ielts-support__steps span {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dli-amber-500);
	color: var(--dli-night-950);
	font-weight: 800;
}

.ielts-support__note {
	margin: var(--s-4) auto 0;
	max-width: 760px;
	font-size: var(--fs-sm);
	text-align: center;
}