/* =============================================================================
   Nejat Bento Grid
   .nejat-bento — 3-column bento layout
   Grid map:
     Row 1 : [Featured card — col 1-2] [Top image — col 3]
     Row 2 : [Feature card 1] [Center image — col 2, rows 2-3] [Feature card 2]
     Row 3 : [Feature card 3] [Center image continues]          [Feature card 4]
   ============================================================================= */

.nejat-bento {
	padding-top: var(--nejat-section-pad-v);
	padding-bottom: var(--nejat-section-pad-v);
	background-color: #f8f8f8;
}

.nejat-bento__inner {
	max-width: var(--nejat-max-width);
	margin: 0 auto;
	padding-left: var(--nejat-gutter);
	padding-right: var(--nejat-gutter);
}

/* ── Section header ───────────────────────────────────────────────────────── */

.nejat-bento__header {
	margin-bottom: var(--nejat-gap-lg);
}

.nejat-bento__eyebrow {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: capitalize;
	margin-bottom: 8px;
	color: #2ab3c8;
}

.nejat-bento__headline {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: #1a1a1a;
}

.nejat-bento__description {
	font-size: 16px;
	line-height: 1.75;
	color: #555555;
	margin-top: 16px;
}

.nejat-bento__description p {
	margin: 0 0 1em 0;
}

.nejat-bento__description p:last-child {
	margin-bottom: 0;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.nejat-bento__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto auto;
	gap: 16px;
}

/* ── Explicit placement ───────────────────────────────────────────────────── */

.nejat-bento__featured {
	grid-column: 1 / 3;
	grid-row: 1;
}

.nejat-bento__img-top {
	grid-column: 3;
	grid-row: 1;
}

.nejat-bento__feature-card--1 {
	grid-column: 1;
	grid-row: 2;
}

.nejat-bento__img-center {
	grid-column: 2;
	grid-row: 2 / 4;
}

.nejat-bento__feature-card--2 {
	grid-column: 3;
	grid-row: 2;
}

.nejat-bento__feature-card--3 {
	grid-column: 1;
	grid-row: 3;
}

.nejat-bento__feature-card--4 {
	grid-column: 3;
	grid-row: 3;
}

/* ── Featured card ────────────────────────────────────────────────────────── */

.nejat-bento__featured {
	background-color: #2b2b2b;
	border-radius: var(--nejat-radius);
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 240px;
}

.nejat-bento__featured-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #e8f6f8;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.nejat-bento__featured-icon i,
.nejat-bento__featured-icon svg {
	font-size: 1.125rem;
	width: 22px;
	height: 22px;
	max-width: 22px;
	max-height: 22px;
	color: #2ab3c8;
	fill: #2ab3c8;
}

.nejat-bento__featured-title {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	margin: 0 0 12px;
}

.nejat-bento__featured-desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

/* ── Image cells ──────────────────────────────────────────────────────────── */

.nejat-bento__img-top,
.nejat-bento__img-center {
	border-radius: var(--nejat-radius);
	overflow: hidden;
	line-height: 0; /* collapse inline whitespace */
}

.nejat-bento__img-top {
	min-height: 220px;
}

.nejat-bento__img-top img,
.nejat-bento__img-center img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Feature cards ────────────────────────────────────────────────────────── */

.nejat-bento__feature-card {
	background-color: #ffffff;
	border-radius: var(--nejat-radius);
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
}

.nejat-bento__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #e8f6f8;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.nejat-bento__feature-icon i,
.nejat-bento__feature-icon svg {
	font-size: 1rem;
	width: 20px;
	height: 20px;
	max-width: 20px;
	max-height: 20px;
	color: #2ab3c8;
	fill: #2ab3c8;
}

.nejat-bento__feature-title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
	margin: 0 0 10px;
}

.nejat-bento__feature-desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #555555;
	margin: 0;
}

/* ── Responsive — tablet ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.nejat-bento__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}

	/* Reset all explicit placements */
	.nejat-bento__featured,
	.nejat-bento__img-top,
	.nejat-bento__img-center,
	.nejat-bento__feature-card--1,
	.nejat-bento__feature-card--2,
	.nejat-bento__feature-card--3,
	.nejat-bento__feature-card--4 {
		grid-column: auto;
		grid-row: auto;
	}

	/* Featured still spans full row */
	.nejat-bento__featured {
		grid-column: 1 / -1;
	}

	/* Center image spans 2 rows in 2-col layout */
	.nejat-bento__img-center {
		grid-row: span 2;
	}

	.nejat-bento__img-top {
		min-height: 260px;
	}
}

/* ── Responsive — mobile ──────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.nejat-bento__grid {
		grid-template-columns: 1fr;
	}

	.nejat-bento__featured,
	.nejat-bento__img-center {
		grid-column: auto;
		grid-row: auto;
	}

	.nejat-bento__img-top,
	.nejat-bento__img-center {
		min-height: 260px;
		max-height: 360px;
	}

	.nejat-bento__featured {
		min-height: 0;
	}
}