/**
 * Services module (§6, Figma 10355:3647) — mirrors primary.studio .framer-1jvav9u.
 *
 * Layout: split (left dot-grid glyph | right: heading + draw-open pill + 2-col
 * service list w/ divider rules). Color-token-only. NO outer section padding /
 * min-height / max-width — the Beaver Builder row owns section spacing.
 * The pill is a scroll-triggered "draw" reveal (see the pill rules below).
 */

.tb-services {
	/* Pill accent knob — palette-canonical purple. Figma shows the lighter
	   accent purple (the nav-bolt / footer-accent hue); point this at that
	   token for exact-Figma. */
	--tb-services-pill-bg: var(--Primary-Alt-50-Base);
}

.tb-services__inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: 30px;
}

/* Left — narrow column anchoring the static dot-grid glyph far left (Figma
   Left column = 280px holding a 34px glyph; content is inset to match). */
.tb-services__left {
	flex: 0 0 280px;
	max-width: 280px;
	padding-top: 6px;
}

.tb-services__glyph {
	display: block;
	width: 34px;
	height: 34px;
	color: #CECECE;
}

.tb-services__glyph svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Right — heading, pill, list stacked. */
.tb-services__right {
	flex: 1 1 auto;
	min-width: 0;
}

.tb-services__heading {
	margin: 0;
}

/* Pill — purple badge with a white circle + purple arrow. Base (also the static
   single-label form) is a compact pill: arrow on the LEFT, label to its right.
   The animated two-label variant (.tb-services__pill--draw) overrides this into
   a full-width scroll-triggered reveal (see below). */
.tb-services__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 48px;
	padding: 4px 20px 4px 4px;
	border-radius: 30px;
	background: var(--tb-services-pill-bg);
	vertical-align: middle;
}

.tb-services__pill-label {
	font-family: var(--header-font);
	font-weight: 400;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: var(--Font-Category-Sm-Letter-Spacing, 2px);
	text-transform: uppercase;
	color: var(--Neutral-100);
	white-space: nowrap;
}

.tb-services__pill-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--White);
}

.tb-services__pill-arrow {
	display: block;
	width: 11px;
	height: 10px;
	color: var(--tb-services-pill-bg);
}

/* Animated variant — scroll-triggered reveal (Ben round 2):
   the arrow starts LEFT of FROM IDEA (original Figma position), then slides
   right OVER the text (z-index 2) while FROM IDEA moves left (they cross), and
   the pill expands to the FULL column width (right edge lined up with the
   services list); TO TABLE fades in near the right. One 2400ms elegant ease.
   Children are absolutely positioned so the arrow can cross over the text.
   Default (no-JS / reduced-motion / BB editor) = the final OPEN pill (full
   width), so the copy is never hidden; JS arms it (collapses off-screen), plays
   on scroll-in, then settles to width:100% (responsive) once done. */
.tb-services__pill--draw {
	position: relative;
	display: block;
	width: var(--tb-pill-w1, 100%); /* default = open (full column width) */
	height: 40px;
	padding: 0;
	gap: 0;
}

.tb-services__pill--draw .tb-services__pill-label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.tb-services__pill--draw .tb-services__pill-from {
	left: 20px; /* default open: pinned left */
}

.tb-services__pill--draw .tb-services__pill-to {
	right: 52px; /* default open: just left of the icon */
}

.tb-services__pill--draw .tb-services__pill-icon {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	left: calc(var(--tb-pill-w1, 100%) - 36px); /* default open: far right */
	z-index: 2; /* rides OVER the text as it crosses */
}

/* The play is driven by JS (tbl-services.js) as a single requestAnimationFrame
   animation writing inline width / icon-left / from-left / to-opacity every
   frame — ONE continuous easing on the arrow, with the pill width simply
   following it: width = max(compact, arrowRightEdge). So the pill only grows
   once the arrow reaches its edge, but the whole thing reads as one fluid
   motion (no chained transitions / no phase seam). There are deliberately NO
   transition/animation rules on the pill here — CSS just provides the default
   OPEN state above for no-JS / reduced-motion / BB-editor. */

/* List — two balanced columns; each row separated by 1px divider rules. */
.tb-services__list {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
	margin-top: 64px;
}

.tb-services__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tb-services__divider {
	flex: 0 0 auto;
	width: 100%;
	height: 1px;
	background: var(--Neutral-70);
}

.tb-services__row {
	display: block;
	font-family: var(--header-font);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.4;
	color: var(--Neutral-100);
	text-decoration: none;
}

.tb-services__row-label {
	display: inline;
}

/* Linked rows nudge to the accent on hover (plain-text rows are inert). */
a.tb-services__row {
	transition: color 240ms ease;
}

a.tb-services__row:hover,
a.tb-services__row:focus-visible {
	color: var(--Primary-Alt-50-Base);
}

/* (The pill's reveal is JS-driven — see tbl-services.js. No CSS keyframes or
   transitions on the pill so the single rAF timeline is the only thing moving
   it; that's what keeps the arrow's easing continuous and the motion fluid.) */

/* < 1024 — hide the glyph, collapse the list to a single column (matches
   primary.studio). Stacking the two columns would double the rule where they
   meet, so drop the second column's leading divider. */
@media (max-width: 1023px) {
	.tb-services__left {
		display: none;
	}

	.tb-services__list {
		flex-direction: column;
		gap: 24px;
	}

	/* Drop the second column's leading divider so the seam reads as one rule
	   (col1's trailing divider) with the same 24px rhythm on both sides. */
	.tb-services__col + .tb-services__col > .tb-services__divider:first-child {
		display: none;
	}
}