/**
 * Hero (amnesty-dk/hero) — styles.
 * Loaded only when the block renders (block.json "style"), and in the editor.
 *
 * The section is a three-column grid: the content column is the theme's wide
 * width and the side columns are at least the gutter. Background media and
 * overlay sit behind the content.
 *
 * Breakpoints follow the theme: 782px (WordPress's tablet), 1025px (the
 * donation box moves beside the text) and 1280px (more air above and below).
 */

.amnesty-hero {
	--amnesty-hero-gutter: var(--wp--preset--spacing--m, 1rem);
	--amnesty-hero-space-block: 4rem;
	/* The editor's padding (top/bottom) replaces the space above and below
	   the text. It arrives as these two variables rather than as padding, so
	   the media in the split layouts still reaches the edges. */
	--amnesty-hero-top: var(--amnesty-hero-pad-top, var(--amnesty-hero-space-block));
	--amnesty-hero-bottom: var(--amnesty-hero-pad-bottom, var(--amnesty-hero-space-block));
	--amnesty-hero-gap: 2rem;
	--amnesty-hero-content: var(--wp--style--global--wide-size, 1200px);

	/* Overlay: the editor's strength (light/strong) scales the darkness by
	   --amnesty-hero-overlay-k. */
	--amnesty-hero-overlay-k: 1;
	--amnesty-hero-overlay-full: rgb(0 0 0 / calc(0.4 * var(--amnesty-hero-overlay-k)));
	--amnesty-hero-overlay-bottom: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0) 30%,
		rgb(0 0 0 / calc(0.7 * var(--amnesty-hero-overlay-k)))
	);

	/* The "Læs mere" circle: Amnesty yellow with a black arrow. It is one
	   text line high with 6px around the icon. */
	--amnesty-hero-accent: var(--wp--preset--color--amnesty-yellow);
	--amnesty-hero-on-accent: var(--wp--preset--color--black);
	--amnesty-hero-circle: 1.5rem;
	--amnesty-hero-circle-pad: 0.375rem;

	--amnesty-hero-donation-width: 25.0625rem;

	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns:
		minmax(var(--amnesty-hero-gutter), 1fr)
		minmax(0, var(--amnesty-hero-content))
		minmax(var(--amnesty-hero-gutter), 1fr);
	align-content: end;
	row-gap: var(--amnesty-hero-gap);
	box-sizing: border-box;
	overflow: hidden;
	padding-block: var(--amnesty-hero-top) var(--amnesty-hero-bottom);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

@media (min-width: 782px) {
	.amnesty-hero {
		--amnesty-hero-gutter: var(--wp--preset--spacing--xl, 2rem);
	}
}

@media (min-width: 1280px) {
	.amnesty-hero {
		--amnesty-hero-space-block: 8rem;
	}
}

/* Flush with the blocks around it: the hero has its own spacing. */
.amnesty-hero.alignfull {
	max-width: none;
	margin-block: 0;
}

/* Height. Tall is the screen's height: svh so mobile browser bars don't push
   it past the fold. Regular is the text plus the space above and below it;
   compact halves that space. */
.amnesty-hero--height-tall {
	min-height: 100vh;
	min-height: 100svh;
}

/* Bottom * at regular height: the text plus equal space above and below
   leaves no room to sink into, so the text sat in the middle. A minimum
   height gives the space above it something to grow into. */
:is(.amnesty-hero--bottom-left, .amnesty-hero--bottom-center).amnesty-hero--height-regular {
	min-height: min(75svh, 40rem);
}

/* Bottom *: half the space below the text, so it sits down in the dark end
   of the bottom overlay rather than as far from the edge as from the top.
   The editor's bottom padding still wins; compact is tight enough. */
:is(.amnesty-hero--bottom-left, .amnesty-hero--bottom-center):not(.amnesty-hero--height-compact) {
	--amnesty-hero-bottom: var(--amnesty-hero-pad-bottom, calc(var(--amnesty-hero-space-block) / 2));
}

.amnesty-hero.amnesty-hero--height-compact {
	--amnesty-hero-space-block: 2rem;
}

@media (min-width: 1280px) {
	.amnesty-hero.amnesty-hero--height-compact {
		--amnesty-hero-space-block: 4rem;
	}
}

/* Background media */
.amnesty-hero__media {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
}

/* An image plugin may wrap the image in <picture> and move the class and the
   focal point (inline object-position) onto it: the img inherits it. */
.amnesty-hero__media :is(picture, img, video) {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.amnesty-hero__media picture img {
	object-position: inherit;
}

/* With a video the image sits underneath it (no-JS reduced-motion fallback). */
.amnesty-hero__media .amnesty-hero__video {
	position: absolute;
	inset: 0;
}

/* Overlay */
.amnesty-hero--overlay-full::before,
.amnesty-hero--overlay-bottom::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
}

.amnesty-hero--overlay-full::before {
	background: var(--amnesty-hero-overlay-full);
}

.amnesty-hero--overlay-bottom::before {
	background: var(--amnesty-hero-overlay-bottom);
}

.amnesty-hero--overlay-light {
	--amnesty-hero-overlay-k: 0.6;
}

.amnesty-hero--overlay-strong {
	--amnesty-hero-overlay-k: 1.45;
}

/* Content */
.amnesty-hero__inner,
.amnesty-hero__more {
	grid-column: 2;
}

.amnesty-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-width: 0;
	text-align: left;
}

/* One home for the spacing: the gap above. */
.amnesty-hero :is(
	.amnesty-hero__inner,
	.amnesty-hero__text,
	.amnesty-hero__text > .wp-block-group__inner-container
) > * {
	max-width: 100%;
	margin-block: 0 !important;
}

.amnesty-hero :is(
	.amnesty-hero__inner,
	.amnesty-hero__text,
	.amnesty-hero__text > .wp-block-group__inner-container
) > .wp-block-buttons {
	margin-top: calc(var(--amnesty-hero-gap) - 1rem) !important;
}

/* The theme colours headings and links black; in the hero they follow the
   hero's text colour. */
.amnesty-hero :is(h1, h2, h3, h4, h5, h6, p),
.amnesty-hero :is(p, li) a {
	color: inherit;
}

.amnesty-hero .wp-block-buttons {
	gap: var(--wp--preset--spacing--s, 0.75rem);
}

/* The outline button's black line would vanish on a dark background, so it
   takes the hero's text colour: white on an image. .wp-block-buttons in the
   selector outweighs the theme's editor rule, which has the same weight
   otherwise and loads later. */
.amnesty-hero .wp-block-buttons .wp-block-button.is-style-amnesty-outline .wp-block-button__link {
	border-color: currentColor;
	color: inherit;
}

.amnesty-hero .wp-block-buttons .wp-block-button.is-style-amnesty-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

/* "Læs mere": underlined text and a round icon. */
.amnesty-hero__more {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	gap: 0.625rem;
	color: inherit;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

.amnesty-hero__more:hover,
.amnesty-hero__more:focus-visible {
	color: inherit;
}

.amnesty-hero__more-text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: text-decoration-color 0.15s ease;
}

.amnesty-hero__more:hover .amnesty-hero__more-text,
.amnesty-hero__more:focus-visible .amnesty-hero__more-text {
	text-decoration-color: transparent;
}

.amnesty-hero__more-icon {
	box-sizing: content-box;
	flex: none;
	width: calc(var(--amnesty-hero-circle) - var(--amnesty-hero-circle-pad) * 2);
	height: calc(var(--amnesty-hero-circle) - var(--amnesty-hero-circle-pad) * 2);
	padding: var(--amnesty-hero-circle-pad);
	border-radius: 50%;
	background-color: var(--amnesty-hero-accent);
	color: var(--amnesty-hero-on-accent);
}

.amnesty-hero__more--right .amnesty-hero__more-icon {
	transform: rotate(-90deg);
}

/* Zoom: slowly in and out again; none for visitors who asked for less motion. */
@keyframes amnesty-hero-zoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.12);
	}
}

@keyframes amnesty-hero-fade-in {
	from {
		opacity: 0;
		translate: 0 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.amnesty-hero .amnesty-hero__video {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.amnesty-hero--zoom .amnesty-hero__image {
		animation: amnesty-hero-zoom 10s ease-in-out infinite alternate;
	}

	/* Text fades in: each block of the content a little after the one before. */
	.amnesty-hero--fade-in .amnesty-hero__inner > :not(.amnesty-hero__text),
	.amnesty-hero--fade-in .amnesty-hero__text > * {
		animation: amnesty-hero-fade-in 0.7s ease-out both;
	}

	.amnesty-hero--fade-in .amnesty-hero__inner > :not(.amnesty-hero__text):nth-child(2),
	.amnesty-hero--fade-in .amnesty-hero__text > :nth-child(2) {
		animation-delay: 0.1s;
	}

	.amnesty-hero--fade-in .amnesty-hero__inner > :not(.amnesty-hero__text):nth-child(3),
	.amnesty-hero--fade-in .amnesty-hero__text > :nth-child(3) {
		animation-delay: 0.2s;
	}

	.amnesty-hero--fade-in .amnesty-hero__inner > :not(.amnesty-hero__text):nth-child(n + 4),
	.amnesty-hero--fade-in .amnesty-hero__text > :nth-child(n + 4) {
		animation-delay: 0.3s;
	}
}

/*
 * Parallax: the background is 60 % taller than the hero and slides down by
 * that much while the hero crosses the screen (two screen heights), so it
 * moves about 30 % more slowly than the text. Scroll-driven CSS only;
 * browsers without it keep the background still. "translate", so it adds to
 * the zoom's "transform".
 */
@keyframes amnesty-hero-parallax {
	from {
		translate: 0 0;
	}

	to {
		/* 60 % of the hero = 37.5 % of the 160 % tall background. */
		translate: 0 37.5%;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* A named timeline on the hero: its overflow:hidden would make an
		   anonymous view() follow the hero itself, which never scrolls. */
		.amnesty-hero--parallax {
			view-timeline: --amnesty-hero;
		}

		.amnesty-hero--parallax .amnesty-hero__media {
			inset: -60% 0 0;
			animation: amnesty-hero-parallax linear both;
			animation-timeline: --amnesty-hero;
			animation-range: cover;
		}
	}
}

/* "Bag teksten" follows the layout. Left darkens from the left; center is a
   soft darkness around the centred text. */
.amnesty-hero--left {
	--amnesty-hero-overlay-bottom: linear-gradient(
		to left,
		rgb(0 0 0 / 0) 30%,
		rgb(0 0 0 / calc(0.7 * var(--amnesty-hero-overlay-k)))
	);
}

.amnesty-hero--center {
	--amnesty-hero-overlay-bottom: radial-gradient(
		ellipse 65% 55% at 50% 50%,
		rgb(0 0 0 / calc(0.6 * var(--amnesty-hero-overlay-k))),
		rgb(0 0 0 / 0)
	);
}

/* Layouts: Center and Left sit in the middle, Bottom * at the bottom. */
.amnesty-hero--center,
.amnesty-hero--left {
	align-content: center;
}

.amnesty-hero--center,
.amnesty-hero--bottom-center {
	text-align: center;
}

.amnesty-hero--center .amnesty-hero__inner,
.amnesty-hero--bottom-center .amnesty-hero__inner {
	align-items: center;
	text-align: center;
}

.amnesty-hero--center .amnesty-hero__more,
.amnesty-hero--bottom-center .amnesty-hero__more {
	justify-self: center;
}

.amnesty-hero--center .wp-block-buttons,
.amnesty-hero--bottom-center .wp-block-buttons {
	justify-content: center;
}

/* Text over the image keeps the line length the split layouts have,
   rather than running the full content width. */
.amnesty-hero:is(
	.amnesty-hero--center,
	.amnesty-hero--left,
	.amnesty-hero--bottom-left,
	.amnesty-hero--bottom-center
) .amnesty-hero__inner > * {
	max-width: min(100%, 45rem);
}

@media (max-width: 781px) {
	.amnesty-hero--center {
		--amnesty-hero-space-block: 2rem;
	}
}

/*
 * Donation: text bottom left, the box on the right flush with the bottom
 * edge; stacked under the text up to 1024px. The box's own design is the
 * form's (of-forms); the hero only places it.
 */
.amnesty-hero--donation {
	/* Up to 1024px the image ends 40px into the box and the rest of the box
	   sits on the page. */
	--amnesty-hero-donation-overlap: 2.5rem;

	padding-bottom: 0;
}

.amnesty-hero--donation .amnesty-hero__inner {
	gap: var(--amnesty-hero-gap);
	align-items: stretch;
}

.amnesty-hero--donation .amnesty-hero__donation {
	position: relative;
}

/* The form caps its own width (520px); here the group sets it. */
.amnesty-hero--donation .amnesty-hero__donation .donation-form--selector {
	max-width: none;
}

/* of-forms inactive: the form block renders nothing and the group is left
   empty. Hide it so it takes no gap. */
.amnesty-hero--donation .amnesty-hero__donation:empty,
.amnesty-hero--donation .amnesty-hero__donation:has(> .wp-block-group__inner-container:empty) {
	display: none;
}

/* Page background from the overlap down to the hero's bottom, over the image
   and overlay (same stacking layer as the overlay, later in the tree; the
   hero's overflow clips the overhang). */
.amnesty-hero--donation .amnesty-hero__donation::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: var(--amnesty-hero-donation-overlap) -100vw -100vh;
	background: var(--wp--preset--color--white);
	pointer-events: none;
}

/* A read-more link after the box lands on that page background. */
.amnesty-hero--donation .amnesty-hero__more {
	margin-bottom: 4rem;
}

.amnesty-hero--donation :is(.amnesty-hero__text, .amnesty-hero__text > .wp-block-group__inner-container) {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.amnesty-hero--donation .amnesty-hero__text p:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

@media (max-width: 1024px) {
	.amnesty-hero--donation .amnesty-hero__more {
		color: var(--wp--preset--color--black);
	}

	/* Without the box the text would sit on the hero's bottom edge. */
	.amnesty-hero--donation:has(
		.amnesty-hero__donation:empty,
		.amnesty-hero__donation > .wp-block-group__inner-container:empty
	) {
		padding-bottom: var(--amnesty-hero-bottom);
	}

	/* No page-background panel either: a read-more link stays on the image. */
	.amnesty-hero--donation:has(
		.amnesty-hero__donation:empty,
		.amnesty-hero__donation > .wp-block-group__inner-container:empty
	) .amnesty-hero__more {
		margin-bottom: 0;
		color: inherit;
	}
}

@media (min-width: 1025px) {
	.amnesty-hero--donation .amnesty-hero__donation::before {
		content: none;
	}

	.amnesty-hero--donation .amnesty-hero__inner {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.amnesty-hero--donation .amnesty-hero__text {
		flex: 1 1 0;
		min-width: 0;
		padding-bottom: 4rem;
	}

	.amnesty-hero--donation .amnesty-hero__donation {
		flex: 0 0 var(--amnesty-hero-donation-width);
		width: var(--amnesty-hero-donation-width);
	}

	/* Flush with the hero's bottom edge: only the top corners round. */
	.amnesty-hero--donation .amnesty-hero__donation .donation-form--selector {
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
}

/*
 * Colour + media and Slant: text left, media right; media first on phones.
 * Each background has a fixed text colour.
 */
:is(.amnesty-hero--color-media, .amnesty-hero--slant) {
	--amnesty-hero-bg: var(--wp--preset--color--amnesty-yellow);
	--amnesty-hero-fg: var(--wp--preset--color--black);

	/* Rows: media, text, read more (phones). */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	align-content: stretch;
	row-gap: 0;
	padding-block: 0;
	background-color: var(--amnesty-hero-bg);
	color: var(--amnesty-hero-fg);
}

/* Yellow on yellow would vanish: the circle and the yellow button turn black. */
.amnesty-hero--bg-yellow {
	--amnesty-hero-bg: var(--wp--preset--color--amnesty-yellow);
	--amnesty-hero-fg: var(--wp--preset--color--black);
	--amnesty-hero-accent: var(--wp--preset--color--black);
	--amnesty-hero-on-accent: var(--wp--preset--color--amnesty-yellow);
}

.amnesty-hero--bg-yellow .wp-block-button:not(.is-style-amnesty-outline):not(.is-style-amnesty-secondary) .wp-block-button__link {
	border-color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.amnesty-hero--bg-yellow .wp-block-button:not(.is-style-amnesty-outline):not(.is-style-amnesty-secondary) .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--gray-800);
	background-color: var(--wp--preset--color--gray-800);
}

.amnesty-hero--bg-black {
	--amnesty-hero-bg: var(--wp--preset--color--black);
	--amnesty-hero-fg: var(--wp--preset--color--white);
}

.amnesty-hero--bg-grey {
	--amnesty-hero-bg: var(--wp--preset--color--gray-100);
	--amnesty-hero-fg: var(--wp--preset--color--black);
}

.amnesty-hero--bg-white {
	--amnesty-hero-bg: var(--wp--preset--color--white);
	--amnesty-hero-fg: var(--wp--preset--color--black);
}

/* On a light background the outline button keeps the theme's black line. */
.amnesty-hero:is(.amnesty-hero--bg-yellow, .amnesty-hero--bg-grey, .amnesty-hero--bg-white) .wp-block-buttons .wp-block-button.is-style-amnesty-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* No overlay on a flat colour. */
:is(.amnesty-hero--color-media, .amnesty-hero--slant)::before {
	content: none;
}

/* Tall: the media takes the height the text leaves. */
:is(.amnesty-hero--color-media, .amnesty-hero--slant).amnesty-hero--height-tall {
	grid-template-rows: 1fr auto auto;
}

:is(.amnesty-hero--color-media, .amnesty-hero--slant) .amnesty-hero__side {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	min-height: 56.25vw; /* 16:9 */
}

:is(.amnesty-hero--color-media, .amnesty-hero--slant) .amnesty-hero__media {
	z-index: 0;
}

:is(.amnesty-hero--color-media, .amnesty-hero--slant) .amnesty-hero__inner,
:is(.amnesty-hero--color-media, .amnesty-hero--slant) .amnesty-hero__more {
	grid-column: 1;
	margin-inline: var(--amnesty-hero-gutter);
}

:is(.amnesty-hero--color-media, .amnesty-hero--slant) .amnesty-hero__inner {
	grid-row: 2;
	align-self: center;
	margin-block: var(--amnesty-hero-top) var(--amnesty-hero-bottom);
}

:is(.amnesty-hero--color-media, .amnesty-hero--slant) .amnesty-hero__more {
	grid-row: 3;
	margin-top: calc((var(--amnesty-hero-bottom) - var(--amnesty-hero-gap)) * -1);
	margin-bottom: var(--amnesty-hero-bottom);
}

@media (min-width: 782px) {
	/* [space][text][media: half]. The space follows the page's content edge
	   but stops at 8rem, as for the donation panel: on a wide screen the
	   text would otherwise hug the media, far from the left edge. Its lines
	   are capped below. */
	.amnesty-hero--color-media {
		grid-template-columns:
			clamp(var(--amnesty-hero-gutter), (100% - var(--amnesty-hero-content)) / 2, 8rem)
			minmax(0, 1fr)
			50%;
	}

	/* Doubled class: the shared :is() rule outweighs a single one. */
	.amnesty-hero.amnesty-hero--color-media .amnesty-hero__inner > * {
		max-width: 45rem;
	}

	.amnesty-hero--color-media,
	.amnesty-hero--color-media.amnesty-hero--height-tall {
		grid-template-rows: 1fr auto;
	}

	/* Below tall the media still needs a height. */
	.amnesty-hero--color-media:not(.amnesty-hero--height-tall) {
		min-height: calc(var(--amnesty-hero-content) / 4);
	}

	.amnesty-hero--color-media .amnesty-hero__side {
		grid-column: 3;
		grid-row: 1 / -1;
		min-height: 0;
	}

	.amnesty-hero--color-media .amnesty-hero__inner,
	.amnesty-hero--color-media .amnesty-hero__more {
		grid-column: 2;
		margin-inline: 0 calc(var(--amnesty-hero-gutter) * 2);
	}

	.amnesty-hero--color-media .amnesty-hero__inner {
		grid-row: 1;
	}

	.amnesty-hero--color-media .amnesty-hero__more {
		grid-row: 2;
	}
}

/*
 * Slant (after the amnestyusa.org front page): the text sits on the flat
 * colour, the media on the right, and a panel in the background colour cuts
 * the media's edge with a yellow stripe. On phones the media comes first and
 * a band tilted 5° cuts its bottom edge instead; from 1025px the panel leans
 * 20° along the media's left edge.
 */
/* The colour itself comes from the bg-* class, as for colour + media; the
   editor picks black when the layout is chosen. */
.amnesty-hero--slant {
	--amnesty-hero-stripe: var(--wp--preset--color--amnesty-yellow);
}

/* A yellow stripe would vanish on a yellow background. */
.amnesty-hero--slant.amnesty-hero--bg-yellow {
	--amnesty-hero-stripe: var(--wp--preset--color--black);
}

/* Phones: at least 400px of media, as on amnestyusa.org. */
.amnesty-hero--slant .amnesty-hero__side {
	min-height: max(25rem, 56.25vw);
}

.amnesty-hero__slant {
	position: absolute;
	z-index: 1;
	bottom: -2.875rem;
	left: -1.25rem;
	width: calc(100% + 2.5rem);
	height: 6.875rem;
	box-sizing: border-box;
	border-top: 5px solid var(--amnesty-hero-stripe);
	background: var(--amnesty-hero-bg);
	transform: rotate(5deg);
	pointer-events: none;
}

/* The text sits above the panel, which reaches into the text column. */
.amnesty-hero--slant .amnesty-hero__inner,
.amnesty-hero--slant .amnesty-hero__more {
	position: relative;
	z-index: 2;
}

@media (min-width: 1025px) {
	/* [space][text][media: 58 %]. The space stops at 8rem, as for colour +
	   media; the text's lines are capped below. */
	.amnesty-hero--slant {
		grid-template-columns:
			clamp(var(--amnesty-hero-gutter), (100% - var(--amnesty-hero-content)) / 2, 8rem)
			minmax(0, 1fr)
			58%;
	}

	/* Tall keeps the screen's height; this would override it. */
	.amnesty-hero--slant:not(.amnesty-hero--height-tall) {
		min-height: 40rem;
	}

	.amnesty-hero.amnesty-hero--slant .amnesty-hero__inner > * {
		max-width: 45rem;
	}

	.amnesty-hero--slant,
	.amnesty-hero--slant.amnesty-hero--height-tall {
		grid-template-rows: 1fr auto;
	}

	.amnesty-hero--slant .amnesty-hero__side {
		grid-column: 3;
		grid-row: 1 / -1;
		min-height: 0;
	}

	.amnesty-hero--slant .amnesty-hero__inner,
	.amnesty-hero--slant .amnesty-hero__more {
		grid-column: 2;
		margin-inline: 0 calc(var(--amnesty-hero-gutter) * 2);
	}

	.amnesty-hero--slant .amnesty-hero__inner {
		grid-row: 1;
	}

	.amnesty-hero--slant .amnesty-hero__more {
		grid-row: 2;
	}

	/* 350px wide, its top right corner 50px into the media; leaning 20° from
	   the top, so the stripe runs further into the media towards the bottom. */
	.amnesty-hero__slant {
		top: 0;
		bottom: 0;
		left: -18.75rem;
		width: 21.875rem;
		height: auto;
		border-top: 0;
		border-right: 8px solid var(--amnesty-hero-stripe);
		transform: skewX(20deg);
		transform-origin: top left;
	}
}

/*
 * Donation panel: the image fills 60 % with the text on it; the form sits in
 * a panel in the background colour (yellow by default) on the right 40 %.
 * The form's own yellow variant blends into the yellow panel. Up to 1024px
 * the image comes first with the text on it, and the panel below it.
 *
 * The inner wrapper steps aside (display: contents) so the text and donation
 * groups are placed on the hero's grid directly.
 */
.amnesty-hero--donation-panel {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	align-content: stretch;
	row-gap: 0;
	padding-block: 0;
}

.amnesty-hero--donation-panel .amnesty-hero__inner {
	display: contents;
}

.amnesty-hero--donation-panel .amnesty-hero__text {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1rem;
	min-height: max(27.5rem, 56.25vw);
	box-sizing: border-box;
	padding: var(--amnesty-hero-top) var(--amnesty-hero-gutter) var(--amnesty-hero-gap);
}

.amnesty-hero--donation-panel .amnesty-hero__more {
	grid-column: 1;
	grid-row: 2;
	margin: 0 var(--amnesty-hero-gutter) var(--amnesty-hero-gap);
}

/* The panel covers the image and overlay below the text (the hero's media
   fills the whole section). */
.amnesty-hero--donation-panel .amnesty-hero__donation {
	grid-column: 1;
	grid-row: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: 2rem var(--amnesty-hero-gutter) var(--amnesty-hero-bottom);
	background: var(--amnesty-hero-bg, var(--wp--preset--color--amnesty-yellow));
	color: var(--amnesty-hero-fg, var(--wp--preset--color--black));
}

.amnesty-hero--donation-panel .amnesty-hero__donation > * {
	margin-block: 0 !important;
}

.amnesty-hero--donation-panel .amnesty-hero__donation .donation-form--selector {
	max-width: none;
	margin: 0;
}

/* Yellow form on the yellow panel: the form's box would only show as extra
   space, so it loses its padding and border and lines up with the heading. */
.amnesty-hero--donation-panel.amnesty-hero--bg-yellow .amnesty-hero__donation .donation-form--yellow-card {
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* of-forms inactive: the panel still shows any heading and text, but an
   empty group takes no room. */
.amnesty-hero--donation-panel .amnesty-hero__donation:empty {
	display: none;
}

/* Up to 1024px the image and its overlay cover only the rows above the
   panel (text and "Læs mere"). Filling the whole hero, the overlay's dark
   end sat behind the panel and the text got next to no darkening, and the
   image was cropped as if it were the hero's full height. As grid items
   (the ::before too) they take exactly those rows. */
@media (max-width: 1024px) {
	.amnesty-hero--donation-panel .amnesty-hero__media,
	.amnesty-hero--donation-panel::before {
		position: relative;
		inset: auto;
		grid-column: 1;
		grid-row: 1 / 3;
	}
}

@media (min-width: 1025px) {
	/* [space][text][gap][panel: 40 %]. The space follows the page's content
	   edge, so the text lines up with the content below, but stops at 8rem:
	   on a wide screen the edge moves far in, and the text would drift into
	   the middle of the image. The text column takes the rest of the image's
	   60 %; its lines are capped below. */
	.amnesty-hero--donation-panel {
		grid-template-columns:
			clamp(var(--amnesty-hero-gutter), (100% - var(--amnesty-hero-content)) / 2, 8rem)
			minmax(0, 1fr)
			calc(var(--amnesty-hero-gutter) * 2)
			40%;
		grid-template-rows: 1fr auto;
	}

	/* Doubled class: the base rule's :is() list outweighs a single one. */
	.amnesty-hero.amnesty-hero--donation-panel .amnesty-hero__text > * {
		max-width: 45rem;
	}

	.amnesty-hero--donation-panel:not(.amnesty-hero--height-tall) {
		min-height: 40rem;
	}

	/* The image and its overlay stop where the panel starts. */
	.amnesty-hero--donation-panel .amnesty-hero__media,
	.amnesty-hero--donation-panel::before {
		right: 40%;
	}

	.amnesty-hero--donation-panel .amnesty-hero__text {
		grid-column: 2;
		grid-row: 1;
		min-height: 0;
		padding: var(--amnesty-hero-top) 0 var(--amnesty-hero-gap);
	}

	.amnesty-hero--donation-panel .amnesty-hero__more {
		grid-column: 2;
		grid-row: 2;
		margin: 0 0 var(--amnesty-hero-bottom);
	}

	.amnesty-hero--donation-panel:not(:has(.amnesty-hero__more)) .amnesty-hero__text {
		padding-bottom: var(--amnesty-hero-bottom);
	}

	.amnesty-hero--donation-panel .amnesty-hero__donation {
		grid-column: 4;
		grid-row: 1 / -1;
		padding: var(--amnesty-hero-top) max(var(--amnesty-hero-gutter), 4.5rem) var(--amnesty-hero-bottom);
	}
}

/*
 * Media left: the three layouts above, mirrored. The columns run the other
 * way and the text keeps its 8rem cap from the right edge; phones are not
 * affected (media first, then text).
 */
@media (min-width: 782px) {
	.amnesty-hero--color-media.amnesty-hero--media-left {
		grid-template-columns:
			50%
			minmax(0, 1fr)
			clamp(var(--amnesty-hero-gutter), (100% - var(--amnesty-hero-content)) / 2, 8rem);
	}

	.amnesty-hero--color-media.amnesty-hero--media-left .amnesty-hero__side {
		grid-column: 1;
	}

	.amnesty-hero--color-media.amnesty-hero--media-left .amnesty-hero__inner,
	.amnesty-hero--color-media.amnesty-hero--media-left .amnesty-hero__more {
		grid-column: 2;
		margin-inline: calc(var(--amnesty-hero-gutter) * 2) 0;
	}
}

@media (min-width: 1025px) {
	.amnesty-hero--slant.amnesty-hero--media-left {
		grid-template-columns:
			58%
			minmax(0, 1fr)
			clamp(var(--amnesty-hero-gutter), (100% - var(--amnesty-hero-content)) / 2, 8rem);
	}

	.amnesty-hero--slant.amnesty-hero--media-left .amnesty-hero__side {
		grid-column: 1;
	}

	.amnesty-hero--slant.amnesty-hero--media-left .amnesty-hero__inner,
	.amnesty-hero--slant.amnesty-hero--media-left .amnesty-hero__more {
		grid-column: 2;
		margin-inline: calc(var(--amnesty-hero-gutter) * 2) 0;
	}

	/* The panel on the media's right edge, its top left corner 50px into
	   the media, leaning the other way so the stripe still runs further
	   into the media towards the bottom. */
	.amnesty-hero--media-left .amnesty-hero__slant {
		left: auto;
		right: -18.75rem;
		border-right: 0;
		border-left: 8px solid var(--amnesty-hero-stripe);
		transform: skewX(-20deg);
		transform-origin: top right;
	}

	.amnesty-hero--donation-panel.amnesty-hero--media-left {
		grid-template-columns:
			40%
			calc(var(--amnesty-hero-gutter) * 2)
			minmax(0, 1fr)
			clamp(var(--amnesty-hero-gutter), (100% - var(--amnesty-hero-content)) / 2, 8rem);
	}

	.amnesty-hero--donation-panel.amnesty-hero--media-left .amnesty-hero__media,
	.amnesty-hero--donation-panel.amnesty-hero--media-left::before {
		right: 0;
		left: 40%;
	}

	.amnesty-hero--donation-panel.amnesty-hero--media-left .amnesty-hero__text,
	.amnesty-hero--donation-panel.amnesty-hero--media-left .amnesty-hero__more {
		grid-column: 3;
	}

	.amnesty-hero--donation-panel.amnesty-hero--media-left .amnesty-hero__donation {
		grid-column: 1;
	}
}

/*
 * Compact in the layouts with a fixed least height: the media on phones keeps
 * 16:9 without the 25rem floor, and from 1025px the section asks for 25rem
 * rather than 40rem.
 */
.amnesty-hero--slant.amnesty-hero--height-compact .amnesty-hero__side,
.amnesty-hero--donation-panel.amnesty-hero--height-compact .amnesty-hero__text {
	min-height: 56.25vw;
}

@media (min-width: 1025px) {
	.amnesty-hero--slant.amnesty-hero--height-compact,
	.amnesty-hero--donation-panel.amnesty-hero--height-compact {
		min-height: 25rem;
	}

	.amnesty-hero--slant.amnesty-hero--height-compact .amnesty-hero__side,
	.amnesty-hero--donation-panel.amnesty-hero--height-compact .amnesty-hero__text {
		min-height: 0;
	}
}