/* =========================================================
   AMELIA EVENT-DETAILSEITE (Einzelne Veranstaltung / Buchung)
   Stylt das Markup unter .wpa-events__shell (z. B.
   /wpa-events/transformative-atemsession). Das ist ein
   eigenes, custom aufgebautes Wrapper-Template um Amelias
   Buchungs-Widget herum - nicht zu verwechseln mit der
   Terminuebersicht in page-pnflow-events.css.

   Zwei Zonen mit unterschiedlicher Herkunft:
   1. .wpa-events__* Struktur = eigenes Markup, normale
      Spezifitaet reicht, kein !important noetig.
   2. Amelias eigenes Buchungs-Widget darin (.am-button,
      .el-input-number, --am-c-* Variablen) = Vue-Komponente
      mit eigenem, teils inline gesetztem CSS. Dort wird
      gezielt mit !important gegen die Inline-Styles
      gearbeitet - dasselbe Prinzip wie der bestehende
      --am-font-family-Override in page-pnflow-events.css.

   Spezifitaet: Amelia bringt fuer dieses Template eigenes CSS
   mit (Vue-Scoped-Styles mit [data-v-...]), und Elementors Kit
   setzt h2 global (.elementor-kit-28 h2). Beide schlagen eine
   einfache Klasse. Regeln, die sonst nicht greifen, sind daher
   mit der Wrapper-ID #wpa-events-landing praefixiert - das
   hebt sie ohne zusaetzliches !important darueber.

   Bild-Slides: Seitenverhaeltnis 3:2 (Format der Original-
   Fotos). Greift derzeit nicht, Amelias Carousel begrenzt die
   Hoehe selbst - das breite Format wirkt ruhig und bleibt so.
========================================================= */


.ast-container {
    display: block !important;
}

/* =========================================================
   SHELL / LAYOUT
========================================================= */

.wpa-events__shell {
  width: 100%;
  background-color: var(--pnflow-page-bg);
  padding: var(--section-py-sm) 0;
}

/* Amelia setzt im Template eine eigene Schrift (Amelia Roboto).
   Fliesstext und alle Amelia-Teile auf die Hausschrift. */

#wpa-events-landing {
  --am-font-family: var(--font-secondary);
  font-family: var(--font-secondary);
}

/* Container-Breite wie Inhaltsseiten: breit genug fuer zwei
   Spalten, Beschreibung bleibt bei angenehmer Zeilenlaenge. */

#wpa-events-landing .wpa-events__inner {
  width: min(var(--container-lg), calc(100% - var(--gutter) * 2));
  max-width: none;
  margin: 0 auto;
}

.wpa-events__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  align-items: start;
  gap: var(--space-xl);
}

.wpa-events__col--tickets {
  position: sticky;
  top: var(--space-lg);
}


/* =========================================================
   BILD-CAROUSEL
========================================================= */

.wpa-events__carousel {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
}

#wpa-events-landing .wpa-events__carousel-slide {
  aspect-ratio: 3 / 2;
}

.wpa-events__carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================
   META-ZEILE
   Datumsbadge links, Titel/Ort mittig und Preis rechts.
   Status und Preis bilden optisch eine gemeinsame Zeile.
========================================================= */

.wpa-events__meta-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.wpa-events__begin {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 84px;
  padding: var(--space-xs) 0;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.wpa-events__begin-label {
  font-family: var(--font-primary);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-text);
}

.wpa-events__begin-date {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wpa-events__begin-day {
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.wpa-events__begin-mon {
  font-size: var(--fs-small);
  color: var(--text-body);
}

.wpa-events__begin-time {
  margin-top: 4px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-text);
}

.wpa-events__meta-main {
  min-width: 0;
}

/* !important auf font-size/-weight/line-height/color noetig,
   weil Elementors globale Kit-Typografie (.elementor-kit-28 h1)
   durch Klasse+Element hoehere Spezifitaet hat und sonst
   gewinnt - u. a. mit line-height:1.1px, was den Titel auf
   eine 1px hohe Zeile presst und alles darunter ueberlappen
   laesst. */

.wpa-events__event-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h2-sm) !important;
  font-weight: 700 !important;
  line-height: var(--lh-heading) !important;
  letter-spacing: var(--ls-h3);
  color: var(--primary) !important;
}

.wpa-events__event-location {
  margin: 4px 0 0;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
}

.wpa-events__event-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.wpa-events__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.wpa-events__pill--open {
  color: var(--green-text);
  background-color: var(--bg-section-green);
}

.wpa-events__slots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-small);
  color: var(--text-body);
}

.wpa-events__slots strong {
  color: var(--primary);
}


/* =========================================================
   PREIS
   Rechtsbuendig auf Hoehe der Statuszeile.
========================================================= */

.wpa-events__price-block {
  align-self: end;
  margin: 0;
  padding: 0;
  border: 0;
}

.wpa-events__price-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.wpa-events__price-from {
  font-size: var(--fs-small);
  color: var(--text-body);
}

.wpa-events__price-value {
  font-family: var(--font-secondary);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--secondary);
}


/* =========================================================
   ABSCHNITTE (Zeitplan, Beschreibung)
========================================================= */

.wpa-events__block {
  margin-top: var(--space-xl);
}

.wpa-events__block--tight {
  margin-top: var(--space-lg);
}

#wpa-events-landing .wpa-events__block-label {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-primary);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--primary);
  padding: var(--space-sm) 0;
}

.wpa-events__timetable-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
}

#wpa-events-landing .wpa-events__timetable-date {
  font-weight: 600;
  color: var(--primary);
}

.wpa-events__desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* Amelia gibt die Beschreibung inkl. eigener H1 aus dem
   Redaktionstext aus. Elementors globale Kit-Typografie
   (.elementor-kit-28 h1, Spezifitaet Klasse+Element) schlaegt
   sonst diese Regel und quetscht ueber line-height:1.1px die
   Zeile zusammen - daher !important auf den kritischen
   Eigenschaften. Betrifft nur h1, deshalb war "Zeitplan" (h2)
   nie betroffen. */

.wpa-events__desc h1 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-primary);
  font-size: var(--fs-h4) !important;
  font-weight: 700 !important;
  line-height: var(--lh-heading) !important;
  color: var(--primary) !important;
}


/* =========================================================
   TRENNLINIE
========================================================= */

.wpa-events__divider {
  height: 1px;
  margin: var(--space-xl) 0;
  background-color: var(--border);
}


/* =========================================================
   GASTGEBER
========================================================= */

.wpa-events__host-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wpa-events__host {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wpa-events__host-avatar img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-circle);
}

.wpa-events__host-text {
  display: flex;
  flex-direction: column;
}

.wpa-events__host-name {
  font-weight: 600;
  color: var(--primary);
}

.wpa-events__host-role {
  font-size: var(--fs-small);
  color: var(--text-body);
}


/* =========================================================
   TICKET-SIDEBAR
   Weisse Karte + Amelias eigene Farbvariablen auf
   Markenfarben umgestellt. Hintergrundvariablen
   (--am-c-*-bgr) sind bereits Weiss und bleiben unberuehrt.
========================================================= */

.wpa-events__tickets-am-shell {
  padding: clamp(24px, 3vw, 32px);
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-medium);
  --am-c-primary: var(--secondary) !important;
  --am-c-error: var(--error) !important;
  --am-c-btn-prim: var(--accent-deep) !important;
  --am-c-btn-prim-text: var(--white) !important;
  --am-c-inp-border: var(--border) !important;
  --am-c-inp-placeholder: var(--muted-text) !important;
  --am-c-card-border: var(--border) !important;
  --am-c-main-heading-text: var(--primary) !important;
  --am-rad-inp: var(--radius-sm) !important;
  --am-font-family: var(--font-secondary) !important;
}

.wpa-events__tickets-head {
  margin-bottom: var(--space-sm);
}

#wpa-events-landing .wpa-events__tickets-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--primary);
}

.wpa-events__tickets-sub {
  margin: 4px 0 0;
  font-size: var(--fs-small);
  color: var(--text-body);
}

.wpa-events__tickets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}


/* =========================================================
   TICKET-KARTEN
   <details>/<summary> von Amelia; der native Aufklapp-Pfeil
   wird ausgeblendet, weil Amelia bereits einen eigenen
   Chevron-Button mitliefert - sonst erscheinen zwei Pfeile.
========================================================= */

.wpa-events__ticket-card {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.wpa-events__ticket-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
  list-style: none;
}

.wpa-events__ticket-summary::-webkit-details-marker {
  display: none;
}

.wpa-events__ticket-cat {
  font-weight: 600;
  color: var(--primary);
}

.wpa-events__ticket-summary-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.wpa-events__ticket-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--fs-small);
  color: var(--text-body);
}

.wpa-events__ticket-left strong {
  font-size: var(--fs-body-sm);
  color: var(--primary);
}

.wpa-events__ticket-body {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.wpa-events__ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

#wpa-events-landing .wpa-events__ticket-price {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--accent-text);
}


/* =========================================================
   MENGENAUSWAHL (Element Plus Stepper)
   Eigene Bibliothek innerhalb von Amelia, ohne die
   --am-c-*-Variablen. Direkter Override mit !important,
   da die Spezifitaet/Ladereihenfolge der Plugin-CSS nicht
   sicher einzuschaetzen ist.
========================================================= */

.wpa-events__qty .el-input__wrapper {
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 0 0 1px var(--border) inset !important;
}

.wpa-events__qty .el-input__inner {
  color: var(--primary) !important;
  font-family: var(--font-secondary) !important;
}

.wpa-events__qty .el-input-number__decrease,
.wpa-events__qty .el-input-number__increase {
  color: var(--muted-text) !important;
  background-color: var(--white) !important;
}


/* =========================================================
   BUCHEN-BUTTON (Footer)
   Zusaetzlich zum Variablen-Override oben: direkter Fallback
   auf die konkrete Button-Klasse. Amelia berechnet die
   Button-Farbe teils per JS und schreibt sie als eigene
   Inline-Variable (--am-c-btn-first) direkt auf den Button -
   dort wirkt der Override von --am-c-btn-prim moeglicherweise
   nicht. Ungeprueft, da die Seite live nicht ladbar war.
========================================================= */

.wpa-events__book-button {
  --am-c-btn-prim: var(--accent-deep) !important;
  --am-c-btn-prim-text: var(--white) !important;
  --am-font-family: var(--font-secondary) !important;
}

.wpa-events__book-button-btn {
  /* font-family: var(--font-primary) !important; */
  min-height: 48px !important;
  padding: 0 var(--space-md) !important;
  font-weight: 700 !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Buchungsleiste bleibt beim Scrollen am unteren Bildschirmrand
   sichtbar, solange die Eventseite im Bild ist. So ist der
   Button nach der Ticketwahl immer erreichbar, auch mobil,
   wo die Tickets erst unter dem Organisator stehen. */

#wpa-events-footer-mount {
  position: sticky;
  bottom: var(--space-sm);
  z-index: var(--z-sticky);
  margin-top: var(--space-lg);
}


/* =========================================================
   TABLET
   Zweispaltig wird zu eng - Tickets-Spalte rutscht unter
   den Event-Inhalt, Sticky-Positionierung entfaellt.
========================================================= */

@media (max-width: 1024px) {

  .wpa-events__columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .wpa-events__col--tickets {
    position: static;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .wpa-events__shell {
    padding: var(--space-xl) 0;
  }

  .wpa-events__meta-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .wpa-events__price-block {
    grid-column: 2;
    margin-top: var(--space-xs);
    justify-self: start;
  }

  /* !important wie in der Grundregel, sonst greift die
     mobile Groesse nicht. */

  .wpa-events__event-title {
    font-size: var(--fs-h3) !important;
  }

  .wpa-events__tickets-am-shell {
    padding: var(--space-md);
  }
}