/* ============================================================
   DIFFERENTIATORS SECTION — .section-diff
   Figma source: node 52:387
   ============================================================ */

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

.section-diff {
	background: var(--color-gray-alt);
}

.section-diff__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-block: var(--section-py-sm);
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* Header — eyebrow + heading
---------------------------------------------------------- */

.section-diff__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

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

.section-diff__eyebrow {
	font-size: 0.9375rem;             /* 15px — Figma confirmed */
	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-diff__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 );    /* Figma confirmed */
	margin: 0;
}

/* Grid — bento layout
   Mobile: single column stack
   Desktop: 8-col grid with asymmetric card spans
---------------------------------------------------------- */

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

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

.section-diff__card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-height: 200px;               /* collapses to content on mobile */
}

/* Card icon wrapper — tinted square container
   Figma: --color-primary-tint bg, radius 8px, 48×48px
---------------------------------------------------------- */

.section-diff__card-icon-wrap {
	width: 48px;
	height: 48px;
	background: var(--color-primary-tint);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.section-diff__card-icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

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

.section-diff__card-title {
	font-size: var(--size-lg);        /* 20px */
	font-weight: var(--weight-black); /* 800 — Figma confirmed */
	color: var(--color-text);
	line-height: calc( 30 / 20 );    /* Figma confirmed */
	margin: 0;
}

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

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

/* Highlight card (card 5) — red background
   Figma: --color-primary bg, white text, no icon
---------------------------------------------------------- */

.section-diff__card--highlight {
	background: var(--color-primary);
}

.section-diff__card--highlight .section-diff__card-title,
.section-diff__card--highlight .section-diff__card-body {
	color: var(--color-text-light);
}

/* ----------------------------------------------------------
   Desktop (≥ 992px) — bento grid
   8 equal columns with card spans matching Figma proportions:

   Row 1:  [card-1: span 4] [card-2: span 2] [card-3: span 2]
   Row 2:  [card-4: span 3] [card-5: span 5]
---------------------------------------------------------- */

@media (min-width: 992px) {

	.section-diff__inner {
		padding-block: var(--section-py);
		gap: var(--space-10);
	}

	.section-diff__grid {
		grid-template-columns: repeat( 8, 1fr );
	}

	.section-diff__card {
		min-height: 368px;             /* Figma confirmed card height */
		justify-content: flex-start;   /* icons always at top */
		padding-top: var(--space-9);   /* extra breathing room from card top */
	}

	/* Row 1 */
	.section-diff__card--1 {
		grid-column: span 4;
	}
	.section-diff__card--2 { grid-column: span 2; }
	.section-diff__card--3 { grid-column: span 2; }

	/* Row 2 */
	.section-diff__card--4 { grid-column: span 3; }
	.section-diff__card--5 { grid-column: span 5; }

	/* Row-2 title alignment: card-5 has no icon so push title down
	   to match card-4's icon-wrap (48px) + card gap (var(--space-4)) */
	.section-diff__card--5 {
		padding-top: calc( var(--space-9) + 48px + var(--space-4) );
	}

}