/* === Light vertical list override for calendar (v2 with category accents) === */
/* Load AFTER events_popovers_theme.css */

:root{
  --ink: #1b1b1b;
  --muted: #555;
  --line-light: #e5e5e5;
  --surface: #ffffff;
  --surface-alt: #f8f8f8;
  --gold: #bfa25a;
  --partner-green: #1f5a3a;
}

.cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Long, horizontal cards — 3 Spalten: Bild | Text | Datumsbadge */
.event-card {
  display: grid !important;
  grid-template-columns: 180px 1fr 80px !important;
  align-items: stretch !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-light) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  position: relative !important;
}
@media (max-width: 720px){
  .event-card { 
    grid-template-columns: 1fr !important; 
  }
}

/* Subtile Farbakzente je Kategorie (schmale Leiste links) */
.event-card.cat-own { border-left: 6px solid color-mix(in srgb, var(--gold) 80%, white 20%) !important; }
.event-card.cat-external { border-left: 6px solid color-mix(in srgb, var(--partner-green) 80%, white 20%) !important; }

/* Bild */
.event-card .thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  background: var(--surface-alt) !important;
}
@media (max-width: 720px){
  .event-card .thumb { height: 200px !important; }
}

/* Body */
.event-card .body {
  padding: 12px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-areas:
    "badge"
    "title"
    "meta"
    "text"
    "cta" !important;
  gap: 6px !important;
}

.event-card .subtitle {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 2px 0 6px;
  opacity: 0.85;
}

/* Typography */
.event-card .title { font-weight: 800 !important; font-size: 1.0rem !important; color: var(--ink) !important; }
.event-card .meta { color: var(--muted) !important; font-size: .9rem !important; }
.event-card .text { color: var(--ink) !important; opacity: 1 !important; line-height: 1.5 !important; max-height: none !important; overflow: visible !important; }

/* Kategorie-Badges */
.badge { 
  background: var(--surface-alt) !important; 
  border: 1px solid var(--line-light) !important; 
  color: var(--ink) !important; 
  width: max-content !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

.event-card.cat-own .badge,
.badge--eigene {
  background: color-mix(in srgb, var(--gold) 16%, white 84%) !important;
  border-color: color-mix(in srgb, var(--gold) 50%, white 50%) !important;
  color: color-mix(in srgb, var(--gold) 40%, black 60%) !important;
}

.event-card.cat-external .badge,
.badge--partner {
  background: color-mix(in srgb, var(--partner-green) 14%, white 86%) !important;
  border-color: color-mix(in srgb, var(--partner-green) 48%, white 52%) !important;
  color: color-mix(in srgb, var(--partner-green) 40%, black 60%) !important;
}

/* Buttons */
.btn {
  background: var(--gold) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.1) !important;
}
.btn:hover { opacity: .96 !important; }

/* Controls */
.events-controls .seg { border: 1px solid var(--line-light) !important; background: var(--surface) !important; }
.events-controls .seg button { background: transparent !important; color: var(--ink) !important; }
.events-controls .seg button.active { background: var(--gold) !important; color: #fff !important; }
.events-controls input[type="search"] { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line-light) !important; }

/* Popover */
.event-popover .event-panel {
  background: rgba(10,20,15,.86) !important;
  color: var(--gold-ink) !important;
  backdrop-filter: blur(2px);
}
.event-popover .rich a { text-decoration: underline !important; }
.event-popover { background: rgba(0,0,0,.5) !important; }

/* Datumsbadge (rechte Spalte) */
.event-card .event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: static !important; /* überschreibt evtl. absolute Regeln aus JS */
}
.event-card .event-date-badge .day {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}
.event-card .event-date-badge .month {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  opacity: 0.95;
}

/* Datumsbadge einfärben nach Kategorie */
.event-card.cat-own .event-date-badge {
  background: color-mix(in srgb, var(--gold) 90%, white 10%);
  color: color-mix(in srgb, var(--gold) 10%, black 90%);
}
.event-card.cat-external .event-date-badge {
  background: color-mix(in srgb, var(--partner-green) 85%, white 15%);
  color: color-mix(in srgb, var(--partner-green) 10%, white 90%);
}

/* Responsive: Badge über gesamte Breite unter Text */
@media (max-width: 720px) {
  .event-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .event-card .thumb { order: 1; }
  .event-card .body { order: 2; }
  .event-card .event-date-badge {
    order: 3;
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 0;
    border-radius: 0;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
}



@media (max-width: 720px) {
  .event-card .event-date-badge {
    order: 3;
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 0;
    border-radius: 0;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    /* NEU: Tag und Monat nebeneinander */
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }

  .event-card .event-date-badge .day {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .event-card .event-date-badge .month {
    font-size: 16px !important;
    margin-top: 0 !important; /* Abstand oben entfernen */
  }
}