/* ==========================================================================
   Solution Platform Advantage (paired pills)
   Distinct from `.solution-why` (comparison board). Figma: desktop 2594:23324
   (1440) · tablet 2594:25247 (768) · mobile 2594:24766 (375).
   Cross-page: same two-column pills + dashed connector; only pair copy/icons change.

   Breakpoints: desktop >= 1200px · tablet 768–1199.98px · mobile < 768px.
   Two columns stay side-by-side through mobile. Traditional icons are ACF data.
   ========================================================================== */

.solution-advantage {
	--advantage-col-gap: var(--space-128);
	--advantage-row-gap: var(--space-24);
	--advantage-rule: 128px;

	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-advantage__inner {
	display: flex;
	width: 100%;
	max-width: 1184px;
	min-width: 0;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-64);
}

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

.solution-advantage__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-advantage__eyebrow-marker {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background-color: var(--color-neutral-600);
}

.solution-advantage__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: center;
}

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

.solution-advantage__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--advantage-col-gap);
}

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

.solution-advantage__col--traditional {
	text-align: right;
}

.solution-advantage__col--fundamento {
	text-align: left;
}

.solution-advantage__rows {
	display: flex;
	flex-direction: column;
	gap: var(--advantage-row-gap);
}

.solution-advantage__row {
	display: grid;
	position: relative;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--advantage-col-gap);
	align-items: center;
}

.solution-advantage__rule {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--advantage-rule);
	height: 0;
	border-top: 1px dashed var(--color-neutral-400);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.solution-advantage__pill {
	display: inline-flex;
	min-width: 0;
	max-width: 100%;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8);
}

.solution-advantage__pill--traditional {
	justify-self: end;
	background-color: var(--color-neutral-100);
}

.solution-advantage__pill--fundamento {
	justify-self: start;
	background-color: var(--color-surface-accent);
}

.solution-advantage__icon,
.solution-advantage__arrow {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	object-fit: contain;
}

.solution-advantage__text {
	min-width: 0;
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
/* 	overflow-wrap: break-word; */
}

.solution-advantage__pill--traditional .solution-advantage__text {
	color: var(--color-neutral-400);
}

.solution-advantage__pill--fundamento .solution-advantage__text {
	color: var(--color-text-default);
}

@media (hover: hover) and (pointer: fine) {
	.solution-advantage__pill {
		transition: background-color 0.2s ease;
	}

	.solution-advantage__pill--traditional:hover,
	.solution-advantage__pill--traditional:focus-within {
		background-color: var(--color-bg-emphasis);
	}

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

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

@media (max-width: 74.99875rem) {
	.solution-advantage {
		--advantage-col-gap: var(--space-64);
		--advantage-rule: 4rem;

		padding-block: var(--space-64);
		padding-inline: var(--space-32);
	}

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

@media (max-width: 47.99875rem) {
	.solution-advantage {
		--advantage-col-gap: 0;
		--advantage-row-gap: var(--space-8);

		padding-inline: var(--space-20);
	}

	.solution-advantage__rule {
		display: none;
	}

	.solution-advantage__rows {
		position: relative;
	}

	.solution-advantage__rows::before {
		content: "";
		position: absolute;
		top: -39px;
		bottom: 0;
		left: 50%;
		border-left: 1px dashed var(--color-neutral-400);
		transform: translateX(-50%);
		pointer-events: none;
		z-index: 99;
	}
	
	.solution-advantage__cols{
		column-gap: 80px;
	}

	.solution-advantage__pill {
		min-height: 60px;
	}

	.solution-advantage__pill--traditional {
		padding-right: var(--space-12);
		min-height: 60px;
		width: 100%;
	}
	.solution-advantage__pill--fundamento{
		width: 100%;
	}

	.solution-advantage__pill--fundamento {
		padding-left: var(--space-12);
	}
}