/* =========================================================
   Service detail page — one-off elements not covered by any
   reusable block (comparison panel, platform tabs, scroll progress bar).
   Enqueued only on the redesigned service page(s) — see inc/enqueue.php.
   ========================================================= */

/* Scroll progress bar, fixed under the (transparent/solid) site header. */
.infinitas-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var( --infinitas-color-brand, #1D50E0 );
	z-index: 999;
	transition: width 0.1s linear;
}
@media ( prefers-reduced-motion: reduce ) {
	.infinitas-scroll-progress { display: none; }
}

/* "The problem" comparison panel — how the business is organised vs how a
   buyer actually asks, side by side with a "vs" divider between them. */
.infinitas-compare {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	margin-top: 32px;
}
.infinitas-compare__panel {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	padding: 24px;
	background: var( --infinitas-color-page_bg, #fff );
}
.infinitas-compare__panel h4 {
	font-family: var( --infinitas-font-body, 'DM Sans' ), sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var( --infinitas-color-muted_text, #64748B );
	margin: 0 0 14px;
}
.infinitas-compare__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.infinitas-compare__panel li {
	background: var( --infinitas-color-alt_bg, #F5F7FA );
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 14px;
}
.infinitas-compare__panel--good li {
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	color: var( --infinitas-color-brand_hover, #123F9E );
	font-weight: 500;
}
.infinitas-compare__vs {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 700;
	color: var( --infinitas-color-brand, #1D50E0 );
	font-size: 13px;
	background: var( --infinitas-color-page_bg, #fff );
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 999px;
	padding: 8px 14px;
}
.infinitas-compare__closing {
	margin-top: 28px;
	font-size: 15px;
	color: var( --infinitas-color-heading_text, #060C1A );
	font-weight: 500;
}
@media ( max-width: 700px ) {
	.infinitas-compare {
		grid-template-columns: 1fr;
	}
	.infinitas-compare__vs {
		justify-self: start;
	}
}

/* Platform tabs — WordPress / Shopify / WooCommerce, one panel visible at
   a time (assets/js/service-detail.js). Falls back to all panels showing
   at once if JS doesn't run (progressive enhancement, nothing hidden by
   default in the markup). */
.infinitas-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.infinitas-tab {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 11px 20px;
	border-radius: 10px;
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	background: var( --infinitas-color-page_bg, #fff );
	color: var( --infinitas-color-muted_text, #64748B );
	cursor: pointer;
	transition: all 0.18s ease;
}
.infinitas-tab[aria-selected="true"] {
	background: var( --infinitas-color-brand, #1D50E0 );
	border-color: var( --infinitas-color-brand, #1D50E0 );
	color: #fff;
}
.infinitas-tabpanel {
	border: 1px solid var( --infinitas-color-border, #E4E8F0 );
	border-radius: 14px;
	padding: 32px;
	background: var( --infinitas-color-page_bg, #fff );
}
.js-tabs-ready .infinitas-tabpanel {
	display: none;
}
.js-tabs-ready .infinitas-tabpanel[data-active] {
	display: block;
}
.infinitas-tabpanel + .infinitas-tabpanel {
	margin-top: 16px;
}
.js-tabs-ready .infinitas-tabpanel + .infinitas-tabpanel {
	margin-top: 0;
}
.infinitas-tabpanel h3 {
	font-size: 22px;
	margin: 0 0 12px;
}
.infinitas-tabpanel p {
	color: var( --infinitas-color-muted_text, #64748B );
	font-size: 15px;
	line-height: 1.6;
	max-width: 60ch;
	margin: 0;
}
.infinitas-tabpanel .infinitas-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 16px;
}
/* "What we build" — icon-led, borderless feature row (deliberately not
   another boxed card grid, to read as distinct from "Our approach"
   right above it). Hairline dividers between items at desktop width. */
.infinitas-build-types {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media ( min-width: 700px ) {
	.infinitas-build-types { grid-template-columns: repeat( 3, 1fr ); }
}
.infinitas-build-type {
	padding-right: 28px;
}
@media ( min-width: 700px ) {
	.infinitas-build-type:not( :last-child ) {
		border-right: 1px solid var( --infinitas-color-border, #E4E8F0 );
	}
}
.infinitas-build-type__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var( --infinitas-color-brand, #1D50E0 );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.infinitas-build-type__icon svg {
	width: 24px;
	height: 24px;
}
.infinitas-build-type h3 {
	font-size: 18px;
	font-weight: 700;
	color: var( --infinitas-color-heading_text, #060C1A );
	margin: 0 0 10px;
}
.infinitas-build-type p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var( --infinitas-color-muted_text, #64748B );
	margin: 0;
}

.infinitas-chip {
	font-family: var( --infinitas-font-heading, 'Space Grotesk' ), sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: var( --infinitas-color-brand, #1D50E0 );
	background: var( --infinitas-color-brand_tint, #E0EAFF );
	padding: 5px 12px;
	border-radius: 6px;
}