/* ==========================================================================
   theme_kov — Skin der plate_events-Termin-Detailseite
   Markup kommt unveraendert aus EXT:plate_events (Partial Event/Detail/Body),
   hier wird nur umgestylt — kein Template-Duplikat. Geladen ueber eine
   doktype-Condition in Configuration/TypoScript/Config/events-skin.typoscript,
   also nur auf Termin-Seiten.
   Optik = Termin-Karten der Liste (kov-events.css): chips, card-Flaeche, forest-Tokens.
   ========================================================================== */

/* Breite kommt vom `container` des Page-Templates (Flucht mit den CEs darunter),
   hier nur der vertikale Rhythmus. Fakten-Karte und Fliesstext bekommen eine
   Lesbreite, damit die Zeilen auf grossen Screens nicht auseinanderlaufen. */

/* Abstand nach oben: Der Header ist `position-fixed` und reserviert keinen Platz.
   Seiten mit Hero-Bild kaschieren das (das Bild laeuft bewusst unter dem
   transparenten Header durch) — eine Termin-Detailseite hat keins und begann
   deshalb direkt unter dem Header.
   --kov-header-h liefert theme_kov/JavaScript/header.js (gemessene Kopfhoehe),
   damit der Abstand den FlexForm-Einstellungen des Header-CEs folgt statt sie
   zu doppeln. Der Fallback greift nur, solange das Skript nicht gelaufen ist. */
.pl-eventdetail {
  padding: calc(var(--kov-header-h, 9rem) + var(--bs-gap-large, 2rem)) 0 0;
}
.pl-eventdetail__facts,
.pl-eventdetail__title,
.pl-eventdetail__media { max-width: 52rem; }

/* Kategorien wie die Chips der Liste */
.pl-eventdetail__tags { gap: 0.45rem; margin-bottom: 1.25rem; }
.pl-eventdetail__tag {
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-forest-50);
  color: var(--color-forest-800);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
/* Kategorie-Farben (sys_category.tx_plateevents_color).
   Loest die frueher pauschale „erster Tag = blossom"-Regel ab: das war eine
   Positions-, keine Bedeutungsregel. Farbwerte = Theme-Tokens aus
   Scss/Generic/_variables.scss (--chip-*), identisch zu den Listen-Chips —
   Kategorie-Namen/-UIDs tauchen weder im CSS noch im Template auf.
   Ohne gesetzte Farbe bleibt der neutrale Forest-Tag oben. */
.pl-eventdetail__tag--primary   { background: var(--chip-primary-bg);   color: var(--chip-primary-fg); }
.pl-eventdetail__tag--secondary { background: var(--chip-secondary-bg); color: var(--chip-secondary-fg); }
.pl-eventdetail__tag--success   { background: var(--chip-success-bg);   color: var(--chip-success-fg); }
.pl-eventdetail__tag--info      { background: var(--chip-info-bg);      color: var(--chip-info-fg); }
.pl-eventdetail__tag--warning   { background: var(--chip-warning-bg);   color: var(--chip-warning-fg); }
.pl-eventdetail__tag--danger    { background: var(--chip-danger-bg);    color: var(--chip-danger-fg); }
.pl-eventdetail__tag--dark      { background: var(--chip-dark-bg);      color: var(--chip-dark-fg); }
.pl-eventdetail__tag--light     { background: var(--chip-light-bg);     color: var(--chip-light-fg); }

.pl-eventdetail__title {
  font-family: var(--font-display);
  color: var(--color-forest-900);
  margin-bottom: 1.75rem;
}

/* Faktenblock als helle Karte auf dem Creme-Hintergrund */
.pl-eventdetail__facts {
  background: #fff;
  border: 1px solid var(--color-forest-100, rgba(40, 65, 48, 0.12));
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
}
.pl-eventdetail__fact-label { color: var(--color-ink-muted); letter-spacing: 0.2em; }
.pl-eventdetail__fact-value { color: var(--color-ink); }
.pl-eventdetail__fact--date .pl-eventdetail__fact-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-forest-900);
}
.pl-eventdetail__fact-note { color: var(--color-forest-700); }

/* Anmeldung & Kontakt — die Struktur (Zeilenumbruch je Wert) liefert
   plate_events/event-detail.css, hier nur die KOV-Farbigkeit. Der Hinweis
   „Anmeldung erforderlich" wird bewusst hervorgehoben, weil er handlungsrelevant
   ist; erscheint aber nur, wenn das Feld am Termin gesetzt ist. */
.pl-eventdetail__registration-required { color: var(--chip-danger-fg); }
.pl-eventdetail__registration-note { color: var(--color-ink-muted); opacity: 1; }
.pl-eventdetail__registration-link,
.pl-eventdetail__contact-email,
.pl-eventdetail__contact-phone {
  color: var(--color-forest-700);
  text-underline-offset: 0.2em;
}
.pl-eventdetail__registration-link:hover,
.pl-eventdetail__contact-email:hover,
.pl-eventdetail__contact-phone:hover { color: var(--color-forest-900); }
.pl-eventdetail__contact-name { color: var(--color-ink); font-weight: 600; }

.pl-eventdetail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-forest-700);
  font-weight: 600;
  text-decoration: none;
}
.pl-eventdetail__back-link::before { content: '←'; }
.pl-eventdetail__back-link:hover { color: var(--color-forest-900); text-decoration: underline; }

.pl-eventdetail__image { border-radius: var(--radius-md); }
.pl-eventdetail__caption { color: var(--color-ink-muted); }

.pl-eventdetail__description { color: var(--color-ink); }
.pl-eventdetail__description a { color: var(--color-forest-700); }

/* Redaktionelle CEs unterhalb der Termin-Daten bekommen denselben Rhythmus wie
   der Rest der Seite; ohne Inhalte bleibt der Abstand aus (:not(:empty)). */
.pl-eventdetail__editorial:not(:empty) { display: block; padding-top: 1rem; }