/**
 * Block: HC Hero Slider
 *
 * @package HeadAndCode\Core
 */

/* ── Hero Container ──────────────────────────────────────────────────────── */

.hc-hero {
	position: relative;
	width: 100%;
	height: calc(100vh - var(--hc-header-height, 80px));
	min-height: 500px;
	overflow: hidden;
	background-color: var(--hc-color-primary);
}

/* ── Track + Slides ──────────────────────────────────────────────────────── */

.hc-hero__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.hc-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image: var(--slide-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* Einstiegszustand: unsichtbar */
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 800ms;
}

.hc-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0s;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.hc-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.45) 0%,
		rgba(0, 0, 0, 0.15) 60%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* ── Content (links unten) ───────────────────────────────────────────────── */

.hc-hero__content {
	position: absolute;
	inset-block-end: 10%;
	inset-inline-start: 0;
	padding-inline: var(--hc-container-pad, 1.5rem);
	max-width: min(680px, 55%);

	/* Content-Elemente beim Slide-Wechsel animieren */
	transform: translateY(0);
	opacity: 1;
	transition:
		transform 600ms cubic-bezier(0.4, 0, 0.2, 1) 200ms,
		opacity   600ms cubic-bezier(0.4, 0, 0.2, 1) 200ms;
}

.hc-hero__slide:not(.is-active) .hc-hero__content {
	transform: translateY(20px);
	opacity: 0;
	transition: none;
}

/* Kicker */
.hc-hero__kicker {
	font-size: var(--hc-font-size-sm);
	font-weight: var(--hc-font-weight-normal);
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.05em;
	margin: 0 0 var(--hc-space-3);
	text-transform: none;
}

/* Headline */
.hc-hero__headline {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: var(--hc-font-weight-bold);
	line-height: var(--hc-line-height-tight);
	color: var(--hc-color-white);
	margin: 0 0 var(--hc-space-8);
}

/* CTA Button */
.hc-hero__cta {
	display: inline-flex;
	align-items: center;
	padding: var(--hc-space-4) var(--hc-space-8);
	background-color: var(--hc-color-primary);
	color: var(--hc-color-white);
	font-family: var(--hc-font-primary);
	font-size: var(--hc-font-size-md);
	font-weight: var(--hc-font-weight-medium);
	text-decoration: none;
	border-radius: var(--hc-radius-full);
	transition:
		background-color var(--hc-transition-fast),
		transform        var(--hc-transition-fast);
}

.hc-hero__cta:hover {
	background-color: var(--hc-color-primary-dark, #111b30);
	transform: translateY(-1px);
}

/* ── Navigations-Pfeile ──────────────────────────────────────────────────── */

.hc-hero__arrow {
	position: absolute;
	inset-block: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--hc-radius-full);
	color: var(--hc-color-white);
	cursor: pointer;
	transition:
		background-color var(--hc-transition-fast),
		transform        var(--hc-transition-fast);
}

.hc-hero__arrow:hover {
	background: rgba(255, 255, 255, 0.3);
}

.hc-hero__arrow--prev {
	inset-inline-start: var(--hc-space-6);
}

.hc-hero__arrow--next {
	inset-inline-end: var(--hc-space-6);
}

/* ── Dots ────────────────────────────────────────────────────────────────── */

.hc-hero__dots {
	position: absolute;
	inset-block-end: var(--hc-space-6);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: var(--hc-space-2);
}

.hc-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--hc-radius-full);
	background: rgba(255, 255, 255, 0.45);
	border: none;
	cursor: pointer;
	padding: 0;
	transition:
		background-color var(--hc-transition-normal),
		width            var(--hc-transition-normal),
		transform        var(--hc-transition-normal);
}

.hc-hero__dot.is-active {
	background: var(--hc-color-white);
	width: 24px;
	border-radius: var(--hc-radius-full);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.hc-hero {
		height: calc(100svh - var(--hc-header-height, 80px));
		min-height: 400px;
	}

	.hc-hero__content {
		max-width: 90%;
		inset-block-end: 15%;
	}

	.hc-hero__headline {
		font-size: clamp(1.5rem, 5vw, 2rem);
	}

	.hc-hero__arrow {
		display: none;
	}
}