/* ── JPS CoreOfferings Block ─────────────────────────────────────────────── */

/* ── Section: bg-surface py-24 md:py-32 lg:py-40 ────────────────────────── */
/* bg-surface = hsl(220 14% 97%) ≈ #F5F6F8 */

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

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

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

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

.co-header-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   2.5rem; /* gap-10 */
	margin-bottom:         4rem;   /* mb-16 = 64px */
}

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

/* ── Header column: lg:col-span-6 ───────────────────────────────────────── */

.co-header-col {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.co-header-col {
		grid-column: span 6;
	}
}

/* Eyebrow margin override: mb-5 = 20px (global .eyebrow has margin:0) */
.co-eyebrow {
	margin-bottom: 1.25rem; /* mb-5 */
}

/* ── Items grid: grid-cols-1 md:grid-cols-3 gap-px bg-border border border-border */
/* Hairline divider trick: grid bg = border color, items bg = surface, gap = 1px */
/* border = #E5E7EB — confirmed against source computed styles */

.co-items-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1px;          /* gap-px */
	background-color:      var(--color-border, #E5E7EB);
	border:                1px solid var(--color-border, #E5E7EB);
}

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

/* ── Item: bg-surface hover:bg-background p-8 lg:p-12 group transition-colors */

.co-item {
	background:      #F5F6F8; /* bg-surface */
	padding:         2rem;    /* p-8 = 32px */
	display:         flex;
	flex-direction:  column;
	text-decoration: none;
	transition:      background 0.2s ease; /* transition-colors */
}

.co-item:hover {
	background: #ffffff; /* hover:bg-background */
}

@media (min-width: 1024px) {
	.co-item {
		padding: 3rem; /* lg:p-12 = 48px */
	}
}

/* ── Number: stat-numeral text-primary text-7xl lg:text-8xl mb-8 ─────────── */
/* stat-numeral base from style.css: Manrope 800, lh:0.9, ls:-0.04em, tabular-nums */

.co-item__number {
	/* Inherits stat-numeral styles via class — only overrides here */
	font-family:          var(--font-display); /* stat-numeral */
	font-weight:          800;
	line-height:          0.9;
	letter-spacing:       -0.04em;
	font-variant-numeric: tabular-nums;
	font-size:            4.5rem;  /* text-7xl = 72px */
	color:                #0A4DA2; /* text-primary */
	margin-bottom:        2rem;    /* mb-8 = 32px */
}

@media (min-width: 1024px) {
	.co-item__number {
		font-size: 6rem; /* lg:text-8xl = 96px */
	}
}

/* ── Item label: eyebrow mb-3 text-foreground ────────────────────────────── */
/* Uses eyebrow styles (Manrope 12px 600 uppercase tracking-[0.18em]) */
/* Override: text-foreground = #0B0B0F (not muted #6b7280) */

.co-item__label {
	font-family:    var(--font-display); /* eyebrow */
	font-size:      0.75rem;             /* text-xs = 12px */
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color:          #0B0B0F;             /* text-foreground override */
	margin-bottom:  0.75rem;             /* mb-3 = 12px */
}

/* ── Body: text-foreground/70 leading-relaxed ────────────────────────────── */

.co-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;
	flex-grow:   1; /* push CTA to bottom */
}

/* ── CTA: mt-8 inline-flex items-center gap-2 text-[12px] font-display
   font-semibold uppercase tracking-[0.16em] text-primary hover:text-accent ── */

.co-item__cta {
	margin-top:     2rem;     /* mt-8 = 32px */
	display:        inline-flex;
	align-items:    center;
	gap:            0.5rem;   /* gap-2 = 8px */
	font-family:    var(--font-display);
	font-size:      0.75rem;  /* text-[12px] */
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color:          #0A4DA2;  /* text-primary */
	transition:     color 0.2s ease; /* transition-colors */
}

.co-item:hover .co-item__cta {
	color: #1E6FD9; /* group-hover:text-accent */
}