/*
 * One column: the form, then what has been raised and the donor wall beneath
 * it — Two columns' design, stacked.
 *
 * The same short head and pale wash; the form a white card, and each of the
 * figure and the wall a card of its own under it, all one width. The wall
 * scrolls with the page here, and its messages sit two to a row where there is
 * room.
 *
 * `--alone`: the campaign shows neither the figure nor the wall, so the page is
 * only its form — the card, with the campaign's name at its head, in the middle
 * of the screen.
 */

.donations-single {
	/* Straight under the header: the title sits inside the wash, not above it. */
	margin-block-start: 4rem;
	padding-block: var(--wp--preset--spacing--60, 3rem) var(--wp--preset--spacing--70, 2rem);
	padding-inline: var(--wp--style--root--padding-left, 1.25rem) var(--wp--style--root--padding-right, 1.25rem);
	background: linear-gradient(180deg, #fff 0%, #f3f7ff 22%, #fff 100%);
}

.donations-single__inner {
	max-width: 760px;
	margin-inline: auto;
}

/* -- The head ------------------------------------------------------------- */

.donations-single__head {
	text-align: center;
}

.donations-single__head .donations-hero {
	margin-bottom: var(--wp--preset--spacing--50, 2.5rem);
}

.donations-single__head .donations-hero img {
	max-height: 420px;
}

.donations-single__title {
	margin: 0;
}

/* -- The stack: the form, then the figure, then the wall -------------------- */

.donations-single__stack {
	display: grid;
	gap: var(--wp--preset--spacing--40, 2rem);
	margin-top: var(--wp--preset--spacing--50, 2.5rem);
}

/*
 * The form, white on the pale wash; the cards under it drawn to the same
 * radius, border and shadow so the three read as one column. The campaign's
 * Description opens the form's card, lifted out of helper-text size.
 */
.donations-single__form,
.donations-single__card {
	box-sizing: border-box;
	min-width: 0;
	border: 1px solid var(--donations-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--donations-shadow);
}

.donations-single__form {
	padding: clamp(1.25rem, 3.5vw, 2.25rem);
}

.donations-single__card {
	padding: 1.25em;
	font-size: 1rem;
}

.donations-single__form .donations-story {
	margin-bottom: 1.5em;
	color: #101828;
	font-size: 1.12em;
	line-height: 1.45;
}

.donations-single__form .donations-story > :first-child {
	margin-top: 0;
}

.donations-single__form .donations-story > :last-child {
	margin-bottom: 0;
}

.donations-single__form .donations-story :is(h1, h2, h3, h4) {
	margin: 0 0 0.45em;
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1.25;
}

.donations-single__form .donations-story p {
	margin: 0.45em 0 0;
}

/* A figure still on its way in draws no empty card. */
.donations-single__progress:not(:has([data-progress-figure]:not([hidden]))):not(:has([data-progress-none]:not([hidden]))) {
	display: none;
}

/* The wall, with the page: two messages a row where the column has room. */
@media (min-width: 640px) {
	.donations-single .donations-wall__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -- Only the form ---------------------------------------------------------- */

/*
 * Nothing but the card, in the middle of what is left of the screen under the
 * site's own header and admin bar — and at its natural height once the form is
 * taller than that, so nothing is cut off.
 */
.donations-single--alone {
	display: grid;
	place-items: center;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	/* The same above as below, or the card sits off the middle. */
	padding-block: var(--wp--preset--spacing--60, 3rem);
	box-sizing: border-box;
}

.donations-single--alone .donations-single__inner {
	width: 100%;
	max-width: 640px;
}

.donations-single--alone .donations-single__stack {
	margin-top: 0;
}

.donations-single--alone .donations-single__title {
	margin-bottom: 0.6em;
	text-align: center;
}