/**
 * Pattern: Section Header (eyebrow + H2 + lead)  —  patterns/section-header.php
 *
 * Centered intro: small eyebrow kicker, large purple heading, optional lead.
 * Add `kd-section-header--left` to left-align. One pattern = one partial.
 * (The shared `.kd-section-header` base — measure, centering, bottom gap — is in
 * global.css; this partial adds the element-level type styles + the left variant.)
 */

/* Eyebrow — small uppercase kicker above the heading. */
.kd-section-header .kd-eyebrow {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blg-color-contrast); /* BLGA: H2 spec is petrol, not primary (B2 flag) */
	margin: 0 0 var(--blg-gap-tight);
}

/* Heading — section title: Montserrat Black, purple, display size (Figma ~50px).
   Scoped under .kd-section-header to beat the legacy `.kd-section-header h2`
   responsive rule in global.css so this partial owns the title sizing. */
.kd-section-header .kd-section-header__title {
	/* !important to beat the global `h2 { ...!important }` mobile down-scale rules —
	   a section title is a display heading, not a body h2, so it sizes on its own. */
	font-size: clamp(2rem, 4vw, 3.125rem) !important;
	color: var(--blg-color-contrast); /* BLGA: H2 spec is petrol, not primary (B2 flag) */
	line-height: 1.1;
	margin: 0;
}

/* Lead — supporting paragraph under the heading. */
.kd-section-header__lead {
	margin: var(--blg-gap-normal) 0 0;
	color: var(--blg-color-body);
}

/* Left-aligned variant — overrides the centered base. */
.kd-section-header.kd-section-header--left {
	margin-inline: 0;
	text-align: left;
}

/* As a standalone section, vertical rhythm comes from .kd-section padding (60+60
   → 120 between sections). Drop the legacy header→content bottom margin, which only
   applies when content follows the header *inside* a section. */
.kd-section-header.kd-section {
	margin-bottom: 0 !important;
}

/* Tablet (≤1024px) — tighten section-header rhythm */
@media (max-width: 1024px) {
	.kd-section-header {
		margin-bottom: 48px !important;
	}
}