/* =============================================================================
   Nejat Service Showcase Widget
   .nejat-service-showcase — two-column: 3-photo mosaic (left) + info blocks (right)
   ============================================================================= */

/* ── Section wrapper ────────────────────────────────────────────────────────── */
.nejat-service-showcase {
	overflow: hidden;
}

/* ── Two-column inner container ─────────────────────────────────────────────── */
.nejat-service-showcase__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
	max-width: var(--nejat-max-width);
	margin: 0 auto;
	padding: var(--nejat-section-pad-v) var(--nejat-gutter);
}

/* Photos on right variant */
.nejat-service-showcase--photos-right .nejat-service-showcase__media  { order: 2; }
.nejat-service-showcase--photos-right .nejat-service-showcase__content { order: 1; }

/* ── Photo mosaic grid ──────────────────────────────────────────────────────── */
.nejat-service-showcase__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* All photos share the same base styles */
.nejat-service-showcase__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--nejat-radius);
}

/* Photo 1 — top-left */
.nejat-service-showcase__photo--1 {
	grid-column: 1;
	grid-row: 1;
}

/* Photo 2 — top-right */
.nejat-service-showcase__photo--2 {
	grid-column: 2;
	grid-row: 1;
}

/* Photo 3 — full-width landscape spanning both columns */
.nejat-service-showcase__photo--3 {
	grid-column: 1 / -1;
	grid-row: 2;
	aspect-ratio: 16 / 7;
}

/* ── Content column ─────────────────────────────────────────────────────────── */
.nejat-service-showcase__content {
	display: flex;
	flex-direction: column;
}

/* ── Section eyebrow ────────────────────────────────────────────────────────── */
.nejat-service-showcase__eyebrow {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: capitalize;
	color: #4ab3c8;
	margin: 0 0 8px;
}

/* ── Section headline ───────────────────────────────────────────────────────── */
.nejat-service-showcase__headline {
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	color: #111111;
	margin: 0 0 40px;
}

/* ── Section description ────────────────────────────────────────────────────── */
.nejat-service-showcase__description {
	font-size: 16px;
	line-height: 1.7;
	color: #555555;
	margin: -24px 0 32px;
}

.nejat-service-showcase__description p {
	margin: 0 0 12px;
}

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

/* ── Info blocks list ───────────────────────────────────────────────────────── */
.nejat-service-showcase__blocks {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ── Single info block ──────────────────────────────────────────────────────── */
.nejat-service-showcase__block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Divided variant: border-top on every block except the first */
.nejat-service-showcase__blocks--divided .nejat-service-showcase__block:not(:first-child) {
	border-top: 1px solid #e5e5e5;
	padding-top: 40px;
	margin-top: 0; /* gap is handled by parent flex gap */
}

/* ── Block title ────────────────────────────────────────────────────────────── */
.nejat-service-showcase__block-title {
	font-size: clamp(17px, 1.8vw, 22px);
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
	margin: 0;
}

/* ── Block description ──────────────────────────────────────────────────────── */
.nejat-service-showcase__block-desc {
	font-size: 15px;
	line-height: 1.75;
	color: #555555;
	margin: 0;
}

/* ── Responsive: tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.nejat-service-showcase__inner {
		gap: 48px;
	}
}

/* ── Responsive: mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.nejat-service-showcase__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Reset order on mobile so photos always appear above content */
	.nejat-service-showcase--photos-right .nejat-service-showcase__media,
	.nejat-service-showcase--photos-right .nejat-service-showcase__content {
		order: unset;
	}

	.nejat-service-showcase__photos {
		max-width: 480px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.nejat-service-showcase__block-desc {
		font-size: 14px;
	}
}