/*
 * kp-features-2x2.css — Section "4 avantages clés" (Pour les Agences bloc 5).
 *
 * Figma : 10132:1418. Cadre extérieur border 2px rgba(255,255,255,.2) padding
 * 2px. 4 cards 400x demi en damier alternées crème/dark :
 *   topLeft  : crème (#f7e6d7), icône orange bg, texte noir
 *   topRight : dark (#121212), icône glass bg, texte blanc
 *   botLeft  : dark (#121212), icône glass bg, texte blanc
 *   botRight : crème (#f7e6d7), icône orange bg, texte noir
 * Bordures internes 2px rgba(255,255,255,.2) entre cards dark.
 * Auto-enqueué (kp-pattern-features-2x2, dep kp-tokens).
 */

.kp-features-2x2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--kp-section-padding-y, 9.375rem) var(--kp-section-padding-x, 4.5rem);
	background: var(--kp-color-surface-deep);
}

.kp-features-2x2__frame {
	width: 100%;
	padding: 2px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0;
}

.kp-features-2x2__card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2.875rem; /* 46px = espace fixe head ↔ copy (divisé /2 vs init), garde alignement entre les 4 cards via min-height du titre */
	height: 25rem; /* 400 */
	padding: 2.5rem 2rem; /* 40 / 32 */
}

/* Damier : 1 + 4 crème, 2 + 3 dark. */
.kp-features-2x2__card--cream {
	background: #f7e6d7;
	color: #000;
}

.kp-features-2x2__card--dark {
	background: #121212;
	color: var(--kp-color-text-inverse);
}

/* Bordures internes (séparation visuelle) sur les cards dark. */
.kp-features-2x2__card:nth-child(2) {
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.kp-features-2x2__card:nth-child(3) {
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	border-right: 2px solid rgba(255, 255, 255, 0.2);
}

.kp-features-2x2__head {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Icône carrée 60px (8px padding, slot 32px). */
.kp-features-2x2__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem; /* 60 */
	height: 3.75rem;
	padding: 0.5rem; /* 8 */
	border-radius: var(--kp-radius-sm, 4px);
}

.kp-features-2x2__card--cream .kp-features-2x2__icon {
	background: var(--kp-color-brand-primary);
}

.kp-features-2x2__card--dark .kp-features-2x2__icon {
	background: rgba(255, 255, 255, 0.1);
}

.kp-features-2x2__icon svg {
	width: 2rem; /* 32 */
	height: 2rem;
	color: #fff; /* drives fill / stroke via currentColor in icon paths */
	display: block;
}

.kp-features-2x2__title {
	margin: 0;
	min-height: 4rem; /* 64px = réserve 2 lignes → descriptions alignées quel que soit le nb de lignes du titre */
	font-family: var(--kp-font-sans);
	font-size: 2rem; /* 32 */
	font-weight: var(--kp-font-weight-regular);
	line-height: 1;
	letter-spacing: -0.05em;
}

.kp-features-2x2__copy {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: 1.25rem; /* 20 */
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.3;
	letter-spacing: 0.004em;
}

.kp-features-2x2__card--cream .kp-features-2x2__copy {
	color: rgba(0, 0, 0, 0.85);
}

.kp-features-2x2__card--dark .kp-features-2x2__copy {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
	.kp-features-2x2__frame {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.kp-features-2x2__card {
		height: auto;
		min-height: 22rem;
	}
	.kp-features-2x2__card:nth-child(2),
	.kp-features-2x2__card:nth-child(3),
	.kp-features-2x2__card:nth-child(4) {
		border-top: 2px solid rgba(255, 255, 255, 0.2);
		border-bottom: 0;
		border-left: 0;
		border-right: 0;
	}
	.kp-features-2x2__title {
		font-size: 1.75rem;
	}
}