/**
 * HTG Section Intro — styles
 *
 * Pure content block. No background, no full-bleed — those belong to a
 * wrapping htg/section. Block reaches the page width whatever its parent
 * container provides; columns and rule live within that width.
 */

.htg-section-intro {
	width: 100%;
}

/* --- Split layout (two columns) ----------------------------------- */

.htg-section-intro--layout-split .htg-section-intro__columns {
	display: grid;
	align-items: start;
}

.htg-section-intro--layout-split.htg-section-intro--ratio-50-50 .htg-section-intro__columns { grid-template-columns: 1fr 1fr; }
.htg-section-intro--layout-split.htg-section-intro--ratio-60-40 .htg-section-intro__columns { grid-template-columns: 3fr 2fr; }
.htg-section-intro--layout-split.htg-section-intro--ratio-70-30 .htg-section-intro__columns { grid-template-columns: 7fr 3fr; }
.htg-section-intro--layout-split.htg-section-intro--ratio-40-60 .htg-section-intro__columns { grid-template-columns: 2fr 3fr; }
.htg-section-intro--layout-split.htg-section-intro--align-top    .htg-section-intro__columns { align-items: start; }
.htg-section-intro--layout-split.htg-section-intro--align-middle .htg-section-intro__columns { align-items: center; }
.htg-section-intro--layout-split.htg-section-intro--align-bottom .htg-section-intro__columns { align-items: end; }

/* Column gap shrinks as gap-size shrinks. At sm the gap equals the
   elevated card grid's gap (var(--sp-md)), so section-intro's column
   edges sit at exactly the same x-coordinates as the card inner edges
   below at that setting. */
.htg-section-intro--layout-split.htg-section-intro--gap-xl .htg-section-intro__columns { gap: var(--sp-3xl); }
.htg-section-intro--layout-split.htg-section-intro--gap-lg .htg-section-intro__columns { gap: var(--sp-2xl); }
.htg-section-intro--layout-split.htg-section-intro--gap-md .htg-section-intro__columns { gap: var(--sp-xl); }
.htg-section-intro--layout-split.htg-section-intro--gap-sm .htg-section-intro__columns { gap: var(--sp-md); }

/* Heading column is a flex container so the heading element sizes to its
   content and can be positioned within the column via justify-content +
   padding-left. Text inside the heading stays left-aligned. */
.htg-section-intro--layout-split .htg-section-intro__heading-col {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

/* As gap shrinks, the heading element shifts right within col 1:
   xl/lg/md use progressively bigger padding-left, and sm switches to
   justify-content: flex-end so the heading's right edge lands exactly
   at col 1's right edge — which equals the card's right inner edge below. */
.htg-section-intro--layout-split.htg-section-intro--gap-xl .htg-section-intro__heading-col { padding-left: 0; }
.htg-section-intro--layout-split.htg-section-intro--gap-lg .htg-section-intro__heading-col { padding-left: var(--sp-2xl); }
.htg-section-intro--layout-split.htg-section-intro--gap-md .htg-section-intro__heading-col { padding-left: calc(2 * var(--sp-2xl)); }
.htg-section-intro--layout-split.htg-section-intro--gap-sm .htg-section-intro__heading-col {
	padding-left: 0;
	justify-content: flex-end;
}

.htg-section-intro--layout-split.htg-section-intro--ratio-about .htg-section-intro__heading-col {
	display: block;
	padding-left: 0;
	justify-content: flex-start;
}

/* Text column's right padding grows as gap shrinks — the body text
   wraps narrower at smaller gaps. The text's left edge always sits at
   col 2's left edge, which at sm equals the card's left inner edge below. */
.htg-section-intro--layout-split.htg-section-intro--gap-xl .htg-section-intro__text-col { padding-right: 0; }
.htg-section-intro--layout-split.htg-section-intro--gap-lg .htg-section-intro__text-col { padding-right: var(--sp-lg); }
.htg-section-intro--layout-split.htg-section-intro--gap-md .htg-section-intro__text-col { padding-right: var(--sp-2xl); }
.htg-section-intro--layout-split.htg-section-intro--gap-sm .htg-section-intro__text-col { padding-right: var(--sp-3xl); }

.htg-section-intro--layout-split.htg-section-intro--ratio-about {
	width: 100%;
	max-width: 1260px;
	margin-inline: auto;
}

.htg-section-intro--layout-split.htg-section-intro--ratio-about .htg-section-intro__columns {
	grid-template-columns: 320px minmax(0, 827px);
	gap: clamp(64px, 7.85vw, 113px);
}

.htg-section-intro--layout-split.htg-section-intro--ratio-about .htg-section-intro__text-col {
	padding-top: 53px;
	padding-right: 0;
}

/* --- Stacked layout ----------------------------------------------- */

.htg-section-intro--layout-stacked .htg-section-intro__columns {
	display: flex;
	flex-direction: column;
}

.htg-section-intro--layout-stacked.htg-section-intro--gap-sm .htg-section-intro__columns { gap: var(--sp-sm); }
.htg-section-intro--layout-stacked.htg-section-intro--gap-md .htg-section-intro__columns { gap: var(--sp-md); }
.htg-section-intro--layout-stacked.htg-section-intro--gap-lg .htg-section-intro__columns { gap: var(--sp-lg); }
.htg-section-intro--layout-stacked.htg-section-intro--gap-xl .htg-section-intro__columns { gap: var(--sp-xl); }

/* --- Heading + text column inner styling -------------------------- */

.htg-section-intro__heading {
	margin: 0;
}

.htg-section-intro__eyebrow {
	margin: 0 0 42px;
	font-family: var(--ff-mono);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1;
	letter-spacing: 0;
	color: var(--c-red);
}

.htg-section-intro__left-text {
	margin-top: 30px;
	max-width: 320px;
	font-size: 14px;
	line-height: 22px;
	color: #393d41;
}

.htg-section-intro__left-text p {
	max-width: none;
	margin: 0 0 14px;
}

.htg-section-intro__left-text p:last-child {
	margin-bottom: 0;
}

.htg-section-intro--ratio-about .htg-section-intro__heading {
	font-size: 48px;
	line-height: 56px;
}

.htg-section-intro__text-col {
	font-size: var(--fs-base);
	line-height: 1.6;
}

.htg-section-intro--text-large .htg-section-intro__text-col {
	font-size: 18px;
	line-height: 30px;
}

.htg-section-intro__text-col p {
	max-width: none;
	margin: 0 0 var(--sp-sm);
}
.htg-section-intro__text-col p:last-child { margin-bottom: 0; }

/* --- Highlight style: auto adapts to parent htg/section background -- */

/* Default (on-light) is already set by .hl-headline__text in main.css.
   When 'auto' and inside a dark htg/section, flip to white box / black text
   without needing JS to know the parent's color. */
.htg-section--bg-navy   .htg-section-intro__heading.is-auto .hl-headline__text,
.htg-section--bg-dark-grey .htg-section-intro__heading.is-auto .hl-headline__text,
.htg-section--bg-black .htg-section-intro__heading.is-auto .hl-headline__text {
	color: var(--c-ink);
	background: var(--c-white);
}

/* --- Inverted highlight variant (black box, white text override) --- */

.htg-section-intro__heading.is-inverted .hl-headline__text {
	color: var(--c-white);
	background: var(--c-ink);
}

/* --- Optional rule below the columns ------------------------------ */

.htg-section-intro__rule {
	border: 0;
	border-top: 1px solid var(--c-ink-10);
	margin: var(--sp-lg) 0 0;
}

.htg-section--bg-dark-grey .htg-section-intro__rule,
.htg-section--bg-navy .htg-section-intro__rule,
.htg-section--bg-black .htg-section-intro__rule {
	border-top-color: rgba(255, 255, 255, 0.15);
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 768px) {
	/* Force the columns into a single-column stack AND override the
	   per-gap-size column-gap rules (which set gap to sp-lg through
	   sp-3xl). Same [class*="--gap-"] specificity trick used below for
	   the heading-col/text-col paddings — without this, the desktop
	   gap-size's column-gap was bleeding through as huge vertical
	   space between the stacked heading and body. */
	.htg-section-intro--layout-split[class*="--gap-"] .htg-section-intro__columns {
		grid-template-columns: 1fr !important;
		gap: 10px;
	}
	/* On mobile the columns stack, so the desktop per-gap padding and
	   the heading's right-anchored alignment at gap-sm shouldn't apply.
	   Same specificity bump (0,3,0) so the reset wins. */
	.htg-section-intro--layout-split[class*="--gap-"] .htg-section-intro__heading-col,
	.htg-section-intro--layout-split[class*="--gap-"] .htg-section-intro__text-col {
		padding-left: 0;
		padding-right: 0;
	}
	.htg-section-intro--layout-split[class*="--gap-"] .htg-section-intro__heading-col {
		justify-content: flex-start;
	}

	.htg-section-intro--layout-split.htg-section-intro--ratio-about .htg-section-intro__columns {
		grid-template-columns: 1fr !important;
		gap: 26px;
	}

	.htg-section-intro__eyebrow {
		margin-bottom: 26px;
	}

	.htg-section-intro--layout-split.htg-section-intro--ratio-about .htg-section-intro__text-col {
		padding-top: 0;
	}

	.htg-section-intro--ratio-about .htg-section-intro__heading {
		font-size: 38px;
		line-height: 44px;
	}

	.htg-section-intro--text-large .htg-section-intro__text-col {
		font-size: 16px;
		line-height: 27px;
	}
}

@media (max-width: 480px) {
	.htg-section-intro__eyebrow {
		margin-bottom: 22px;
		font-size: 13px;
	}

	.htg-section-intro__left-text {
		margin-top: 22px;
	}

	.htg-section-intro--ratio-about .htg-section-intro__heading {
		font-size: 34px;
		line-height: 39px;
	}

	.htg-section-intro--text-large .htg-section-intro__text-col {
		font-size: 15px;
		line-height: 25px;
	}
}