/*
 * title-block.css
 * Reusable "eyebrow + h1/h2 title + body paragraph" text block,
 * used across multiple pages (Platform's "Always at the Frontier",
 * Clients' "Who we serve" and "Why clients choose us", etc).
 * Left-aligned on desktop, centered on mobile (<=767px) by default.
 * Add el_class="c-title-block__eyebrow" / "__title" / "__body" to
 * the eyebrow/title/paragraph shortcodes. Add "c-title-block--white"
 * alongside __eyebrow/__title/__body on dark backgrounds for white
 * text (e.g. el_class="c-title-block__title c-title-block--white").
 * Consolidated per Monika's reusable-component guidance.
 * Added 2026-08-25.
 */

.c-title-block__eyebrow {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-semibold);
	font-size: 13.5px;
	color: var(--color-off-black-text);
	text-align: left;
}

.c-title-block__title {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 40px;
	line-height: 120%;
	color: var(--color-off-black-text);
	text-align: left;
	margin: 20px 0;
}

.c-title-block__body {
	font-family: var(--font-primary);
	font-weight: var(--font-weight-regular);
	font-size: 18px;
	line-height: 140%;
	color: var(--color-off-black-text);
	text-align: left;
}

.c-title-block--white.c-title-block__eyebrow,
.c-title-block--white.c-title-block__title,
.c-title-block--white.c-title-block__body {
	color: var(--color-white);
}

@media (max-width: 767px) {
	.c-title-block__eyebrow,
	.c-title-block__title,
	.c-title-block__body {
		text-align: center;
	}
	.c-title-block__title {
		font-size: var(--heading-h1-mobile);
	}
	.c-title-block__body {
		font-size: 16px;
	}
}