/**
 * Reusable UI components (buttons, etc.). Shared across sections —
 * do not hand-style one-off buttons in section/layout CSS.
 */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, filter 0.15s ease;
}

.button--primary {
	background-color: var(--color-action);
	color: var(--color-white);
}

.button--primary:hover,
.button--primary:focus-visible {
	background-color: var(--color-action-hover);
}

.button--secondary {
	background-color: var(--color-cream-100);
	color: var(--color-green-900);
	border-color: var(--color-beige-200);
}

.button--secondary:hover,
.button--secondary:focus-visible {
	background-color: var(--color-beige-200);
}

/*
 * Editorial variant of the primary action (hero CTA): solid orange, crisp
 * near-rectangular geometry, a fine light top edge instead of depth. The
 * arrow nudges right on hover. The header CTA keeps the base button.
 */
.button--editorial {
	/* 14px + line box = the base button's height (47px, ≥ 44px tap target),
	   so the hero content keeps its exact position. */
	padding: 14px var(--space-5);
	border: 0;
	border-radius: var(--radius-sm);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 18%, transparent);
	letter-spacing: 0.01em;
	transition: background-color 0.15s ease;
}

.button--editorial.button--primary:hover,
.button--editorial.button--primary:focus-visible {
	background-color: var(--color-action-hover);
}

.button--editorial:focus-visible {
	outline: 2px solid var(--color-background);
	outline-offset: 3px;
}

.button__arrow {
	display: inline-block;
	line-height: 1;
	transition: transform 0.2s ease;
}

.button--editorial:hover .button__arrow,
.button--editorial:focus-visible .button__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.button--editorial:hover .button__arrow,
	.button--editorial:focus-visible .button__arrow {
		transform: none;
	}
}

/* ---------- Section intro (D-025) ---------- */

/*
 * One head for the homepage sections: an accent eyebrow with a short line,
 * a large serif title, an optional lead and an optional link to the full
 * archive, which sits beside the text from 900px.
 */
.section-intro {
	display: grid;
	gap: var(--space-5);
}

.section-intro__text {
	min-width: 0;
	max-width: 46rem;
}

.section-intro__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	color: var(--color-accent-text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* May wrap at spaces when there is no room (e.g. larger default font,
	   D-035); at the usual sizes it stays on one line. */
}

/* Decorative line in the brand orange; it gives way before the text wraps:
   it only grows into free space (up to 48px), so the text keeps its full
   width and wraps only when it alone no longer fits. */
.section-intro__eyebrow::after {
	content: "";
	flex: 1 1 0;
	max-width: 48px;
	min-width: 0;
	height: 1px;
	background-color: var(--color-accent);
}

.section-intro__title {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--font-size-section-title);
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.section-intro__lead {
	max-width: 60ch;
	margin: var(--space-4) 0 0;
	color: var(--color-text);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.section-intro__link {
	justify-self: start;
}

@media (min-width: 900px) {
	.section-intro--with-link {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: var(--space-7);
	}

	.section-intro--with-link .section-intro__link {
		justify-self: end;
		margin-bottom: 0.3em;
	}
}

/* ---------- Text link with arrow (D-025) ---------- */

/* The darker accent keeps small link text at ≥ 4.5:1 on cream and glass. */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-accent-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.link-arrow__icon {
	display: inline-block;
	line-height: 1;
	transition: transform 0.2s ease;
}

a.link-arrow:hover .link-arrow__icon,
a.link-arrow:focus-visible .link-arrow__icon {
	transform: translateX(3px);
}

a.link-arrow:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.link-arrow__icon {
		transition: none;
	}

	a.link-arrow:hover .link-arrow__icon,
	a.link-arrow:focus-visible .link-arrow__icon {
		transform: none;
	}
}

/* ---------- Glass panel (D-025) ---------- */

/*
 * One continuous frosted surface over a photo band — the recipe of the
 * quick overview on "Hilfe & Angebote" (warm ivory, restrained blur, a
 * fine light edge and inner highlight; no shadow, almost no radius).
 */
.glass-panel {
	position: relative;
	border: 1px solid var(--glass-edge);
	border-radius: var(--radius-sm);
	/* Denser than the offers quick overview: these panels carry small
	   text and links over a lively photo. */
	background-color: var(--glass-surface-text);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-white) 70%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass-panel {
		background-color: var(--glass-surface-solid);
	}
}

/* ---------- Glass badge (D-024/D-025) ---------- */

/*
 * A light frosted disc over a photo with handwriting on top: cream as
 * dense as needed behind the writing, lighter towards the rim, a
 * restrained blur, a fine light edge and a soft top highlight; no plate,
 * no shadow. Position and size come from the section.
 */
.glass-badge {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle closest-side,
		color-mix(in srgb, var(--color-background) 60%, transparent) 76%,
		color-mix(in srgb, var(--color-background) 30%, transparent) 100%
	);
	-webkit-backdrop-filter: blur(5px) saturate(1.05);
	backdrop-filter: blur(5px) saturate(1.05);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--color-white) 30%, transparent),
		inset 0 1px 1px color-mix(in srgb, var(--color-white) 55%, transparent);
	pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glass-badge {
		background: color-mix(in srgb, var(--color-background) 85%, transparent);
	}
}

.glass-badge__text {
	display: block;
	width: 64%;
	height: auto;
	/* Optical center: the underline makes the block bottom-heavy. */
	margin-top: -2%;
}

/* ---------- Photo band (D-025) ---------- */

/*
 * A section on a full-bleed photo. The photo sits in ::before (and a wash
 * in ::after) behind the content, so the section keeps a straight edge.
 * --light: the warm, bright bokeh behind "Was brauche ich jetzt?".
 * --botanical: the leafy bokeh, softened, with a cream wash from the left
 * behind the intro ("Geplante Angebote", "Aktuelles & Termine").
 */
.photo-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.photo-band::before,
.photo-band::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.photo-band--light::before {
	inset: 0;
	background: var(--color-background) url("../images/help_bg-1000.webp") center / cover no-repeat;
}

@media (min-width: 1000px) {
	.photo-band--light::before {
		background-image: url("../images/help_bg-1672.webp");
	}
}

.photo-band--botanical::before {
	inset: -16px; /* hides the soft edge of the blur */
	background: url("../images/banner_bg-1200.webp") center 60% / cover no-repeat;
	filter: blur(2px) saturate(0.9);
}

.photo-band--botanical {
	--botanical-wash:
		linear-gradient(100deg, rgba(247, 243, 236, 0.82) 0%, rgba(247, 243, 236, 0.55) 38%, rgba(247, 243, 236, 0.12) 72%, rgba(247, 243, 236, 0) 100%),
		linear-gradient(180deg, rgba(247, 243, 236, 0.25) 0%, rgba(247, 243, 236, 0) 45%);
}

.photo-band--botanical::after {
	inset: 0;
	background: var(--botanical-wash);
}

@media (min-width: 900px) {
	.photo-band--botanical::before {
		background-image: url("../images/banner_bg-2172.webp");
	}
}

/* ---------- Carousel (D-025, assets/js/carousel.js) ---------- */

/*
 * Page-wise carousel controls and track states, shared by the quick
 * overview on "Hilfe & Angebote" and the homepage. Each context places the
 * controls in its own grid; this block only defines how they look and how
 * a page change fades.
 */

/* Visually only a two-stroke chevron; the button is a transparent 48px
   hit area. A faint light halo keeps it legible on glass and photo. */
.carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--color-green-900);
	cursor: pointer;
}

.carousel__nav svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
	transition: transform 0.2s ease;
}

.carousel__nav:hover svg {
	stroke-width: 2;
}

.carousel__nav--prev:hover svg {
	transform: translateX(-2px);
}

.carousel__nav--next:hover svg {
	transform: translateX(2px);
}

.carousel__nav:focus-visible {
	outline: 2px solid var(--color-orange-600);
	outline-offset: 0;
}

.carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.carousel__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--color-green-900) 25%, transparent);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Active: orange and slightly larger — not color alone. */
.carousel__dot.is-active {
	background-color: var(--color-orange-600);
	transform: scale(1.35);
}

/* Brief fade while wrapping around (last → first / first → last). */
.carousel__track.is-wrapping {
	opacity: 0;
}

/* One entry per view: the entry fades out with a slight shift in the
   direction of travel, the track jumps, the next entry fades in from the
   other side. Opacity on the track, the shift on each entry's content
   (never on the entry itself), so the measured page positions never
   change. The fade-in timing comes from the context's transitions. */
.carousel__track.is-leaving {
	opacity: 0;
	transition: opacity 0.12s ease-in;
}

.carousel__track.is-leaving > * > * {
	transform: translateX(calc(-1 * var(--carousel-shift, 10px)));
	transition: background-color 0.2s ease, transform 0.12s ease-in;
}

.carousel__track.is-entering,
.carousel__track.is-entering > * > * {
	transition: none;
}

.carousel__track.is-entering {
	opacity: 0;
}

.carousel__track.is-entering > * > * {
	transform: translateX(var(--carousel-shift, 10px));
}

@media (prefers-reduced-motion: reduce) {
	.carousel__nav:hover svg {
		transform: none;
	}

	.carousel__track {
		transition: none;
	}
}

/* ---------- Page intro (D-026) ---------- */

/*
 * Intro of the inner pages (Hilfe & Angebote, Kontakt): botanical photo
 * with a cream wash, eyebrow, H1 and lead. Content sits in
 * .page-intro__inner (the site container); a page may add more inside the
 * header (the offers quick overview, the contact ways strip), which then
 * runs over the same photo.
 */

/*
 * The photo fills the whole intro; a soft cream wash from the left keeps
 * eyebrow, heading and lead readable while the leaves stay visible on the
 * right. The frosted header floats over it (its height is added on top so
 * the content stays where it was).
 */
.page-intro {
	/* The space between the lead and a strip (see .page-intro__subtitle):
	   gap, the subtitle's line, gap — shared with the padding below the
	   strip so both stay equal. */
	--intro-strip-gap-top: var(--space-7);
	--intro-strip-label: var(--space-5);
	--intro-strip-gap-bottom: var(--space-3);
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--space-9) + var(--site-header-height)) clamp(var(--space-8), 8vw, 120px);
	/* Below 1280px the text spans most of the width, so the wash covers it
	   fully and only fades towards the strip at the bottom. */
	background:
		linear-gradient(180deg, rgba(247, 243, 236, 0.84) 0%, rgba(247, 243, 236, 0.76) 55%, rgba(247, 243, 236, 0.3) 85%, rgba(247, 243, 236, 0.15) 100%),
		url("../images/bg_green-1200.webp") 70% center / cover no-repeat;
	background-color: var(--color-cream-100);
}

/*
 * With a strip (offers quick overview, Kontakt ways) the strip sits in the
 * middle of the space below the lead: the photo ends exactly as far below
 * the strip as the lead ends above it — the same three spacing tokens.
 */
.page-intro:has(.offers-quick, .contact-ways) {
	padding-bottom: calc(var(--intro-strip-gap-top) + var(--intro-strip-label) + var(--intro-strip-gap-bottom));
}

@media (min-width: 1280px) {
	.page-intro {
		background-image:
			linear-gradient(100deg, rgba(247, 243, 236, 0.82) 0%, rgba(247, 243, 236, 0.6) 34%, rgba(247, 243, 236, 0.14) 64%, rgba(247, 243, 236, 0) 100%),
			url("../images/bg_green-1672.webp");
	}
}

/* Also used by the "Geplante Angebote" band on the offers page. */
.page-intro__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
	color: var(--color-orange-600);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.page-intro__eyebrow::after {
	content: "";
	flex: 0 0 40px;
	height: 1px;
	background-color: currentColor;
	opacity: 0.5;
}

.page-intro__title {
	margin: 0 0 var(--space-4);
	color: var(--color-text);
	font-size: clamp(2rem, 2.5vw + 1.5rem, 3rem);
	line-height: 1.15;
}

.page-intro__lead {
	margin: 0;
	max-width: 560px;
	color: var(--color-green-900);
	font-size: 1.0625rem;
}

@media (min-width: 1024px) {
	.page-intro__lead {
		max-width: 640px;
		font-size: 1.125rem;
	}
}

.page-intro__inner {
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Small orientation heading above a strip inside the intro (offers quick
   overview, Kontakt ways), clearly below the H1. */
.page-intro__subtitle {
	margin: var(--intro-strip-gap-top) 0 var(--intro-strip-gap-bottom);
	color: var(--color-green-900);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: var(--intro-strip-label);
}

/* ---------- Spaced label (D-022/D-026) ---------- */

/* Small, widely spaced capitals over editorial blocks: offer sections and
   their meta box, the Kontakt form and its notes, the legal pages' table
   of contents. */
.offer-section__eyebrow,
.offer-section__label,
.offer-meta__label,
.contact-page__eyebrow,
.contact-notes__label,
.legal-toc__label,
.post-event__label {
	margin: 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* ---------- Prose (D-029) ---------- */

/*
 * Reading typography for editor content (the_content): legal pages and
 * posts. Plex for text and small headings, Georgia for section headings;
 * only the loaded weights (400/500/600). Long URLs and e-mail addresses
 * break instead of overflowing.
 */
.prose {
	color: var(--color-text);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 1.1em;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li + li {
	margin-top: 0.35em;
}

/* Plex is loaded up to 600 — no synthetic bold. */
.prose strong,
.prose b {
	font-weight: 600;
}

/* Soft hyphens in long headings wrap cleanly on phones. */
.prose h2 {
	margin: var(--space-7) 0 var(--space-3);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.4375rem);
	font-weight: 700;
	line-height: 1.25;
	hyphens: manual;
}

.prose h3 {
	margin: var(--space-6) 0 var(--space-2);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	hyphens: manual;
}

.prose h4 {
	margin: var(--space-5) 0 var(--space-2);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}

/* Links: underlined, darker orange text on hover. */
.prose a {
	color: var(--color-text);
	text-decoration-color: color-mix(in srgb, var(--color-green-900) 45%, transparent);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.prose a:hover,
.prose a:focus-visible {
	color: var(--color-accent-text);
	text-decoration-color: currentColor;
}

/* Quotes: a quiet orange rule, Georgia. */
.prose blockquote {
	margin: var(--space-6) 0;
	padding: 0 0 0 var(--space-5);
	border-left: 2px solid var(--color-accent);
	font-family: var(--font-heading);
	font-size: 1.1875rem;
	line-height: 1.5;
}

.prose blockquote p:last-child {
	margin-bottom: 0;
}

.prose blockquote cite {
	display: block;
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-style: normal;
}

/* Images in the text: full column width, caption below. */
.prose figure {
	margin: var(--space-6) 0;
}

.prose img {
	display: block;
	max-width: 100%;
	height: auto;
}

.prose figcaption {
	margin-top: var(--space-2);
	color: var(--color-text-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* Native gallery block inside the text: a simple, even grid. */
.prose .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

.prose .wp-block-gallery figure {
	margin: 0;
}

.prose .wp-block-gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ---------- Media gallery: offers and posts (D-022, shared in D-029) ---------- */

/*
 * One consistent rectangular frame per offer (ratio from the main image's
 * orientation), capped in height — never the whole viewport. Images of the
 * frame's orientation cover it; others are shown whole (contain) on a calm
 * tinted ground.
 */
.offer-gallery {
	--stage-max-height: 70svh;
	position: relative;
	margin: 0;
}

@media (min-width: 1024px) {
	.offer-gallery {
		--stage-max-height: 62vh;
	}
}

.offer-gallery__frame {
	position: relative;
	width: min(100%, calc(var(--stage-max-height) * var(--offer-gallery-ratio, 4 / 3)));
	/* Whole pixels, so no sliver of the neighbouring slide shows at the edge. */
	width: round(down, min(100%, calc(var(--stage-max-height) * var(--offer-gallery-ratio, 4 / 3))), 1px);
	aspect-ratio: var(--offer-gallery-ratio, 4 / 3);
	overflow: hidden;
	background-color: color-mix(in srgb, var(--color-beige-200) 55%, var(--color-cream-100));
}

/* Extremely light veil on hover (desktop). */
.offer-gallery__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0);
	pointer-events: none;
	transition: background-color 0.4s ease;
}

.offer-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.offer-gallery__slide.is-contain .offer-gallery__image {
	object-fit: contain;
}

/* Automatic crossfade: a decorative overlay above the real slide, removed
   once the track has jumped underneath (assets/js/offer-gallery.js). */
.offer-gallery__fade {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

.offer-gallery__fade.is-visible {
	opacity: 1;
}

/* Strip layout (D-022): a wide frame across the container, the same for
   every slide. The main image covers it at the editor's focal point;
   additional images that are too narrow for the crop are shown whole on a
   calm cream/sage ground (decided in offer-gallery.php). */
.offer-gallery.is-strip .offer-gallery__frame {
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: color-mix(in srgb, #dfe6d6 55%, var(--color-cream-100));
}

@media (min-width: 768px) {
	.offer-gallery.is-strip .offer-gallery__frame {
		aspect-ratio: 2.2 / 1;
	}
}

@media (min-width: 1024px) {
	.offer-gallery.is-strip .offer-gallery__frame {
		aspect-ratio: 3 / 1;
	}
}

.offer-gallery .is-focus .offer-gallery__image,
.offer-gallery .is-focus.offer-gallery__slide .offer-gallery__image,
.offer-gallery .offer-gallery__frame.is-focus > .offer-gallery__image {
	object-position: var(--offer-gallery-focus, center center);
}

.offer-gallery__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
	transition: opacity 0.16s ease;
}

.offer-gallery__track::-webkit-scrollbar {
	display: none;
}

/* Brief fade while wrapping around (last → first / first → last). */
.offer-gallery__track.is-wrapping {
	opacity: 0;
}

.offer-gallery__slide {
	flex: 0 0 100%;
	overflow: hidden;
	scroll-snap-align: start;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.offer-gallery:hover .offer-gallery__image {
		transform: scale(1.025);
	}

	.offer-gallery:hover .offer-gallery__frame::after {
		background-color: rgba(255, 255, 255, 0.06);
	}
}

/* Controls: only a thin warm off-white chevron, no box or circle — a faint
   shadow keeps it legible on light and dark photos. The invisible hit area
   stays 48×48px. Desktop: hidden at rest, faded in on hover and whenever
   focus is inside the gallery; touch: always subtly visible. */
.offer-gallery__controls:not([hidden]) {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.offer-gallery__nav {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-on-image);
	cursor: pointer;
	pointer-events: auto;
	transform: translateY(-50%);
	transition: opacity 0.25s ease;
}

.offer-gallery__nav svg {
	width: 30px;
	height: 30px;
	stroke-width: 1.25;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
}

.offer-gallery__nav--prev {
	left: var(--space-2);
}

.offer-gallery__nav--next {
	right: var(--space-2);
}

.offer-gallery__nav:focus-visible {
	outline: 2px solid var(--color-on-image);
	outline-offset: -4px;
	box-shadow: 0 0 0 4px rgba(18, 63, 56, 0.55) inset;
}

@media (hover: hover) {
	.offer-gallery__nav {
		opacity: 0;
	}

	.offer-gallery:hover .offer-gallery__nav,
	.offer-gallery:focus-within .offer-gallery__nav,
	.offer-gallery__nav:focus-visible {
		opacity: 1;
	}
}

@media (hover: none) {
	.offer-gallery__nav {
		opacity: 0.8;
	}
}

/* One dot per image below the frame (D-030), the same .carousel__dot as the
   other carousels. Same width as the frame, so they sit centred under the
   image whatever its format. Hidden until the script fills them. */
.offer-gallery__dots {
	width: min(100%, calc(var(--stage-max-height) * var(--offer-gallery-ratio, 4 / 3)));
	margin-top: var(--space-3);
}

.offer-gallery.is-strip .offer-gallery__dots {
	width: 100%;
}

.offer-gallery__dots[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.offer-gallery__track,
	.offer-gallery__nav {
		transition: none;
	}
}