/* =========================================================
   GRUPPEN-EVENTS.CSS — Genusswerte Bonn
   Nur für gruppen-events.html.

   Hero-Historie: erst Vollbild-Foto + Gradient-Overlay + zentrierter
   Text (wie geschenkboxen.css), dann auf Wunsch zu einem Split
   (Foto | Volltonfarbe) geändert, um sich von der Präsente-Seite
   abzusetzen — im direkten Vergleich gefiel die erste Variante
   aber besser, deshalb zurück dazu. Grüner statt goldener Overlay-
   Ton (die Fotos sind navy/dunkel, nicht Kraftpapier-warm wie bei
   den Präsenten) — das ist der verbleibende Unterschied zu
   geschenkboxen.css.

   Der Filmstreifen (statt Grid) bleibt als Unterscheidungsmerkmal
   bestehen.

   Fotos (28.08.2026, vom Kunden bereitgestellt, Originaldateien
   lagen in "Foto Event" auf dem Desktop), optimiert (JPEG, Breite
   1100–1800px) in assets/images/event-*.jpg.
   ========================================================= */

/* ---------------------------------------------------------
   Hero — echtes Foto als Vollbild-Hintergrund, gleiches Muster
   wie .hero auf index.html und .giftbox-hero auf geschenk-
   boxen.html (Bild + Gradient-Overlay + Ken-Burns-Zoom, siehe
   layout.css .hero__bg / @keyframes kenBurns).
   --------------------------------------------------------- */
.event-hero {
  position: relative;
  padding-block: var(--space-20) calc(var(--space-24) + 2.5rem);
  text-align: center;
  overflow: hidden;
  background-color: #0a1410;
}

.event-hero__bg {
  position: absolute;
  inset: -8%;
  background-image: url('../images/event-hero-cheers-2.jpg');
  background-size: cover;
  background-position: center 40%;
  animation: kenBurns 26s ease-in-out infinite alternate;
  z-index: 0;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .event-hero__bg {
    animation: none;
  }
}

.event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(8, 18, 14, 0.82) 0%,
    rgba(26, 48, 40, 0.58) 45%,
    rgba(6, 14, 10, 0.78) 100%);
  z-index: 1;
  pointer-events: none;
}

.event-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--container-px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.event-hero__logo {
  width: 110px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: var(--space-2);
}

.event-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E9F0EA;
}

.event-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.1;
}

.event-hero__subtitle {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  max-width: 46ch;
}

/* Weicher Übergang zurück auf Creme — z-index über dem
   ::before-Overlay (das selbst z-index:1 hat). */
.event-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  color: var(--color-bg);
  display: block;
  z-index: 2;
}

/* ---------------------------------------------------------
   Filmstreifen — bricht rechts aus dem Container aus (die
   Formel zentriert die linke Kante auf den Container, laesst
   rechts aber offen scrollen statt in ein Raster zu zwingen).
   Kacheln leicht im Zickzack versetzt — Schnappschuss-Gefuehl
   statt exakt ausgerichtetes Bilderraster.
   --------------------------------------------------------- */
.event-filmstrip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-12);
  padding-left: max(var(--container-px), calc((100vw - var(--max-width)) / 2 + var(--container-px)));
  padding-right: var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  scrollbar-width: thin;
}

.event-filmstrip__item {
  flex: 0 0 auto;
  width: min(64vw, 360px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  margin: 0;
}

.event-filmstrip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zickzack: mittlere Kachel tiefer, dritte wieder oben —
   ergibt den Schnappschuss-Rhythmus. */
.event-filmstrip__item:nth-child(2) {
  margin-top: var(--space-8);
}

.event-filmstrip__item:nth-child(3) {
  margin-top: calc(var(--space-8) * -0.5);
}

/* ---------------------------------------------------------
   Mobile-Loop — Ersatz für den Filmstreifen auf schmalen
   Screens: dort wirkten die Bilder ohne Fingerzeig zum
   Scrollen wie "stehen einfach nur da". Automatischer
   Crossfade, ein Bild nach dem anderen, gleiches Prinzip wie
   .tasting-loop auf index.html (siehe initEventLoop() in
   main.js). Per Default ausgeblendet — nur in der Media Query
   unten sichtbar, während .event-filmstrip dort verschwindet.
   --------------------------------------------------------- */
.event-loop {
  display: none;
  position: relative;
  margin-top: var(--space-8);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
}

.event-loop__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.event-loop__slide.is-active {
  opacity: 1;
}

.event-loop__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .event-filmstrip {
    display: none;
  }

  .event-loop {
    display: block;
  }

  .event-hero {
    padding-block: var(--space-16) calc(var(--space-16) + 2rem);
  }
}