/* ============================================================
   DMC  fix-04-events.css  -  Veranstaltungen (Uebersicht + Detail)
   Notturno di Modena. Nur Tokens. Override-Ebene nach
   components.css / pages.css; laedt VOR fix-media2.css, das die
   Karten-Medien und den Detail-Hero/Layout/Galerie stellt.
   Zustaendig: Filter, Karten-Raster, Detail-Meta-Chips, Programm-
   Akkordeon (Bruecke zum echten DOM event-day__summary/__list),
   Unterlagen-Liste, Lese-Rhythmus und duenne Detailseiten.
   ============================================================ */

/* ---- Seiten-Zentrierung: NUR die Artikel-Wrapper zentrieren.
   NICHT .page-events/.page-event verwenden: das sind Body-Klassen
   und wuerden Header + Footer + Main auf 1200px einschnueren. ---- */
.events-page,.event-detail{max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter)}
.event-detail{display:block}

/* Uebersichts-Hero: keine automatische Silbentrennung (Umlaut-/
   Bindestrich-Regel). Lange Woerter brechen ohne Trennstrich statt
   ueberzulaufen (overflow-wrap erbt aus pages.css). */
.events-page .page-hero__title{hyphens:manual}

/* ============================================================
   FILTERLEISTE  (Pillen / Tabs)
   ============================================================ */
.event-filter{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--hairline)}
.event-filter__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6em 1.2em;font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out-quint)}
.event-filter__btn:hover{color:var(--text);border-color:var(--accent-line);background:var(--surface-2);transform:translateY(-1px)}
.event-filter__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.event-filter__btn.is-active,.event-filter__btn[aria-selected=true]{color:var(--accent-contrast);background:var(--accent);border-color:var(--accent)}
.event-filter__btn.is-active:hover,.event-filter__btn[aria-selected=true]:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast)}

/* ============================================================
   KARTEN-RASTER  (3 ab 1024, 2 ab 768, 1 mobil)
   Karten-Medien, Datums-Badge und gestreckten Link stellt fix-media2.css.
   ============================================================ */
.event-grid{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));margin-bottom:var(--space-10)}
.event-grid:last-child{margin-bottom:0}
.event-grid--archive{grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));opacity:.9}
.event-grid .event-card{min-width:0}
.event-grid .event-card__title,.event-grid .event-card__meta{overflow-wrap:break-word}
.events-page>.section{padding-top:var(--space-8)}

@media (min-width:768px){.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.event-grid--archive{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.event-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.event-grid--archive{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Filter bricht mobil sauber um (alle Kategorien sichtbar, keine
   versteckte Horizontal-Scroll-Falle). */

/* ============================================================
   DETAIL: HERO-TITEL + META
   Hero-Bild/Scrim/Geometrie kommen aus fix-media2.css; hier nur
   Umbruch-Haertung + gestraffte Innenabstaende auf kleinen Schirmen,
   damit lange Komposita (z. B. "Jahreshauptversammlung",
   "Oktoberfest") nicht am Rand abgeschnitten werden.
   ============================================================ */
.event-detail .event-hero__title{overflow-wrap:break-word;hyphens:manual}
@media (max-width:640px){
  .events-page .page-hero__title{font-size:var(--text-h2)}
  .event-detail .event-hero{padding:var(--space-6) var(--space-5)}
  .event-detail .event-hero__title{font-size:var(--text-h2)}
}

/* Meta-Zeile Datum + Ort als Chips (im Hero) */
.event-detail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-5);margin-bottom:0}
.event-detail__date,.event-detail__place{display:inline-flex;align-items:center;gap:.45em;padding:.42em .95em;font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.02em;border-radius:var(--radius-pill);border:1px solid var(--hairline)}
.event-detail__date{color:var(--accent-hover);background:var(--accent-soft);border-color:var(--accent-line)}
.event-detail__place{color:var(--text-muted);background:var(--surface-2)}

/* ============================================================
   DETAIL: LEAD / STANDFIRST
   Duenne Seiten (nur Teaser, ohne Programm/Galerie) bekommen auf
   Desktop einen groesseren Standfirst, damit die Hauptspalte neben
   der Fakten-Karte Praesenz hat statt Leerraum. :has() erkennt die
   Ein-Kind-Hauptspalte; degradiert sauber, wo :has() fehlt.
   ============================================================ */
.event-detail__lead{color:var(--text-muted)}
/* Desktop: duenne Hauptspalte (nur Teaser, ohne Programm/Galerie) mittig
   ausrichten und den Teaser als groesseren, schmalen Standfirst setzen,
   damit die Spalte neben der Fakten-Karte ausbalanciert wirkt statt leer.
   .event-detail vorangestellt hebt die Spezifitaet ueber fix-media2s
   max-width-Regel auf dem Lead. */
@media (min-width:1024px){
  .event-detail .event-detail__main:not(:has(> * + *)){align-self:center}
  .event-detail .event-detail__main:not(:has(> * + *)) .event-detail__lead{
    font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text);
    max-width:36ch;margin-bottom:0;
  }
}

/* ============================================================
   DETAIL: PROGRAMM-AKKORDEON
   pages.css stylt .event-day (Flaeche/Rahmen) + summary-Grundgeometrie,
   zielt aber auf __title/__panel/__agenda. build.js rendert jedoch
   __summary + optionalem <p> + __list. Diese Bruecke stylt das echte DOM.
   ============================================================ */
.event-program{display:block;margin-top:var(--space-8)}
.event-program .section__header{margin-bottom:var(--space-6)}
.event-program details.event-day:hover{border-color:var(--hairline-strong)}
.event-program details.event-day[open]{border-color:var(--accent-line)}
.event-day__summary{justify-content:space-between;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h4);color:var(--text);transition:color var(--dur-fast) var(--ease-standard)}
.event-day__summary:hover{color:var(--accent-hover)}
.event-day__summary::after{content:"";flex:none;width:.5em;height:.5em;margin-left:var(--space-4);border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);transform:rotate(45deg);transition:transform var(--dur-normal) var(--ease-out-expo),border-color var(--dur-fast) var(--ease-standard)}
.event-day__summary:hover::after{border-color:var(--accent-hover)}
.event-program details.event-day[open] .event-day__summary::after{transform:rotate(225deg);border-color:var(--accent-hover)}
.event-day>p{margin:0;padding:0 var(--space-5);color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal)}
.event-day__list{list-style:none;margin:0;padding:var(--space-2) var(--space-5) var(--space-5);display:flex;flex-direction:column}
.event-day>p+.event-day__list{padding-top:var(--space-3)}
.event-day__list li{position:relative;padding:var(--space-3) 0 var(--space-3) var(--space-6);border-top:1px solid var(--hairline-soft);color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal)}
.event-day__list li:first-child{border-top:0}
.event-day__list li::before{content:"";position:absolute;left:var(--space-2);top:1.05em;width:6px;height:6px;border-radius:var(--radius-round);background:var(--accent-line)}

/* ============================================================
   DETAIL: UNTERLAGEN  (Download-Liste; defensiv, falls Daten kommen)
   ============================================================ */
.event-downloads{margin-top:var(--space-8)}
.event-downloads .section__header{margin-bottom:var(--space-6)}
.download-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--container-prose)}
.download-list li{margin:0}
.download-list__link{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-md);color:var(--text);font-size:var(--text-body);text-decoration:none;transition:transform var(--dur-normal) var(--ease-out-quint),border-color var(--dur-normal) var(--ease-standard),background-color var(--dur-normal) var(--ease-standard)}
.download-list__link:hover{transform:translateY(-1px);border-color:var(--accent-line);background:var(--surface-2)}
.download-list__link:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.download-list__link::after{content:"";margin-left:auto;flex:none;width:.5em;height:.5em;border-right:2px solid var(--accent-hover);border-bottom:2px solid var(--accent-hover);transform:rotate(45deg)}

/* ============================================================
   HAERTUNG + A11Y + REDUCED MOTION
   ============================================================ */
.event-detail__main{min-width:0}
.event-day__summary,.event-day__list li,.download-list__link{overflow-wrap:break-word}
/* Tastatur-Fokus des Akkordeon-Summary: Inset-Outline, da .event-day
   overflow:hidden setzt und einen aeusseren Box-Shadow-Ring abschneiden wuerde. */
.event-day__summary:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){
  .event-filter__btn:hover,.download-list__link:hover{transform:none}
}