/**
 * Variant CSS: about--horizontal-timeline-band
 * Layer 2 - Variants Library (Path B Recipes architecture).
 *
 * Concept: company story as a HORIZONTAL timeline. A left-aligned intro (kicker
 *   + headline + deck) sits above a row of 4 milestones laid LEFT-TO-RIGHT on a
 *   single shared connector line, with node dots sitting on the line. Each stop
 *   = a year (accent) + one line of copy stacked below its node. This is
 *   deliberately distinct from timeline-milestones (a VERTICAL rail with a
 *   stacked column of entries): here the eye travels horizontally along the
 *   connector.
 *
 * Connector geometry: the track is a flex row; a single hairline runs across it
 *   via a ::before on the track, sitting at the vertical centre of the node
 *   band. Each stop reserves a fixed-height "node band" at the top whose dot is
 *   absolutely centred on the line, so dots align perfectly regardless of copy
 *   length. The line is inset by half a cell on each end so it starts/ends under
 *   the first/last node rather than bleeding to the section edge.
 *
 * Centering (A8/A9): the intro is left-aligned (NOT centred), so its blocks take
 *   normal margins - no constrained-centring override risk. The year + desc are
 *   left-aligned within each stop. Nothing here is has-text-align-center, so
 *   there is no A8/A9 horizontal-margin exposure.
 *
 * KI-020 safety: no --bg-main as foreground. Year uses --accent, titles/desc use
 *   --text-primary / --text-secondary, connector + nodes use the accent + the
 *   divider hairline. em accent --accent on the light page ground.
 *
 * Polish: node dots have a hover scale (wrapped in prefers-reduced-motion). No
 *   interactive controls here, so the focus-visible ring requirement is N/A
 *   (editorial text + decorative dots).
 *
 * Semantic tokens only (--background, --text-primary, --text-secondary,
 * --accent, --font-display/body, --text-*, --space-*, --tracking-*,
 * --leading-*, --divider-primary, --duration-fast, --ease-default).
 *
 * Scoping: EVERY selector starts with
 *   body.aibt-universal .universal-about--horizontal-timeline-band
 * because the theme enqueues ALL variant CSS globally.
 *
 * @package AI_Base_Theme
 * @since 2026-06-06 (Path B Variants Library)
 */

/* === Section shell ======================================================== */
body.aibt-universal .universal-about--horizontal-timeline-band {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary, rgba(0, 0, 0, 0.08));
}

/* === Intro - left-aligned lead ============================================ */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__intro {
	margin: 0 0 var(--space-xl) 0;
	max-width: 760px;
}

/* Kicker - small uppercase label, left-aligned (no centring -> margins stay 0). */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest, 0.18em) !important;
	text-transform: uppercase !important;
	color: var(--text-secondary) !important;
	margin: 0 0 var(--space-sm) 0 !important;
}

/* Headline - display face, primary ink. */
body.aibt-universal .universal-about--horizontal-timeline-band h2.universal-about__headline,
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	max-width: 20ch;
	margin: 0 !important;
}

body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, 500);
}

/* Deck - supporting line. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed, 1.65) !important;
	color: var(--text-secondary) !important;
	max-width: 56ch;
	margin: var(--space-md) 0 0 0 !important;
}

/* === The horizontal track =================================================
   A flex row of stops. The connector line runs across the node band via a
   ::before, inset by half a cell so it spans node-1 -> node-4. The
   --node-band controls the height reserved at the top for the dot row. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__track {
	--node-band: 3rem;
	--node-size: 1rem;
	position: relative;
	margin: 0;
	gap: 0;
	flex-wrap: nowrap;
	align-items: flex-start;
}

/* Connector hairline - centred vertically inside the node band, inset 1/8 of
   the width on each side (= half of a quarter-width cell) so it starts and ends
   under the outer node dots. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__track::before {
	content: "";
	position: absolute;
	top: calc(var(--node-band) / 2);
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: var(--divider-primary, rgba(0, 0, 0, 0.14));
	transform: translateY(-50%);
	z-index: 0;
}

/* Each stop - a column. Top padding clears nothing; instead the node band is a
   spacer realised by the dot's positioning context. Horizontal padding gives
   the copy room and keeps dots off the cell edges. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 clamp(0.75rem, 2vw, 1.5rem);
	box-sizing: border-box;
	z-index: 1;
}

/* Node dot - absolutely centred on the connector line at the top of the stop. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__node {
	display: block;
	position: absolute;
	top: calc(var(--node-band) / 2);
	left: 50%;
	width: var(--node-size);
	height: var(--node-size);
	border-radius: 50%;
	background: var(--background);
	border: 2px solid var(--accent);
	transform: translate(-50%, -50%);
	transition: transform var(--duration-fast, 0.18s) var(--ease-default, ease);
	z-index: 2;
}

/* "Today" node - filled accent to mark the present. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__node--now {
	background: var(--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Year - the focal accent, pushed below the node band. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__year {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -0.01em !important;
	color: var(--accent) !important;
	margin: var(--node-band) 0 var(--space-sm) 0 !important;
}

/* Desc - one line, secondary ink. */
body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	font-weight: 400 !important;
	line-height: var(--leading-relaxed, 1.6) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
}

/* Hover - bump the node dot. */
@media (hover: hover) {
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop:hover .universal-about__node {
		transform: translate(-50%, -50%) scale(1.25);
	}
}

/* === Tablet - tighten horizontal padding ================================== */
@media (max-width: 959px) {
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop {
		padding: 0 clamp(0.5rem, 1.5vw, 1rem);
	}
}

/* === Mobile - flip to a vertical rail ======================================
   At <=781px four horizontal cells get too cramped. Re-flow into a vertical
   timeline: a left rail line, dots on the rail, copy stacked to the right. The
   columns block stacks one-per-row by default; we add the rail + left padding
   and re-aim the node dots to the rail. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__track {
		--rail-x: 0.5rem;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}

	/* Replace the horizontal connector with a vertical rail down the left. */
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__track::before {
		top: 0.5rem;
		bottom: 0.5rem;
		left: var(--rail-x);
		right: auto;
		width: 2px;
		height: auto;
		transform: none;
	}

	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop {
		flex: 0 0 auto;
		max-width: 100%;
		padding: 0 0 clamp(1.75rem, 5vw, 2.5rem) clamp(1.75rem, 6vw, 2.25rem);
	}

	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop:last-child {
		padding-bottom: 0;
	}

	/* Dots move onto the vertical rail, aligned with the year baseline. */
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__node {
		top: 0.55rem;
		left: var(--rail-x);
	}

	/* Year + desc sit at the top of each stop now (no node-band reserve). */
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__year {
		margin: 0 0 var(--space-sm) 0 !important;
	}
}

/* === Phone - drop kicker tracking ========================================= */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}

/* === Reduced motion - kill the node hover scale =========================== */
@media (prefers-reduced-motion: reduce) {
	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__node {
		transition: none;
	}

	body.aibt-universal .universal-about--horizontal-timeline-band .universal-about__stop:hover .universal-about__node {
		transform: translate(-50%, -50%);
	}
}

/* === Editor wrapper - content stays visible in the block editor =========== */
.editor-styles-wrapper .universal-about--horizontal-timeline-band .universal-about__track,
.editor-styles-wrapper .universal-about--horizontal-timeline-band .universal-about__stop {
	opacity: 1 !important;
	transform: none !important;
}