/*
 * Service Section — photo on logical-end (visual-left in RTL) + 3 stacked white cards
 * on logical-start (visual-right). Section bg #F3F3F3 per Figma Rectangle 112.
 *
 * Design source: Figma file o2Fw8rOZW4xOIEcs13IWzo, Group 16 / Group 5 / Frame 155 at top:2566.
 */

.greengrass-service-section {
	padding-block: clamp(56px, 6vw, 96px);
	background: #F3F3F3;
	font-family: 'Polin', sans-serif;
	direction: rtl; /* widget owns its direction — independent of page direction */
}

.greengrass-service-section__container {
	max-width: var(--gg-container-max, 1440px);
	margin-inline: auto;
	padding-inline: clamp(16px, 2vw, 48px);
}

/* ── Header — centered above the two-column content ─────── */
.greengrass-service-section__header {
	text-align: center;
	max-width: 1130px;
	margin: 0 auto clamp(32px, 4vw, 56px);
}

.greengrass-service-section__title {
	margin: 0 0 16px;
	font-family: 'Polin', sans-serif;
	font-size: clamp(26px, 3.5vw, 55px);
	font-weight: 700;
	line-height: 1.1;
	color: #2C3D41;
}

.greengrass-service-section__title .accent {
	color: #00A3E9;
}

.greengrass-service-section__body {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(15px, 1.6vw, 24px);
	font-weight: 400;
	line-height: 1.4;
	color: #2C3D41;
}

/* ── Two-column content row ─────────────────────────────── */
.greengrass-service-section__content {
	display: flex;
	gap: clamp(20px, 2.4vw, 40px);
	align-items: stretch;
	margin-block-end: clamp(40px, 5vw, 72px);
}

/* In Figma source order: photo is left of cards visually. Under RTL flex with
 * source order [cards, photo], cards land at visual-right and photo at visual-left.
 */
.greengrass-service-section__cards {
	flex: 0 0 33%;
	max-width: 478px;
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.6vw, 28px);
}

.greengrass-service-section__photo {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	aspect-ratio: 842 / 464;
	border-radius: 15px;
	overflow: hidden;
	background: #d9d9d9;
}

.greengrass-service-section__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Bottom darken gradient over the photo */
.greengrass-service-section__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, var(--gg-photo-overlay, rgba(0, 0, 0, 0.63)) 0%, transparent 52%);
}

/* ── Card — white box, soft shadow, icon on logical-start (visual-right in RTL) ─ */
.greengrass-service-section__card {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 24px);
	padding: clamp(16px, 1.6vw, 24px);
	background: #ffffff;
	border-radius: 15px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	flex: 1 1 0;
}

.greengrass-service-section__card-text {
	flex: 1 1 0;
	min-width: 0;
	text-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.greengrass-service-section__card-title {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(18px, 1.8vw, 30px);
	font-weight: 700;
	line-height: 1.05;
	color: #2C3D41;
}

.greengrass-service-section__card-body {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(14px, 1.3vw, 20px);
	font-weight: 400;
	line-height: 1.25;
	color: #2C3D41;
}

.greengrass-service-section__card-icon {
	flex-shrink: 0;
	width: clamp(48px, 5vw, 80px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.greengrass-service-section__card-icon img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ── Footer note — all dark per Figma, no accent treatment ───────────────── */
.greengrass-service-section__footer-note {
	margin: 0;
	font-family: 'Polin', sans-serif;
	font-size: clamp(18px, 2.2vw, 35px);
	font-weight: 700;
	line-height: 1.2;
	color: #2C3D41;
	text-align: center;
}

.greengrass-service-section__footer-note .accent {
	color: #2C3D41; /* same as base — no visible accent unless user overrides via Style tab */
}

/* Responsive — stack columns on mobile */
@media (max-width: 960px) {
	.greengrass-service-section__content {
		flex-direction: column;
		gap: clamp(24px, 3vw, 40px);
	}
	.greengrass-service-section__cards {
		flex: none;
		max-width: none;
		width: 100%;
	}
	.greengrass-service-section__photo {
		flex: none;
		width: 100%;
	}
}