/**
 * KW Lobby — Mega-Menü CSS
 * Panels, Widget-Content, Animationen
 */

/* ============================================================
   MEGA PANEL
   ============================================================ */

.kwl-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--kwl-nav-z, 9999);
	background: color-mix(in srgb, var(--kwl-nav-mega-bg, var(--kwl-nav-bg, #ffffff)) 92%, transparent);
	border-top: 2px solid var(--kwl-accent, #BD9B5C);
	border-radius: 0 0 var(--kwl-radius-lg, 12px) var(--kwl-radius-lg, 12px);
	box-shadow:
		0 4px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent),
		0 12px 32px color-mix(in srgb, var(--kwl-text, #1a202c) 12%, transparent);
	padding: var(--kwl-space-lg, 2rem);
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--kwl-space-lg, 2rem);
	max-width: var(--kwl-nav-max-width, 1400px);
	margin: 0 auto;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 280ms ease, transform 280ms var(--kwl-ease-material);
	pointer-events: none;
}

.kwl-mega-panel:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ============================================================
   MEGA LINKS (linke Spalte)
   ============================================================ */

.kwl-mega-links {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 0.25rem);
}

.kwl-mega-links .kwl-submenu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 0.25rem);
}

.kwl-mega-links .kwl-menu-link {
	padding: 0.5rem 0.75rem;
	border-radius: 0;
	border-left: 2px solid transparent;
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 200ms ease, padding-left 200ms ease, color 350ms ease;
}

/* Depth-2 in Mega-Links: Gruppiert statt Flyout */
.kwl-mega-links .kwl-submenu .kwl-submenu {
	position: static;
	min-width: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	margin-top: var(--kwl-space-xs, 0.25rem);
}

/* Hit-Testing nur wenn Panel offen — sonst triggert das unsichtbare Panel
   (display:grid fuer Transition) via Depth-2-Submenu-Hover den Mouseenter
   auf dem LI und oeffnet das Mega-Menue, bevor die Maus es beruehrt. */
.kwl-mega-panel:not([hidden]) .kwl-mega-links .kwl-submenu .kwl-submenu {
	pointer-events: auto;
}

.kwl-mega-links .kwl-submenu .kwl-submenu .kwl-menu-link {
	padding-left: 1.75rem;
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kwl-mega-links .kwl-submenu .kwl-menu-item--has-children > .kwl-menu-link::after {
	display: none;
}

/* ============================================================
   MEGA WIDGET (rechte Spalte)
   ============================================================ */

.kwl-mega-widget {
	display: flex;
	flex-direction: column;
}

/* --- Rooms: Split-Screen (erstes Bild als Hero, Rest als Cards) --- */
.kwl-mega-rooms {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--kwl-space-md, 1rem);
	max-height: 380px;
}

/* Hero-Card: Erstes Zimmer fuellt die linke Spalte */
.kwl-mega-room-card:first-child {
	grid-row: 1 / -1;
	position: relative;
	border-radius: var(--kwl-radius-lg, 12px);
}

.kwl-mega-room-card:first-child .kwl-mega-room-card__image {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kwl-mega-room-card:first-child .kwl-mega-room-card__info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.25rem 1.25rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
	border-radius: 0 0 var(--kwl-radius-lg, 12px) var(--kwl-radius-lg, 12px);
}

.kwl-mega-room-card:first-child .kwl-mega-room-card__title {
	color: #ffffff;
	font-size: var(--kwl-fsize-body, 1rem);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.kwl-mega-room-card:first-child .kwl-mega-room-card__price {
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.kwl-mega-room-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--kwl-text, #1a202c);
	border-radius: var(--kwl-radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--kwl-border, #e2e8f0);
	transition: box-shadow var(--kwl-nav-transition, 250ms ease), transform var(--kwl-nav-transition, 250ms ease);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 5%, transparent);
}

.kwl-mega-room-card:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-mega-room-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	min-height: 0;
}

.kwl-mega-room-card__info {
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex-shrink: 0;
}

.kwl-mega-room-card__title {
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kwl-mega-room-card__price {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	color: var(--kwl-text-muted, #718096);
}

/* --- Offers: Split-Screen (erstes Bild als Hero, Rest als Cards) --- */
.kwl-mega-offers {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--kwl-space-md, 1rem);
	max-height: 380px;
}

.kwl-mega-offer-card:first-child {
	grid-row: 1 / -1;
	position: relative;
	border-radius: var(--kwl-radius-lg, 12px);
}

.kwl-mega-offer-card:first-child .kwl-mega-offer-card__image {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kwl-mega-offer-card:first-child .kwl-mega-offer-card__info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.25rem 1.25rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
	border-radius: 0 0 var(--kwl-radius-lg, 12px) var(--kwl-radius-lg, 12px);
}

.kwl-mega-offer-card:first-child .kwl-mega-offer-card__title {
	color: #ffffff;
	font-size: var(--kwl-fsize-body, 1rem);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.kwl-mega-offer-card:first-child .kwl-mega-offer-card__price {
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.kwl-mega-offer-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--kwl-text, #1a202c);
	border-radius: var(--kwl-radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--kwl-border, #e2e8f0);
	transition: box-shadow var(--kwl-nav-transition, 250ms ease), transform var(--kwl-nav-transition, 250ms ease);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 5%, transparent);
}

.kwl-mega-offer-card:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-mega-offer-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	min-height: 0;
}

.kwl-mega-offer-card__info {
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex-shrink: 0;
}

.kwl-mega-offer-card__title {
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kwl-mega-offer-card__price {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	color: var(--kwl-text-muted, #718096);
}

/* --- Activities: Split-Screen (Hero + Cards, Kategorie-Badge) --- */
.kwl-mega-activities {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--kwl-space-md, 1rem);
	max-height: 380px;
}

/* Hero-Card: Erste Aktivitaet fuellt die linke Spalte */
.kwl-mega-activity-card:first-child {
	grid-row: 1 / -1;
	position: relative;
	border-radius: var(--kwl-radius-lg, 12px);
}

.kwl-mega-activity-card:first-child .kwl-mega-activity-card__image {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kwl-mega-activity-card:first-child .kwl-mega-activity-card__info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.25rem 1.25rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
	border-radius: 0 0 var(--kwl-radius-lg, 12px) var(--kwl-radius-lg, 12px);
}

.kwl-mega-activity-card:first-child .kwl-mega-activity-card__title {
	color: #ffffff;
	font-size: var(--kwl-fsize-body, 1rem);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.kwl-mega-activity-card:first-child .kwl-mega-activity-card__badge {
	color: var(--kwl-accent, #BD9B5C);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.kwl-mega-activity-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--kwl-text, #1a202c);
	border-radius: var(--kwl-radius-md, 8px);
	overflow: hidden;
	border: 1px solid var(--kwl-border, #e2e8f0);
	transition: box-shadow var(--kwl-nav-transition, 250ms ease), transform var(--kwl-nav-transition, 250ms ease);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 5%, transparent);
}

.kwl-mega-activity-card:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

.kwl-mega-activity-card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	min-height: 0;
}

.kwl-mega-activity-card__info {
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex-shrink: 0;
}

.kwl-mega-activity-card__badge {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-wide);
	color: var(--kwl-accent, #BD9B5C);
}

.kwl-mega-activity-card__title {
	font-weight: var(--kwl-fw-semibold);
	font-size: var(--kwl-fsize-small, 0.875rem);
}

/* ============================================================
   ACTIVE STATES (Touch-Feedback)
   ============================================================ */

.kwl-mega-room-card:active,
.kwl-mega-offer-card:active,
.kwl-mega-activity-card:active {
	transform: scale(0.98);
	box-shadow: 0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 8%, transparent);
}

.kwl-mega-links .kwl-menu-link:active {
	color: var(--kwl-primary, #00315d);
	border-left-color: var(--kwl-accent, #BD9B5C);
}

/* ============================================================
   HOVER (Desktop only)
   ============================================================ */

@media (hover: hover) {
	.kwl-mega-room-card:hover,
	.kwl-mega-offer-card:hover,
	.kwl-mega-activity-card:hover {
		box-shadow:
			0 4px 12px color-mix(in srgb, var(--kwl-text, #1a202c) 10%, transparent),
			0 1px 3px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
		transform: translateY(-2px);
	}

	/* Hero-Card: Bild zoomt leicht bei Hover */
	.kwl-mega-room-card:first-child .kwl-mega-room-card__image,
	.kwl-mega-offer-card:first-child .kwl-mega-offer-card__image,
	.kwl-mega-activity-card:first-child .kwl-mega-activity-card__image {
		transition: transform 600ms ease;
	}

	.kwl-mega-room-card:first-child:hover .kwl-mega-room-card__image,
	.kwl-mega-offer-card:first-child:hover .kwl-mega-offer-card__image,
	.kwl-mega-activity-card:first-child:hover .kwl-mega-activity-card__image {
		transform: scale(1.03);
	}

	.kwl-mega-links .kwl-menu-link:hover {
		border-left-color: var(--kwl-accent, #BD9B5C);
		padding-left: calc(0.75rem + 4px);
		color: var(--kwl-primary, #00315d);
	}
}

/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) {
	/* Panel: Nachtblau — Primary deutlich spürbar */
	.kwl-mega-panel {
		background: color-mix(
			in srgb,
			color-mix(in srgb, var(--kwl-nav-mega-bg, var(--kwl-nav-bg, #1a202c)) 65%, var(--kwl-nav-prenav-bg, var(--kwl-primary, #00315d)))
			94%,
			transparent
		);
		border-left: 1px solid rgba(255, 255, 255, 0.10);
		border-right: 1px solid rgba(255, 255, 255, 0.10);
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow:
			0 4px 8px rgba(0, 0, 0, 0.5),
			0 12px 32px rgba(0, 0, 0, 0.7),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	/* D1: Cards mit eigenem Hintergrund — Text lesbar machen */
	.kwl-mega-room-card,
	.kwl-mega-offer-card,
	.kwl-mega-activity-card {
		background: color-mix(in srgb, var(--kwl-bg, #1a202c) 95%, white);
		border-color: rgba(255, 255, 255, 0.08);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	}

	.kwl-mega-room-card__title,
	.kwl-mega-offer-card__title,
	.kwl-mega-activity-card__title {
		color: var(--kwl-text, #f7fafc);
	}

	.kwl-mega-room-card__price,
	.kwl-mega-offer-card__price {
		color: var(--kwl-text-muted, #a0aec0);
	}

	/* Activity-Badge behaelt Gold im Dark Mode */
	.kwl-mega-activity-card__badge {
		color: var(--kwl-accent, #BD9B5C);
	}

	/* Mega-Links (linke Spalte) lesbar */
	.kwl-mega-links .kwl-menu-link {
		color: var(--kwl-text, #f7fafc);
	}

	/* Depth-2 in Mega-Links: leicht gedimmte Farbe */
	.kwl-mega-links .kwl-submenu .kwl-submenu .kwl-menu-link {
		color: var(--kwl-text-muted, #a0aec0);
	}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.kwl-mega-panel,
	.kwl-mega-room-card,
	.kwl-mega-offer-card,
	.kwl-mega-activity-card,
	.kwl-mega-links .kwl-menu-link {
		transition: none;
	}
}