/**
 * 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(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: var(--kd-size-eyebrow);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-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,
.kd-section-header__title {
	/* Same token as the theme.json h2 default (32 → 50px); stated here so the
	   pattern keeps its size if a fork changes the global h2. */
	font-size: var(--kd-size-section-title);
	color: var(--kd-color-primary);
	line-height: 1.1;
	margin: 0;
}

/* Lead — supporting paragraph under the heading. 48rem ≈ 768px, about 75
   characters: the upper end of a comfortable measure. Centred by default. */
.kd-section-header__lead {
	max-width: 48rem;
	margin: var(--kd-gap-normal) auto 0;
	color: var(--kd-color-body);
}

.kd-section-header--left .kd-section-header__lead {
	margin-inline: 0;
}

/* 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;
	}
}

/* A section header belongs to the content beneath it. `.kd-section` carries a
   120px top margin as the BETWEEN-sections rhythm, which is too much when the
   thing above is that section's own header — it reads as two unrelated blocks.
   Pull the pair together to --kd-space-xl (64px). */
.kd-section-header.kd-section + .kd-section {
	margin-block-start: var(--kd-space-xl);
}