/**
 * Appeals index and appeal pages (APPEALS): the live board hero, the filtered appeal grid, the
 * poster hero, the story with the "$10" tile and the field steps. Enqueued on the Appeals
 * template and on single appeals, after main.css and appeal-card.css.
 * Selectors are scoped to .appeals-*, .hero--board and .hero--poster.
 */

/* 1. Hero "Live board" (Appeals) ----------------------------------------- */
.hero--board .appeals-board__top {
	display: grid;
	gap: var(--space-l) var(--grid-gap);
}

.appeals-board__intro {
	min-width: 0;
}

.appeals-board__total {
	display: grid;
	gap: 10px;
	justify-items: start;
	min-width: 0;
}

.appeals-board__sum {
	display: grid;
	gap: 8px;
}

.appeals-board__figure {
	color: var(--c-blue-950);
	font: 800 var(--fs-stat-xl)/.95 var(--ff-display);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.appeals-board__label {
	font-size: var(--fs-lede);
	line-height: 1.4;
	color: var(--c-ink-2);
}

.appeals-board__note {
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--c-ink-3);
}

@media (min-width: 64em) {
	.hero--board .appeals-board__top {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: end;
	}

	.appeals-board__intro {
		grid-column: 1 / span 7;
	}

	.appeals-board__total {
		grid-column: 8 / -1;
		justify-items: end;
		text-align: end;
	}
}

/* The board: one hairline row per appeal. Two lines on phones (name and percent, then bar and
   amount), the region joins from 48em, and one line of five columns from 64em. */
.appeals-board {
	margin: clamp(1.75rem, 1rem + 2.4vw, 3rem) 0 0;
	padding: 0;
	border-bottom: 1px solid var(--c-line);
	list-style: none;
}

.appeals-board__row {
	position: relative;
	display: grid;
	/* A fixed figure column, so the bars (and from 48em the regions) line up from row to row. */
	grid-template-columns: minmax(0, 1fr) 6rem;
	grid-template-areas:
		"name pct"
		"bar raised";
	align-items: center;
	gap: 8px 16px;
	min-height: 56px;
	padding-block: 12px;
	border-top: 1px solid var(--c-line);
}

.appeals-board__name {
	grid-area: name;
	color: var(--c-blue-950);
	font: 600 1rem/1.35 var(--ff-display);
	letter-spacing: -.01em;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

/* The whole row is the link's target area. */
.appeals-board__name::after {
	content: "";
	position: absolute;
	inset: 0;
}

.appeals-board__row:hover .appeals-board__name,
.appeals-board__name:focus-visible {
	color: var(--c-blue);
}

.appeals-board__region {
	display: none;
	grid-area: region;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--c-ink-3);
}

.appeals-board__row > .progress {
	grid-area: bar;
}

.appeals-board__pct,
.appeals-board__raised {
	justify-self: end;
	font-size: .9375rem;
	line-height: 1.3;
	text-align: end;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.appeals-board__pct {
	grid-area: pct;
	color: var(--c-blue-950);
	font-weight: 600;
}

.appeals-board__raised {
	grid-area: raised;
	color: var(--c-ink-2);
}

@media (min-width: 48em) {
	.appeals-board__row {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 6rem;
		grid-template-areas:
			"name region pct"
			"bar bar raised";
	}

	.appeals-board__region {
		display: block;
	}
}

@media (min-width: 64em) {
	.appeals-board__row {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) 200px 56px 120px;
		grid-template-areas: "name region bar pct raised";
		column-gap: clamp(1rem, -.5rem + 2.4vw, 2rem);
		padding-block: 10px;
	}
}

/* 2. All appeals ---------------------------------------------------------- */
.appeals-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: var(--head-gap);
}

/* Space for the filter, which appears once appeals.js runs (no layout shift). Until then it
   stays hidden: .seg sets a display value, which would otherwise override [hidden]. */
.js .appeals-toolbar:has(> .appeals-filter) {
	min-height: 54px;
}

.appeals-filter[hidden] {
	display: none;
}

/* The filter's same-document view transition moves the cards only. The page itself stays put:
   the cross-document page fade (motion.css) must not play here. appeals.js sets the class for
   the length of the transition. */
html.appeals-vt::view-transition-old(root),
html.appeals-vt::view-transition-new(root) {
	animation: none;
}

.appeals-count {
	margin-left: auto;
	font-size: var(--fs-small);
	color: var(--c-ink-2);
	font-variant-numeric: tabular-nums;
}

.appeals-empty {
	max-width: var(--max-text);
	font-size: var(--fs-lede);
	color: var(--c-ink-2);
}

/* 3. Hero "Poster" (appeal) ----------------------------------------------- */
.hero--poster .appeals-poster {
	display: grid;
	gap: 16px;
}

.appeals-poster__panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	min-width: 0;
	padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	border-radius: var(--radius-l);
	background: var(--grad-navy);
	color: var(--c-on-dark);
}

.appeals-poster__title {
	max-width: 16ch;
	color: var(--c-on-dark);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem);
	line-height: 1.06;
	letter-spacing: -.03em;
}

.appeals-poster__sub {
	max-width: 40ch;
	margin-top: 16px;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--c-on-dark-2);
}

.appeals-poster__region {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--c-on-dark-2);
}

.appeals-poster__region .icon {
	width: 18px;
	height: 18px;
}

.appeals-poster__actions,
.appeals-poster__closed {
	margin-top: 24px;
}

.appeals-poster__closed {
	display: grid;
	gap: 4px;
	justify-items: start;
}

.appeals-poster__closed p {
	color: var(--c-on-dark);
	font: 600 1.125rem/1.4 var(--ff-display);
}

/* The two white stat cards stay side by side at every width. On phones the cards are narrow, so
   the figure scales down (to 20px at 360px wide) and the padding tightens, keeping "$687,592" and
   a seven-figure total on one line. */
@media (max-width: 31.99em) {
	.appeals-poster__stats .stats--cards .stat {
		padding: 14px 12px;
	}

	.appeals-poster__stats .stats--cards .stat__value {
		font-size: clamp(1.25rem, .55rem + 3.4vw, 1.75rem);
	}
}

.appeals-poster__photo {
	--ratio: 16 / 10;
}

/* A small original (under 1100px wide) never stretches past 700px (A10 size caps). */
@media (max-width: 63.99em) {
	.appeals-poster--small-photo .appeals-poster__photo {
		width: min(100%, 700px);
	}
}

.appeals-poster__credit {
	margin-top: -8px;
}

@media (min-width: 64em) {
	.hero--poster .appeals-poster {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.appeals-poster__panel,
	.appeals-poster__photo {
		min-height: clamp(32rem, 26rem + 12vw, 40rem);
	}

	/* The portrait fills the row's height. */
	.appeals-poster__photo {
		aspect-ratio: auto;
	}

	.appeals-poster__photo > img {
		position: absolute;
		inset: 0;
	}

	.appeals-poster__credit {
		grid-column: 2;
		text-align: end;
	}

	.hero--poster .appeals-poster--solo {
		grid-template-columns: minmax(0, 1fr);
	}

	.appeals-poster--solo .appeals-poster__panel {
		min-height: 0;
	}
}

/* 4. Story ---------------------------------------------------------------- */
.appeals-story__grid {
	display: grid;
	gap: var(--space-2xl) var(--grid-gap);
}

.appeals-story__main {
	min-width: 0;
}

.appeals-story__main > * + * {
	margin-top: var(--space-xl);
}

@media (min-width: 64em) {
	.appeals-story__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.appeals-story__main {
		grid-column: 1 / span 7;
	}

	.appeals-story__aside {
		grid-column: 9 / -1;
	}

	.appeals-story__grid--solo .appeals-story__main {
		grid-column: 1 / span 8;
	}
}

/* "What your gift can provide": a sky tile led by its first currency figure. */
.appeals-gift {
	display: grid;
	gap: 10px;
	max-width: 65ch;
	padding: 24px;
	border-radius: var(--radius-m);
	background: var(--grad-sky);
}

.appeals-gift__figure {
	color: var(--c-blue-950);
	font: 700 var(--fs-stat)/1 var(--ff-display);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.appeals-gift__text {
	color: var(--c-blue-950);
	font-family: var(--ff-display);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.appeals-gift__text > * + * {
	margin-top: .75em;
}

.appeals-gift__text :is(ul, ol) {
	margin-block: 0;
	padding-left: 1.25em;
}

/* 5. "How your gift reaches the field" ------------------------------------ */
.appeals-steps__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.appeals-steps__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: start;
	gap: 0 12px;
	padding-block: 24px;
	border-top: 1px solid var(--c-line);
}

.appeals-steps__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.appeals-steps__item:last-child {
	padding-bottom: 0;
}

/* Plain type, never a disc or gold. 50% navy keeps the 3:1 large-text contrast on paper. */
.appeals-steps__num {
	color: rgb(0 8 61 / .5);
	font: 600 2.25rem/1 var(--ff-display);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.appeals-steps__body {
	display: grid;
	gap: 8px;
	padding-top: 4px;
}

.appeals-steps__title {
	font-size: var(--fs-h4);
	line-height: 1.3;
}

.appeals-steps__text {
	max-width: 40ch;
	color: var(--c-ink-2);
}

@media (min-width: 48em) {
	.appeals-steps__list {
		grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	}

	.appeals-steps__item,
	.appeals-steps__item:first-child,
	.appeals-steps__item:last-child {
		padding: 0 var(--grid-gap);
		border-top: 0;
		border-left: 1px solid var(--c-line);
	}

	.appeals-steps__list > .appeals-steps__item:first-child {
		padding-left: 0;
		border-left: 0;
	}

	.appeals-steps__list > .appeals-steps__item:last-child {
		padding-right: 0;
	}
}

@media (min-width: 48em) and (max-width: 63.99em) {
	.appeals-steps__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* 6. Accessibility modes and print ---------------------------------------- */
@media (forced-colors: active) {
	.appeals-poster__panel,
	.appeals-gift {
		border: 1px solid CanvasText;
	}

	.appeals-steps__num {
		color: CanvasText;
	}
}

@media print {
	.appeals-filter,
	.appeals-poster__actions {
		display: none !important;
	}

	/* White type on navy: keep the panel's background when printing. */
	.appeals-poster__panel {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}