.sv-section {
	position: relative;
	isolation: isolate;
	padding-block: var(--sv-space-lg);
	padding-inline: var(--sv-gutter);
}

/* Background photo: covers the whole section, behind its content. */
.sv-section__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sv-section__bg-img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

/* A layer over the photo: light (the page color, dark text) or dark (85%, light text). */
.sv-section__bg::after {
	position: absolute;
	inset: 0;
	background: var(--sv-color-inverse);
	content: "";
	opacity: 0.85;
}

.sv-section__bg--light::after {
	background: var(--sv-color-background);
	opacity: 0.78;
}

/* None: just the photo. */
.sv-section__bg--none::after {
	content: none;
}

/* Where the picture sits, and Contain: the whole picture, with the background's color around it (ADR 0074). */
.sv-section__bg--at-top :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 50% 0;
}

.sv-section__bg--at-bottom :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 50% 100%;
}

.sv-section__bg--at-left :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 0 50%;
}

.sv-section__bg--at-right :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-position: 100% 50%;
}

.sv-section__bg--contain :is(.sv-section__bg-img, .sv-section__bg-video) {
	object-fit: contain;
}

/* A custom layer: its own color at its own strength; the text color is chosen with it. */
.sv-section__bg--custom::after {
	background: var(--sv-overlay-color, #000);
	opacity: var(--sv-overlay-strength, 50%);
}

/* A video over the picture (ADR 0074): on larger screens, for visitors who don't ask for less motion;
   the <source>'s media attribute keeps phones from downloading it. */
.sv-section__bg-video {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.sv-section__bg-video {
		display: none;
	}
}

/* A gradient between two colors (ADR 0074): down, across (in the reading direction), diagonal or from the middle. */
.sv-section__bg--gradient {
	background: linear-gradient(180deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

.sv-section__bg--gradient::after {
	content: none;
}

.sv-section__bg--to-across {
	background: linear-gradient(90deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

.sv-section__bg--to-diagonal {
	background: linear-gradient(135deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

:where([dir="rtl"]) .sv-section__bg--to-across {
	background: linear-gradient(270deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

:where([dir="rtl"]) .sv-section__bg--to-diagonal {
	background: linear-gradient(225deg, var(--sv-gradient-from), var(--sv-gradient-to));
}

.sv-section__bg--to-center {
	background: radial-gradient(ellipse at 50% 45%, var(--sv-gradient-from), var(--sv-gradient-to));
}

/*
 * A saved or ready-made gradient (ADR 0105): the site's `--sv-gradient-<id>`, so changing it in Your colors changes
 * every section using it; its first and last colors stay as From and To in case it is gone.
 */
.sv-section__bg.sv-section__bg--saved {
	background: var(--sv-gradient-fill, linear-gradient(180deg, var(--sv-gradient-from), var(--sv-gradient-to)));
}

/* Light text over the dark layer (zero specificity: a chosen Text color wins). */
:where(.sv-section:has(> .sv-section__bg--dark)) {
	color: var(--sv-color-on-inverse);
}

/*
 * More pictures (ADR 0107): the section's picture and up to four more take turns behind it. Without the script
 * (the editor, no JavaScript) the first one shows. With it (slides.js, visitors' pages) each new picture fades in
 * over the one before — which stays until it is covered, so there is never a darker moment between them — and is
 * shown 5, 7 or 10 seconds; with Slow zoom each grows a little while it shows. The pause button stops both.
 */
.sv-section__bg--slides > .sv-section__bg-img {
	position: absolute;
	inset: 0;
}

.sv-section__bg--slides > .sv-section__bg-img ~ .sv-section__bg-img {
	opacity: 0;
}

.sv-section__bg--slides::after {
	z-index: 3;
}

.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img {
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
}

.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img[data-current] {
	z-index: 2;
	opacity: 1;
}

.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img[data-previous] {
	z-index: 1;
	opacity: 1;
	transition: none;
}

[data-sv-slides="5"] { --sv-slide-time: 5s; }
[data-sv-slides="7"] { --sv-slide-time: 7s; }
[data-sv-slides="10"] { --sv-slide-time: 10s; }

.sv-section__bg--zoom.sv-section__bg--turning > .sv-section__bg-img:is([data-current], [data-previous]) {
	animation: sv-section-zoom calc(var(--sv-slide-time, 7s) + 1.5s) linear both;
}

.sv-section__bg--zoom.sv-section__bg--turning[data-paused] > .sv-section__bg-img:is([data-current], [data-previous]) {
	animation-play-state: paused;
}

@keyframes sv-section-zoom {
	from {
		scale: 1;
	}

	to {
		scale: 1.08;
	}
}

/* The pause button (added by slides.js): small and quiet in the section's lower end corner, above an overlapping box's room. */
.sv-section__pause {
	position: absolute;
	inset-block-end: calc(var(--sv-overlap-room, 0px) + 1rem);
	inset-inline-end: 1rem;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, #000 35%, transparent);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
}

.sv-section__pause::before {
	inline-size: 0.7rem;
	block-size: 0.8rem;
	border-inline: 0.22rem solid currentcolor;
	content: "";
}

.sv-section__pause[aria-pressed="true"]::before {
	inline-size: 0.75rem;
	border: 0;
	background: currentcolor;
	clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

[dir="rtl"] .sv-section__pause[aria-pressed="true"]::before {
	clip-path: polygon(85% 0, 0 50%, 85% 100%);
}

.sv-section__pause:hover {
	background: color-mix(in srgb, #000 55%, transparent);
}

.sv-section__pause:focus-visible {
	outline: 2px solid var(--sv-focus, #fff);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sv-section__bg--slides.sv-section__bg--turning > .sv-section__bg-img {
		transition: none;
	}

	.sv-section__bg--zoom.sv-section__bg--turning > .sv-section__bg-img:is([data-current], [data-previous]) {
		animation: none;
	}
}