/**
 * Homepage Why Choose Us section (Phase 3.4)
 */

.jawharet-home-why {
	background: var(--color-off-white, #f6f8fa);
	padding-block: var(--space-12, 3rem);
}

.jawharet-home-why__inner {
	width: min(100%, var(--container-max, 75rem));
	margin-inline: auto;
	padding-inline: var(--container-padding, 1rem);
}

.jawharet-home-why__header {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
	margin-block-end: var(--space-10, 2.5rem);
}

.jawharet-home-why__eyebrow {
	margin: 0 0 var(--space-2, 0.5rem);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.02em;
	color: var(--color-teal, #0d9488);
}

.jawharet-home-why__title {
	margin: 0;
	font-size: clamp(var(--font-size-xl, 1.75rem), 2.4vw, var(--font-size-2xl, 2.25rem));
	font-weight: var(--font-weight-bold, 700);
	line-height: var(--line-height-tight, 1.25);
	color: var(--color-navy, #142d3e);
}

.jawharet-home-why__subtitle {
	margin: var(--space-3, 0.75rem) 0 0;
	font-size: var(--font-size-md, 1.125rem);
	line-height: var(--line-height-relaxed, 1.75);
	color: var(--color-text-muted, #5a6b76);
}

.jawharet-home-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.jawharet-home-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-6, 1.5rem);
	}
}

@media (min-width: 1024px) {
	.jawharet-home-why__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-6, 1.5rem);
	}
}

.jawharet-home-why__item {
	display: flex;
	min-width: 0;
}

.jawharet-why-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 100%;
	background: var(--color-white, #fff);
	border: 1px solid var(--color-border, #d8e3e8);
	border-radius: var(--radius-lg, 1rem);
	padding: var(--space-5, 1.25rem);
	box-shadow: var(--shadow-sm, 0 1px 2px rgb(20 45 62 / 0.06));
	transition: box-shadow var(--transition-base, 220ms ease), border-color var(--transition-base, 220ms ease);
}

.jawharet-why-card:hover,
.jawharet-why-card:focus-within {
	box-shadow: var(--shadow-md, 0 8px 24px rgb(20 45 62 / 0.08));
	border-color: color-mix(in srgb, var(--color-teal, #0d9488) 25%, var(--color-border, #d8e3e8));
}

.jawharet-why-card__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-block-end: var(--space-4, 1rem);
	border-radius: var(--radius-md, 0.5rem);
	background: color-mix(in srgb, var(--color-teal, #0d9488) 12%, var(--color-white, #fff));
	color: var(--color-teal, #0d9488);
}

.jawharet-why-card__icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.jawharet-why-card__title {
	margin: 0;
	font-size: var(--font-size-md, 1.0625rem);
	font-weight: var(--font-weight-semibold, 600);
	line-height: var(--line-height-snug, 1.4);
	color: var(--color-navy, #142d3e);
}

.jawharet-why-card__desc {
	margin: var(--space-3, 0.75rem) 0 0;
	font-size: var(--font-size-sm, 0.9375rem);
	line-height: var(--line-height-relaxed, 1.65);
	color: var(--color-text-muted, #5a6b76);
	flex: 1;
}