/**
 * 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;
	/* v5.4.6 — Aspect-Ratio konfigurierbar via CSS-Custom-Property.
	   Default: Querformat 16:9. Höhe wird relativ zur Breite berechnet.
	   Override pro Pattern oder pro Block:
	     style="--wow-aspect: 16/9;"       → Querformat (Default)
	     style="--wow-aspect: 3/2;"        → klassisches Foto-Format
	     style="--wow-aspect: 4/3;"        → 4:3
	     style="--wow-aspect: 1/1;"        → Quadrat
	     style="--wow-aspect: 9/16;"       → Hochformat (Mobile-First wie früher)
	     style="--wow-min-h: 100svh;"      → alternativ feste min-height statt aspect
	*/
	aspect-ratio: var(--wow-aspect, 16 / 9);
	min-height: var(--wow-min-h, auto);
	display: flex;
	align-items: flex-end;          /* Karte sitzt unten */
	justify-content: center;
	padding: 0 16px 6vh;
	overflow: hidden;
	color: var(--wow-card-text, #fff);
	/* Container-Type für Container-Queries (Text-Auto-Adapt zur Bildgröße) */
	container-type: inline-size;
	container-name: wow-hero;
}

/* Hintergrund-Bild (Cover füllt 100%) */
.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;
	object-position: var(--wow-img-x, 50%) var(--wow-img-y, 35%) !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, rgba(255,255,255,0.10));
	backdrop-filter: blur(var(--wow-card-blur, 18px)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--wow-card-blur, 18px)) saturate(140%);
	border: 1px solid var(--wow-card-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: var(--wow-img-x, 50%) var(--wow-img-y, 40%) !important;
}
.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, rgba(255,255,255,0.10));
	backdrop-filter: blur(var(--wow-card-blur, 16px)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--wow-card-blur, 16px)) saturate(140%);
	border: 1px solid var(--wow-card-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 — TEXT-AUTO-ADAPT via Container-Queries
   ──────────────────────────────────────────────────────────────
   Die font-size der Headlines passt sich an die CONTAINER-Breite an,
   nicht an die Viewport-Breite. So skaliert der Text auch dann sauber,
   wenn das Hero nicht 100% des Viewports einnimmt (z.B. ein Hero in
   einer 60% breiten Spalte).

   Container-Query-Units (cqi = container-inline-size, in %):
     5cqi  → 5% der Container-Breite
     8cqi  → 8% der Container-Breite

   Headline: skaliert von 4cqi (klein bei schmalem Container)
              bis 8cqi (groß bei breitem Container).
   ══════════════════════════════════════════════════════════════ */
@container wow-hero (min-width: 0) {
	.mup-wow-hero__title {
		font-size: clamp(1.6rem, 8cqi, 4rem);
		line-height: 1.1;
	}
	.mup-wow-hero__sub {
		font-size: clamp(0.92rem, 3cqi, 1.3rem);
	}
	.mup-wow-hero__eyebrow {
		font-size: clamp(0.9rem, 2.4cqi, 1.25rem);
	}
	.mup-wow-hero__brand {
		font-size: clamp(1.4rem, 5cqi, 2.8rem);
	}
}

/* Fallback für Browser ohne Container-Query-Support */
@supports not (container-type: inline-size) {
	.mup-wow-hero__title    { font-size: clamp(1.6rem, 5vw, 3rem); }
	.mup-wow-hero__sub      { font-size: clamp(0.92rem, 2vw, 1.2rem); }
	.mup-wow-hero__eyebrow  { font-size: clamp(0.9rem, 1.8vw, 1.2rem); }
	.mup-wow-hero__brand    { font-size: clamp(1.4rem, 3.5vw, 2.5rem); }
}

/* ────────────────────────────────────────────────────────────────
   v5.4.6 — Aspect-Ratio Modifier-Klassen (komfortabel statt Inline-Style)
   ──────────────────────────────────────────────────────────────── */
.mup-wow-hero.is-aspect-16-9 { --wow-aspect: 16 / 9; }
.mup-wow-hero.is-aspect-3-2  { --wow-aspect: 3 / 2; }
.mup-wow-hero.is-aspect-4-3  { --wow-aspect: 4 / 3; }
.mup-wow-hero.is-aspect-1-1  { --wow-aspect: 1 / 1; }
.mup-wow-hero.is-aspect-9-16 { --wow-aspect: 9 / 16; }
.mup-wow-hero.is-aspect-21-9 { --wow-aspect: 21 / 9; }       /* Cinemascope */
.mup-wow-hero.is-fullscreen  { --wow-aspect: auto; --wow-min-h: 100svh; }

/* Mobile-Korrektur: 16:9 ist auf schmalen Screens zu schmal.
   Auf Mobile (<= 600px) erzwingt 4:3 als Min-Aspect für Hero. */
@media (max-width: 600px) {
	.mup-wow-hero.is-aspect-16-9,
	.mup-wow-hero.is-aspect-21-9 {
		aspect-ratio: 4 / 3;
	}
}