/* ============================================================
   SERVICES SECTION — .section-services
   Figma source: node 52:426
   ============================================================ */

/* ----------------------------------------------------------
   Base (mobile-first)
---------------------------------------------------------- */

.section-services {
	background: var(--color-gray-mid);
	padding-top: var(--section-py-sm); /* space above panel on mobile */
}

/* ----------------------------------------------------------
   Top panel — image + text (mobile: stacked)
---------------------------------------------------------- */

.section-services__panel {
	display: grid;
	grid-template-columns: 1fr;
}

.section-services__panel-media {
	overflow: hidden;
}

.section-services__panel-image {
	width: 100%;
	height: 320px;
	object-fit: cover;
	object-position: center;
	display: block;
	/* Right corners only — image bleeds from left edge */
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Panel text — eyebrow, heading, description, CTA
---------------------------------------------------------- */

.section-services__panel-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--section-py-sm) var(--container-pad);
	max-width: 560px; /* prevent overly wide text on mid-size viewports */
}

/* Eyebrow
   Figma: 15px Bold 700 uppercase --color-primary
---------------------------------------------------------- */

.section-services__eyebrow {
	font-size: 0.9375rem;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	color: var(--color-primary);
	line-height: 1;
	margin: 0;
}

/* Heading
   Figma: 44px Bold 700 black lineHeight 56px
---------------------------------------------------------- */

.section-services__heading {
	font-size: clamp( var(--size-xl), 4vw, var(--size-heading) );
	font-weight: var(--weight-bold);
	color: var(--color-text);
	line-height: calc( 56 / 44 );
	margin: 0;
}

/* Body
   Figma: 16px Regular 400 --color-text-muted lineHeight 26px
---------------------------------------------------------- */

.section-services__body {
	font-size: var(--size-base);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	line-height: calc( 26 / 16 );
	margin: 0;
}

/* CTA button
   Figma: --color-primary bg, white, 56px height, padding 8px 40px, Medium 500
---------------------------------------------------------- */

.section-services__cta.btn {
	padding: var(--space-2) var(--space-9);  /* 8px 64px — Figma: 8px 40px */
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	font-weight: var(--weight-medium);
}

/* ----------------------------------------------------------
   Cards grid — 6 equal cards, 3×2 on desktop
---------------------------------------------------------- */

.section-services__grid-wrap {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-block: var(--section-py);   /* generous top/bottom padding */
}

.section-services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--card-gap);
}

/* Card
   Figma: white bg, radius 8px, padding 48px, min-height 368px
---------------------------------------------------------- */

.section-services__card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Card icon — 40×40px
---------------------------------------------------------- */

.section-services__card-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Card title
   Figma: 20px ExtraBold 800 lineHeight 30px
---------------------------------------------------------- */

.section-services__card-title {
	font-size: var(--size-lg);
	font-weight: var(--weight-black);
	color: var(--color-text);
	line-height: calc( 30 / 20 );
	margin: 0;
}

/* Card body — single-line textarea renders as paragraph
   Same type spec as list items.
---------------------------------------------------------- */

.section-services__card-body {
	font-size: var(--size-base);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	line-height: calc( 26 / 16 );
	margin: 0;
}

/* Card list — multi-line textarea renders as bullet list
   Figma: 16px Regular 400 lineHeight 26px --color-text-muted
---------------------------------------------------------- */

.section-services__card-list {
	margin: 0;
	padding-left: var(--space-5);   /* indent for bullet marker */
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.section-services__card-list li {
	font-size: var(--size-base);
	font-weight: var(--weight-regular);
	color: var(--color-text-muted);
	line-height: calc( 26 / 16 );
}

.section-services__card-list li::marker {
	color: var(--color-primary);  /* red bullet markers */
}

/* ----------------------------------------------------------
   Tablet (≥ 640px) — 2-col card grid
---------------------------------------------------------- */

@media (min-width: 640px) {
	.section-services__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* ----------------------------------------------------------
   Desktop (≥ 992px)
---------------------------------------------------------- */

@media (min-width: 992px) {

	.section-services {
		padding-top: var(--section-py); /* space above panel on desktop */
	}

	/* Top panel: image bleeds left, text on right */
	.section-services__panel {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.section-services__panel-image {
		width: 100%;
		height: 100%;
		min-height: 515px;            /* Figma confirmed image height */
	}

	/* Text column: right padding aligns to container right margin */
	.section-services__panel-content {
		padding-block: var(--section-py);
		padding-left: var(--space-10);
		padding-right: max(
			var(--container-pad),
			calc( (100vw - var(--container-max)) / 2 + var(--container-pad) )
		);
		justify-content: center;
	}

	/* Cards: 3 equal columns */
	.section-services__grid {
		grid-template-columns: repeat( 3, 1fr );
	}

	.section-services__card {
		min-height: 368px;            /* Figma confirmed */
	}

	.section-services__grid-wrap {
		padding-block: var(--section-py);
	}

	.section-services__panel-content {
		max-width: none;  /* restore full width within panel column */
	}

}