/**
 * Hero — template-parts/hero.php, front-page.php only.
 *
 * Reused as-is, nothing redefined: all color/spacing/type/motion/radius/
 * shadow tokens, .container, .btn/.btn--primary/.btn--secondary, .badge/
 * .badge--live, .section-label, the signal-chevron partial, get_icon().
 *
 * The visual column now holds 4 real photos (Customizer-editable, see
 * template-parts/hero.php's docblock) instead of its original CSS-only
 * clip-path'd "broadcast graphics" composition — rounded (--radius-xl, a
 * deliberate one-off exception to the brand's sharp-corners rule, scoped
 * to these images only) plain rectangles with a normal `box-shadow:
 * var(--shadow-hard)` rather than the `filter: drop-shadow()` the old
 * clip-path'd shapes needed.
 */

/* =========================================================
   Shell — cancels body's fixed-header padding-top (see header.css) so
   the background paints behind the transparent header, then re-adds
   equivalent padding so the actual CONTENT still clears the header bar.
   Exactly the pattern header.css documented for future hero sections.
   ========================================================= */

.hero {
	position: relative;
	overflow: hidden;
	margin-top: calc(var(--header-height) * -1);
	padding-top: var(--header-height);
}

/* Background wash + ONE thin diagonal accent-tinted band, sharp-edged
   (no blur) — the brand-appropriate replacement for a soft ambient glow
   or film-grain texture (both read as calm/editorial, the opposite of
   this brief). Just two stacked linear-gradients, no raster asset. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--color-accent) 5%, transparent) 39%, color-mix(in srgb, var(--color-accent) 5%, transparent) 41%, transparent 42%),
		linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 60%, var(--color-bg) 100%);
}

/* =========================================================
   Full-height shell — 85-95vh per the brief, not a forced 100vh. Lives on
   .hero's own .container (not .hero__grid) as a flex column so the
   two-column grid and .hero-stats stack normally, with .hero__grid
   (flex: 1 below) absorbing whatever leftover height the min-height
   creates.

   Tried `justify-content: space-between` first: with only 2 flex
   children that just relocates the dead space instead of removing it —
   100% of the leftover height lands as ONE big gap immediately above
   .hero-stats instead of trailing after it, still reading as an empty
   band. Giving .hero__grid `flex: 1` instead makes IT stretch to fill
   the leftover height, and its own `align-items: center` centers the
   content/visual within that taller box — the leftover space ends up
   split above and below the centered content (reads as an intentional
   centered hero) rather than as one dead block wedged before the stats
   row, which then sits directly under the grid with just its own
   padding, no extra gap.

   Midnight Broadcast puts this same min-height on .hero__grid directly
   instead (no flex shell) — checked it directly (temporarily switched
   the live site to that theme and screenshotted) and it has the
   identical dead-gap bug, just unnoticed there so far.
   ========================================================= */

.hero > .container {
	display: flex;
	flex-direction: column;
	min-height: 85vh;
}

@media (min-width: 1024px) {
	.hero > .container {
		min-height: 92vh;
	}
}

/* =========================================================
   Two-column grid — stacks content-first/visual-second on mobile, same
   reasoning as Midnight Broadcast: the value prop needs to be legible
   immediately, not layered under a decorative panel. flex:1 (see the
   shell comment above) is what makes this absorb the hero's leftover
   min-height instead of .hero-stats being shoved down away from it.
   ========================================================= */

.hero__grid {
	display: grid;
	flex: 1;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--space-9);
	padding-block: var(--space-9);
}

@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: 1fr 1.15fr;
		gap: var(--space-10);
	}
}

/* =========================================================
   Content column
   ========================================================= */

/* min-width:0 — the actual mobile UI bug: .hero__grid's items are
   default grid items, whose min-width is `auto` (= their content's
   min-content size) unless overridden. .btn's `white-space: nowrap`
   (main.css) gives the primary CTA a wide, unbreakable min-content size
   — "Regarder maintenant à 14,99€/mois" measured ~434px at a 375-390px
   viewport, wider than the 1fr column it sits in. Without this, that
   forces .hero__content (and everything else in it: headline, chips)
   to that same width, overflowing past the grid track and getting
   silently clipped by html's overflow-x:hidden — invisible text loss,
   not a visible scrollbar, which is why it didn't show up in a
   scrollWidth check. .hero__visual gets the same fix for the identical
   reason, even though nothing inside it currently forces a similar
   width. */
.hero__content,
.hero__visual {
	min-width: 0;
}

.hero__content {
	text-align: center;
}

.hero__headline {
	max-width: 20ch;
	margin-inline: auto;
}

.hero__subheadline {
	margin-top: var(--space-5);
	max-width: 46ch;
	margin-inline: auto;
	font-size: var(--fs-md);
	line-height: var(--lh-md);
}

.hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

/* Below desktop, let the primary CTA's label wrap instead of forcing
   .btn's usual white-space:nowrap — that default is right for every
   short button label sitewide, but this one is uniquely long AND
   price-variable (the %s in signal_tunnel_hero_cta_label), so at
   narrow widths min-width:0 above isn't enough on its own: the button
   would still try to stay exactly as wide as its unbroken text. Sized
   to fill the row instead of hugging its own (still-wide) content. */
@media (max-width: 1023px) {
	.hero__cta-row .btn--primary {
		flex: 1 1 100%;
		white-space: normal;
		text-align: center;
	}
}

.hero__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* =========================================================
   Visual column — the broadcast-graphics composition, decorative only
   (aria-hidden in the markup). Fade-in-on-load only, not scroll-linked
   parallax — same reasoning as header.js avoiding scroll listeners
   entirely: a CSS-only entrance costs nothing and can't delay LCP since
   it never touches the content column.
   ========================================================= */

.hero__visual {
	position: relative;
	animation: hero-visual-in var(--duration-slow) var(--ease-emphasized) both;
	animation-delay: 120ms;
}

@keyframes hero-visual-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__visual {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.hero-graphic {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	max-width: 38rem;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.hero-graphic {
		margin-inline: 0;
	}
}

/* =========================================================
   Featured panel — a diagonal-cut corner (clip-path), an accent wedge
   revealed in that same cut via a hard-stop gradient (not a second
   element), and a flat offset shadow. This IS the "broadcast graphics
   overlay" the brief asks for, built from two CSS declarations.
   ========================================================= */

.hero-graphic__panel--featured {
	position: relative;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-hard);
}

.hero-graphic__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-graphic__badge {
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	z-index: 1;
}

.hero-graphic__play {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-bg) 55%, transparent);
	color: var(--color-text);
	border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
}

/* =========================================================
   Tile row — 3 smaller angular tiles, alternating corner-cut direction
   for rhythm (a "signal" feel of shapes pointing different ways, not a
   monotonous repeat of the same cut).
   ========================================================= */

.hero-graphic__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}

.hero-graphic__tile {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-hard);
}

/* =========================================================
   Stats row — full width of the container, below the two-column area.
   ========================================================= */

.hero-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-7) var(--space-4);
	padding-top: var(--space-8);
	padding-bottom: var(--space-9);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
	.hero-stats {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-6);
	}

	.hero-stats__item:not(:first-child) {
		padding-left: var(--space-6);
		border-left: 1px solid var(--color-border);
	}
}

.hero-stats__number {
	display: flex;
	align-items: baseline;
	gap: 0.05em;
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-black);
	color: var(--color-text);
	line-height: 1;
}

.hero-stats__suffix {
	color: var(--color-accent);
}

.hero-stats__label {
	margin-top: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}