/* Page masthead and statement band (inc/masthead.php): Initiatives, the
   Masthead template (About), News and category pages. Moved from
   initiatives.css, where it was the Initiatives hero. */

.rhsa-mast, .rhsa-statement { font-family: var(--rhsa-sans); }
/* Astra's .ast-container is a flex row; the Masthead template spans it. */
.rhsa-mast-page { flex: 1 1 100%; width: 100%; min-width: 0; }
.rhsa-mast *, .rhsa-statement * { box-sizing: border-box; }

/* The photo runs full width. Text sits on the left of the page column
   over an ink shade that fades to the right, and the links run along a
   darker band at the bottom. Shade values were checked against WCAG with
   the Initiatives photo: every text spot is 7:1 or better (AAA) on
   desktop and phones. Check again with a much lighter photo. */
.rhsa-mast {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 520px;
	background: var(--rhsa-ink);
	color: #fff;
	overflow: hidden;
}
.rhsa-mast__photo { position: absolute; inset: 0; margin: 0; }
.rhsa-mast__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	display: block;
}
.rhsa-mast__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(18, 20, 9, 0) 70%, rgba(18, 20, 9, .85) 82%, rgba(18, 20, 9, .9) 100%),
		linear-gradient(90deg, rgba(18, 20, 9, .9) 0%, rgba(18, 20, 9, .84) 40%, rgba(18, 20, 9, .5) 70%, rgba(18, 20, 9, .25) 100%);
}
/* Without the link band the bottom needs no extra shade. */
.rhsa-mast--no-links .rhsa-mast__photo::after {
	background: linear-gradient(90deg, rgba(18, 20, 9, .9) 0%, rgba(18, 20, 9, .84) 40%, rgba(18, 20, 9, .5) 70%, rgba(18, 20, 9, .25) 100%);
}
/* On mid-size screens the text reaches further across, so the shade
   stays strong for longer. */
@media (min-width: 961px) and (max-width: 1300px) {
	.rhsa-mast__photo::after {
		background:
			linear-gradient(180deg, rgba(18, 20, 9, 0) 70%, rgba(18, 20, 9, .85) 82%, rgba(18, 20, 9, .9) 100%),
			linear-gradient(90deg, rgba(18, 20, 9, .9) 0%, rgba(18, 20, 9, .86) 58%, rgba(18, 20, 9, .5) 82%, rgba(18, 20, 9, .3) 100%);
	}
	.rhsa-mast--no-links .rhsa-mast__photo::after {
		background: linear-gradient(90deg, rgba(18, 20, 9, .9) 0%, rgba(18, 20, 9, .86) 58%, rgba(18, 20, 9, .5) 82%, rgba(18, 20, 9, .3) 100%);
	}
}
/* Same column as every other page (layout.css). */
.rhsa-mast__inner, .rhsa-statement__inner { position: relative; width: min(1170px, 90%); margin: 0 auto; }
.rhsa-mast__text { max-width: 600px; padding-top: 96px; }
.rhsa-mast--no-links .rhsa-mast__text { padding-bottom: 96px; }
/* No featured image: a compact ink band. */
.rhsa-mast--plain { min-height: 0; }
.rhsa-mast--plain .rhsa-mast__text { padding-top: 72px; }
.rhsa-mast--plain.rhsa-mast--no-links .rhsa-mast__text { padding-bottom: 72px; }

.rhsa-mast .rhsa-mast__kicker {
	margin: 0 0 12px;
	font-family: var(--rhsa-cond);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
}
.rhsa-mast .rhsa-mast__title {
	margin: 0 0 24px !important;
	font-family: var(--rhsa-cond);
	font-weight: 700;
	font-size: 56px;
	line-height: 64px;
	letter-spacing: normal;
	text-transform: uppercase;
	text-wrap: balance;
	color: #fff;
}
.rhsa-mast__text > :last-child { margin-bottom: 0 !important; }
.rhsa-mast__lede { margin: 0; font-size: 20px; line-height: 32px; color: #fff; }
.rhsa-mast__lede strong { font-weight: 700; color: #fff; }
.rhsa-mast__lede p { margin: 0 0 1em; }
.rhsa-mast__lede p:last-child { margin-bottom: 0; }

/* Links: one row along the bottom band */
.rhsa-mast__links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 40px;
	margin-top: 48px;
	border-top: 1px solid rgba(255, 255, 255, .2);
}
.rhsa-mast__links a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 18px 0 20px;
	font-family: var(--rhsa-cond);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	color: #fff;
	text-decoration: none;
}
.rhsa-mast__links a span { color: var(--rhsa-red-on-dark); }
.rhsa-mast__links a:hover,
.rhsa-mast__links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 5px; }

/* Statement under the masthead: one large line and a button. */
.rhsa-statement { background: #fff; padding: 72px 0; }
.rhsa-statement__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}
.rhsa-statement .rhsa-statement__text {
	max-width: 24em;
	margin: 0;
	font-family: var(--rhsa-cond);
	font-weight: 700;
	font-size: 32px;
	line-height: 42px;
	color: var(--rhsa-ink);
	text-wrap: balance;
}
.rhsa-statement__btn {
	flex: none;
	display: inline-block;
	padding: 16px 40px;
	border-radius: 999px;
	background: var(--rhsa-red);
	color: #fff;
	font-family: var(--rhsa-cond);
	font-weight: 700;
	font-size: 18px;
	line-height: 24px;
	text-decoration: none;
	transition: background .15s;
}
.rhsa-statement__btn:hover,
.rhsa-statement__btn:focus-visible { background: var(--rhsa-ink); color: #fff; }

@media (max-width: 960px) {
	/* Text spans the width here, so the shade is even across the photo. */
	.rhsa-mast { min-height: 0; }
	.rhsa-mast .rhsa-mast__photo::after { background: rgba(18, 20, 9, .84); }
	.rhsa-mast__text { padding-top: 72px; }
	.rhsa-statement__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
}
@media (max-width: 600px) {
	.rhsa-mast .rhsa-mast__title { font-size: 40px; line-height: 46px; }
	.rhsa-mast__lede { font-size: 18px; line-height: 28px; }
	.rhsa-mast__text, .rhsa-mast--plain .rhsa-mast__text { padding-top: 56px; }
	.rhsa-mast--no-links .rhsa-mast__text, .rhsa-mast--plain.rhsa-mast--no-links .rhsa-mast__text { padding-bottom: 56px; }
	.rhsa-statement { padding: 48px 0; }
	.rhsa-statement .rhsa-statement__text { font-size: 24px; line-height: 32px; }
	.rhsa-mast__links { flex-direction: column; margin-top: 32px; }
	.rhsa-mast__links a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
	.rhsa-mast__links a:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rhsa-statement__btn { transition: none; }
}