/* ==========================================================================
   Solution System Architecture (Intelligence Stack)
   Figma: desktop 2594:23076 (1440) · tablet 2594:25078 (768) ·
   mobile 2594:24585 (375). Cross-page: same 4-col / 2-col / 1-col grid;
   only item copy and icons change. Tablet column-major order is ignored.

   Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px.
   Figma tablet `grid-rows: 51px` is not copied — rows grow with wrapping copy.
   ========================================================================== */

.solution-architecture {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--space-160);
	padding-inline: var(--space-128);
	background-color: var(--color-surface-default);
}

.solution-architecture__inner {
	display: flex;
	width: 100%;
	max-width: 1184px;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-64);
}

.solution-architecture__header {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.solution-architecture__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background-color: var(--color-bg-emphasis);
	color: var(--color-neutral-600);
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
}

.solution-architecture__eyebrow-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--color-neutral-600);
}

.solution-architecture__heading {
	margin: 0;
	color: var(--color-green-800);
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h1-alt-lh);
	letter-spacing: 0;
	text-align: left;
}

.solution-architecture__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	row-gap: var(--space-24);
	column-gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.solution-architecture__item {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.solution-architecture__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--space-40);
	height: var(--space-40);
	overflow: hidden;
	border-radius: var(--radius-xs);
	background-color: var(--color-surface-accent);
}

.solution-architecture__icon-img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

.solution-architecture__copy {
	display: flex;
	min-width: 0;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.solution-architecture__title {
	margin: 0;
	color: var(--color-text-default);
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 500;
	line-height: var(--text-body-lg-lh);
}

.solution-architecture__desc {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
}

/* Icon-box emphasis on hover: colour only, matching Homepage service-tabs
   and the Why system cells. The item is not a control. Keyboard equivalent
   is :focus-within if a child is focused. */
@media (hover: hover) and (pointer: fine) {
	.solution-architecture__icon {
		transition: background-color 0.2s ease;
	}

	.solution-architecture__item:hover .solution-architecture__icon,
	.solution-architecture__item:focus-within .solution-architecture__icon {
		background-color: var(--color-blue-100);
	}
}

@media (prefers-reduced-motion: reduce) {
	.solution-architecture__icon {
		transition: none;
	}
}

/* Tablet + the 1024 step — 2 columns, icon left of copy. */
@media (max-width: 74.99875rem) {
	.solution-architecture {
		padding-block: var(--space-64);
		padding-inline: var(--space-32);
	}

	.solution-architecture__heading {
		font-size: 2rem;
		line-height: normal;
	}

	.solution-architecture__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-32);
	}

	.solution-architecture__item {
		flex-direction: row;
		align-items: flex-start;
	}
}

@media (max-width: 47.99875rem) {
	.solution-architecture {
		padding-inline: var(--space-20);
	}

	.solution-architecture__list {
		grid-template-columns: minmax(0, 1fr);
	}
}