@import url('../styles.css');

/* ===== Farben (vom Verein) ===== */
:root { 
  --svs-green-900: #0c3b2e;
  --svs-green-700: #116a4b;
  --svs-green-500: #1ea364;
  --svs-green-400: #28b272;
  --svs-green-300: #48c789;
  --svs-green-200: #74d9a8;
  --svs-green-100: #dff7ea;

  --svs-white: #ffffff;
  --svs-black: #0a0a0a;

  --svs-neutral-900: #111317;
  --svs-neutral-800: #171a20;
  --svs-neutral-700: #1f2430;
  --svs-neutral-600: #2a3140;
  --svs-neutral-500: #3a465b;
  --svs-neutral-400: #51607a;
  --svs-neutral-300: #70819b;
  --svs-neutral-200: #9aacbf;
  --svs-neutral-100: #d8e0ea;
}

/* --- NAV / HEADER: Verwende das globale Nav-Layout aus styles.css ---
   Ziel: keine lokalen Duplikate/Overrides für Header/Nav, stattdessen
   sicherstellen, dass `styles.css` die Darstellung vorgibt. */
/* Stelle sicher, dass der Header als Bezugspunkt dient */
.site-header {
  position: relative;
}

/* Mobile */
@media (max-width:899px) {
  .nav-toggle {
    display: block !important;
  }
  .main-nav {
    display: none !important;
    position: absolute;
    top: 100%; /* direkt unter dem Header */
    left: 0;   /* linksbündig */
    right: 0;  /* optional: volle Breite */
    background: rgba(0,0,0,0.86);
    padding: 10px;
    border-radius: 0 0 10px 10px;
    flex-direction: column;
    gap: 8px;
    z-index: 1200;
    box-shadow: 0 8px 36px rgba(0,0,0,0.6);
    transform-origin: top;
  }
  .main-nav.open {
    display: flex !important;
  }
  .main-nav .nav-link {
    padding: .6rem .9rem;
    display: block;
  }
}

/* Mobile behaviour is provided by global styles; ensure toggle is hidden by default here */
.nav-toggle { display: none !important; }

@media (max-width:899px){
  .nav-toggle{ display:block !important; }
  /* Positioniere das Dropdown relativ zum Header, direkt unter dem Toggle */
  .main-nav{ display:none !important; position:absolute; top:calc(100% + 6px); right:12px; left:auto; background:rgba(0,0,0,0.86); padding:10px; border-radius:10px; flex-direction:column; gap:8px; z-index:1200; min-width:200px; box-shadow: 0 8px 36px rgba(0,0,0,0.6); transform-origin: top right; }
  .main-nav.open{ display:flex !important; }
  .main-nav .nav-link{ padding:.6rem .9rem; display:block; }
}

/* Entferne/deaktiviere alte, redundante Navigations-Klassen falls vorhanden */
.nav-deprecated, .events-nav { display: none !important; }

/* ===== Events Übersicht ===== */
.events-page {
  padding: 2rem;
  background: var(--svs-neutral-900);
  min-height: 100vh;
  color: var(--svs-white);
}

.page-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--svs-green-300);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.event-card {
  background: var(--svs-neutral-700);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}

.event-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.event-card .event-info {
  padding: 1rem;
}

.event-card h3 {
  margin: 0 0 0.5rem;
  color: var(--svs-green-200);
}

.event-card p {
  font-size: 0.9rem;
  color: var(--svs-neutral-100);
}

/* ===== Modal ===== */
.event-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.event-modal.active {
  display: flex;
}

.event-modal-content {
  background: var(--svs-neutral-800);
  padding: 2rem;
  border-radius: 1rem;
  max-width: 700px;
  width: 90%;
  color: var(--svs-white);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.close-modal {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--svs-white);
  cursor: pointer;
}

.event-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.event-images img {
  width: 100%;
  border-radius: 0.5rem;
}

/* Einheitlicher Seitenhintergrund wie gewünscht */
html, body {
  background-color: #111317; /* gleiche Farbe wie --svs-neutral-900 */
}

/* Sicherstellen, dass die Events-Page-Section ebenfalls die gleiche Grundfarbe nutzt */
.events-page { background-color: #111317; }

/* Zentriere die Events-Überschrift wie auf der Hauptseite */
.events-title, .h1.events, h1.event-heading { text-align: center !important; }