/* =====================================================================
   Nav-Variante 3a – Mega-Menü mit Inline-Beschreibungen
   ---------------------------------------------------------------------
   Co-located Override/Erweiterung zu nav-mockup.css. Wird NUR auf
   nav-variant-3a.html geladen (nach nav-mockup.css), damit Varianten
   1/2/3 unangetastet bleiben. Jeder Mega-Link wird zum Tile:
   fetter Name + kurze, immer sichtbare Beschreibung darunter.

   Wichtig: Panel-Größen NUR im Desktop-Query (≥72rem). Im Drawer
   (<72rem) erzwingt nav-mockup.css eine Einspaltigkeit – würde eine
   feste Spaltenzahl hier ungescoped gesetzt, liefe der Drawer
   horizontal über. Die Tile-Struktur selbst gilt überall (auch im
   Drawer sollen die Beschreibungen sichtbar sein).
   ===================================================================== */

/* ---------- Tile-Struktur (alle Viewports) ---------- */
.ewtc-nav__links a,
.ewtc-nav__tiles a,
.ewtc-nav__simple a {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	align-items: stretch;
	/* Basis-Textfarbe = Name; Beschreibung setzt ihre eigene (gedämpfte). */
	color: var(--c-text);
}

.ewtc-nav__name {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
}

.ewtc-nav__desc {
	color: var(--c-text-muted);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.25;
	/* Sicherheitsnetz: max. 2 Zeilen, sonst elliptisch. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hover/Fokus: Name nimmt das Marken-Rot an (Beschreibung bleibt gedämpft).
   Die bestehende a:hover-Fläche (var(--c-surface)) aus nav-mockup.css greift
   weiterhin, weil der Name die Farbe via inherit übernimmt. */

/* ---------- Desktop (≥72rem): größeres Panel, breitere Spalten ---------- */
@media (min-width: 72rem) {
	.ewtc-nav__mega {
		max-width: min(80rem, 94vw);
		/* Sicherheitsnetz gegen sehr flache Viewports – greift sonst nie.
		   50rem deckt das größte Panel (Reiseziele inkl. schlankem Promo-Band ~756px). */
		max-height: min(50rem, calc(100vh - var(--header-h) - 1.5rem));
		overflow-y: auto;
	}

	/* Das Promo-Bild ist hochformatig; bei width:6rem wäre es ~120px hoch und würde
	   (als höchstes Flex-Kind) das Band hochziehen. Höhe fest pinnen, object-fit:cover
	   (aus nav-mockup.css) beschneidet sauber → wirklich schlankes Band. */
	.ewtc-nav__promo img {
		height: 3.5rem;
	}

	/* 5 Spalten à 13rem + 1.25rem-Gaps + 4rem-Padding bleiben unter 94vw@1280. */
	.ewtc-nav__regions,
	.ewtc-nav__themes {
		grid-template-columns: repeat(5, 13rem);
		gap: var(--space-3) var(--space-3);
	}

	/* Kreuzfahrten: 2 breite Spalten (lange Reederei-Namen + Beschreibung). */
	.ewtc-nav__regions--duo {
		grid-template-columns: repeat(2, 22rem);
	}

	/* Über EWTC (rechtes, schmales Panel): mehr Breite für die Beschreibungen. */
	.ewtc-nav__mega--right .ewtc-nav__simple {
		min-width: 32rem;
		column-gap: var(--space-4);
	}
}

/* ---------- Cross-Selling-Band: schlanke Variante ----------
   Variante 3 hatte ein hohes Promo-Bild-Band (~95px). Da hier jeder Eintrag
   schon eine Beschreibung trägt, reicht ein schmales Band: kleineres Bild und
   die Pitch-Zeile horizontal (Titel · Text · CTA) statt vier gestapelte Zeilen.
   So bleibt das Cross-Selling erhalten, ohne das Panel zum Scrollen zu zwingen. */
.ewtc-nav__promo {
	min-height: 3.25rem;
}

.ewtc-nav__promo img {
	width: 6rem;
}

.ewtc-nav__promo-body {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	padding: 0.5rem 0.9rem;
}

.ewtc-nav__promo-title {
	font-size: 0.9rem;
}

.ewtc-nav__promo-text {
	flex: 1 1 14rem;
	font-size: 0.8125rem;
}

.ewtc-nav__promo-cta {
	margin: 0 0 0 auto;
	white-space: nowrap;
}

/* ---------- Header-Suche auf Tablet/Mobil (Burger aktiv) ----------
   nav-mockup.css blendet die Top-Bar-Suche unter 80rem aus und steckt sie in den
   Drawer – darunter klafft im Header (Marke links, Telefon+Burger rechts per
   margin-left:auto) eine große Lücke. Hier holen wir die Suche ab 34rem zurück in
   den Header: sie füllt die Mitte und steht above the fold (Briefing-Vorgabe),
   ohne auf echten Phones (<34rem) zu drängeln, wo sie im Drawer bleibt.
   Nur im Burger-Bereich (<72rem), damit die horizontale Leiste ab 72rem unberührt bleibt. */
@media (min-width: 34rem) and (max-width: 71.99rem) {
	.ewtc-nav__search {
		display: flex;
		max-width: none;
	}

	/* margin-left:auto würde den freien Raum schlucken und die Suche bei 8rem
	   halten – entfernen, damit die Suche (flex-grow) die Mitte füllt. */
	.ewtc-nav__actions {
		margin-left: 0;
	}
}