/*
 * "What makes GeoX AI different" - purple panel over three frosted claim cards.
 *
 * Measured off the 1440px frame: a 1280-wide panel over the gradient artwork,
 * heading and lead on one row, three equal cards with a 24px gutter.
 */

.whatd {
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

.whatd__panel {
	padding: clamp(var(--space-32), 4vw, 56px);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	color: var(--color-text-inverse);
	background: var(--whatd-bg) center / cover no-repeat, var(--color-primary-light);
}

.whatd__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-64);
	margin-bottom: var(--space-48);
}

.whatd__title {
	margin: 0;
	flex: none;
	color: var(--color-text-inverse);
}

.whatd__lead {
	max-width: 42ch;
	margin: var(--space-8) 0 0;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--lh-body);
	color: rgb(255 255 255 / 82%);
}

/* --- Cards ---------------------------------------------------------------- */

.whatd__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-24);
}

.whatd-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-32);
	border-radius: var(--radius-lg);
	background: rgb(255 255 255 / 24%);
	backdrop-filter: blur(6px);
	color: var(--color-text-heading);
}

.whatd-card__icon {
	color: var(--color-text-heading);
}

.whatd-card__glyph {
	width: 32px;
	height: 32px;
	/* star.svg ships white; brightness(0) renders it near-black for the light cards. */
	filter: brightness(0);
}

.whatd-card__title {
	margin: var(--space-16) 0 0;
	font-family: var(--font-display);
	font-size: var(--text-h5);
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-text-heading);
}

.whatd-card__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* --- Responsive ----------------------------------------------------------- */

/* Below the point where three cards get cramped, the row becomes a horizontal
   swipe carousel: each card takes most of the width so the next one peeks, and
   scroll-snap gives it a card-by-card feel. */
@media (max-width: 900px) {
	.whatd__head {
		flex-direction: column;
		gap: var(--space-24);
	}

	/* The desktop line break leaves "AI" stranded at this width. */
	.whatd__title br {
		display: none;
	}

	.whatd__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: var(--space-16);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.whatd__grid::-webkit-scrollbar {
		display: none;
	}

	.whatd-card {
		scroll-snap-align: start;
	}
}