/**
 * TechBBQ Categories — scroll-pinned stats section.
 *
 * Figma refs in widget PHP (1440 / 1024 / 768 / 380).
 *
 * Breakpoints (mobile-first): 0–767 (base grid), 768+ (scroll-pinned layout).
 */

.techbbq-categories {
	--techbbq-categories-label-gap: var(--techbbq-space-1);
	--techbbq-categories-label-size: 22px;
	--techbbq-categories-label-tracking: -0.01em;
	--techbbq-categories-number-size: 54px;
	--techbbq-categories-number-weight: 500;
	--techbbq-categories-number-tracking: -0.04em;
	--techbbq-categories-number-step: 0px;
	--techbbq-categories-column-gap: var(--techbbq-space-2);

	box-sizing: border-box;
	width: 100%;
	color: var(--techbbq-content-primary);
	background-color: var(--techbbq-bg-main);
}

/* ── Mobile grid (380) ─────────────────────────────────────── */

.techbbq-categories__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--techbbq-categories-column-gap);
	padding-top: 72px;
	padding-bottom: 72px;
}

.techbbq-categories__grid-item {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-categories-label-gap);
	width: calc(50% - (var(--techbbq-categories-column-gap) / 2));
	min-width: 0;
}

.techbbq-categories__grid-label {
	margin: 0;
	font-family: var(--techbbq-font-family-heading);
	font-size: var(--techbbq-categories-label-size);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--techbbq-categories-label-tracking);
	color: var(--techbbq-content-secondary);
}

.techbbq-categories__grid-value {
	margin: 0;
	font-family: var(--techbbq-font-family-heading);
	font-size: var(--techbbq-categories-number-size);
	font-weight: var(--techbbq-categories-number-weight);
	line-height: 1.1;
	letter-spacing: var(--techbbq-categories-number-tracking);
	color: var(--techbbq-content-primary);
}

/* ── Desktop scroll layout ─────────────────────────────────── */

.techbbq-categories__scroll {
	display: none;
}

.techbbq-categories__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--techbbq-space-1);
	height: 100%;
	min-height: 0;
}

.techbbq-categories__labels {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.techbbq-categories__label {
	margin: 0;
	font-family: var(--techbbq-font-family-heading);
	font-size: var(--techbbq-categories-label-size);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--techbbq-categories-label-tracking);
	color: var(--techbbq-content-tertiary);
	transition: color 0.25s ease;
}

.techbbq-categories__label.is-active {
	color: var(--techbbq-content-primary);
}

.techbbq-categories__numbers {
	position: relative;
	height: 100%;
	overflow: hidden;
	min-width: 0;
}

.techbbq-categories__numbers-track {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-categories-number-step);
	will-change: transform;
}

.techbbq-categories__number {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	height: var(--techbbq-categories-number-size);
	margin: 0;
	font-family: var(--techbbq-font-family-heading);
	font-size: var(--techbbq-categories-number-size);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--techbbq-categories-number-tracking);
	color: var(--techbbq-content-primary);
	white-space: nowrap;
}

/* ── Tablet+ (768) ─────────────────────────────────────────── */

@media (min-width: 768px) {
	.techbbq-categories {
		--techbbq-categories-label-size: 41px;
		--techbbq-categories-number-size: 140px;
		--techbbq-categories-number-weight: 400;
		--techbbq-categories-number-tracking: -0.04em;
		--techbbq-categories-number-step: 152px;
	}

	.techbbq-categories__grid {
		display: none;
	}

	.techbbq-categories__scroll {
		display: block;
	}

	.techbbq-categories__sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow: hidden;
	}

	.techbbq-categories__sticky > .section-inner {
		box-sizing: border-box;
		height: 100%;
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.techbbq-categories.is-static .techbbq-categories__scroll {
		height: auto !important;
	}

	.techbbq-categories.is-static .techbbq-categories__sticky {
		position: relative;
		height: auto;
		overflow: visible;
	}

	.techbbq-categories.is-static .techbbq-categories__sticky > .section-inner {
		height: auto;
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.techbbq-categories.is-static .techbbq-categories__numbers {
		height: auto;
		overflow: visible;
	}

	.techbbq-categories.is-static .techbbq-categories__numbers-track {
		transform: none !important;
	}
}

@media (min-width: 1024px) {
	.techbbq-categories {
		--techbbq-categories-label-size: 44px;
		--techbbq-categories-number-size: 200px;
	}

	.techbbq-categories__sticky > .section-inner {
		padding-top: 88px;
		padding-bottom: 88px;
	}
}

@media (min-width: 1440px) {
	.techbbq-categories {
		--techbbq-categories-label-size: 48px;
		--techbbq-categories-number-size: 280px;
		--techbbq-categories-number-tracking: -0.05em;
	}

	.techbbq-categories__sticky > .section-inner {
		padding-top: var(--techbbq-section-space-large);
		padding-bottom: var(--techbbq-section-space-large);
	}
}