/*
 * Hero Banner block — full-width background image with a 70% black overlay
 * and a text box (heading / 4px divider / subheading) constrained to 1440px
 * to match the site header. Two padding variants: normal (70px top/bottom)
 * and large (90px top/bottom). Manrope is enqueued site-wide from
 * functions.php so it's available in both editor and frontend.
 */

.coastal-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #1a1a1a; /* fallback while image loads */
}

.coastal-hero__media,
.coastal-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.coastal-hero__media img {
	object-fit: cover;
	object-position: center;
	display: block;
}

.coastal-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

/*
 * Inner is the 1440px-max text container that mirrors the site header's
 * width. Specificity bumped to .coastal-hero .coastal-hero__inner (0,2,0)
 * and box-sizing pinned to border-box so the 85px L/R padding sits inside
 * the 1440px cap.
 *
 * !important on max-width is required to beat Astra's page-builder layout
 * rule at (0,4,0) specificity:
 *   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
 *     > *:not(.wp-block-group):where(...) > *
 * which sets max-width to the (much narrower) heading-width customizer
 * value on every grandchild of .entry-content. Chaining classes or
 * scoping to .ast-page-builder-template would also work, but couple us
 * to Astra's internal structure — !important is the least fragile fix.
 */
.coastal-hero .coastal-hero__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 1440px !important;
	margin-inline: auto;
	padding: 70px 85px;
	color: #fff;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.coastal-hero.coastal-hero--large .coastal-hero__inner {
	padding: 90px 85px;
}

/*
 * Heading / subheading selectors are scoped under .coastal-hero (specificity
 * 0,2,0) so they outrank Astra's .entry-content h2 (0,1,1) and any other
 * single-class theme rule that would otherwise override the white color.
 */
.coastal-hero .coastal-hero__heading {
	margin: 0 0 24px;
	max-width: 750px;
	font-family: inherit;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.25;
	color: #fff;
}

.coastal-hero .coastal-hero__heading--placeholder {
	opacity: 0.6;
	font-style: italic;
}

.coastal-hero .coastal-hero__divider {
	display: block;
	width: min(100%, 750px);
	height: 4px;
	margin: 0 0 24px;
	background: #5091cd;
}

.coastal-hero .coastal-hero__subheading {
	margin: 0;
	max-width: 750px;
	font-family: inherit;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.4;
	color: #fff;
}

.coastal-hero__placeholder {
	position: relative;
	z-index: 1;
	padding: 40px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-align: center;
	font-style: italic;
}

/* Tablet — keep generous left padding but pull it in from desktop's 85px. */
@media (max-width: 1024px) {
	.coastal-hero .coastal-hero__inner,
	.coastal-hero.coastal-hero--large .coastal-hero__inner {
		padding: 60px 48px;
	}

	.coastal-hero.coastal-hero--large .coastal-hero__inner {
		padding-block: 80px;
	}
}

/* Phone — left-align text with a tight 24px gutter, scale type down. */
@media (max-width: 640px) {
	.coastal-hero .coastal-hero__inner,
	.coastal-hero.coastal-hero--large .coastal-hero__inner {
		padding: 48px 24px;
	}

	.coastal-hero.coastal-hero--large .coastal-hero__inner {
		padding-block: 64px;
	}

	.coastal-hero .coastal-hero__heading {
		font-size: 26px;
	}

	.coastal-hero .coastal-hero__subheading {
		font-size: 18px;
	}

	.coastal-hero .coastal-hero__divider {
		margin-bottom: 20px;
	}
}