/* ============================================================
   Block 03 — Боли → Решения (v4 — editorial grid, inspired by features-4)
   Clean divide-x / divide-y table, no heavy cards.
   Uses --cf-* tokens exclusively.
============================================================ */

.cfk-pains {
	background: var(--cf-bg);
	color: var(--cf-text);
	padding: var(--cf-s-16) 0;
	font-family: var(--cf-font);
}

.cfk-pains__inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 var(--cf-s-6);
}

/* Hide mobile cards on desktop */
.cfk-pains__cards { display: none; }

/* ============ GRID ============ */
.cfk-pains__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg);
	overflow: hidden;
	background: #fff;
}

/* Every cell gets thin borders via lobotomized owl */
.cfk-pains__grid > * {
	padding: var(--cf-s-6);
	border-bottom: 1px solid var(--cf-border-light);
}
/* Vertical divider: every solution cell (even child) */
.cfk-pains__grid > *:nth-child(even) {
	border-left: 1px solid var(--cf-border-light);
}
/* Last row: no bottom border */
.cfk-pains__grid > *:nth-last-child(-n+2) { border-bottom: none; }

/* ---- Column headers ---- */
.cfk-pains__col-head {
	display: flex;
	align-items: center;
	gap: var(--cf-s-2);
	font-size: var(--cf-text-12);
	font-weight: var(--cf-w-black);
	text-transform: uppercase;
	letter-spacing: 1.6px;
	background: var(--cf-bg-alt);
}
.cfk-pains__col-head svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.cfk-pains__col-head--pain { color: var(--cf-red); }
.cfk-pains__col-head--solution { color: var(--cf-green); }

/* ---- Content cells ---- */
.cfk-pains__cell {
	display: flex;
	align-items: flex-start;
	gap: var(--cf-s-3);
	transition: background 0.2s;

	opacity: 0;
	transform: translateY(8px);
	animation: cfk-p-in 0.35s var(--cf-ease) forwards;
	animation-delay: var(--d, 0ms);
}
@keyframes cfk-p-in { to { opacity: 1; transform: none; } }

.cfk-pains__cell:hover { background: var(--cf-bg-alt); }

/* Num badge (pain) */
.cfk-pains__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 11px;
	font-weight: var(--cf-w-black);
	color: var(--cf-red);
	border: 1.5px solid rgba(226, 75, 74, 0.35);
	border-radius: 50%;
	flex-shrink: 0;
	line-height: 1;
	margin-top: 1px;
}

.cfk-pains__cell--pain p {
	margin: 0;
	font-size: var(--cf-text-14);
	font-weight: var(--cf-w-medium);
	color: var(--cf-text-muted);
	line-height: 1.5;
}

/* Check badge (solution) */
.cfk-pains__check {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--cf-green);
	margin-top: 1px;
}

.cfk-pains__cell--solution p {
	margin: 0;
	font-size: var(--cf-text-14);
	font-weight: var(--cf-w-semi);
	color: var(--cf-text);
	line-height: 1.5;
}

/* ============ MOBILE ============ */
@media (max-width: 767px) {
	.cfk-pains { padding: var(--cf-s-10) 0; }
	.cfk-pains__inner { padding: 0 var(--cf-s-5); }

	.cfk-pains__grid { display: none; }
	.cfk-pains__cards {
		display: flex;
		flex-direction: column;
		gap: 0;
		border: 1px solid var(--cf-border);
		border-radius: var(--cf-radius-lg);
		overflow: hidden;
		background: #fff;
	}

	.cfk-pains__card {
		display: grid;
		grid-template-columns: 1fr;
		border-bottom: 1px solid var(--cf-border-light);

		opacity: 0;
		transform: translateY(8px);
		animation: cfk-p-in 0.35s var(--cf-ease) forwards;
		animation-delay: var(--d, 0ms);
	}
	.cfk-pains__card:last-child { border-bottom: none; }

	/* Pain */
	.cfk-pains__card-pain {
		display: flex;
		align-items: flex-start;
		gap: var(--cf-s-3);
		padding: var(--cf-s-4) var(--cf-s-4) var(--cf-s-2);
	}
	.cfk-pains__card-x {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--cf-red);
		opacity: 0.7;
		margin-top: 1px;
	}
	.cfk-pains__card-pain p {
		margin: 0;
		font-size: var(--cf-text-13);
		font-weight: var(--cf-w-medium);
		color: var(--cf-text-light);
		line-height: 1.45;
	}

	/* Arrow — subtle */
	.cfk-pains__card-arrow {
		display: flex;
		justify-content: center;
		padding: 0;
	}
	.cfk-pains__card-arrow svg {
		width: 14px;
		height: 14px;
		color: var(--cf-border);
	}

	/* Solution */
	.cfk-pains__card-solution {
		display: flex;
		align-items: flex-start;
		gap: var(--cf-s-3);
		padding: var(--cf-s-2) var(--cf-s-4) var(--cf-s-4);
	}
	.cfk-pains__card-ok {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: var(--cf-green);
		margin-top: 1px;
	}
	.cfk-pains__card-solution p {
		margin: 0;
		font-size: var(--cf-text-14);
		font-weight: var(--cf-w-semi);
		color: var(--cf-text);
		line-height: 1.45;
	}
}