/* =========================================================================
   Boyle Built — Section Heading

   Reproduces the eyebrow / title / gold-accent-rule structure already
   established by every homepage section heading (Services, Projects,
   Process, Testimonials) as one shared component. Two alignment variants
   and two colour themes only — the interior designs don't demonstrate more
   than that, so no further variants are added here.
   ========================================================================= */

.section-heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.section-heading__eyebrow {
	margin: 0;
	color: var(--color-gold);
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
}

.section-heading__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
}

.section-heading__accent {
	background-color: var(--color-gold);
	height: 2px;
	width: 32px;
}

.section-heading__intro {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	max-width: 640px;
}

/* -------------------------------------------------------------------------
   Alignment
   ------------------------------------------------------------------------- */

.section-heading--align-left {
	align-items: flex-start;
	text-align: left;
}

.section-heading--align-center {
	align-items: center;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Theme: light (default) — for light section backgrounds
   ------------------------------------------------------------------------- */

.section-heading--theme-light .section-heading__title {
	color: var(--color-ink);
}

.section-heading--theme-light .section-heading__intro {
	color: var(--color-body-muted);
}

/* -------------------------------------------------------------------------
   Theme: dark — for dark section backgrounds (e.g. a dark-timber CTA strip)
   ------------------------------------------------------------------------- */

.section-heading--theme-dark .section-heading__title {
	color: var(--color-text-light);
}

.section-heading--theme-dark .section-heading__intro {
	color: var(--color-text-muted-lt1);
}

/* -------------------------------------------------------------------------
   Tablet (601–1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 601px) {
	.section-heading__title {
		font-size: 36px;
	}

	.section-heading__accent {
		width: 40px;
	}
}

/* -------------------------------------------------------------------------
   Desktop (1025px+)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.section-heading__title {
		font-size: 44px;
	}

	.section-heading__accent {
		width: 40px;
	}
}