/**
 * TechBBQ Hero — Home intro screen with orb gradient
 *
 * Figma refs: 1440 / 1024 / 768 / 360 (Home frame 4299:20487).
 * Content width uses shared .section-inner (see layout.css).
 *
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1440, 1440+.
 */

.techbbq-hero {
	--techbbq-hero-header-offset: calc(
		var(--techbbq-banner-height) + var(--techbbq-space-1) + var(--techbbq-hero-header-bar, 72px)
	);
	--techbbq-hero-first-screen-offset: var(--techbbq-banner-height);

	/* THE REEL HAS TO BE VISIBLE WITHOUT SCROLLING. Auri, 2026-09-12: *"the video has to be visible
	   still. When you enter the website you should be able to see the video almost straight away."*
	   It was not: the hero took the whole first screen, so the video began 44px BELOW the fold and
	   nothing of it showed.

	   This is free height. The hero's content is 248px tall and bottom-aligned, sitting in an 868px
	   box with 620px of slack above it, so taking a strip back for the reel costs the headline
	   nothing. */
	--techbbq-hero-peek: 140px;

	/* How far the background runs PAST the hero before it is gone. The fade happens entirely inside
	   this strip, so the hero itself is never dimmed. */
	--techbbq-hero-bleed: 200px;

	/* A FLOOR, because the peek must never eat the copy. Found at 1280x600: the intro came out 392px,
	   its own padding takes 152 of that, and the content needs 244, so the block overflowed upward
	   and the date line slid underneath the floating header. The hero was taking height it did not
	   have to give.

	   Derived from the header offset rather than a flat number, so it follows the header instead of
	   being a magic constant that goes stale the next time the bar changes height. On a screen too
	   short to afford the peek, the hero simply keeps its floor and the reel shows a little less.

	   `max()` is Safari 11.1 and Chrome 79, inside the theme's ~2018 baseline. */
	--techbbq-hero-min-height: calc(var(--techbbq-hero-header-offset) + 330px);

	--techbbq-hero-screen-height: max(
		var(--techbbq-hero-min-height),
		calc(var(--techbbq-vh, 1vh) * 100 - var(--techbbq-hero-first-screen-offset) - var(--techbbq-hero-peek))
	);

	position: relative;
	width: 100%;
	color: var(--techbbq-content-primary);
	background-color: var(--techbbq-bg-main);
}

/* THE BACKGROUND RUNS PAST THE HERO AND FADES OUT, rather than stopping on a hard horizontal edge
 * at the top of the video. It bleeds `--techbbq-hero-bleed` below the hero and the mask takes it to
 * nothing across exactly that strip, so the orange wraps around the video's top corners and dies
 * into the page instead of being cut off.
 *
 * The mask is measured from the BOTTOM of the extended box, which is why it is expressed as
 * `calc(100% - bleed)`: everything above that point, the whole hero, stays fully opaque.
 *
 * The orb is absolutely positioned inside a `.techbbq-hero` that has no stacking context, so it
 * paints above later static siblings. The reel is given `position: relative; z-index: 1` in
 * hero-reel.css to sit back on top of it, and its opaque background is dropped so the bleed shows
 * through. Those two changes and this one only work together.
 */
.techbbq-hero__orb {
	position: absolute;
	top: 0;
	right: 0;
	bottom: calc(-1 * var(--techbbq-hero-bleed));
	left: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - var(--techbbq-hero-bleed)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - var(--techbbq-hero-bleed)),
		transparent 100%
	);
}

.techbbq-hero__intro {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-space-3);
	height: var(--techbbq-hero-screen-height);
	max-height: var(--techbbq-hero-screen-height);
	min-height: var(--techbbq-hero-screen-height);
	padding-bottom: var(--techbbq-space-3);
	overflow: hidden;
}

.techbbq-hero__intro-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0;
}

.techbbq-hero__content {
	display: flex;
	flex-direction: column;
	align-items: start;
	width: 100%;
	text-align: start;
}

.techbbq-hero__title-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.techbbq-hero__brow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--techbbq-space-1);
	align-items: center;
	margin: 0;
	font-family: var(--techbbq-hero-brow-font);
	font-size: var(--techbbq-hero-brow-size);
	font-weight: 500;
	line-height: var(--techbbq-hero-brow-line-height);
	letter-spacing: var(--techbbq-hero-brow-letter-spacing);
}

.techbbq-hero__brow-legacy,
.techbbq-hero__brow-date,
.techbbq-hero__brow-location {
	white-space: nowrap;
}

.techbbq-hero__brow-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--techbbq-content-primary);
}

.techbbq-hero__title {
	margin: 0;
}

.techbbq-hero__description {
	margin: 0;
	max-width: 65ch;
}

.techbbq-hero__actions {
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	gap: var(--techbbq-space-1);
	width: 100%;
}

.techbbq-hero__highlights:focus-visible {
	outline: 2px solid var(--techbbq-content-primary);
	outline-offset: 2px;
}

.techbbq-hero__highlights {
	display: inline-flex;
	gap: var(--techbbq-space-1);
	align-items: center;
	border: 0;
	background: transparent;
	color: var(--techbbq-content-primary);
	font-family: var(--techbbq-font-family-body);
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.techbbq-hero__play-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

/* Relocated from @media (max-width: 768px) + @media (max-width: 767px) — mobile (0–767) */
.techbbq-hero {
	--techbbq-hero-brow-size: 16px;
	--techbbq-hero-brow-line-height: 1.2;
	--techbbq-hero-brow-letter-spacing: 0;
	--techbbq-hero-brow-font: var(--techbbq-font-family-heading);
}

.techbbq-hero__intro {
	padding-top: calc(var(--techbbq-hero-header-offset) + var(--techbbq-space-2));
}

.techbbq-hero__content,
.techbbq-hero__title-group {
	gap: var(--techbbq-space-2);
}

.techbbq-hero__actions {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.techbbq-hero__highlights {
	width: 100%;
	min-height: 36px;
	padding: 8px;
	font-size: var(--techbbq-text-paragraph-s-size);
	justify-content: center;
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (min-width: 768px) {
	.techbbq-hero {
		--techbbq-hero-peek: 230px;
		--techbbq-hero-bleed: 260px;
	}

	/* Relocated from @media (max-width: 768px) */
	.techbbq-hero {
		--techbbq-hero-brow-size: 22px;
		--techbbq-hero-brow-line-height: 1.1;
		--techbbq-hero-brow-letter-spacing: -0.01em;
		--techbbq-hero-brow-font: "Inter", system-ui, sans-serif;
	}

	.techbbq-hero__intro {
		padding-top: calc(var(--techbbq-hero-header-offset) + var(--techbbq-section-space-small));
	}

	.techbbq-hero__content,
	.techbbq-hero__title-group {
		gap: var(--techbbq-space-3);
	}

	.techbbq-hero__actions {
		flex-direction: row;
		align-items: center;
	}

	.techbbq-hero__highlights {
		width: auto;
		min-height: 36px;
		padding: 8px;
		font-size: var(--techbbq-text-paragraph-s-size);
		justify-content: unset;
	}
}

/* ── Desktop (1024–1440) ──────────────────────────────────────── */
@media (min-width: 1024px) {
	.techbbq-hero {
		--techbbq-hero-peek: 310px;
		--techbbq-hero-bleed: 320px;
	}

	/* Relocated from original base (desktop defaults) */
	.techbbq-hero {
		--techbbq-hero-brow-size: var(--techbbq-text-h6-size);
		--techbbq-hero-brow-line-height: var(--techbbq-text-h6-line-height);
		--techbbq-hero-brow-letter-spacing: var(--techbbq-text-h6-letter-spacing);
		--techbbq-hero-brow-font: var(--techbbq-font-family-heading);
	}

	.techbbq-hero__highlights {
		min-height: 44px;
		padding: 10px;
		font-size: var(--techbbq-text-paragraph-m-size);
	}
}