/* Hero Banner — About §2 (Figma 11016:4384).

   Column geometry is expressed as percentages of the module box so the section
   holds its proportions at any row width: 52/1600 = 3.25% margin offset,
   221/1600 = 13.8125% eyebrow track, 1015/1600 = 63.4375% content column.

   BB owns section spacing (bb-owns-section-spacing) — no padding, width or
   min-height here. */

.tbl-hero-banner {
	display: grid;
	grid-template-columns: 3.25% 13.8125% 63.4375% minmax(0, 1fr);
	align-items: start;
	padding: 0;
}

.tbl-hero-banner__eyebrow {
	grid-column: 2;
	min-width: 0;
	/* Optically aligned to the statement's first line, not top-aligned: 262 vs 252. */
	margin: 10px 0 0;
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	/* Paragraph - Large tracks +1 PERCENT, not +1px — 0.2px at 20px. 1px renders
	   the 9-character eyebrow 7.2px wider than the frame's 96px nowrap box. */
	letter-spacing: 0.2px;
	font-weight: 400;
	color: var(--Black);
}

.tbl-hero-banner__content {
	grid-column: 3;
	min-width: 0;
}

.tbl-hero-banner__statement {
	margin: 0 0 20px;
	font-family: var(--header-font);
	font-size: var(--h1-font-size);
	/* 62/60 and -1/60 written as exact ratios — the theme's heading defaults
	   (0.95 / -0.01em) miss the frame on both. */
	line-height: calc(31 / 30);
	letter-spacing: calc(-1em / 60);
	font-weight: var(--header-font-weight);
	/* --header-color is #0f0f0f; the frame draws all three elements pure black
	   and every shipped tbl-* module already uses this primitive. */
	color: var(--Black);
	text-transform: none;
	overflow-wrap: break-word;
	/* Authorable measure. Unset by default, so the 63.4375% content column keeps
	   governing exactly as it did before the field existed. */
	max-width: var(--tbl-hero-banner-statement-max, none);
}

/* Optional H2 in the h5 tier — the `h5` class on the element carries size, line
   height, tracking AND margin, and this rule must not restate any of them.
   Measured load order on /about/: BB emits module CSS at link index 1 and
   theme.css lands at 9, so theme.css is LATER. `.tbl-hero-banner__subheadline`
   and `.h5` are both (0,1,0), the tie breaks on source order, and theme.css
   wins — anything declared here that `.h5` also sets is dead code that reads
   as authoritative. That is why there is no margin below: `--header-margin`
   (0 0 30px) applies and is correct for this tier.

   Note the sibling statement behaves the OPPOSITE way and legitimately keeps
   its own margin: it is a bare <h1>, so theme.css only reaches it through the
   element selector `h1` at (0,0,1), which the module class outranks. The
   difference is the class, not the file. */
.tbl-hero-banner__subheadline {
	color: var(--Black);
	text-transform: none;
	overflow-wrap: break-word;
	max-width: var(--tbl-hero-banner-sub-max, none);
}

.tbl-hero-banner__link {
	display: block;
	width: fit-content;
	margin: 0;
}

@media (max-width: 767px) {

	.tbl-hero-banner {
		grid-template-columns: minmax(0, 1fr);
	}

	.tbl-hero-banner__eyebrow {
		grid-column: 1;
		margin: 0 0 12px;
	}

	.tbl-hero-banner__content {
		grid-column: 1;
	}

	/* Stacked: the column is the phone, so an author's desktop measure would
	   only ever narrow it below the gutter. Matches tbl-intro-statement's
	   "full width when stacked" rule for the same knob. */
	.tbl-hero-banner__statement,
	.tbl-hero-banner__subheadline {
		max-width: none;
	}
}