/* Competition Stats — "#1 Competition Trigger. Period." (design.md §competition-stats).
   White breaker section: text + stat cards (left), competitor bar chart (right). */

.tt-competition-stats {
	padding-block: 72px 56px;
	padding-inline: 76px;
	background: #fff;
}

.tt-competition-stats__inner {
	display: flex;
	justify-content: space-between;
	gap: 92px;
	max-width: 1576px;
	margin-inline: auto;
}

.tt-competition-stats__left,
.tt-competition-stats__right {
	flex: 1 1 0;
	min-width: 0;
}

/* Eyebrow (red, with rule). Zero gap under it: in Figma the title's text box
   starts exactly where the eyebrow's ends (both at y=95.34, node 10003:7/:9). */
.tt-competition-stats__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	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-competition-stats__eyebrow::before {
	content: "";
	flex: none;
	width: 40px;
	height: 1px;
	background: var(--wp--preset--color--red, #cf2026);
}

.tt-competition-stats__title {
	margin: 0 0 24px;
	max-width: 560px;
	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-competition-stats__title span {
	color: var(--wp--preset--color--red, #cf2026) !important;
}

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

/* Stat cards */
.tt-competition-stats__cards {
	display: flex;
	gap: 31px;
}

.tt-stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 226px;
	height: 113px;
	padding-left: 38.9px;     /* bar (15) + 24.9 gutter, from the card's outer edge */
	border: 1px solid var(--wp--preset--color--grey-light, #adadad);
	background: #fff;
}

/* Full-height bar (Figma 10003:23 is 15 × 113 — the card's whole left side).
   It was a grid row-span before, which `align-content: center` shrank to the
   height of the centred text rows. Absolute + negative insets so it also covers
   the 1px border and sits flush with the card's outer edge, as in the design. */
.tt-stat-card__bar {
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -1px;
	width: 15px;
	background: var(--wp--preset--color--red, #cf2026);
}

.tt-stat-card__value {
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif);
	font-weight: 600;
	font-size: 52px;
	line-height: 1.05;
	color: var(--wp--preset--color--red, #cf2026);
}

.tt-stat-card__label {
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.6;
	color: #000;
}

/* ---- Chart --------------------------------------------------------------- */

/* The chart eyebrow carries NO red rule in the design — node 10003:38 is a bare
   text node, unlike the left-hand eyebrow (10003:9) which is grouped with its
   40×1 Rectangle 6. Its label therefore starts flush with the plot's left edge. */
.tt-competition-stats__eyebrow--chart {
	margin-bottom: 40px;
}

.tt-competition-stats__eyebrow--chart::before {
	content: none;
}

/* No baseline rule under the bars — pixel-sampling the design at the bar
   baseline returns pure white; the only horizontal rule on this chart is the
   one above the source line below. */
.tt-chart__plot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	height: 360px;
	background-image: repeating-linear-gradient(90deg, #e8e8e8 0, #e8e8e8 1px, transparent 1px, transparent 148px);
	background-position: left top;
}

.tt-chart__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	flex: 1 1 0;
	height: 100%;
}

.tt-chart__value {
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
}

.tt-chart__value--tt {
	color: var(--wp--preset--color--red, #cf2026);
}

.tt-chart__bar {
	position: relative;
	width: 78px;
	max-width: 100%;
	background: var(--wp--preset--color--grey, #73736f);
}

.tt-chart__bar--tt {
	background: linear-gradient(180deg, #ff242c 0%, #900a0e 100%);
}

.tt-chart__bar-logo {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: auto;
	filter: brightness(0) invert(1); /* red mark → white on the bar */
}

.tt-chart__labels {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 14px;
}

.tt-chart__label {
	flex: 1 1 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: #000;
}

/* "SCROLL →" indicator — mobile only, where the chart scrolls (node 8002:81) */
.tt-chart__scroll {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
	color: var(--wp--preset--color--grey, #73736f);
}

.tt-chart__scroll-label {
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.tt-chart__scroll-arrow {
	width: 40px;
	height: 8px;
}

/* Rule above the source line (Figma Line 10, 742px = the full plot width) */
.tt-chart__source {
	margin: 12px 0 0;
	padding-top: 2px;
	border-top: 1px solid #eaeaea;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif) !important;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--grey, #73736f) !important;
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	.tt-competition-stats {
		padding-inline: 20px;
		padding-block: 40px;
	}

	.tt-competition-stats__inner {
		flex-direction: column;
		gap: 48px;
	}

	.tt-competition-stats__title {
		font-size: 42px;
	}

	.tt-competition-stats__cards {
		gap: 16px;
	}

	.tt-stat-card {
		flex: 1 1 0;
		width: auto;
	}

	/* The chart is a horizontal SLIDER here, not a shrunk-to-fit chart. The
	   design's track is 750px wide on both breakpoints (7 columns at a 110.67
	   pitch, node 8002:79) — on mobile it simply overflows the 440 viewport and
	   scrolls, with its own SCROLL indicator below (node 8002:81).

	   Squeezing all seven bars into 440 instead is what pushed the labels out of
	   alignment: at ~52px per column the longer names ("TriggerTech",
	   "Accy. Intl.") overflowed their cell and stopped reading as centred under
	   their bar. At the design's 750px track each column is 86.6px, the 78px bar
	   centres in it, and the label centres under the bar for free — so the bar,
	   label, value and plot-height overrides are all gone. */
	.tt-chart {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.tt-chart::-webkit-scrollbar {
		display: none;
	}

	.tt-chart__plot,
	.tt-chart__labels,
	.tt-chart__source {
		min-width: 750px;
	}

	.tt-chart__scroll {
		display: flex;
	}
}