/**
 * ALK — Homepage hero block + brand/hero decoration (decorated cover, nav/body circles).
 * Enqueued after style.css; relies on theme :root tokens (--alk-hero-mobile-padding-top-extra, layout/header tokens, etc.).
 *
 * Loaded as a separate stylesheet so Autoptimize (or similar) can exclude it from CSS minification/aggregation
 * without breaking hero geometry, SVG bleed, or editor parity rules.
 */

/* -- Hero-first layout shell (main padding reset) ----------------------- */

/* Hero-first pages should not receive the generic header offset on main;
   the hero itself handles viewport-relative sizing/positioning. */
.wp-site-blocks > .wp-block-template-part + main.wp-block-group:has(> .alk-hero--decorated:first-child) {
	padding-top: 0;
}

/* WordPress page content usually wraps hero blocks inside .wp-block-post-content.
   Keep the same offset reset when the decorated hero is the first content block there. */
.wp-site-blocks > .wp-block-template-part + main.wp-block-group:has(> .wp-block-post-content > .alk-hero--decorated:first-child) {
	padding-top: 0;
}

.wp-site-blocks > .wp-block-template-part + .wp-block-template-part + main.wp-block-group:has(> .alk-hero--decorated:first-child) {
	padding-top: 0;
}

.wp-site-blocks > .wp-block-template-part + .wp-block-template-part + main.wp-block-group:has(> .wp-block-post-content > .alk-hero--decorated:first-child) {
	padding-top: 0;
}

.wp-site-blocks > .wp-block-group.alignfull.alk-heading-container + main.wp-block-group:has(> .alk-hero--decorated:first-child) {
	padding-top: 0;
}

.wp-site-blocks > .wp-block-group.alignfull.alk-heading-container + main.wp-block-group:has(> .wp-block-post-content > .alk-hero--decorated:first-child) {
	padding-top: 0;
}


/* -- RTL: decorated hero keeps LTR chrome layout ------------------------ */

body.rtl .alk-hero--decorated {
	direction: ltr;
}

/* -- Hero CTA buttons (brand fill on orange cover) ---------------------- */

.alk-hero .wp-block-button__link,
.alk-hero .wp-element-button {
	background-color: var(--wp--preset--color--brand) !important;
	color: var(--alk-primary-on-brand) !important;
}

.alk-hero .wp-block-button__link:hover,
.alk-hero .wp-element-button:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--brand) !important;
}

.alk-hero .has-primary-color {
	color: var(--alk-primary-on-brand) !important;
}

.alk-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--alk-primary-on-brand) !important;
	border-color: var(--alk-primary-on-brand) !important;
}

.alk-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--alk-primary-on-brand) !important;
	color: var(--wp--preset--color--brand) !important;
	border-color: var(--alk-primary-on-brand) !important;
}

/* -- Hero Section ------------------------------------------------------- */

.alk-hero {
	position: relative;
	min-height: 22rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

@media (max-width: 1023px) {
	.alk-hero {
		min-height: 20rem;
	}
}

@media (max-width: 767px) {
	.alk-hero {
		min-height: 18rem;
	}
}

.alk-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--alk-overlay-dark);
	z-index: 1;
}

.alk-hero__content {
	position: relative;
	z-index: 2;
	max-width: 50rem;
	padding: var(--wp--preset--spacing--40);
}

.alk-hero__content h1 {
	color: var(--wp--preset--color--primary);
}

.alk-hero__content p {
	color: var(--wp--preset--color--primary);
	opacity: 1;
}

/* -- 07 Brand/Hero Decoration (decorated cover, nav circles) ---------------- */
/* Task: .cursor/tasks/done/legacy_graphic_svg_online_variant.mdc
   Inlines alk-online-logo-desktop / alk-online-logo-mobile-wordmark inside the site title,
   alk-online-logo-mobile-circles at body level on small viewports, and
   alk-online-hero-desktop inside the decorated hero cover. Ring-1 wordmark
   segments and the large background circles flow beyond their host container via
   overflow:visible on the SVG. The service bar (.site-bar-nav, z-index:20) must
   always sit above the decorations; hence every decoration stays at z-index <= 1. */

/* Anchor for the brand decoration; the text itself is visually hidden (but stays
   accessible via .screen-reader-text wrapping inside the anchor). */
.site-brand-title,
.wp-block-site-title.site-brand-title {
	position: relative;
	overflow: visible;
	/* Preserve the reserved footprint for the logo so the decoration can size itself. */
	min-width: 200px;
	min-height: 100px;
}

.site-brand-title a {
	display: block;
	position: relative;
	/* Fill the full reserved footprint so the absolutely-positioned decoration
	   (inset:0) has a visible box AND the entire logo area stays clickable.
	   Without these dimensions the anchor collapses to height:0 because its
	   only in-flow child is an invisible .screen-reader-text span. */
	width: 100%;
	height: 100%;
	min-width: inherit;
	min-height: inherit;
	color: transparent;
	text-decoration: none;
}

/* Decoration wrapper + variant toggles. The wrapper sits on top of the anchor
   area but below the service bar. Use transform-based positioning driven by
   CSS custom properties so QA can tweak alignment without touching the SVG. */
.alk-brand-decoration {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	line-height: 0;
	--alk-deco-x: 0px;
	--alk-deco-y: 0px;
	--alk-deco-scale: 1;
}

.alk-brand-decoration__desktop,
.alk-brand-decoration__mobile {
	position: absolute;
	inset: 0;
	transform: translate(var(--alk-deco-x), var(--alk-deco-y)) scale(var(--alk-deco-scale));
	transform-origin: top left;
	pointer-events: none;
}

.alk-brand-decoration__desktop svg,
.alk-brand-decoration__mobile svg,
.alk-hero__bg img,
.alk-hero:not(.alk-hero--decorated) .alk-hero__bg svg,
.alk-hero:not(.alk-hero--decorated) .alk-hero__fg-wordmark svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	opacity: 1;
}

/* Default: show desktop variant, hide mobile. Flipped below 1024px. */
.alk-brand-decoration__desktop { display: block; }
.alk-brand-decoration__mobile  { display: none; }

/* Body-level mobile circles — injected by alk_inject_mobile_body_circles() via
   wp_body_open. Sits outside .site-header so it is at z-index: 1 in the root
   stacking context, below .wp-site-blocks (z-index: 2) and all page content.
   position:absolute on body (scrolls with the page). ≤1023: top/left/transform
   align with unscrolled absolute header strip (service bar + band nudge + logo down-shift). */
.alk-mobile-body-circles {
	display: none;
	position: absolute;
	top: var(--alk-service-bar-height);
	left: var(--alk-layout-mobile-nav-inline);
	width: var(--alk-brand-mobile-box-width);
	height: var(--alk-brand-mobile-box-height);
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.alk-mobile-body-circles svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	opacity: 1;
}

/* -- Nav circles (desktop/tablet ≥1024 px) ----------------------------------
   el5-6 and el8-7 are injected here (alk-online-nav-circles.svg) so they
   appear on every page, not only on the hero. No JS positioning needed.
   Placement: position:absolute on body (body is position:relative) so the layer
   scrolls with the document — not position:fixed, and not height:100vh (that
   tied vertical scale to the viewport). Vertical offset: top uses
   calc(var(--alk-nav-link-height) * 0.66). The box is full layout width with
   aspect-ratio matching the SVG viewBox (2300 / 1040); scale follows the same
   horizontal measure as the page, not window height. Large paths overflow via
   overflow:visible on the SVG.
   Why body-level (not inside .site-header / nav): .site-header has z-index: 60
   which creates its own stacking context; any child with overflow:visible would
   still paint at z-index: 60 in the root — above page content. Body-level with
   z-index: 1 keeps the rings behind .wp-site-blocks (z-index: 2). ---------- */
.alk-nav-circles {
	display: none; /* shown only in the ≥1024px media query below */
	position: absolute;
	top: calc(var(--alk-nav-link-height) * 0.66);
	left: 0;
	width: 100%;
	aspect-ratio: 2300 / 1040;
	height: auto;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}

.alk-nav-circles svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

@media (max-width: 1023px) {
	/* Anchor the legacy inline SVG to a fixed design box; bottom from --alk-brand-mobile-title-bottom (H/divisor − B, divisor 1.2). */
	.site-header .site-brand-title,
	.site-header .wp-block-site-title.site-brand-title {
		position: absolute;
		inset-inline-start: var(--alk-mobile-wordmark-inline-nudge);
		bottom: var(--alk-brand-mobile-title-bottom);
		width: var(--alk-brand-mobile-box-width);
		min-width: var(--alk-brand-mobile-box-width);
		height: var(--alk-brand-mobile-box-height);
		min-height: var(--alk-brand-mobile-box-height);
		/*
		 * height/min-height: always morph (0.4s). bottom: no transition here — instant when
		 * leaving .is-scrolled (scroll up). bottom eases only under .site-header.is-scrolled.
		 */
		transition:
			height var(--alk-transition-duration) var(--alk-transition-timing),
			min-height var(--alk-transition-duration) var(--alk-transition-timing);
		/* Override global reduce `* { transition-duration: … !important }` for wordmark morph. */
		transition-duration: var(--alk-transition-duration) !important;
	}

	.site-header.is-scrolled .site-brand-title,
	.site-header.is-scrolled .wp-block-site-title.site-brand-title {
		bottom: 2px;
		height: var(--alk-brand-mobile-box-height-scrolled);
		min-height: var(--alk-brand-mobile-box-height-scrolled);
		transition:
			bottom var(--alk-transition-duration) var(--alk-transition-timing),
			height var(--alk-transition-duration) var(--alk-transition-timing),
			min-height var(--alk-transition-duration) var(--alk-transition-timing);
		transition-duration: var(--alk-transition-duration) !important;
	}

	.alk-brand-decoration__desktop { display: none; }
	.alk-brand-decoration__mobile  { display: block; }
}

/* Mobile: WCAG prefers-reduced-motion — header shell + burger use instant chrome tokens;
   wordmark block below restores full morph (see comment). */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.site-header {
		transition: background-color var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            box-shadow var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            min-height var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            height var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            z-index 0s ease var(--alk-transition-duration);
	}

	/*
	 * Wordmark: keep full chrome morph duration even when global motion is reduced.
	 * (Header shell above still uses near-instant transitions in this block.)
	 */
	.site-header .site-brand-title,
	.site-header .wp-block-site-title.site-brand-title {
		transition:
			height var(--alk-transition-duration) var(--alk-transition-timing),
			min-height var(--alk-transition-duration) var(--alk-transition-timing);
		transition-duration: var(--alk-transition-duration) !important;
	}

	.site-header.is-scrolled .site-brand-title,
	.site-header.is-scrolled .wp-block-site-title.site-brand-title {
		transition:
			bottom var(--alk-transition-duration) var(--alk-transition-timing),
			height var(--alk-transition-duration) var(--alk-transition-timing),
			min-height var(--alk-transition-duration) var(--alk-transition-timing);
		transition-duration: var(--alk-transition-duration) !important;
	}

	.site-header .alk-classic-menu .wp-block-navigation__responsive-container-open {
		transition: color var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            background-color var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            border var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            box-shadow var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            outline var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing),
		            transform var(--alk-reduced-motion-duration) var(--alk-reduced-motion-easing);
	}
}

/* Desktop (>=1024px): size the logo so LEBEN-top ≅ nav-font-top and
   KONZEPT-baseline ≅ nav hover-underline (both at y≈50px / y≈84px in the
   112px header).
   Calculation (@1440px, nav item rect top=28 bot=84, font-size=12px):
     nav font top  ≈ (28+84)/2 − 12/2 = 50px
     nav underline ≈ 84px
   SVG viewBox "108 134 220 110" text proportions (after translate/scale):
     LEBEN top     ≈ 33.5 % of logo height
     KONZEPT bot   ≈ 77.6 % of logo height
   → required height H: 0.441·H = 34px → H ≈ 77px (using 76px)
     flex-centered in 112px: top = (112-76)/2 = 18px; +6px margin → 24px
     LEBEN top in vp  = 24 + 0.335×76 ≈ 49.5px ≈ 50px ✓
     KONZEPT bot in vp = 24 + 0.776×76 ≈ 83px   ≈ 84px ✓
   SVG viewBox is 220×110 (2:1); at 76px tall → 152×76px (2:1 maintained). */
@media (min-width: 1024px) {
	.site-brand-title,
	.wp-block-site-title.site-brand-title {
		min-height: 76px;
		min-width: 152px;
		margin-block-start: 6px;
	}

	/* Desktop wordmark SVG viewBox leaves ~3.5px ink inset at 152px box width (probe @1440). */
	.site-header .site-brand-title .alk-brand-decoration {
		--alk-deco-x: -3.5px;
	}

	/* Fade transition for the home-only reveal below. */
	.alk-brand-decoration__desktop {
		transition:
			opacity 0.3s ease,
			visibility 0.3s ease;
	}

	/* Home page: hide the site-title logo until the page is scrolled past
	   the header threshold (.is-scrolled is toggled by assets/js/header-scroll.js
	   at scrollY > 50). On every other route (archives, singular, CPT, search,
	   etc.) body.home is absent, so the rule does not apply and the logo stays
	   visible from the first paint. */
	body.home .site-header:not(.is-scrolled) .alk-brand-decoration__desktop {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	/* While the logo is hidden on home, disable click-through on the anchor so
	   users don't trigger the (invisible) link accidentally. The anchor re-enables
	   itself automatically once the parent rule stops matching (= is-scrolled). */
	body.home .site-header:not(.is-scrolled) .site-brand-title a {
		pointer-events: none;
	}
}

/* Make sure every ancestor in the header chain lets the bleed through so the
   large mobile circles can paint into the page body. The service bar stays
   on top courtesy of its own z-index: 20. */
.site-header,
.site-header-inner,
.site-header-brand {
	overflow: visible;
}

/* Hero - decorated variant. Default .alk-hero keeps its orange overlay; the
   decorated variant drops the overlay and shows the SVG instead. The base
   .alk-hero rule sets overflow:hidden, which would clip the huge background
   rings to the hero rectangle. We override to visible so the circles can
   bleed into the page background per design brief ("Kreise sollen aus dem
   Element heraus fliessen und Hintergrund auf der Seite bilden").
   isolation:isolate creates a self-contained stacking context: bg/content/
   wordmark z-indices are relative to the hero, not the document, so the
   overflow circles cannot paint above page content that follows the hero. */
.alk-hero--decorated {
	background-color: transparent;
	overflow: visible;
	isolation: isolate;
	position: relative;
	/* DOX-like hero geometry: viewport-led sizing (main header overlays hero). */
	min-height: calc(100vh - var(--alk-service-bar-height)) !important;
}

@supports (height: 100svh) {
	.alk-hero--decorated {
		min-height: calc(100svh - var(--alk-service-bar-height)) !important;
	}
}

.alk-hero--decorated > .wp-block-cover__background,
.alk-hero--decorated .alk-hero__overlay {
	display: none;
}

/* Full-bleed thick arc (column SVG hides .alk-hero-circles to avoid duplicate paint). */
.alk-hero--decorated .alk-hero__bleed {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	line-height: 0;
	overflow: visible;
}

.alk-hero--decorated .alk-hero__bleed svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Grid column 1: wordmark + inner-arcs share one viewBox (see both hero SVG assets). */
.alk-hero--decorated {
	--alk-hero-graphic-vb-w: 519.54345;
	--alk-hero-graphic-vb-h: 298.37792;
}

/* Column 1: one positioning box; layers stacked 1:1 (identical viewBox + meet in SVG files). */
.alk-hero--decorated .alk-hero__graphic {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	box-sizing: border-box;
	justify-self: start;
	align-self: stretch;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
	height: calc(100% - 2 * var(--wp--preset--spacing--40, 1.5rem));
	width: auto;
	aspect-ratio: var(--alk-hero-graphic-vb-w) / var(--alk-hero-graphic-vb-h);
	min-height: 0;
	min-width: 0;
	overflow: visible;
	pointer-events: none;
	line-height: 0;
}

.alk-hero--decorated .alk-hero__graphic-layer {
	position: absolute;
	inset: 0;
	overflow: visible;
	pointer-events: none;
	line-height: 0;
}

.alk-hero--decorated .alk-hero__inner-arcs {
	z-index: 1;
}

.alk-hero--decorated .alk-hero__fg-wordmark {
	z-index: 3;
}

.alk-hero--decorated .alk-hero__graphic-layer svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.alk-hero--decorated .alk-hero__inner-arcs .alk-hero-circles,
.alk-hero--decorated .alk-hero__inner-arcs .alk-hero-wordmark,
.alk-hero--decorated .alk-hero__fg-wordmark .alk-hero-circles,
.alk-hero--decorated .alk-hero__fg-wordmark .alk-hero-inner-arcs {
	display: none;
}

.alk-hero--decorated > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.alk-hero--decorated .alk-hero__content {
	position: relative;
	z-index: 2;
}

/* AKL deviation from DOX (desktop): column 1 = decoration; copy in columns 2–3. */
@media (min-width: 1024px) {
	.alk-hero--decorated > .wp-block-cover__inner-container {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(1rem, 2vw, 2rem);
		align-items: stretch;
		width: 100%;
		max-width: var(--alk-layout-shell-max);
		padding-inline: var(--alk-layout-shell-inline);
		margin-inline: auto;
	}

	/* Service-bar Kontakt text-start anchor (20px padding on nav link). */
	.alk-hero--decorated .alk-hero__graphic {
		margin-left: 20px;
	}

	.alk-hero--decorated .alk-hero__content {
		grid-column: 2 / 4;
		grid-row: 1;
		align-self: start;
		justify-self: start;
		margin: 0;
		text-align: left;
		width: fit-content;
		max-width: 100%;
	}

	.alk-hero--decorated .alk-hero__content .wp-block-heading,
	.alk-hero--decorated .alk-hero__content p {
		text-align: left !important;
	}

	.alk-hero--decorated .alk-hero__content .wp-block-buttons {
		justify-content: flex-start !important;
	}

	/* Desktop only: clip far-right hero ring overflow (mobile uses body-level circles). */
	body:has(.alk-hero--decorated),
	main.wp-block-group:has(> .alk-hero--decorated),
	main.wp-block-group:has(> * .alk-hero--decorated) {
		overflow-x: clip;
	}
}

@media (min-width: 1280px) {
	.alk-hero--decorated .alk-hero__graphic {
		margin-left: 0;
	}
}

/* Mobile: hero renders WITHOUT decoration. */
@media (max-width: 1023px) {
	.alk-hero--decorated .alk-hero__bleed,
	.alk-hero--decorated .alk-hero__graphic {
		display: none;
	}

	/* Body-level rings: align with unscrolled header (service bar top + band nudge + logo down-shift). */
	.alk-mobile-body-circles {
		display: block;
		position: absolute;
		top: var(--alk-service-bar-height);
		left: calc(var(--alk-layout-mobile-nav-inline) + var(--alk-mobile-wordmark-inline-nudge));
		transform: translateY(calc(var(--alk-mobile-header-band-vertical-nudge) + var(--alk-brand-mobile-logo-down-shift)));
	}

	/* Hero: H + C + optical extra — main header overlays; do not double-add band nudge (wordmark uses header-internal bottom). */
	.alk-hero--decorated {
		padding-top: calc(var(--alk-main-header-height-mobile) + var(--alk-main-content-below-chrome-mobile) + var(--alk-hero-mobile-padding-top-extra));
		padding-inline: 0;
		box-sizing: border-box;
	}

	/* Cream panel: one horizontal gutter only (hero shell 0 + content 20px; not 20+20). */
	.alk-hero--decorated .alk-hero__content,
	.alk-hero--decorated .alk-hero__content.has-global-padding {
		padding: var(--wp--preset--spacing--40) var(--alk-layout-main-inline) !important;
	}
}

/* Tablet guard (1024..1279): content column starts at 50vw; col-1 width subtracts
   main + inner shell gutters (--alk-hero-tablet-viewport-inset). Shell token breakpoint
   matches this range (max-width 1279) so gutters stay paired through the bridge. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.alk-hero--decorated > .wp-block-cover__inner-container {
		grid-template-columns: calc(50vw - var(--alk-hero-tablet-viewport-inset)) minmax(0, 1fr);
		column-gap: 0;
	}

	.alk-hero--decorated .alk-hero__graphic {
		margin-left: 0;
		max-width: 100%;
	}

	.alk-hero--decorated .alk-hero__content {
		grid-column: 2;
		max-width: min(100%, 560px);
	}

	.alk-hero--decorated .alk-hero__content .wp-block-buttons {
		flex-wrap: wrap;
		row-gap: 10px;
	}
}

/*
 * Block editor (add_editor_style): WP scopes rules with :where(.editor-styles-wrapper).
 * Do NOT prefix with .block-editor-iframe__body (not a descendant of that wrapper after
 * scoping) or duplicate .editor-styles-wrapper (double wrapper never matches).
 * Use .block-editor-block-list__layout — present in the editor canvas only, not on normal frontend HTML.
 */
/* Editor preview: .alk-hero__fg-wordmark is hidden (duplicate SVG). The hero SVG
   uses viewBox "0 80 2300 1040" (alk-online-hero-desktop.svg). The wordmark <g>
   spans roughly x=114..710 in user units (see <text> ink + ring paths; not just path H coords).
   DOM: .alk-hero__bg is position:absolute on the full-width hero; the grid sits in
   .wp-block-cover__inner-container (max-width + margin auto). The bg slot must match
   the first grid track, not (heroWidth − 2×pad) / 3 — that over-counts when the hero
   is wider than --alk-layout-shell-max and must subtract column-gap like the grid.
   <img> width uses 100% of .alk-hero__bg, so wrong bg width scales the wordmark wrong.
   IMPORTANT: alk-hero.js edit() uses <img>; editor rules target .alk-hero__bg img. */
.block-editor-block-list__layout .alk-hero--decorated {
	--alk-editor-hero-pad-inline: max(1rem, var(--alk-layout-shell-inline));
	--alk-editor-hero-vb-w: 2300;
	/* Wordmark ink bbox in viewBox user units (alk-online-hero-desktop.svg <g class="alk-hero-wordmark">).
	   Path data / x alone under-estimate <text> advance (Georgia bold + letter-spacing); tune --alk-editor-wm-r. */
	--alk-editor-wm-l: 114;
	--alk-editor-wm-r: 710;
	/* Reinforce frontend decorated overflow so scaled deco is not clipped by .alk-hero. */
	overflow: visible;
}

.block-editor-block-list__layout .alk-hero--decorated .alk-hero__bg {
	display: block;
	/* Out of document flow: frontend uses .alk-hero__graphic in grid col 1; editor keeps legacy
	   .alk-hero__bg + <img>. Without position:absolute the span stays static at the hero top
	   (transform alone "floats" the wordmark above the panel). */
	position: absolute;
	z-index: 0;
	/* Align with first grid column: inner shell is centered and max-width capped (see frontend ≥1024). */
	inset: auto;
	left: calc(
		(100% - min(100%, var(--alk-layout-shell-max))) / 2 + var(--alk-editor-hero-pad-inline)
	);
	/* Match frontend grid: vertically center the preview strip with hero copy (align-items: center). */
	top: 50%;
	/* Do not stretch to full hero height: a tall narrow box + SVG preserveAspectRatio
	   "slice" zooms one cropped region (huge monochrome fragment). Shrink-wrap height. */
	bottom: auto;
	height: auto;
	max-height: none;
	/* First track of 1fr + 2fr grid with one column-gap (same rhythm as frontend 3-col hero). */
	width: calc(
		max(
				0px,
				min(100%, var(--alk-layout-shell-max))
					- 2 * var(--alk-editor-hero-pad-inline)
					- clamp(1rem, 2vw, 2rem)
			) / 3
	);
	box-sizing: border-box;
	padding-inline: 0;
	padding-block: var(--wp--preset--spacing--30, 1rem);
	/* Let scaled SVG + adjacent rings paint outside this column (same idea as frontend hero). */
	overflow: visible;
	pointer-events: none;
	/* No frontend --alk-hero-deco-* translate; center this column in the hero. */
	transform: translateY(-50%);
	transition: none;
}

/* Editor: hero bg is an <img> (see assets/js/blocks/alk-hero.js); cannot hide SVG <g> via CSS. */
.block-editor-block-list__layout .alk-hero--decorated .alk-hero__bg svg,
.block-editor-block-list__layout .alk-hero--decorated .alk-hero__bg img {
	display: block;
	/* 100% = .alk-hero__bg column width; expand so one viewBox width = wordmark band only. */
	width: calc(100% * var(--alk-editor-hero-vb-w) / (var(--alk-editor-wm-r) - var(--alk-editor-wm-l)));
	max-width: none;
	height: auto !important;
	/* Shift so user x=wm-l aligns with the left edge of the column (same slot as full SVG at 100%). */
	margin-left: calc(-100% * var(--alk-editor-wm-l) / var(--alk-editor-hero-vb-w));
	overflow: visible;
}

/* Inline-SVG editor only (if edit markup ever matches frontend). */
.block-editor-block-list__layout .alk-hero--decorated .alk-hero__bg .alk-hero-wordmark {
	display: block !important;
}

.block-editor-block-list__layout .alk-hero--decorated .alk-hero__bg .alk-hero-circles {
	display: none !important;
}

.block-editor-block-list__layout .alk-hero--decorated .alk-hero__fg-wordmark {
	display: none !important;
}

.block-editor-block-list__layout .alk-hero--decorated > .wp-block-cover__inner-container {
	/* 1/3 graphic space + 2/3 editable content — representative of frontend layout. */
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
	column-gap: clamp(1rem, 2vw, 2rem) !important;
	align-items: center;
	width: 100% !important;
	max-width: min(100%, var(--alk-layout-shell-max)) !important;
	margin-inline: auto !important;
	/* Same shell rhythm as frontend hero grid (token + min for narrow editor canvas). */
	padding-inline: var(--alk-editor-hero-pad-inline) !important;
}

/* In the editor, InnerBlocks injects wrapper elements between the hero grid and
   the editable group. Position that direct wrapper, not only .alk-hero__content. */
.block-editor-block-list__layout .alk-hero--decorated > .wp-block-cover__inner-container > .block-editor-inner-blocks {
	grid-column: 2 / -1;
	width: 100%;
	min-width: 0;
}

.block-editor-block-list__layout .alk-hero--decorated > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
	width: 100%;
	min-width: 0;
}

.block-editor-block-list__layout .alk-hero--decorated .alk-hero__content {
	width: 100%;
	max-width: min(100%, 560px);
	justify-self: stretch;
}

/* Hero content panel: the group that carries heading/paragraph/buttons sits on
   top of the decoration graphics. Give it the theme's cream background so the
   copy stays readable when orange ring paths bleed through the hero rectangle.
   Desktop: wider horizontal padding; mobile uses spacing--30 to match card content (see max-width 1023px block above). */
.alk-hero--decorated .alk-hero__content {
	background-color: var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2rem);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(11, 45, 114, 0.04);
}

@media (min-width: 1024px) {
	.alk-hero--decorated .alk-hero__content {
		padding-inline: 2.5rem;
	}
}

/* Outline buttons inside the decorated hero: the legacy transparent style was
   designed for the solid orange cover. With decoration graphics behind it, a
   transparent button becomes unreadable against the cream/orange ring mix.
   Fill it with the theme background. Text/border remain primary-on-brand via
   the general .alk-hero outline rule above (same #0B2D72). !important is
   required to beat that earlier !important in the general .alk-hero rule. */
.alk-hero--decorated .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--background) !important;
}

.alk-hero--decorated .wp-block-button.is-style-outline .wp-block-button__link:hover,
.alk-hero--decorated .wp-block-button.is-style-outline .wp-block-button__link:focus,
.alk-hero--decorated .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--background) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/* Nav circles: activate on desktop/tablet. */
@media (min-width: 1024px) {
	.alk-nav-circles {
		display: block;
	}
}