/**
 * upcomer/page-hero-intro
 *
 * The <section> bleeds full-width via the .alignfull breakout in
 * blocks-canvas.css; the .upcomer-block__inner wrapper holds the content on
 * the same column grid the rest of the site uses (matching the gamurs/footer
 * --bottom-nav--container--*--max-width custom properties).
 *
 * Aesthetic: editorial statement. Confident display type, generous vertical
 * rhythm, a single accent rule that bridges the headline to the lede.
 */

/* ---- Background bleed (the section) ----------------------------------- */

.upcomer-block--page-hero-intro {
	--page-hero-bg: #0a0a0a;
	--page-hero-accent: #ffd84d;
	--page-hero-fg: #ffffff;
	--page-hero-fg-muted: rgba(255, 255, 255, 0.78);

	/* Shared content column with the rest of the site (matches gamurs footer). */
	--page-hero-content-max: calc(1px * var(--wp--custom--bottom-nav--container--desktop--max-width, 1200));

	background: var(--page-hero-bg);
	color: var(--page-hero-fg);
	margin: 0;

	/* Vertical rhythm only — horizontal control lives on the inner wrapper.
	   Asymmetric padding: less above the headline, more below the lede, so the
	   purple has room to settle before the cut into the next section. */
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4.5rem, 10vw, 7.5rem);
	padding-inline: 0;

	box-sizing: border-box;
}

.upcomer-block--page-hero-intro *,
.upcomer-block--page-hero-intro *::before,
.upcomer-block--page-hero-intro *::after {
	box-sizing: border-box;
}

/* ---- Content column (the inner wrapper) ------------------------------- */

.upcomer-block--page-hero-intro .upcomer-block__inner {
	max-width: var(--page-hero-content-max);
	margin-inline: auto;
}

/* Match the laptop/mobile breakpoints used by gamurs/footer-nav so the
   hero column lines up with the footer column at every viewport. The
   `latpop` typo is intentional — it mirrors the canonical token name. */
@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-block--page-hero-intro .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--latpop--max-width, 1200));
	}
}

@media (max-width: 991px) {
	.upcomer-block--page-hero-intro .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--mobile--max-width, 720));
		/* Match the gamurs site-wide mobile gutter (theme.css uses 15px). */
		padding-inline: 15px;
	}
}

/* ---- Headline --------------------------------------------------------- */

.upcomer-block--page-hero-intro .upcomer-block__headline {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(2.625rem, 7vw, 6rem);
	line-height: 0.97;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.upcomer-block--page-hero-intro .upcomer-block__headline .line-one,
.upcomer-block--page-hero-intro .upcomer-block__headline .line-two {
	display: block;
}

.upcomer-block--page-hero-intro .upcomer-block__headline .line-two {
	color: var(--page-hero-accent);
}

/* ---- Accent rule ------------------------------------------------------ */
/* A deliberate accent bar that anchors the composition between headline and
   lede. Sized to register as a compositional element, not a stray hairline. */

.upcomer-block--page-hero-intro .upcomer-block__rule {
	display: block;
	width: clamp(4rem, 10vw, 6.5rem);
	height: 5px;
	margin-block: clamp(2rem, 4.5vw, 3rem) clamp(1.25rem, 2.5vw, 2rem);
	background: var(--page-hero-accent);
	border-radius: 0;
}

/* ---- Lede ------------------------------------------------------------- */

.upcomer-block--page-hero-intro .upcomer-block__lede {
	max-width: 75ch;
	margin: 0;
	color: var(--page-hero-fg-muted);
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	/* Editorial-weight lede: 18px floor on mobile so it reads as opening copy,
	   not as caption text under a 42px headline. */
	font-size: clamp(1.125rem, 0.875rem + 0.6vw, 1.25rem);
	line-height: 1.55;
	letter-spacing: 0.005em;
	text-wrap: pretty;
}

.upcomer-block--page-hero-intro .upcomer-block__lede em {
	font-style: italic;
	color: var(--page-hero-fg);
}

.upcomer-block--page-hero-intro .upcomer-block__lede strong {
	font-weight: 700;
	color: var(--page-hero-fg);
}