/**
 * MUP WOW Hero — Mobile-first Glas-Hero-System
 * Universal über alle Sites einsetzbar. Smartphone primary, Desktop fabelhaft.
 *
 * Klassen-Konvention:
 *   .mup-wow-hero            → Cover-Block (Hauptcontainer, 100svh)
 *   .mup-wow-hero__card      → Glas-Karte mit Inhalt
 *   .mup-wow-hero__brand     → Markenname klein (Skript-Font möglich)
 *   .mup-wow-hero__eyebrow   → Kicker-Zeile über H1
 *   .mup-wow-hero__title     → H1 (Headline)
 *   .mup-wow-hero__sub       → Untertitel unter H1
 *
 *   .mup-wow-header          → Kleinere Variante für Unterseiten (60svh)
 *
 * Mobile-First. Custom-Property-Hooks für per-Site Overrides:
 *   --wow-card-bg            (Glas-Hintergrund)
 *   --wow-card-blur          (Backdrop-Blur)
 *   --wow-card-border        (Karten-Rand)
 *   --wow-card-text          (Karten-Textfarbe)
 *   --wow-card-accent        (Akzentfarbe — fällt auf --mup-accent zurück)
 *   --wow-overlay            (Cover-Dim-Overlay)
 */

/* ========================================================================
   1) HAUPT-HERO — Smartphone-first Vollbild-Portrait + Glas-Karte unten
   ======================================================================== */
.mup-wow-hero {
	position: relative;
	min-height: 100svh;             /* svh = small viewport height, ideal für Mobile-Browser-UI */
	min-height: 100vh;              /* Fallback für Browser ohne svh */
	display: flex;
	align-items: flex-end;          /* Karte sitzt unten */
	justify-content: center;
	padding: 0 16px 6vh;            /* Karte hat Atem zum Bildschirmrand */
	overflow: hidden;
	color: var(--wow-card-text, #fff);
}

/* ─── Hintergrund-Bild ─────────────────────────────────────────
   object-position wird vom WP Fokus-Picker gesteuert (inline-style).
   KEIN !important hier — sonst überschreibt MUP den Picker.
   Per-Viewport-Override möglich via CSS-Vars auf dem Cover-Element:
     --wow-img-pos-m: 80% 50%   (Mobile)
     --wow-img-pos-t: 70% 40%   (Tablet)
   ─────────────────────────────────────────────────────────────── */
.mup-wow-hero .wp-block-cover__image-background,
.mup-wow-hero > .wp-block-cover__image-background,
.mup-wow-hero .wp-block-cover__video-background {
	object-fit: cover !important;
}

/* Per-Viewport: Mobile object-position via CSS-Var (override WP focal point) */
@media (max-width: 640px) {
	.mup-wow-hero[style*="--wow-img-pos-m"] .wp-block-cover__image-background {
		object-position: var(--wow-img-pos-m) !important;
	}
}
@media (min-width: 641px) and (max-width: 1024px) {
	.mup-wow-hero[style*="--wow-img-pos-t"] .wp-block-cover__image-background {
		object-position: var(--wow-img-pos-t) !important;
	}
}

/* Subtiler Verlauf-Overlay damit die Karte unten lesbar bleibt */
.mup-wow-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(
		to top,
		var(--wow-overlay, rgba(0,0,0,0.55)) 0%,
		rgba(0,0,0,0) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* ───────── Glas-Karte ───────── */
.mup-wow-hero__card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 560px;
	padding: 28px 24px 30px;
	border-radius: 18px;
	background: var(--wow-card-bg, var(--mup-glass-bg, rgba(255,255,255,0.10)));
	backdrop-filter: blur(var(--wow-card-blur, var(--mup-glass-blur, 18px))) saturate(140%);
	-webkit-backdrop-filter: blur(var(--wow-card-blur, var(--mup-glass-blur, 18px))) saturate(140%);
	border: 1px solid var(--wow-card-border, var(--mup-glass-border, rgba(255,255,255,0.22)));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.18) inset,
		0 24px 60px -20px rgba(0,0,0,0.45);
	text-align: center;
	color: inherit;
}

/* Brand-Mark */
.mup-wow-hero__brand {
	margin: 0 0 6px;
	font-family: var(--mup-font-skript, var(--wp--preset--font-family--script, inherit));
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	font-weight: 500;
}
.mup-wow-hero__brand-dot {
	color: var(--wow-card-accent, var(--mup-accent, #c9a84c));
}
.mup-wow-hero__brand-sub {
	display: block;
	margin-top: 4px;
	font-family: var(--mup-font-haupt, inherit);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
	font-weight: 400;
}

/* Eyebrow */
.mup-wow-hero__eyebrow {
	margin: 14px 0 8px;
	font-style: italic;
	font-family: var(--mup-font-skript, inherit);
	font-size: clamp(0.95rem, 3.6vw, 1.15rem);
	opacity: 0.92;
}

/* Headline */
.mup-wow-hero__title {
	margin: 4px 0 10px;
	font-family: var(--mup-font-haupt, inherit);
	font-size: clamp(1.6rem, 7.5vw, 2.6rem);
	line-height: 1.15;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Sub */
.mup-wow-hero__sub {
	margin: 0;
	font-size: clamp(0.92rem, 3.4vw, 1.05rem);
	line-height: 1.5;
	opacity: 0.88;
}

/* ========================================================================
   2) HEADER-VARIANTE — kleinere Form für Unterseiten (Über · Portraits · Reportagen …)
   ======================================================================== */
.mup-wow-header {
	position: relative;
	min-height: 62svh;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0 16px 5vh;
	overflow: hidden;
	color: var(--wow-card-text, #fff);
}
.mup-wow-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 65%;
	background: linear-gradient(
		to top,
		var(--wow-overlay, rgba(0,0,0,0.55)) 0%,
		rgba(0,0,0,0) 100%
	);
	pointer-events: none;
	z-index: 1;
}
.mup-wow-header .wp-block-cover__image-background,
.mup-wow-header > .wp-block-cover__image-background {
	object-fit: cover !important;
	/* object-position: controlled by WP Focal Point Picker — no override */
}
.mup-wow-header__card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 520px;
	padding: 22px 22px 24px;
	border-radius: 14px;
	background: var(--wow-card-bg, var(--mup-glass-bg, rgba(255,255,255,0.10)));
	backdrop-filter: blur(var(--wow-card-blur, var(--mup-glass-blur, 16px))) saturate(140%);
	-webkit-backdrop-filter: blur(var(--wow-card-blur, var(--mup-glass-blur, 16px))) saturate(140%);
	border: 1px solid var(--wow-card-border, var(--mup-glass-border, rgba(255,255,255,0.22)));
	box-shadow:
		0 1px 0 rgba(255,255,255,0.18) inset,
		0 18px 50px -18px rgba(0,0,0,0.4);
	text-align: center;
}
.mup-wow-header__eyebrow {
	margin: 0 0 6px;
	font-family: var(--mup-font-skript, inherit);
	font-style: italic;
	font-size: clamp(0.85rem, 3vw, 1rem);
	opacity: 0.92;
}
.mup-wow-header__title {
	margin: 0;
	font-family: var(--mup-font-haupt, inherit);
	font-size: clamp(1.5rem, 6.5vw, 2.2rem);
	line-height: 1.18;
	font-weight: 500;
	letter-spacing: -0.005em;
}
.mup-wow-header__sub {
	margin: 8px 0 0;
	font-size: clamp(0.88rem, 3.2vw, 1rem);
	line-height: 1.5;
	opacity: 0.85;
}

/* ========================================================================
   3) TABLET — ab 768px Karte zentriert kompakter, Headline größer
   ======================================================================== */
@media (min-width: 768px) {
	.mup-wow-hero {
		padding-bottom: 8vh;
	}
	.mup-wow-hero__card {
		padding: 36px 36px 38px;
	}
	.mup-wow-hero__title {
		font-size: clamp(2rem, 5vw, 3rem);
	}
	.mup-wow-header {
		min-height: 55vh;
	}
	.mup-wow-header__card {
		padding: 28px 32px 30px;
	}
}

/* ========================================================================
   4) DESKTOP — v5.4.1: Layout identisch mit Mobile/Tablet
   ────────────────────────────────────────────────────────────────────────
   User-Feedback: das seitliche Glas-Layout mit horizontalem Verlauf sah am
   PC nicht so harmonisch aus wie die zentrierte Mobile-Variante. Karte
   bleibt jetzt unten zentriert auf Vollbild-Portrait — auch am Desktop.
   Typografie wächst weiter mit clamp().
   ======================================================================== */
@media (min-width: 1024px) {
	.mup-wow-hero {
		padding-bottom: 10vh;             /* etwas mehr Abstand zum unteren Rand */
	}
	.mup-wow-hero__card {
		max-width: 640px;                  /* etwas breiter für mehr Atem */
		padding: 44px 48px 46px;
	}
	.mup-wow-hero__title {
		font-size: clamp(2.4rem, 4vw, 3.4rem);
	}
	.mup-wow-hero__sub {
		font-size: 1.05rem;
	}
	.mup-wow-header {
		padding-bottom: 7vh;
		min-height: 55vh;
	}
	.mup-wow-header__card {
		max-width: 560px;
		padding: 32px 38px 34px;
	}
}

/* v5.4.1: Karten-Ausrichtung-Modifier entfernt (waren is-card-right /
   is-card-center). Default-Layout = Mobile-Style auf allen Viewports. */

/* ========================================================================
   6) DARK-CARD MODIFIER — wenn Hintergrund hell ist
   ======================================================================== */
.mup-wow-hero.is-dark-card,
.mup-wow-header.is-dark-card {
	--wow-card-bg: rgba(20,20,20,0.55);
	--wow-card-border: rgba(255,255,255,0.18);
	--wow-card-text: #fff;
}

/* ========================================================================
   7) ACCESSIBILITY — Motion-Reduce
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mup-wow-hero__card,
	.mup-wow-header__card {
		transition: none !important;
	}
}

/* ─── v5.4.6 · #08 Safe-Area-Insets für notched iPhones ─────── */
@supports (padding: max(0px)) {
  .mup-wow-hero {
    padding-bottom: max(6vh, env(safe-area-inset-bottom, 0px));
    padding-left:   max(16px, env(safe-area-inset-left, 0px));
    padding-right:  max(16px, env(safe-area-inset-right, 0px));
  }
  .mup-wow-header {
    padding-bottom: max(5vh, env(safe-area-inset-bottom, 0px));
    padding-left:   max(16px, env(safe-area-inset-left, 0px));
    padding-right:  max(16px, env(safe-area-inset-right, 0px));
  }
}

/* ─── v5.4.6 · #09 Landscape-Phone Kompakt-Modus ────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .mup-wow-hero {
    padding-bottom: max(3vh, env(safe-area-inset-bottom, 0px));
  }
  .mup-wow-hero__brand { font-size: 1.1rem; margin-bottom: 4px; }
  .mup-wow-hero__brand-sub { font-size: 0.55rem; }
  .mup-wow-hero__eyebrow { font-size: 0.75rem; margin: 6px 0 4px; }
  .mup-wow-hero__title { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; margin: 2px 0 6px; }
  .mup-wow-hero__sub { font-size: 0.8rem; }
  .mup-wow-hero__card { padding: 16px 20px 18px; }
}

/* ─── v5.4.7 · Bug 1 — aspect-ratio:unset Injection-Schutz ────
   Lumens Responsive-Engine kann aspect-ratio:unset als Inline-Style
   setzen. Das kollidiert mit min-height:100svh da aspect-ratio
   die effektive Höhe neu berechnet. Lösung: Cover-Element darf
   nie eine fixe aspect-ratio haben — nur min-height bestimmt die Höhe.
   ─────────────────────────────────────────────────────────────── */
.mup-wow-hero,
.wp-block-cover.mup-wow-hero {
  aspect-ratio: auto !important; /* override jedes inline-style aspect-ratio */
}
.mup-wow-header,
.wp-block-cover.mup-wow-header {
  aspect-ratio: auto !important;
}

/* Per-Viewport Aspect-Ratio CSS-Vars (falls jemand sie nutzen will) */
@media (max-width: 640px) {
  .mup-wow-hero[style*="--wow-aspect-m"] {
    aspect-ratio: var(--wow-aspect-m, auto) !important;
    min-height: unset !important;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .mup-wow-hero[style*="--wow-aspect-t"] {
    aspect-ratio: var(--wow-aspect-t, auto) !important;
    min-height: unset !important;
  }
}
@media (min-width: 1025px) {
  .mup-wow-hero[style*="--wow-aspect-d"] {
    aspect-ratio: var(--wow-aspect-d, auto) !important;
    min-height: unset !important;
  }
}


/* ── Overlay-Gradient passt sich an Karten-Position an ──────── */
.mup-wow-hero.is-card-top::after,
.mup-wow-hero.is-card-top-left::after,
.mup-wow-hero.is-card-top-right::after {
	inset: 0 0 auto 0;
	height: 55%;
	background: linear-gradient(
		to bottom,
		var(--wow-overlay, rgba(0,0,0,0.55)) 0%,
		rgba(0,0,0,0) 100%
	);
}

/* ════════════════════════════════════════════════════════════════
   KARTEN-POSITION — CSS Custom Properties (5.4.12)
   ────────────────────────────────────────────────────────────────
   Sidebar-Schieberegler setzen --mup-card-x (0-100) und
   --mup-card-y (0-100) als Inline-Styles auf dem Cover-Block.
   
   Default (keine Vars): Karte unten zentriert (flex wie vorher).
   Mit Vars: Karte absolut positioniert — freie Platzierung.
   Mobile: immer unten zentriert (Override).
   ════════════════════════════════════════════════════════════════ */

/* Inner-Container: Position-Context für absolutes Karten-Placement */
.mup-wow-hero .wp-block-cover__inner-container,
.mup-wow-header .wp-block-cover__inner-container {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
	pointer-events: none !important; /* Container transparent für Klicks */
}

/* Karte: pointer-events wieder aktivieren */
.mup-wow-hero__card,
.mup-wow-header__card {
	pointer-events: auto !important;
	position: relative !important;
	z-index: 3 !important;
	margin: 0 0 max(6vh, env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Mit Custom Properties: absolute Positionierung ─────────── */
/* Greift wenn --mup-card-x oder --mup-card-y gesetzt sind */
.mup-wow-hero[style*="--mup-card-x"],
.mup-wow-hero[style*="--mup-card-y"] {
	align-items: stretch !important;
	justify-content: stretch !important;
}
.mup-wow-hero[style*="--mup-card-x"] .wp-block-cover__inner-container,
.mup-wow-hero[style*="--mup-card-y"] .wp-block-cover__inner-container {
	align-items: stretch !important;
	justify-content: stretch !important;
}
.mup-wow-hero[style*="--mup-card-x"] .mup-wow-hero__card,
.mup-wow-hero[style*="--mup-card-y"] .mup-wow-hero__card {
	position: absolute !important;
	left: calc(var(--mup-card-x, 50) * 1%) !important;
	top: calc(var(--mup-card-y, auto)) !important;
	bottom: auto !important;
	translate: -50% 0 !important; /* Horizontale Zentrierung der Karte */
	margin: 0 !important;
	max-width: min(640px, 90vw) !important;
	width: 92vw !important;
}

/* Vertikale Positionierung: top wenn --mup-card-y gesetzt */
.mup-wow-hero[style*="--mup-card-y"] .mup-wow-hero__card {
	top: calc(var(--mup-card-y, 50) * 1%) !important;
	translate: -50% -50% !important; /* Beide Achsen zentrieren */
}

/* ── Mobile: immer Default (unten zentriert) ────────────────── */
@media (max-width: 640px) {
	.mup-wow-hero[style*="--mup-card-x"] .wp-block-cover__inner-container,
	.mup-wow-hero[style*="--mup-card-y"] .wp-block-cover__inner-container {
		align-items: flex-end !important;
		justify-content: center !important;
	}
	.mup-wow-hero[style*="--mup-card-x"] .mup-wow-hero__card,
	.mup-wow-hero[style*="--mup-card-y"] .mup-wow-hero__card {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		translate: none !important;
		margin: 0 0 max(6vh, env(safe-area-inset-bottom, 0px)) !important;
		width: calc(100% - 2rem) !important;
	}
}

/* ── Effekt-Z-Index: Sparkle über Karte ─────────────────────── */
/* Sparkle/Glow ::before/::after soll überall im Hero sichtbar sein */
.mup-wow-hero[data-mup-effect]::before,
.mup-wow-hero[data-mup-effect]::after {
	z-index: 4 !important; /* Über der Karte (z-index 3) */
	pointer-events: none !important;
}