/* Block - Hero: WordPress additions to the design's hero.css (loaded with the block, on the site and in the editor) */

/* Only the first hero sits under the overlay header; any later hero keeps its own padding
   (the design's ".cs-overlaybar ~ main .cs-hero" would give every hero the extra top space) */
.cs-overlaybar ~ main .cs-hero ~ .cs-hero {
	padding-top: 140px;
	padding-bottom: 140px;
}
.cs-overlaybar ~ main .cs-hero ~ .cs-hero--brand {
	padding-top: 80px;
	padding-bottom: 80px;
}
.cs-overlaybar ~ main .cs-hero ~ .cs-hero:has(.cs-hero__facts) {
	padding-top: 104px;
	padding-bottom: 104px;
}
@media (max-width: 991px) {
	.cs-overlaybar ~ main .cs-hero ~ .cs-hero {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.cs-overlaybar ~ main .cs-hero ~ .cs-hero--brand {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.cs-overlaybar ~ main .cs-hero ~ .cs-hero:has(.cs-hero__facts) {
		padding-top: 88px;
		padding-bottom: 88px;
	}
}
@media (max-width: 767px) {
	.cs-overlaybar ~ main .cs-hero ~ .cs-hero:has(.cs-hero__facts) {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}
@media (max-width: 575px) {
	.cs-overlaybar ~ main .cs-hero ~ .cs-hero {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.cs-overlaybar ~ main .cs-hero ~ .cs-hero--brand {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* Hero headings with another tag than H1 (Block - Hero > Heading tag): the design styles "h1" in heroes, so the same
   rules for the .h1 class on h2-h6 and p, in the design's order (hero.css) */
.cs-hero :is(h2, h3, h4, h5, h6, p).h1 {
	color: var(--white);
	font-size: clamp(2.4375rem, 4.6vw, 3.9375rem);
	line-height: 1.06;
	margin-bottom: 22px;
}
@media (max-width: 575px) {
	.cs-hero :is(h2, h3, h4, h5, h6, p).h1 {
		font-size: 2rem;
		margin-bottom: 14px;
	}
}
.cs-hero--brand :is(h2, h3, h4, h5, h6, p).h1 {
	margin-bottom: 20px;
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}
.cs-hero--modern :is(h2, h3, h4, h5, h6, p).h1 {
	letter-spacing: -1px;
	text-wrap: balance;
}