/**
 * WLRE Theme — Why Choose Us section.
 *
 * Centered heading + 4 icon cards in a row.
 */

.wlre-why {
	padding: var(--wlre-space-80) var(--wlre-space-100);
	background: var(--wlre-color-surface-50, #faf8f4);
}

.wlre-why__inner {
	max-width: 1240px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-32);
}

.wlre-why__heading {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 44px;
	line-height: 1.2;
	text-align: center;
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* On desktop the two spans sit inline, forming one continuous heading line. */
.wlre-why__heading-line {
	display: inline;
}

.wlre-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wlre-space-24);
}

.wlre-why__card {
	background: var(--wlre-color-white);
	border-radius: var(--wlre-radius-20);
	box-shadow: var(--wlre-shadow-card);
	padding: var(--wlre-space-32) var(--wlre-space-24);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wlre-space-24);
	text-align: center;
}

.wlre-why__icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	color: var(--wlre-color-brand-900);
	flex-shrink: 0;
}

.wlre-why__icon svg {
	width: 100%;
	height: 100%;
}

.wlre-why__card-title {
	font-family: var(--wlre-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--wlre-color-text-900);
	margin: 0;
}

/* === Responsive === */
@media (max-width: 1023px) {
	.wlre-why {
		padding: var(--wlre-space-80) var(--wlre-space-40);
	}

	.wlre-why__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.wlre-why {
		padding: var(--wlre-space-40) var(--wlre-space-16);
	}

	.wlre-why__heading {
		font-size: 32px;
	}

	.wlre-why__heading-line {
		display: block;
	}

	.wlre-why__grid {
		grid-template-columns: 1fr;
		gap: var(--wlre-space-20);
	}

	.wlre-why__card {
		flex-direction: column;
		align-items: center;
		gap: var(--wlre-space-20);
		text-align: center;
		padding: var(--wlre-space-24);
		border-radius: 16px;
	}

	.wlre-why__icon {
		width: 48px;
		height: 48px;
	}
}