/* ==========================================================================
   PROGRAMMKARTEN  [Content Block gmmag/event-cards]
   --------------------------------------------------------------------------
   Loest die frueheren Text-Elemente mit "Layout: Karte Blau" ab. Deren Optik
   kam aus den Regeln der Farbflaeche
   (:is(.bg-col-2, .bg-col-3) .frame.frame-layout-1 ...) und funktionierte
   deshalb nur innerhalb einer solchen Section. Hier bringt der Baustein
   seine Optik selbst mit - und laesst sich ueberall platzieren.

   Uebernommen wurden: Kartenkasten, Titeloptik, Kategoriezeile, der runde
   Aufkleber aus dem Subheader und die drei Farbvarianten.
   ========================================================================== */

.gmmag-events {
  --ge-dark: #0E1D42;
  --ge-blue: #206CB1;
  --ge-white: #ffffff;
  --ge-radius: 16px;
  --ge-gap: 20px;
  --ge-cols: 3;
  /* Der Aufkleber haengt unter dem Titel. Kreisgroesse, der Freiraum daneben
     und der Rueckzug nach oben haengen alle an diesem Wert. */
  --ge-badge: 65px;
}

.gmmag-events--cols-2 { --ge-cols: 2; }
.gmmag-events--cols-3 { --ge-cols: 3; }
.gmmag-events--cols-4 { --ge-cols: 4; }

.gmmag-events .gmmag-events__header {
  margin: 0 0 24px;
}

.gmmag-events .gmmag-events__grid {
  display: grid;
  grid-template-columns: repeat(var(--ge-cols), minmax(0, 1fr));
  gap: var(--ge-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --- Karte ----------------------------------------------------------------
   Der Innenabstand unten muss fuer den Aufkleber nichts mehr freihalten: der
   haengt an den Angaben und traegt selbst keine Hoehe bei.
   -------------------------------------------------------------------------- */
.gmmag-events .gmmag-events__card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--ge-radius);
  background-color: var(--ge-white);
  color: var(--ge-dark);
  overflow: hidden;
}

.gmmag-events .gmmag-events__title {
  margin: 0 0 10px;
  color: var(--ge-blue);
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}

.gmmag-events .gmmag-events__card p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.5;
}

.gmmag-events .gmmag-events__card p:last-of-type:not(.gmmag-events__badge) {
  margin-bottom: 0;
}

/* Mit Aufkleber ist der letzte Absatz im Markup der Aufkleber selbst, die
   Regel darueber greift dort also nicht. Sichtbar schliesst die Karte mit den
   Angaben ab - das ist der vorletzte Absatz. Die Null ist hier keine Kosmetik:
   der Aufkleber richtet sich an dieser Unterkante aus, ein Rest-Abstand
   schoebe ihn genau um diesen Betrag nach unten. */
.gmmag-events .gmmag-events__card--has-badge > p:nth-last-of-type(2):is(.gmmag-events__date, .gmmag-events__duration) {
  margin-bottom: 0;
}

/* Kategoriezeile ueber dem Titel */
.gmmag-events .gmmag-events__format {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 400;
  /* Abgeschwaecht nur auf der weissen Karte: dort bleiben es 7.4:1. Auf den
     farbigen Karten waere Weiss bei 75% nur noch 3.5:1 und verfehlt WCAG
     1.4.3 - dort bleibt die Zeile deshalb voll deckend. */
  opacity: 0.75;
}

.gmmag-events .gmmag-events__date strong,
.gmmag-events .gmmag-events__date time {
  font-weight: 700;
}

.gmmag-events .gmmag-events__date {
  font-weight: 700;
}


/* --- Farbvarianten [Feld "Kartenfarbe"] ----------------------------------- */
.gmmag-events .gmmag-events__card--blue {
  background-color: var(--ge-blue);
}

.gmmag-events .gmmag-events__card--dark {
  background-color: var(--ge-dark);
}

/* Weiss auf #206CB1 sind 5.08:1, auf #0E1D42 sogar 16.4:1. */
.gmmag-events .gmmag-events__card--blue,
.gmmag-events .gmmag-events__card--dark {
  color: var(--ge-white);
}

.gmmag-events .gmmag-events__card--blue .gmmag-events__title,
.gmmag-events .gmmag-events__card--dark .gmmag-events__title {
  color: inherit;
}

.gmmag-events .gmmag-events__card--blue .gmmag-events__format,
.gmmag-events .gmmag-events__card--dark .gmmag-events__format {
  opacity: 1;
}

/* Auf der blauen Flaeche waere die blaue Karte fast dieselbe Farbe wie der
   Grund. Dort der hellste Ton, der mit weisser Schrift noch 4.5:1 haelt -
   uebernommen aus dem bisherigen Karten-Regelwerk. */
.bg-col-2 .gmmag-events .gmmag-events__card--blue {
  background-color: #3579BC;
}


/* --- Aufkleber aus dem Feld "Halle" ---------------------------------------
   Frueher der zweite Header (Subheader) der Karte, danach unten rechts an der
   Karte festgetackert. Jetzt haengt er an der Unterkante der Dauer: dort steht
   er auf gleicher Hoehe mit dem Ende der Angaben, unabhaengig davon, wie viele
   Zeilen die Ueberschrift darueber braucht.
   -------------------------------------------------------------------------- */
.gmmag-events .gmmag-events__badge {
  align-self: flex-end;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ge-badge);
  height: var(--ge-badge);
  margin: 0;
  border-radius: 50%;
  background-color: var(--ge-dark);
  color: var(--ge-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  rotate: 10deg;
}

/* Der Rueckzug um die eigene Hoehe legt die Unterkante des Kreises genau auf
   die Unterkante des Absatzes davor - der Dauer, ersatzweise dem Termin. Der
   Aufkleber traegt damit keine Hoehe zur Karte bei und ueberlagert die Zeilen
   darueber, die ihm per padding-right ausweichen.

   Bedingung ist der Termin: er ist immer zweizeilig, der hochgezogene Kreis
   reicht damit hoechstens in seine Zeilen und nie in die Ueberschrift. Ohne
   Termin behaelt der Aufkleber seine eigene Zeile am Ende der Karte. */
.gmmag-events .gmmag-events__card:has(.gmmag-events__date) .gmmag-events__badge {
  margin-top: calc(var(--ge-badge) * -1);
}

/* Auf farbigen Karten dreht sich der Aufkleber um */
.gmmag-events .gmmag-events__card--blue .gmmag-events__badge,
.gmmag-events .gmmag-events__card--dark .gmmag-events__badge {
  background-color: var(--ge-white);
  color: var(--ge-dark);
}

/* Die Angaben stehen neben dem Kreis und weichen ihm aus. Der Titel darueber
   darf die volle Breite nutzen. */
.gmmag-events .gmmag-events__card--has-badge .gmmag-events__date,
.gmmag-events .gmmag-events__card--has-badge .gmmag-events__duration {
  padding-right: calc(var(--ge-badge) + 16px);
}


/* --- Schmalere Viewports -------------------------------------------------- */
@media (max-width: 991.98px) {
  .gmmag-events .gmmag-events__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .gmmag-events .gmmag-events__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gmmag-events .gmmag-events__card {
    padding: 18px;
  }
}