/**
 * P16 Section header (Figma Home 107:669, Board 170:2793, Events 210:6355).
 *
 * Skin for the parent's kds/section-header markup, opt-in by `.lts-section-header`
 * so the parent's bare `.kd-section-header` (primary-coloured title, 1.1 line
 * height, its own margins) is never restyled. Centred H2 (section-title preset,
 * 48/50 at 1440, fluid to 30 at 390: size comes from the `has-section-title-font-size`
 * class, not from here), Deep, Medium. The lead is optional (the design draws none;
 * derived: large preset, body ink, 38rem measure). Heading -> content gap 57px at
 * desktop (Figma: heading bottom 2482 -> cards 2539), derived 48 / 32 below.
 *
 * Specificity: the parent's `!important` margins are `.kd-section-header`
 * (0,1,0), `.kd-section-header h2` (0,1,1) and, from its own partial that loads
 * AFTER this one (partials sort by basename: lts-* before section-header),
 * `.kd-section-header.kd-section { margin-bottom: 0 !important }` (0,2,0). The
 * header rules below are `.kd-section-header.kd-section.lts-section-header`
 * (0,3,0), so they win by specificity, not by order.
 */

.kd-section-header.kd-section.lts-section-header {
	max-width: none;
	margin-block-end: 3.5625rem !important; /* 57px */
	text-align: center;
}

/* The parent also sets the gap from the NEXT section
   (`.kd-section-header.kd-section + .kd-section`, 64px, 0,3,0) and the page owl
   (`.entry-content > * + *`, 120px) wins over a margin-bottom through margin
   collapsing, so the drawn 57px is stated on the following sibling too. */
.entry-content > .lts-section-header.kd-section-header.kd-section + * {
	margin-block-start: 3.5625rem;
}

.kd-section-header.lts-section-header .kd-section-header__title {
	margin-block: 0 !important;
	color: var(--wp--preset--color--contrast);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 50 / 48 */
	text-wrap: balance;
}

.kd-section-header.lts-section-header .kd-section-header__lead {
	max-width: 38rem;
	margin: 1.25rem auto 0 !important;
	color: var(--wp--preset--color--body-ink);
	line-height: 1.6;
}

/* Optional eyebrow: restates .is-style-eyebrow because the parent's `.kd-section-header .kd-eyebrow` (0,2,0) would otherwise win. */
.kd-section-header.lts-section-header .kd-eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--custom--typography--eyebrow);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.25;
	letter-spacing: var(--wp--custom--typography--tracking-eyebrow);
	color: var(--lts-accent-text);
}

/* Header -> content gap (derived: no tablet / mobile frames). */
@media (max-width: 1024px) {
	.kd-section-header.kd-section.lts-section-header {
		margin-block-end: 3rem !important;
	}

	.entry-content > .lts-section-header.kd-section-header.kd-section + * {
		margin-block-start: 3rem;
	}
}

@media (max-width: 781.98px) {
	.kd-section-header.kd-section.lts-section-header {
		margin-block-end: 2rem !important;
	}

	.entry-content > .lts-section-header.kd-section-header.kd-section + * {
		margin-block-start: 2rem;
	}
}
