/* Initiatives page template and its blocks, plus the Donate page's
   "Where your gift goes" list. Type follows the site's MaxiBlocks style
   card: Roboto Condensed headings (bold for titles), Arial 16/26 body. */

.rec,
.rec-programs {
	/* Short names for the site tokens (style.css). */
	--ink: var(--rhsa-ink);
	--red: var(--rhsa-red);
	--rule: var(--rhsa-line);
	--rule-strong: var(--rhsa-ink);
	--body: var(--rhsa-body);
	--paper: var(--rhsa-paper);
	--cond: var(--rhsa-cond);
	--sans: var(--rhsa-sans);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 26px;
}

/* Astra's .ast-container is a flex row; make the page span it. */
.rec-page { flex: 1 1 100%; width: 100%; }

.rec *, .rec-programs * { box-sizing: border-box; }

.rec h1, .rec h2, .rec h3,
.rec-programs h2, .rec-programs h3 {
	font-family: var(--cond);
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}

/* Same column as every other page: 90% of the window, at most 1170px
   (see layout.css). */
.rec-wrap { width: min(1170px, 90%); margin: 0 auto; }

/* Hero: the photo runs full width, like the other pages' heroes. Text
   sits on the left of the page column over an ink shade that fades to
   the right, and the section links run along a darker band at the
   bottom. Shade values were checked against WCAG with the real photo:
   every text spot is 7:1 or better (AAA) on desktop and phones. */
.rec-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 520px;
	background: var(--ink);
	color: #fff;
	overflow: hidden;
}
.rec-hero__photo { position: absolute; inset: 0; margin: 0; }
.rec-hero__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	display: block;
}
.rec-hero__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%);
}
/* On mid-size screens the text reaches further across, so the shade
   stays strong for longer. */
@media (min-width: 961px) and (max-width: 1300px) {
	.rec-hero__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%);
	}
}
.rec-hero__inner { position: relative; }
.rec-hero__text { max-width: 600px; padding-top: 96px; }
.rec .rec-kicker {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	margin: 0 0 12px;
}
.rec .rec-title {
	font-weight: 700;
	font-size: 56px;
	line-height: 64px;
	color: #fff;
	margin-bottom: 24px !important;
}
.rec-lede {
	font-size: 20px;
	line-height: 32px;
	margin: 0;
	color: #fff;
}
.rec-lede strong { font-weight: 700; color: #fff; }
.rec-lede p { margin: 0 0 1em; }
.rec-lede p:last-child { margin-bottom: 0; }

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

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

.rec-h2 { font-weight: 700; font-size: 40px; line-height: 48px; }

/* The record: each section block sits on a full-bleed paper tint */
.rec-block {
	background: var(--paper);
	box-shadow: 0 0 0 100vmax var(--paper);
	clip-path: inset(0 -100vmax);
}
.rec-bucket { padding: 72px 0 24px; scroll-margin-top: 24px; }
.rec-content > .rec-block:last-child { padding-bottom: 96px; }

.rec-bucket__head {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 0 20px;
	align-items: end;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--rule-strong);
}
.rec-bucket__numeral {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	color: var(--red);
}
.rec-bucket__name h2 { font-weight: 700; font-size: 40px; line-height: 48px; margin-bottom: 4px; }
.rec-bucket__name p { font-size: 16px; line-height: 26px; color: var(--body); margin: 0; }
.rec-bucket__total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rec-bucket__num {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.rec-bucket__unit { font-size: 14px; line-height: 20px; color: var(--body); margin-top: 8px; }
.rec-bucket__asof { font-size: 13px; line-height: 20px; color: var(--body); }

/* Sub-group heading inside a bucket (e.g. Public Safety) */
.rec .rec-group {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: var(--red);
	margin: 0;
	padding: 28px 0 8px 96px;
	border-bottom: 1px solid var(--rule);
}

/* Program rows */
.rec-row {
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	box-shadow: -24px 0 0 var(--paper), 24px 0 0 var(--paper);
	transition: background-color .45s ease, box-shadow .45s ease;
}
.rec-row[open] {
	background: #fff;
	box-shadow: -24px 0 0 #fff, 24px 0 0 #fff;
}
.rec-row > summary,
.rec-row__line,
.rec-next__row {
	display: grid;
	grid-template-columns: 76px 108px minmax(0, 1fr) 120px 28px;
	gap: 0 20px;
	align-items: center;
	padding: 16px 0;
}
.rec-row > summary { list-style: none; cursor: pointer; }
.rec-row > summary::-webkit-details-marker { display: none; }
.rec-row > summary:hover .rec-name__title { color: var(--red); }
.rec-row > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.rec-row--pending .rec-name__title { color: var(--body); }
.rec-row--pending .rec-name__sum { font-style: italic; }

.rec-thumb {
	display: block;
	width: 108px;
	aspect-ratio: 3 / 2;
	background: #efece6;
	overflow: hidden;
	transition: opacity .2s;
}
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-thumb:empty { background: repeating-linear-gradient(135deg, #f1eee8 0 6px, #e8e4dc 6px 12px); }
.rec-thumb--empty { background: none !important; border: 1px dashed var(--ink); }
.rec-row[open] > summary .rec-thumb { opacity: 0; }

.rec-no {
	font-family: var(--cond);
	font-size: 15px;
	color: var(--red);
	font-variant-numeric: tabular-nums;
}
.rec-name { display: flex; flex-direction: column; gap: 4px; }
.rec-name__title { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 28px; transition: color .15s; }
.rec-name__sum { font-size: 15px; line-height: 24px; color: var(--body); }
.rec-status { font-family: var(--cond); font-size: 15px; text-align: right; }
.rec-status--ongoing::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--red);
	margin-right: 7px;
	vertical-align: 2px;
}
.rec-status--completed { color: var(--body); }

.rec-toggle { position: relative; width: 14px; height: 14px; align-self: center; justify-self: end; }
.rec-row > summary .rec-toggle::before,
.rec-row > summary .rec-toggle::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 2px;
	background: var(--ink);
	transition: transform .2s;
}
.rec-row > summary .rec-toggle::after { transform: rotate(90deg); }
.rec-row[open] > summary .rec-toggle::after { transform: rotate(0); }

.rec-detail {
	display: grid;
	grid-template-columns: 76px 6fr 5fr;
	gap: 0 20px;
	padding: 0 0 36px;
}
.rec-detail img {
	grid-column: 2;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.rec-detail__text { grid-column: 3; font-size: 16px; line-height: 26px; color: var(--body); }
.rec-detail__text p { margin: 0 0 1em; }
.rec-small { font-size: 13px; line-height: 20px; color: var(--body); }

/* Fundraisers: same rows, no total */
.rec-bucket--plain .rec-bucket__numeral { font-size: 28px; }

/* The next, unwritten line */
.rec-next { padding: 80px 0 96px; }
.rec-next__label {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 16px;
	color: var(--red);
	margin: 0 0 8px;
}
.rec-next__row {
	grid-template-columns: 76px 108px minmax(0, 1fr) 168px;
	border-top: 1px dashed var(--ink);
	border-bottom: 1px dashed var(--ink);
	padding: 22px 0;
}
.rec-next__blank {
	font-family: var(--cond);
	font-weight: 700;
	font-size: 24px;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 2px;
}
.rec-next__detail {
	display: grid;
	grid-template-columns: 76px 5fr 7fr;
	gap: 0 20px;
	padding-top: 28px;
}
.rec-next__detail img { grid-column: 2; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.rec-next__detail > div { grid-column: 3; font-size: 16px; line-height: 26px; color: var(--body); }
.rec-next__detail p { margin: 0 0 1.2em; }

/* Button: an ink pill with an arrow */
.rec-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--ink);
	color: #fff;
	font-family: var(--cond);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	padding: 15px 26px;
	border-radius: 999px;
	transition: background-color .15s;
}
.rec-btn::after { content: "\2192"; font-weight: 400; }
.rec-btn:hover, .rec-btn:focus-visible { background: var(--red); color: #fff; }

/* Note from the volunteers */
.rec-note { background: #fff; border-top: 1px solid var(--rule); padding: 96px 0; }
.rec-note__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 76px; }
.rec-note__body { font-size: 20px; line-height: 32px; color: var(--body); max-width: 36em; }
.rec-note__body p { margin: 0 0 1em; }
.rec-sign { font-family: var(--cond); font-weight: 700; color: var(--ink); font-size: 16px; margin: 24px 0 32px !important; }
.rec-sign::before { content: "\2014\00a0"; }

/* Donate page: where your gift goes */
.rec-programs { padding: 80px 0; }
.rec-programs__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px 76px; width: min(1170px, 90%); margin: 0 auto; }
.rec-programs .rec-h2 { font-family: var(--cond); font-weight: 700; font-size: 40px; line-height: 48px; margin-bottom: 12px; }
.rec-programs__intro { font-size: 16px; line-height: 26px; color: var(--body); margin: 0; }
.rec-programs ul { list-style: none; margin: 0 0 28px; padding: 0; border-top: 2px solid var(--rule-strong); }
.rec-programs li { margin: 0; border-bottom: 1px solid var(--rule); }
.rec-programs li a {
	display: grid;
	grid-template-columns: 44px 1fr 20px;
	gap: 4px 16px;
	align-items: baseline;
	padding: 18px 0;
	text-decoration: none;
	color: inherit;
}
.rec-programs li a::after { content: "\2192"; color: var(--body); transition: transform .15s, color .15s; grid-column: 3; grid-row: 1; }
.rec-programs li a:hover::after { transform: translateX(4px); color: var(--red); }
.rec-programs li a:hover strong { color: var(--red); }
.rec-programs em { font-family: var(--cond); font-weight: 700; font-style: normal; font-size: 22px; color: var(--red); grid-row: 1 / 3; line-height: 28px; }
.rec-programs strong { font-family: var(--cond); font-size: 22px; line-height: 28px; grid-column: 2; }
.rec-programs li span { font-size: 15px; line-height: 24px; color: var(--body); grid-column: 2; }

/* Responsive */
@media (max-width: 960px) {
	.rec-bucket__head { grid-template-columns: 52px minmax(0, 1fr); row-gap: 16px; }
	.rec-bucket__numeral { align-self: start; }
	.rec-bucket__total { grid-column: 2; align-items: flex-start; text-align: left; }
	.rec-row > summary, .rec-row__line { grid-template-columns: 44px 84px minmax(0, 1fr) auto; gap: 4px 14px; }
	.rec-thumb { width: 84px; }
	.rec-toggle { display: none; }
	.rec-detail, .rec-next__detail { grid-template-columns: 44px 1fr; gap: 16px 14px; }
	.rec .rec-group { padding-left: 58px; }
	.rec-detail img, .rec-detail__text,
	.rec-next__detail img, .rec-next__detail > div { grid-column: 2; }
	.rec-next__row { grid-template-columns: 44px 84px minmax(0, 1fr); gap: 4px 14px; }
	.rec-next__blank { grid-column: 3; justify-self: start; min-width: 140px; margin-top: 10px; }
	.rec-note__grid, .rec-programs__grid { grid-template-columns: 1fr; }
	/* Text spans the width here, so the shade is even across the photo. */
	.rec-hero { min-height: 0; }
	.rec-hero__photo::after { background: rgba(18, 20, 9, .84); }
	.rec-hero__text { padding-top: 72px; }
	.rec-statement__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
}
@media (max-width: 600px) {
	.rec .rec-title { font-size: 40px; line-height: 46px; }
	.rec-lede { font-size: 18px; line-height: 28px; }
	.rec-hero__text { padding-top: 56px; }
	.rec-statement { padding: 48px 0; }
	.rec .rec-statement__text { font-size: 28px; line-height: 36px; }
	.rec-index { flex-direction: column; margin-top: 32px; }
	.rec-index a { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
	.rec-index a:last-child { border-bottom: 0; }
	.rec-bucket__numeral, .rec-bucket__name h2, .rec-h2, .rec-programs .rec-h2 { font-size: 30px; line-height: 38px; }
	.rec-bucket__num { font-size: 36px; }
	.rec-name__title { font-size: 20px; line-height: 26px; }
	.rec-note__body { font-size: 18px; line-height: 28px; }
	.rec-row > summary, .rec-row__line { grid-template-columns: 32px 72px minmax(0, 1fr); align-items: start; }
	.rec-thumb { width: 72px; grid-row: 1 / 3; }
	.rec-no { padding-top: 3px; grid-row: 1 / 3; }
	.rec-status { grid-column: 3; text-align: left; font-size: 14px; }
	.rec-detail, .rec-next__detail { grid-template-columns: 32px 1fr; }
	.rec .rec-group { padding-left: 0; }
	.rec-next__row { grid-template-columns: 32px 72px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.rec-toggle::before, .rec-toggle::after, .rec-btn, .rec-statement__btn, .rec-name__title, .rec-thumb, .rec-row { transition: none; }
}

/* Open/close motion.
   With View Transitions: the thumbnail morphs into the large photo (and
   back), the story slides up after it lands, and the rest of the page
   settles without a crossfade. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

::view-transition-group(rec-media) {
	animation-duration: .55s;
	animation-timing-function: cubic-bezier(.2, .8, .2, 1);
	overflow: hidden;
}
::view-transition-old(rec-media),
::view-transition-new(rec-media) {
	animation-duration: .55s;
	height: 100%;
	object-fit: cover;
}

::view-transition-new(rec-text) {
	animation: rec-rise .45s cubic-bezier(.2, .8, .2, 1) .18s both;
}
::view-transition-old(rec-text) {
	animation: rec-sink .2s ease-in both;
}

@keyframes rec-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
@keyframes rec-sink {
	to { opacity: 0; transform: translateY(8px); }
}

/* Fallback without View Transitions: fade and rise on open. */
.rec-no-vt .rec-row[open] .rec-detail img { animation: rec-grow .45s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top left; }
.rec-no-vt .rec-row[open] .rec-detail__text { animation: rec-rise .45s cubic-bezier(.2, .8, .2, 1) .12s both; }
@keyframes rec-grow {
	from { opacity: 0; transform: scale(.25); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
	.rec-no-vt .rec-row[open] .rec-detail img,
	.rec-no-vt .rec-row[open] .rec-detail__text { animation: none; }
}