/**
 * gigi. Speisekarte — Frontend Styles
 *
 * BEM: .gigi-menu
 * Alle Farben über --gigi-* CSS Custom Properties.
 *
 * @package GigiPizza
 * @since   1.0.0
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

/* Food-Foto als Hintergrund, darueber ein gruener Verlauf.
   Das Overlay ist kein Dekor, sondern Funktion: die Headline steht in Creme
   auf dem Bild, und das Motiv ist stellenweise sehr hell (Papier, Kraeuter).
   Ohne die Abdunklung faellt der Kontrast dort unter die Lesbarkeitsgrenze.
   Nach unten dichter, damit der Uebergang zur Filterleiste ruhig bleibt.

   background-color bleibt als Unterlage stehen: laedt das Bild nicht oder
   noch nicht, steht der Text weiterhin auf Dunkelgruen statt auf Weiss.

   1600px-Fassung fuer Desktop, 900px fuer Mobile (siehe Media Query unten) —
   ein Hintergrundfoto unter Farbwaesche braucht keine 1920px. */
.gigi-menu__hero {
	position: relative;
	background-color: var(--gigi-bg-dark);
	background-image:
		linear-gradient(
			to bottom,
			rgba(var(--gigi-bg-dark-rgb), 0.82) 0%,
			rgba(var(--gigi-bg-dark-rgb), 0.88) 55%,
			rgba(var(--gigi-bg-dark-rgb), 0.95) 100%
		),
		url("../img/speisekarte-hero-1600.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 32px 80px;
	text-align: center;
}

.gigi-menu__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
}

/* Seiten-Hero — genau eine H1 pro Seite, deshalb --gigi-fs-h1.
   Der fruehere Eigenwert clamp(48px, 8vw, 80px) stammte aus der Zeit vor der
   Typo-Skala und lief seit der Monospace-Umstellung rund 17 % zu gross
   (CLAUDE.md §3.3.1). Tracking wie alle Display-Headlines. */
.gigi-menu__hero-title {
	font-family: var(--gigi-font-headline);
	font-weight: 900;
	font-size: var(--gigi-fs-h1);
	letter-spacing: var(--gigi-tracking-h);
	color: var(--gigi-bg-light);
	text-transform: uppercase;
	margin: 0 0 16px;
	line-height: 1;
}

.gigi-menu__hero-sub {
	font-family: var(--gigi-font-body);
	font-weight: 400;
	font-size: 18px;
	color: var(--gigi-font-light);
	margin: 0;
}

@media (max-width: 767px) {
	.gigi-menu__hero {
		padding: 96px 20px 56px;
	}
}

/* ==========================================================================
   2. Sticky Filter-Bar
   ========================================================================== */

/* Klebt unter der Hauptnavigation, nicht am Viewport-Rand: die Nav steht
   sticky auf top:16px und ist 56px hoch, endet also bei 72px. Bei top:0
   waere die Filterleiste dauerhaft hinter der Nav verschwunden (z-index 100
   gegen 50) — sichtbar nur der untere Rand.

   top:72px setzt sie BUENDIG an die Nav-Unterkante. Die frueheren 80px
   liessen bewusst 8px Luft — durch diesen Spalt liefen beim Scrollen aber
   die Kartenraender der Gerichte sichtbar hindurch. Zwei klebende Leisten
   muessen zusammen eine geschlossene Flaeche bilden, sonst blitzt Inhalt
   zwischen ihnen auf. */
.gigi-menu__filter-bar {
	position: sticky;
	top: 72px;
	z-index: 50;
	background: var(--gigi-bg-light);
	border-bottom: 1px solid var(--gigi-bg-light-2);
	padding: 0 32px;
}

/* Die vertikale Luft der Leiste sitzt hier, nicht im Button: der aktive
   Reiter traegt eine Fuellfarbe und wuerde sonst ueber die volle Barhoehe
   laufen — ein 71px hoher gruener Block. So bleibt er eine kompakte Flaeche
   mit Luft darueber und darunter. */
.gigi-menu__filter-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	gap: 8px;
	padding: 14px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gigi-menu__filter-inner::-webkit-scrollbar {
	display: none;
}

/* Menuezeile statt Pill-Buttons: die Reiter sind Navigation, keine Aktionen.
   Der Rahmen um jeden Eintrag hat sie wie sieben konkurrierende Call-to-Actions
   aussehen lassen — neben dem echten CTA ("Bestellen") auf jeder Karte ist das
   ein Wettbewerb, den die Navigation nicht gewinnen soll.

   Die Schrift bleibt bewusst auf Inter: die Monospace-Headline ist fuer
   Ueberschriften reserviert, nicht fuer Bedienelemente — dieselbe Regel wie
   bei .gigi-site-nav__links im Theme. Groesse und Tracking sind von dort
   uebernommen, eine Stufe groesser (16px statt 14px), weil diese Leiste die
   einzige Navigation innerhalb der Seite ist.

   WICHTIG — der Elternselektor davor ist Absicht, nicht Kosmetik:
   Elementor liefert im Kit-Stylesheet (uploads/elementor/css/post-7.css) die
   globale Button-Formatierung als
       .elementor-kit-7 button { background-color:#126133; color:#fff; padding:5px }
   aus. Das trifft JEDEN <button> der Seite und schlaegt ein einfaches
   .gigi-menu__filter-btn in der Spezifitaet (0,1,1 gegen 0,1,0). Folge waren
   gruene Pills statt Textreiter — und das padding:5px drueckte die klebende
   Leiste von rund 66px auf 37px zusammen, sodass der Inhalt beim Scrollen
   sichtbar daneben durchlief.
   .gigi-menu__filter-bar davorgesetzt ergibt 0,2,0 und gewinnt sauber.
   Kein !important noetig (CLAUDE.md 6.5). */
.gigi-menu__filter-bar .gigi-menu__filter-btn {
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 12px 18px;
	color: var(--gigi-font-muted);
	font-family: var(--gigi-font-body);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover nur auf den INAKTIVEN Reitern. Ohne :not() wuerde er den aktiven
   Reiter mit uebermalen und dessen gruene Flaeche beim Darueberfahren
   zuruecksetzen — genau der Fehler, den die frueher hier stehende Variante
   hatte (gruene Schrift auf gruenem Grund, Reiter unsichtbar). */
.gigi-menu__filter-bar .gigi-menu__filter-btn:not(.gigi-menu__filter-btn--active):hover,
.gigi-menu__filter-bar .gigi-menu__filter-btn:not(.gigi-menu__filter-btn--active):focus-visible {
	background: var(--gigi-bg-light-2);
	color: var(--gigi-font-dark);
}

/* Aktiver Reiter: gefuellte Flaeche in Brand-Gruen.
   Die Schriftfarbe ist --gigi-bg-light (Creme), nicht #fff: das Design System
   kennt kein Reinweiss (CLAUDE.md 3.2). Auf dem dunklen Gruen liest sich das
   als Weiss und bleibt markenkonform.
   Kein border-radius — Vorgabe des Projekts. */
.gigi-menu__filter-bar .gigi-menu__filter-btn--active,
.gigi-menu__filter-bar .gigi-menu__filter-btn--active:hover,
.gigi-menu__filter-bar .gigi-menu__filter-btn--active:focus-visible {
	background: var(--gigi-primary);
	color: var(--gigi-bg-light);
}

@media (max-width: 767px) {
	/* Die Hauptnav ist mobil flacher (top:12px, 48px hoch, endet bei 60px).
	   60px statt der frueheren 68px: buendig, damit zwischen den beiden
	   klebenden Leisten kein Inhalt durchblitzt (siehe oben). */
	.gigi-menu__filter-bar {
		padding: 0 16px;
		top: 60px;
	}

	.gigi-menu__filter-inner {
		gap: 6px;
		padding: 10px 0;
	}

	.gigi-menu__filter-bar .gigi-menu__filter-btn {
		padding: 10px 14px;
		font-size: 15px;
	}
}

/* ==========================================================================
   3. Kategorie-Sektionen
   ========================================================================== */

/* Zwei klebende Leisten stehen ueber dem Inhalt: Hauptnav bis 72px, darunter
   die Filterleiste bis rund 145px. Ohne scroll-margin landet der Rubriktitel
   beim Ankersprung und beim scrollIntoView des Filters exakt darunter — der
   Nutzer klickt "Pasta" und sieht die erste Karte statt der Ueberschrift. */
.gigi-menu__category {
	background: var(--gigi-bg-light);
	padding: 64px 32px;
	scroll-margin-top: 155px;
}

.gigi-menu__category:nth-child(even) {
	background: var(--gigi-bg-light-2);
}

.gigi-menu__category-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.gigi-menu__category-header {
	margin-bottom: 40px;
}

/* Sektions-Headline — der Standardfall, also --gigi-fs-h2. */
.gigi-menu__category-title {
	font-family: var(--gigi-font-headline);
	font-weight: 900;
	font-size: var(--gigi-fs-h2);
	letter-spacing: var(--gigi-tracking-h);
	color: var(--gigi-font-dark);
	text-transform: uppercase;
	margin: 0 0 8px;
	line-height: 1.1;
}

.gigi-menu__category-desc {
	font-family: var(--gigi-font-body);
	font-size: 16px;
	color: var(--gigi-font-muted);
	margin: 0 0 16px;
	max-width: 600px;
	line-height: 1.6;
}

.gigi-menu__category-link {
	font-family: var(--gigi-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--gigi-detail-1);
	text-decoration: none;
	transition: color 0.2s ease;
}

.gigi-menu__category-link:hover {
	color: var(--gigi-primary);
}

@media (max-width: 767px) {
	.gigi-menu__category {
		padding: 48px 20px;
		scroll-margin-top: 132px;
	}

	.gigi-menu__category-header {
		margin-bottom: 28px;
	}
}

/* ==========================================================================
   4. Produkt-Grid
   ========================================================================== */

.gigi-menu__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.gigi-menu__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.gigi-menu__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   5. Produkt-Karte
   ========================================================================== */

.gigi-menu__card {
	background: var(--gigi-bg-light);
	border-radius: var(--gigi-radius);
	overflow: hidden;
	border: 1px solid var(--gigi-bg-light-2);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gigi-menu__category:nth-child(even) .gigi-menu__card {
	background: var(--gigi-bg-light);
}

.gigi-menu__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--gigi-shadow-lg);
}

/* Bild */
.gigi-menu__card-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.gigi-menu__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.gigi-menu__card:hover .gigi-menu__card-image img {
	transform: scale(1.05);
}

/* Body */
.gigi-menu__card-body {
	padding: 20px 24px 24px;
}

/* Tags */
.gigi-menu__card-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.gigi-menu__card-tag {
	font-family: var(--gigi-font-body);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 0;
	background: var(--gigi-bg-light-2);
	color: var(--gigi-font-dark);
}

.gigi-menu__card-tag--vegan {
	background: var(--gigi-primary);
	color: var(--gigi-bg-light);
}

.gigi-menu__card-tag--vegetarisch {
	background: var(--gigi-primary);
	color: var(--gigi-bg-light);
}

.gigi-menu__card-tag--scharf {
	background: var(--gigi-detail-2);
	color: var(--gigi-bg-light);
}

.gigi-menu__card-tag--bestseller {
	background: var(--gigi-detail-1);
	color: var(--gigi-bg-light);
}

.gigi-menu__card-tag--neu {
	background: var(--gigi-detail-2);
	color: var(--gigi-bg-light);
}

/* Titel.
   letter-spacing ist hier Pflicht, nicht Kosmetik: die Monospace gibt jedem
   Zeichen dieselbe Breite, auch dem schmalen „i", „l" und „.". Bei langen
   Produktnamen ("Gigi Vino Emil Bauer Bianco") summieren sich die Luecken
   sichtbar auf. Derselbe Token wie bei den Display-Headlines. */
.gigi-menu__card-title {
	font-family: var(--gigi-font-headline);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: var(--gigi-tracking-h);
	color: var(--gigi-font-dark);
	margin: 0 0 8px;
}

/* Beschreibung */
.gigi-menu__card-desc {
	font-family: var(--gigi-font-body);
	font-size: 14px;
	color: var(--gigi-font-muted);
	line-height: 1.6;
	margin: 0 0 16px;
}

/* Footer: nur der Bestell-CTA — die Karte fuehrt keine Preise.
   flex-start statt space-between, weil der Preis als linkes Element weggefallen
   ist; sonst saesse der Button einsam am rechten Kartenrand. */
.gigi-menu__card-footer {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.gigi-menu__card-cta {
	font-family: var(--gigi-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--gigi-bg-light);
	background: var(--gigi-primary);
	padding: 8px 20px;
	border-radius: 0;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
}

/* color MUSS hier stehen, auch wenn es sich nicht aendert.
   hello-elementor/assets/css/reset.css setzt global `a:hover { color: #336 }`
   und wird nach diesem Stylesheet geladen. Die Ruhefarbe steht nur auf
   `.gigi-menu__card-cta` (0,1,0) und verliert gegen `a:hover` (0,1,1) — der
   Button-Text kippte im Hover auf Dunkelblau. Mit `:hover` am Selektor sind
   wir bei 0,2,0 und gewinnen. */
.gigi-menu__card-cta:hover {
	background: var(--gigi-bg-dark);
	color: var(--gigi-bg-light);
}

@media (max-width: 767px) {
	.gigi-menu__card-body {
		padding: 16px 20px 20px;
	}

	.gigi-menu__card-title {
		font-size: 18px;
	}
}

/* ==========================================================================
   6. CTA Banner
   ========================================================================== */

/* Zweites Food-Foto, gleiche Mechanik wie im Hero.
   Etwas dichter abgedunkelt als dort: hier sitzt der Bestell-Button auf der
   Flaeche, und ein Call-to-Action darf nicht mit dem Motiv um Aufmerksamkeit
   konkurrieren. */
.gigi-menu__cta {
	position: relative;
	background-color: var(--gigi-bg-dark);
	background-image:
		linear-gradient(
			to bottom,
			rgba(var(--gigi-bg-dark-rgb), 0.90) 0%,
			rgba(var(--gigi-bg-dark-rgb), 0.86) 50%,
			rgba(var(--gigi-bg-dark-rgb), 0.92) 100%
		),
		url("../img/speisekarte-cta-1600.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 80px 32px;
	text-align: center;
}

.gigi-menu__cta-inner {
	position: relative;
	z-index: 1;
	max-width: 600px;
	margin: 0 auto;
}

/* Gleicher Rang wie die Kategorie-Headlines — derselbe Token, kein Eigenwert.
   Genau diese Konstellation (zwei gleichrangige Headlines, zwei Groessen) war
   der Ausloeser fuer die Skala in CLAUDE.md §3.3.1. */
.gigi-menu__cta-title {
	font-family: var(--gigi-font-headline);
	font-weight: 900;
	font-size: var(--gigi-fs-h2);
	letter-spacing: var(--gigi-tracking-h);
	color: var(--gigi-bg-light);
	text-transform: uppercase;
	margin: 0 0 16px;
}

.gigi-menu__cta-text {
	font-family: var(--gigi-font-body);
	font-size: 18px;
	color: var(--gigi-font-light);
	margin: 0 0 32px;
}

.gigi-menu__cta-catering {
	font-family: var(--gigi-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--gigi-font-light);
	margin: 32px 0 0;
}

.gigi-menu__cta-catering a {
	color: var(--gigi-bg-light);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Ebenfalls gegen `a:hover { color: #336 }` aus dem Parent-Reset — der Link
   steht auf dunkelgruenem Grund, Dunkelblau waere dort praktisch unlesbar. */
.gigi-menu__cta-catering a:hover {
	color: var(--gigi-bg-light);
	text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
	.gigi-menu__cta {
		padding: 56px 20px;
	}
}

/* ==========================================================================
   7. Kategorie ausblenden (JS Filter)
   ========================================================================== */

.gigi-menu__category--hidden {
	display: none;
}

/* ==========================================================================
   Hintergrundbilder — Mobile-Fassungen
   --------------------------------------------------------------------------
   Unter 768px die 900px-Varianten ausliefern: 74KB statt 198KB (Hero) und
   40KB statt 91KB (CTA). Auf einem 390px-Viewport ist selbst 900px noch mehr
   als doppelt aufgeloest, deckt also auch Retina ab.

   Der Verlauf wird mitwiederholt, weil background-image als Ganzes ersetzt
   wird — eine einzelne Ebene laesst sich nicht separat ueberschreiben.
   ========================================================================== */
@media (max-width: 767px) {
	.gigi-menu__hero {
		background-image:
			linear-gradient(
				to bottom,
				rgba(var(--gigi-bg-dark-rgb), 0.82) 0%,
				rgba(var(--gigi-bg-dark-rgb), 0.88) 55%,
				rgba(var(--gigi-bg-dark-rgb), 0.95) 100%
			),
			url("../img/speisekarte-hero-900.webp");
	}

	.gigi-menu__cta {
		background-image:
			linear-gradient(
				to bottom,
				rgba(var(--gigi-bg-dark-rgb), 0.90) 0%,
				rgba(var(--gigi-bg-dark-rgb), 0.86) 50%,
				rgba(var(--gigi-bg-dark-rgb), 0.92) 100%
			),
			url("../img/speisekarte-cta-900.webp");
	}
}