/**
 * Checklist — «Who We Are Looking For» на странице Distributors (ТЗ V4, п. 7.1).
 *
 * Макета секции нет: собрана из приёмов сайта — шапка как у advantages
 * (mono-надзаголовок акцентом, H2 display 52/30), пункт — белая плашка
 * со скруглением 14 и знаком в акцентном квадрате 48 (как иконка карточки
 * advantages). Десктоп — шапка слева, пункты справа; мобильный — колонкой.
 *
 * @package AJ1MOTO.COM
 */

.checklist {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-light);
}

.checklist__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-40);
	align-items: start;
}

.checklist__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.checklist__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.checklist__title {
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.checklist__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.checklist__item {
	display: flex;
	align-items: center;
	gap: var(--space-20);
	padding: var(--space-16) var(--space-20);
	border-radius: var(--radius-14);
	font-size: var(--fs-18);
	line-height: var(--lh-140);
	color: var(--color-dark);
	background: var(--color-white);
}

.checklist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(48 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-accent-30);
	border-radius: var(--radius-10);
	color: var(--color-accent);
	background: var(--color-accent-10);
}

.checklist__glyph {
	width: calc(24 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
}

@media (max-width: 767px) {
	.checklist {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.checklist__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-30);
	}

	.checklist__head {
		gap: var(--space-15);
	}

	.checklist__eyebrow {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	.checklist__title {
		font-size: var(--fs-30);
	}

	.checklist__list {
		gap: var(--space-10);
	}

	.checklist__item {
		gap: var(--space-15);
		padding: var(--space-15);
		border-radius: var(--radius-12);
		font-size: var(--fs-15);
	}

	.checklist__icon {
		width: calc(40 / var(--vw-base) * 100vw);
	}

	.checklist__glyph {
		width: calc(20 / var(--vw-base) * 100vw);
	}
}