/*
 * Donate page (templates/page-donate.html, setup/content/donate.php). Redesign POC (soft editorial):
 * a "(donate)" opening on paper, then a 12-column spread: "Build and Sustain." and its text on the left
 * (the appeal as a statement with a crimson rule), the Zelle note and Donorbox form on a peach panel on
 * the right. Phones stack, the form first (as before).
 */

.wp-block-post-content.sr-donate-sections > * + * {
	margin-block-start: 0;
}

.sr-donate {
	--sr-gap: 1.6vw;
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sr-gap);
	align-items: start;
	margin: 0;
	padding: 4.5vw var(--sr-gutter) 8vw;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 300;
	line-height: 1.6;
}

/* Hairline between the opening and the spread, inside the gutters. */
.sr-donate::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--sr-gutter);
	left: var(--sr-gutter);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.sr-donate > * {
	margin: 0;
}

.sr-donate :where(h2, p, .sr-embed) {
	margin-block: 0;
}

/* ---------- Story ---------- */
.sr-donate > .sr-donate__story {
	grid-area: 1 / 1 / 2 / 7;
	max-width: 36em;
	font-size: clamp(1.05rem, 1.15vw, 1.2rem);
}

.sr-donate__story > p + p {
	margin-top: 1.1em;
}

.sr-donate__story .sr-section-title {
	margin-bottom: 2.4rem;
}

.sr-donate__story > .sr-donate__appeal {
	margin-top: 2.6rem;
	font-size: clamp(1.35rem, 1.9vw, 1.85rem);
	line-height: 1.3;
}

/* ---------- Give: peach panel ---------- */
.sr-donate > .sr-donate__give {
	grid-area: 1 / 8 / 2 / 13;
	min-width: 0;
	padding: 2.4vw 2.4vw 2.8vw;
	background-color: color-mix(in srgb, var(--wp--preset--color--peach) 55%, var(--wp--preset--color--paper));
	color: var(--wp--preset--color--ink);
}

.sr-donate .sr-donate__small {
	font-size: 15px;
	line-height: 1.55;
}

.sr-donate .sr-donate__small:first-child {
	font-weight: 500;
}

.sr-donate .sr-donate__small + .sr-donate__small {
	margin-top: 0.6rem;
}

.sr-donate .sr-donate__form {
	margin-top: 1.8rem;
}

.sr-donate .sr-donate__form iframe {
	display: block;
	margin-inline: auto;
}

@media (max-width: 781px) {
	.sr-donate {
		display: block;
		padding: 0 0 72px;
	}

	.sr-donate::before {
		content: none;
	}

	/* The panel runs edge to edge; the text keeps the gutters. */
	.sr-donate > .sr-donate__give {
		padding: 28px var(--sr-gutter) 32px;
	}

	.sr-donate > .sr-donate__story {
		margin-top: 56px;
		padding-inline: var(--sr-gutter);
		font-size: 1.05rem;
	}

	.sr-donate__story > .sr-donate__appeal {
		font-size: 1.35rem;
	}
}