/*
 * Vorschaltseite (Systemseite uebersicht): eigenes CSS über tokens-v1, basis-v1, icons-v1.
 * Werte 1:1 aus dem Prototyp event-uebersicht/index.html; neu ist der Bereich
 * „Vergangene Veranstaltungen“ (Issue #4) mit Chip-Varianten aus basis-v1.css.
 */

body { background: var(--marine-05); }
.footer { background: var(--white); }   /* weiß wie im Prototyp der Vorschaltseite */

/* ============================================================
   ÜBERSICHT
   ============================================================ */
.overview { padding: calc(var(--nav-h) + 72px) 0 120px; }
.overview__header { max-width: 680px; margin-bottom: 48px; }
.overview h1 { margin-bottom: 20px; }
.overview h1 span { color: var(--apple-dark); }
/* Anthrazit statt Anthrazit-70: der Text steht direkt auf den Blobs */
.overview__sub { font-size: 1.15rem; color: var(--anthrazit); }

/* Vergangene Veranstaltungen: folgt direkt auf die aktuellen, ohne Platz für die Navigation */
.overview--vergangen { padding-top: 0; }
.overview--vergangen .overview__header { margin-bottom: 32px; }
.overview--vergangen .overview__header h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.event-grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.event-grid:empty { display: none; }

/* Event-Kachel (Baustein kachel-v1) – gleiche Glas-Optik wie die Karte im Hero der Event-Seiten.
   75 % Weiß hält den grauen Text auch über dunklen Blobs bei mindestens 4,5:1. */
.event-card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .event-card { background: rgba(255, 255, 255, 0.92); }
}
.event-card[hidden] { display: none; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(0, 48, 99, 0.16); }
.event-card:focus-within { outline: 3px solid var(--marine); outline-offset: 4px; }

.event-card__image { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 575; object-fit: cover; }
.event-card__image--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--marine-10); color: var(--marine-40); font-size: 3.2rem;
}

.event-card__body { flex: 1; display: flex; flex-direction: column; padding: 26px 28px 28px; }
.event-card__title { font-size: 1.35rem; line-height: 1.25; margin-bottom: 8px; }
.event-card__title a { color: inherit; text-decoration: none; }
.event-card__title a::after { content: ""; position: absolute; inset: 0; }  /* ganze Kachel klickbar */
.event-card__title a:focus-visible { outline: none; }                       /* Fokus zeigt die Kachel */
.event-card__sub { font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; }
.event-card__body > .countdown,
.event-card__body > .event-card__more { align-self: flex-start; }

.event-card__date {
  font-family: var(--font-h); font-weight: 700; color: var(--marine);
  font-size: 2.2rem; line-height: 1.05; margin: 10px 0 16px;
}
.event-card__place { margin-top: auto; }  /* Ort und Absprung unten bündig, auch bei ungleich langen Texten */

.event-card__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  font-size: 0.9rem; font-weight: 600; color: var(--marine);
}
.event-card__more .bxfr { font-size: 1.1em; transition: transform 0.2s ease; }
.event-card:hover .event-card__more .bxfr { transform: translateX(3px); }

.no-events {
  max-width: 680px; padding: 28px 32px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-lg); color: var(--anthrazit);
}
.no-events[hidden] { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .overview { padding: calc(var(--nav-h) + 40px) 0 80px; }
  .overview--vergangen { padding-top: 0; }
  .event-card__body { padding: 22px 22px 24px; }
}
/* sehr schmale Displays (320 px): „Veranstaltungen“ trennen statt überstehen */
@media (max-width: 359px) {
  .overview h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
  .event-card:hover { transform: none; }
}