/* ── JPS Manufacturing Showcase Block ────────────────────────────────────── */

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

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

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

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

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

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

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

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

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

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

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

/* ── Description: lg:col-span-5 lg:col-start-8 self-end ─────────────────── */

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

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

/* ── Tiles grid: grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 ──────────────── */

.mfg-tiles-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.5rem; /* gap-6 = 24px */
}

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

@media (min-width: 1024px) {
	.mfg-tiles-grid {
		gap: 2rem; /* lg:gap-8 = 32px */
	}
}

/* ── Tile ────────────────────────────────────────────────────────────────── */

.mfg-tile {
	display:        flex;
	flex-direction: column;
}

/* ── Image wrapper: aspect-[4/3] overflow-hidden bg-near-black mb-6 ──────── */

.mfg-tile__img-wrap {
	aspect-ratio:  4 / 3;
	overflow:      hidden;
	background:    #0B0B0F;
	margin-bottom: 1.5rem; /* mb-6 = 24px */
}

/* ── Image: h-full w-full object-cover + hover scale ────────────────────── */

.mfg-tile__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 1200ms ease-out;
}

.mfg-tile__img-wrap:hover .mfg-tile__img {
	transform: scale(1.05);
}

/* ── Tile eyebrow: eyebrow global + mb-3 override ───────────────────────── */

.mfg-tile__eyebrow {
	margin-bottom: 0.75rem; /* mb-3 = 12px */
}

/* ── Tile title: Manrope 600 text-xl → lg:text-2xl tracking-tight mb-3 ──── */

.mfg-tile__title {
	font-family:   var(--font-display);
	font-weight:   600;
	font-size:     1.25rem;        /* text-xl = 20px */
	line-height:   1.3;
	letter-spacing: -0.025em;     /* tracking-tight */
	color:         #0B0B0F;
	margin:        0 0 0.75rem;   /* mb-3 = 12px */
}

@media (min-width: 1024px) {
	.mfg-tile__title {
		font-size: 1.5rem; /* lg:text-2xl = 24px */
	}
}

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

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