/* ── JPS Why Choose Us Block ─────────────────────────────────────────────── */

/* ── Section: bg-background py-24 md:py-32 lg:py-40 ────────────────────── */

.wcu-section {
	background:     #ffffff; /* bg-background */
	padding-top:    6rem;    /* py-24 = 96px */
	padding-bottom: 6rem;
}

@media (min-width: 768px) {
	.wcu-section {
		padding-top:    8rem;  /* md:py-32 = 128px */
		padding-bottom: 8rem;
	}
}

@media (min-width: 1024px) {
	.wcu-section {
		padding-top:    10rem; /* lg:py-40 = 160px */
		padding-bottom: 10rem;
	}
}

/* ── Header grid: grid-cols-1 lg:grid-cols-12 gap-10 mb-16 ──────────────── */

.wcu-header-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2.5rem; /* gap-10 = 40px */
	margin-bottom:         4rem;   /* mb-16 = 64px */
	align-items:           end;    /* so description self-end works */
}

@media (min-width: 1024px) {
	.wcu-header-grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

/* ── Header left: lg:col-span-5 ─────────────────────────────────────────── */

.wcu-header-left {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.wcu-header-left {
		grid-column: span 5; /* lg:col-span-5 */
	}
}

/* Eyebrow margin: mb-5 = 20px */
.wcu-eyebrow {
	margin-bottom: 1.25rem;
}

/* ── Description: lg:col-span-6 lg:col-start-7 self-end
   text-foreground/70 text-base lg:text-lg leading-relaxed ──────────────── */

.wcu-description {
	font-family: var(--font-body);
	font-size:   1rem;                    /* text-base = 16px */
	line-height: 1.625;                   /* leading-relaxed */
	color:       rgba(11, 11, 15, 0.70);  /* text-foreground/70 */
	margin:      0;
	align-self:  end;                     /* self-end */
}

@media (min-width: 1024px) {
	.wcu-description {
		grid-column: 7 / span 6; /* lg:col-start-7 lg:col-span-6 */
		font-size:   1.125rem;   /* lg:text-lg = 18px */
	}
}

/* ── Pillars grid: grid-cols-1 md:grid-cols-3 gap-10 lg:gap-16 ─────────── */

.wcu-pillars-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2.5rem; /* gap-10 = 40px */
}

@media (min-width: 768px) {
	.wcu-pillars-grid {
		grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
	}
}

@media (min-width: 1024px) {
	.wcu-pillars-grid {
		gap: 4rem; /* lg:gap-16 = 64px */
	}
}

/* ── Pillar item ─────────────────────────────────────────────────────────── */

.wcu-item {
	display:        flex;
	flex-direction: column;
}

/* ── Icon: h-8 w-8 text-primary mb-6 strokeWidth=1.5 ────────────────────── */

.wcu-item__icon {
	width:         2rem;    /* h-8 w-8 = 32px */
	height:        2rem;
	color:         #0A4DA2; /* text-primary */
	flex-shrink:   0;
	margin-bottom: 1.5rem;  /* mb-6 = 24px */
}

/* ── Item title: font-display font-semibold text-2xl mb-4 ───────────────── */

.wcu-item__title {
	font-family:   var(--font-display);
	font-weight:   600;      /* font-semibold */
	font-size:     1.5rem;   /* text-2xl = 24px */
	line-height:   1.3;
	color:         #0B0B0F;  /* text-foreground (inherited) */
	margin:        0 0 1rem; /* mb-4 = 16px */
}

/* ── Item body: text-foreground/70 leading-relaxed ──────────────────────── */

.wcu-item__body {
	font-family: var(--font-body);
	font-size:   1rem;                   /* text-base = 16px */
	line-height: 1.625;                  /* leading-relaxed */
	color:       rgba(11, 11, 15, 0.70); /* text-foreground/70 */
	margin:      0;
}