/**
 * Hero media section ("Hero Media Seite" page template).
 *
 * Header offsets mirror the fixed header sizes defined in mega-menu.css
 * (138px desktop, 60px below 921px). --sticky-admin-offset covers the
 * WordPress admin bar and is set by mega-menu.js.
 *
 * @package Hoenle
 */

.hero-media {
	--hero-media-header-offset: 138px;

	position: relative;
	width: 100%;
	min-height: calc(100vh - var(--hero-media-header-offset) - var(--sticky-admin-offset, 0px));
	min-height: calc(100svh - var(--hero-media-header-offset) - var(--sticky-admin-offset, 0px));
	display: flex;
	align-items: center;
	/* Progressive enhancement: if the content is taller than the section
	 * (short viewport, content-heavy hero), fall back to top-alignment
	 * instead of letting centering clip the heading through overflow:hidden.
	 */
	align-items: safe center;
	justify-content: center;
	overflow: hidden;
	clear: both;
	background: var(--aktd-gradient-light-blue-violet, linear-gradient(180deg, #009FE3 0%, #590098 100%));
}

@media (max-width: 921px) {
	.hero-media {
		--hero-media-header-offset: 60px;
		/* Size to the content instead of forcing full viewport height. */
		min-height: 0;
	}
}

/* Background media */
.hero-media__background {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-media__picture,
.hero-media__image,
.hero-media__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-media__image,
.hero-media__video {
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Overlay */
.hero-media__overlay {
	position: absolute;
	inset: 0;
	opacity: var(--hero-media-overlay-opacity, 0.6);
	pointer-events: none;
}

.hero-media__overlay--gradient {
	background: linear-gradient(
		100deg,
		var(--aktd-color-violet, #590098) 0%,
		rgba(0, 113, 180, 0.75) 55%,
		rgba(0, 159, 227, 0.55) 100%
	);
}

.hero-media__overlay--dark {
	background: #10131f;
}

/* Content */
.hero-media__content {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0 auto;
	/* Bottom padding must clear the scroll-down button (bottom: 160px)
	 * plus its icon (up to 100px) regardless of viewport height, so it
	 * can never overlap the text/links above it.
	 * Top padding is a small fixed clearance from the header, not a large
	 * vh-based gap, so the heading still sits high (kept intentionally low)
	 * while never touching the header edge if "safe center" falls back to
	 * top-alignment on short viewports.
	 */
	padding: 144px 20px calc(160px + 100px + 24px);
	text-align: center;
	color: var(--aktd-color-white, #FFFFFF);
}

.hero-media__title {
	margin: 0;
	color: #F3F4F6;
	font-family: "DM Sans", sans-serif;
	font-size: clamp(36px, 6vw, 84px);
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: 0px 4px 6px #00000059;
	overflow-wrap: break-word;
}

/* Subline directly below the H1 */
.hero-media__eyebrow {
	margin: clamp(0.5rem, 1.5vh, 1rem) 0 0;
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: clamp(26px, 3.6vw, 50px);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: 0px 4px 6px #00000059;
}

.hero-media__description {
	margin: clamp(0.75rem, 2vh, 1.5rem) auto 0;
	max-width: 60ch;
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 300;
	line-height: 1.4;
	text-shadow: 0px 4px 6px #00000059;
}

/* Links */
.hero-media__links {
	margin-top: 50px;
}

.hero-media__links-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-media__links-item {
	display: flex;
	align-items: center;
	margin: 0;
}

.hero-media__links-item + .hero-media__links-item::before {
	content: "\00B7";
	margin: 0 12px;
	color: #FFFFFF;
	font-size: clamp(1.125rem, 1.8vw, 1.75rem);
	line-height: 1;
	text-shadow: 0px 4px 6px #00000059;
}

.hero-media__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.25rem 0;
	color: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: clamp(1.125rem, 1.8vw, 1.75rem);
	font-weight: 300;
	line-height: 1.3;
	text-decoration: none;
	text-shadow: 0px 4px 6px #00000059;
}

/* :link/:visited/:focus are reset explicitly because Astra's global
 * "a:focus" color (blue, --ast-global-color-1) otherwise wins on a mouse
 * click, since :focus-visible does not match links focused via pointer
 * in most browsers.
 */
.hero-media__link:link,
.hero-media__link:visited,
.hero-media__link:focus {
	color: #FFFFFF;
}

.hero-media__link:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.hero-media__link:focus-visible {
	color: #FFFFFF;
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}

/* Scroll-down hint */
.hero-media__scroll-down {
	position: absolute;
	bottom: 160px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	display: inline-flex;
	color: #F3F4F6;
	border-radius: 50%;
	transition: color 0.2s ease, transform 0.2s ease;
}

/* Interactive states: color is the only channel, no underline/background.
 * :focus is reset explicitly because Astra's global "a:focus" color
 * (blue, --ast-global-color-1) otherwise wins on a mouse click, since
 * :focus-visible does not match links focused via pointer in most browsers.
 */
.hero-media__scroll-down:link,
.hero-media__scroll-down:visited,
.hero-media__scroll-down:focus {
	color: #F3F4F6;
}

.hero-media__scroll-down:hover,
.hero-media__scroll-down:focus-visible {
	color: #FFFFFF;
}

.hero-media__scroll-down:active {
	color: #FFFFFF;
	transform: translateX(-50%) scale(0.95);
}

.hero-media__scroll-down:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}

/* Circle: inner contour by default (r compensated by half the stroke width
 * so the outer edge lands on the nominal r="38", i.e. a 76px diameter ring),
 * centered contour on hover/focus so the ring grows outward slightly,
 * matching the XD source.
 */
.hero-media__scroll-icon circle {
	r: 37px;
	transition: r 0.2s ease;
}

.hero-media__scroll-down:hover .hero-media__scroll-icon circle,
.hero-media__scroll-down:focus-visible .hero-media__scroll-icon circle {
	r: 38px;
}

/* Arrow: swaps between a default and a shorter/narrower hover variant. */
.hero-media__scroll-arrow {
	transition: opacity 0.2s ease;
}

.hero-media__scroll-arrow--hover {
	opacity: 0;
}

.hero-media__scroll-down:hover .hero-media__scroll-arrow--default,
.hero-media__scroll-down:focus-visible .hero-media__scroll-arrow--default {
	opacity: 0;
}

.hero-media__scroll-down:hover .hero-media__scroll-arrow--hover,
.hero-media__scroll-down:focus-visible .hero-media__scroll-arrow--hover {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hero-media__scroll-down {
		transition: none;
	}

	.hero-media__scroll-down:active {
		transform: translateX(-50%);
	}

	.hero-media__scroll-icon circle,
	.hero-media__scroll-arrow {
		transition: none;
	}
}

/* 100px box = 76px ring + 12px padding per side, so the ring itself
 * measures 76px in diameter instead of the whole SVG canvas. Scales down
 * with clamp() like the heading/subline above it, down to a 56px box
 * (~42.5px ring) on narrow phones; the viewBox keeps ring, arrow and
 * padding in proportion at every size.
 */
.hero-media__scroll-icon {
	display: block;
	width: clamp(56px, 12vw, 100px);
	height: clamp(56px, 12vw, 100px);
}

/* Tablet / mobile */
@media (max-width: 768px) {
	.hero-media__content {
		padding-top: 120px;
		padding-left: 15px;
		padding-right: 15px;
		/* Clears the mobile scroll-down offset (max 48px) plus its icon
		 * (max ~93px within this breakpoint) plus a margin.
		 */
		padding-bottom: calc(48px + 93px + 16px);
	}

	.hero-media__links {
		margin-top: 32px;
	}

	.hero-media__links-list {
		flex-direction: column;
		gap: 0.25rem;
	}

	.hero-media__links-item + .hero-media__links-item::before {
		content: none;
	}

	.hero-media__scroll-down {
		bottom: clamp(1.5rem, 5vh, 3rem);
	}
}