/* ==========================================================================
   Module Hero — reusable component
   Markup: .module-hero (header, role="banner") > .module-hero__photo-wrap
     (featured image + .module-hero__badge) + .wrapper > .module-hero__content
     (h1 + .module-hero__tagline + .module-hero__actions with two
     .module-hero__btn-primary / .module-hero__btn-secondary buttons).
   Text content (heading, tagline, both button labels/URLs) comes from the
   universal SCF field group registered in inc/scf-fields/module-hero.php
   (post_type-only guard — available on every 'module' post, like the FAQ
   accordion). The featured image is used as-is (has_post_thumbnail()), no
   SCF field for it. First usage: single-module-fahrradbox-3.php.
   ========================================================================== */

/* Deliberately NOT using the sitewide .image-header/.red utility classes —
   .red * forces color:#f5f5f5 !important sitewide (AAA contrast fix), which
   would fight the primary button's black-on-white requirement below.
   Padding: 0 on mobile (image sits flush top/edges, full-bleed) — .wrapper
   below carries the vertical spacing instead. Desktop restores padding on
   the header itself, see media query. */
.module-hero {
	position: relative;
	/* overflow-x clip (not full hidden): the circle bleeds ~5% past
	   the right edge on desktop (would cause a horizontal scrollbar)
	   AND is meant to hang past the section's bottom edge (see
	   .module-hero__photo-wrap below) — plain overflow:hidden
	   clips both axes and killed the bottom bleed too. `clip`,
	   unlike `hidden`, doesn't force the other axis to compute as
	   `auto` when mixed with `visible`. */
	overflow-x: clip;
	overflow-y: visible;
	background-color: var(--red);
	padding: 0;
}

/* Sitewide `* { color: var(--black) }` (style.css:114-124) sets color
   DIRECTLY on every element (not just as an inheritable default), so an
   ancestor's color:white is never consulted — each descendant already
   has its own, lower-specificity-but-direct black. Must target
   descendants explicitly; same reason the sitewide `.red *` AAA-fix
   rule exists as `ancestor *`, not a plain ancestor color. */
.module-hero * {
	color: var(--white);
}

.module-hero .wrapper {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.module-hero__content {
	position: relative;
	z-index: 2;
}

/* Fluid display size: the heading is meant to be a single short word/term
   (not sitewide's usual multi-line heading), so it can run much bigger than
   the 2.2rem sitewide default without wrapping risk. clamp() over the
   sitewide fixed rem keeps it readable on small phones (min) while letting
   it grow into the generous hero height on desktop (max), scaling smoothly
   in between via the vw term — no extra breakpoint needed on top of the
   existing photo/layout media query. */
.module-hero h1 {
	font-size: clamp(2.75rem, 1rem + 6vw, 5.5rem);
	line-height: 1.05;
	/* em, not sitewide's fixed -.1rem: that value was tuned for the
	   2.2rem default and barely registers at this size (~-2px on an
	   88px headline); em scales the tracking together with the
	   clamp() above so it stays proportionally tight at every size. */
	letter-spacing: -.02em;
	margin-bottom: .5rem;
}

.module-hero__tagline {
	margin: 0;
	font-size: clamp(1.35rem, .7rem + 2vw, 2rem);
	font-weight: 500;
}

.module-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	/* Fluid, not a fixed 2rem: h1/tagline above scale via clamp() too, so a
	   static gap would look cramped next to the 88px desktop headline and
	   slightly loose next to the 44px mobile one. Grows in step with them
	   across the same viewport range. */
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
}

.module-hero .button {
	width: auto;
	margin: 0;
	gap: .5rem;
}

/* Higher specificity (.module-hero + this class = 2 classes) needed to
   reliably beat the .module-hero * white rule above — a bare
   .module-hero__btn-primary{color:black} would tie it on specificity and
   depend on source order. The " *" arm covers the arrow <span> too, which
   .module-hero * would otherwise also whiten directly (descendant color
   isn't inherited from the <a>, each element is matched independently). */
.module-hero .module-hero__btn-primary,
.module-hero .module-hero__btn-primary * {
	color: var(--black);
}

.module-hero__btn-primary {
	background: var(--white);
	border: 1px solid var(--white);
}

.module-hero__btn-primary:hover {
	background: var(--white-80);
}

.module-hero__btn-secondary {
	background: transparent;
	border: 1px solid var(--white);
}

.module-hero__btn-secondary:hover {
	background: var(--white-15);
}

/* Photo: mobile = normal-flow square/rect image above the red field.
   Desktop (>=768px) = absolutely positioned circle bleeding off the
   right/bottom edge, diameter = --module-hero-height (set on .module-hero
   in the media query below). */
.module-hero__photo-wrap {
	/* relative (not static): scopes the badge's absolute positioning to
	   this wrapper on mobile without affecting normal-flow layout */
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 1.5rem;
}

.module-hero__photo {
	display: block;
	width: 100%;
	max-height: 13rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.module-hero__badge {
	position: absolute;
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	bottom: .75rem;
	right: .75rem;
	border-radius: 50%;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 1px 5px 0px var(--shadow);
}

.module-hero__badge svg {
	width: 1.1rem;
	height: 1.1rem;
}

.module-hero__badge-icon {
	fill: var(--red);
}

@media (min-width: 768px) {
	.module-hero {
		/* Fixed height + a custom property shared with .photo-wrap below,
		   instead of min-height/auto: percentage heights on an absolutely
		   positioned child do NOT reliably resolve against an auto-height
		   parent — display:flex does not fix this (an earlier attempt at
		   that still rendered the photo as a flattened oval, not a circle,
		   and the section stayed short). Giving the parent an explicit
		   height and having the photo reference that exact same value
		   directly (not as a %) sidesteps the ambiguity entirely. Adjust
		   this one value to retune the hero's height. */
		--module-hero-height: 40rem;
		height: var(--module-hero-height);
		/* Symmetric top/bottom: <main id="main-content"> already gets
		   padding-top: var(--header-height) sitewide (see style.css), so
		   the section starts below the fixed header on its own — this
		   padding is just breathing room inside the fixed-height box, not
		   header clearance, and should stay vertically centered. */
		padding: 2.6rem 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.module-hero .wrapper {
		padding-top: 0;
		padding-bottom: 0;
	}

	.module-hero__content {
		max-width: min(45%, 50rem);
	}

	.module-hero__photo-wrap {
		position: absolute;
		top: 0;
		right: 5rem;
		/* Explicit width AND height (not aspect-ratio) — the mobile base
		   rule above sets width:100%, which the desktop block never
		   overrode; width:100% + height:var(...) together made
		   aspect-ratio a no-op (it only fills in a MISSING dimension, and
		   both were already set), producing a flattened lozenge nearly the
		   full header width instead of a circle. Setting width to the
		   same var as height removes the ambiguity entirely instead of
		   re-introducing aspect-ratio. */
		width: var(--module-hero-height);
		height: var(--module-hero-height);
		transform: translateY(10%);
		border-radius: 50%;
		/* overflow:hidden here only crops the square <img> into a circle
		   within this wrap's own box — unrelated to (and not in conflict
		   with) the outer .module-hero overflow-y: visible, which is what
		   lets that circle hang past the section's bottom edge since this
		   wrap itself is shifted down via translateY below. */
		overflow: hidden;
		z-index: 1;
		margin-bottom: 0;
		box-shadow: 0px 1px 5px 0px var(--shadow);
	}

	.module-hero__photo {
		height: 100%;
		max-height: none;
	}

	.module-hero__badge {
		width: 3.5rem;
		height: 3.5rem;
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		transform: translate(-50%, -50%);
	}

	.module-hero__badge svg {
		width: 1.5rem;
		height: 1.5rem;
	}
}