/**
 * Variant CSS: offer--tabbed-service-groups
 * Layer 2 - Path B universal offer variant (authored 2026-06-06).
 *
 * Concept: a static "tabs" metaphor for a segmented offer. A centred row of tab
 * chips sits up top (the first carries .is-active — accent fill + connector to
 * the panel below); beneath it the active group renders: a group title + deck,
 * then a 2x3 grid of service cards (name + one-line description). Implies a
 * larger catalogue split by audience/segment, with one segment shown.
 *
 * Differentiator vs sibling offer variants:
 *   - icon-cards-3col / numbered-grid / trio-accent-cards: a single flat card set.
 *   - accordion-categories: stacked expanded category lists (no tab switcher).
 *   - two-tier-packages: two priced packages (no service grid, no segments).
 *   THIS one: a segmented tab header + the active segment's service grid.
 *
 * Tokens: semantic only. Inactive tabs are muted hairline chips; the active tab
 * is an --accent fill. Service cards lift on --background-card with hairline
 * borders + accent top-edge on hover. No dark band (text on --background).
 */

/* == Section shell == */
body.aibt-universal .universal-offer--tabbed-service-groups {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* Intro: centred, capped measure. text-align:center + margin → margin:0 auto (A8). */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__intro {
	margin: 0 auto clamp(1.75rem, 4vh, 2.5rem) auto !important;
}

/* Kicker: uppercase tracked accent, centred. */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto var(--space-md) auto !important;
}

body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 !important;
}

/* == Tab row: a centred segmented switcher. == */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__tabs {
	gap: 0.5rem !important;
	margin-bottom: clamp(2rem, 5vh, 3rem);
}

/* Tab chip (inactive): muted hairline pill. Reads as a selectable segment. */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__tab {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.2 !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	padding: 0.65rem 1.25rem !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius-pill, 999px);
	background: transparent;
	white-space: nowrap;
}

/* Active tab: accent fill — the currently-shown segment. */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__tab.is-active {
	color: var(--cta-text-primary, #fff) !important;
	background: var(--accent);
	border-color: var(--accent);
}

/* == Active panel == */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__panel {
	display: flex !important;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.25rem) !important;
}

/* Group lead: title + deck introducing the active segment. */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__panel-lead {
	text-align: center;
	max-width: 46ch;
	margin: 0 auto;
}

body.aibt-universal .universal-offer--tabbed-service-groups h3.universal-offer__group-name,
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__group-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-xl) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 auto var(--space-xs) auto !important;
}

body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__group-deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 auto !important;
}

/* == Service grid (two rows of 3 columns) == */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__group-grid {
	gap: clamp(1rem, 2vw, 1.5rem) !important;
	align-items: stretch !important;
	margin-bottom: 0 !important;
}

/* Spacing between the two stacked column rows. */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__group-grid + .universal-offer__group-grid {
	margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Service card: hairline-framed surface, accent top-edge reveal on hover. */
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc {
	padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
	background: var(--background-card, var(--background)) !important;
	border: 1px solid var(--divider-primary);
	border-radius: var(--decor-radius, 0px);
	position: relative;
	overflow: hidden;
	transition:
		border-color var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-fast) var(--ease-default);
}

body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc:hover::before {
	transform: scaleX(1);
}

body.aibt-universal .universal-offer--tabbed-service-groups h4.universal-offer__svc-name,
body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc-name {
	font-family: var(--font-display) !important;
	font-size: var(--text-lg) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
}

body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 38ch;
}

/* == Responsive == */
@media (max-width: 781px) {
	/* Columns stack to one card per row; force parity so the gap stays controlled
	   and the second column row collapses into the same single stream. */
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__group-grid {
		flex-direction: column !important;
		gap: 1rem !important;
	}
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__group-grid + .universal-offer__group-grid {
		margin-top: 1rem !important;
	}
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc {
		width: 100% !important;
	}
}

@media (max-width: 640px) {
	/* Cap uppercase tracking: wide letter-spacing reads as gaps at narrow widths. */
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__kicker {
		letter-spacing: 0 !important;
	}
	/* Tighten tab chips so a 3-segment row still wraps cleanly at 375px. */
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__tab {
		padding: 0.55rem 1rem !important;
		font-size: var(--text-xs) !important;
	}
}

/* == Motion respect == */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc,
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc::before {
		transition: none;
	}
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc:hover {
		transform: none;
	}
	body.aibt-universal .universal-offer--tabbed-service-groups .universal-offer__svc:hover::before {
		transform: scaleX(1);
	}
}

/* == Editor wrapper: hover-only states are inert in the editor; keep the accent
   edge hidden at rest so cards render flat. == */
.editor-styles-wrapper .universal-offer--tabbed-service-groups .universal-offer__svc::before {
	transform: scaleX(0);
}

/* A8/A9 left-shift fix (2026-06-08): centered intro element(s) were max-width-capped by
   WP constrained layout but pinned left by horizontal margin:0. Force margin-inline:auto.
   Section class doubled -> specificity (0,4,1) beats h2.__headline-style rules; harmless on
   already-centered elements (auto margins compute to 0). Only left/right are overridden. */
body.aibt-universal .universal-offer--tabbed-service-groups.universal-offer--tabbed-service-groups .universal-offer__headline { margin-inline: auto !important; }