/* Innovation — "10 Years of Innovation" timeline band (design.md §innovation).
   White section: text left straddling a full-width rule, product images along it. */

/* Two columns, never wrapping. The copy column is 565px so the product row
   starts at 76 + 565 = 641px — exactly where the design's first trigger sits —
   and the row runs to 28px off the right edge, giving it precisely its natural
   1059px on a 1728 canvas. Below that the triggers scale down together,
   proportionally, keeping the single-row "timeline along the rule" reading.
   The old `left: calc(33.33% + 65px)` absolute placement is what made them
   slide over each other and onto the copy. */
.tt-innovation {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	min-height: 430px;
	padding: 0 28px 40px 76px;
	background: #fff;
}

/* WP block-gap puts `margin-block-start: 24px` on every non-first child of a
   flow-layout group, and on an absolutely-positioned child that margin stacks
   on top of `top` — shifting the text block and the products 24px below where
   the design puts them. Same gotcha as the hero slides (design.md §hero). */
.tt-innovation > * {
	margin-block: 0 !important;
}

/* Full-bleed timeline rule. Red (#cf2026 — sampled off the design, not grey),
   and it must strike THROUGH the first line of the title: at top 171px it is
   centred on that line's glyphs once the block-gap shift above is removed. */
.tt-innovation__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 171px;
	height: 1px;
	background: var(--wp--preset--color--red, #cf2026);
	z-index: 0;
}

/* 565 = 641 - 76, putting the product row's left edge on the design's 641px.
   Allowed to shrink (0 1) below ~1310, so the triggers keep a usable share of
   the width instead of being squeezed to slivers beside a rigid copy column. */
.tt-innovation__text {
	position: relative;
	z-index: 2;
	flex: 0 1 565px;
	min-width: 470px;    /* narrower than this and the 62px title breaks
	                        "10 YEARS OF" across two lines, orphaning "OF" */
	padding-top: 108px;
}

.tt-innovation__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif) !important;
	font-size: 16px;
	line-height: 1.45;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--red, #cf2026) !important;
}

.tt-innovation__eyebrow::before {
	content: "";
	flex: none;
	width: 40px;
	height: 1px;
	background: var(--wp--preset--color--red, #cf2026);
}

.tt-innovation__title {
	margin: 0 0 20px;
	max-width: 554px;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 62px;
	line-height: 1.05;
	text-transform: uppercase;
	color: #000 !important;
}

.tt-innovation__body {
	margin: 0;
	max-width: 580px;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 16px;
	line-height: 1.6;
	color: #434342 !important;
}

/* Wrapping row, top-aligned — all three triggers hang from y=118 in the design.
   295 + 38 + 343 + 38 + 345 = 1059, the exact padding-box width at 1728. */
.tt-innovation__products {
	position: relative;
	z-index: 1;
	flex: 1 1 641px;
	min-width: 0;
	padding-top: 118px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 38px;
	pointer-events: none;
}

/* Widths come from flex-grow, not fixed px: with a 0 basis the row's free space
   is split in proportion to the grow factors — which ARE the design widths — so
   at 1728 they resolve to exactly 295 / 343 / 345, and below that all three
   scale down together at the same rate. aspect-ratio carries the design's box
   proportions so the heights track the widths (159 / 236 / 171 at 1728). */
.tt-innovation__product {
	min-width: 0;
	height: auto;
	object-fit: contain;
}

.tt-innovation__product--1 {
	flex: 295 1 0;
	aspect-ratio: 295 / 159;
}

.tt-innovation__product--2 {
	flex: 343 1 0;
	aspect-ratio: 343 / 236;
}

.tt-innovation__product--3 {
	flex: 345 1 0;
	aspect-ratio: 345 / 171;
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	/* Wrap must be restored: the desktop rule is `nowrap` (so the triggers shrink
	   beside the copy rather than dropping below it), which on mobile kept both
	   columns on one line and squeezed the copy to ~50%. Top padding is 60 so the
	   eyebrow lands on the design's y=60 (node 14:110). */
	.tt-innovation {
		flex-wrap: wrap;
		min-height: 0;
		padding: 60px 20px 40px;
	}

	/* The rule stays on mobile — `Line 3` (14:120) runs full width at y=114,
	   still centred on the first line of the title. */
	.tt-innovation__line {
		top: 114px;
	}

	/* Single column here — both children take the full width. min-width MUST be
	   reset: the desktop rule floors this column at 470px to keep "10 YEARS OF"
	   on one line, which in a 400px mobile container refuses to shrink and
	   overflows the section — title and body run off the right edge and the
	   product row is pushed off-screen entirely. */
	.tt-innovation__text {
		flex: 1 1 100%;
		min-width: 0;
		padding-top: 0;
	}

	.tt-innovation__title {
		font-size: 42px;
	}

	/* Triggers wrap 2 + 1 with the third centred below, at the design's sizes
	   (183 / 205 / 257 wide on a 440 canvas — nodes 6003:5/:6/:7). Percentages
	   of the row, not fixed px, so they hold on narrower handsets. */
	.tt-innovation__products {
		flex: 1 1 100%;
		min-width: 0;
		padding-top: 0;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px 12px;
		margin-top: 28px;
	}

	.tt-innovation__product {
		width: auto;
		height: auto;
		max-width: none;
		min-width: 0;
	}

	.tt-innovation__product--1 {
		flex: 0 0 42%;
		aspect-ratio: 183 / 99;
	}

	.tt-innovation__product--2 {
		flex: 0 0 47%;
		aspect-ratio: 205 / 141;
	}

	.tt-innovation__product--3 {
		flex: 0 0 58%;
		aspect-ratio: 257 / 127;
	}
}