/* Abschnitt "Aktuelle Workshops" auf Startseite und Gutscheine-Seite.

   Die Spaltenbreiten stehen als --awb-width-large direkt im Markup,
   wie bei Avada ueblich: ein Drittel fuer den Text, zwei Drittel fuer
   die Kurskarten. Hier steht nur, was sich daraus ergibt.

   Avada setzt Kurskarten unterhalb von 1300px generell auf volle
   Breite. Hier sollen sie dagegen nebeneinander bleiben, solange
   ueberhaupt Platz dafuer ist -- also bis hinunter zum
   Mobil-Breakpoint. Daraus ergeben sich drei Zustaende:

     ueber 1300px   Text links, daneben beide Karten  -> drei Spalten
     1151-1300px    Text oben, darunter beide Karten nebeneinander
     bis 1150px     alles untereinander; dort blendet Avada ohnehin
                    die zweite Karten-Variante ein, die unberuehrt
                    bleibt */

/* Kartenformat -- Termin ueber dem Titel, Titel ungefettet.

   Gilt fuer den Abschnitt oben (ph-workshops-dreispaltig) und
   ueberall sonst, wo dasselbe Kartenbild gewuenscht ist; dort genuegt
   die Klasse ph-kurskarten an einem beliebigen Vorfahren. Bisher in
   Verwendung: Startseite, Gutscheine-Seite und die Beitragsuebersicht
   Pflanzenwissen.

   Der Termin steht bewusst per Flex-Reihenfolge oben und nicht durch
   Umstellen des Markups: So bleibt im Dokument die Ueberschrift vor
   der Zusatzangabe, was fuer Vorlesesoftware und Gliederung die
   richtige Reihenfolge ist, waehrend optisch das Datum oben steht. */
.ph-workshops-dreispaltig .fusion-events-meta,
.ph-kurskarten .fusion-events-meta {
	display: flex;
	flex-direction: column;
}

.ph-workshops-dreispaltig .fusion-events-meta .fusion-single-line-meta,
.ph-kurskarten .fusion-events-meta .fusion-single-line-meta {
	order: -1;
}

/* Kurstitel ungefettet; die Groesse bleibt beim Standardwert, ein
   mehrzeiliger Titel ist ausdruecklich in Ordnung. Der Abstand nach
   oben zum Termin ist deutlich kleiner als der Standardwert von 24px,
   damit Termin und Titel als zusammengehoerig lesbar sind. Der
   Abstand nach unten bleibt unveraendert. */
.ph-workshops-dreispaltig .fusion-events-meta h3,
.ph-kurskarten .fusion-events-meta h3 {
	font-weight: 400;
	margin-top: 6px;
}

@media only screen and (min-width: 1151px) {

	/* Zwei Karten pro Zeile statt der von Avada vorgesehenen drei.
	   Der Innenabstand der Karten liegt dank border-box innerhalb der
	   Breite und bildet den Zwischenraum. */
	.ph-workshops-dreispaltig .fusion-events-post {
		width: 50%;
		max-width: 50%;
	}
}

@media only screen and (min-width: 1301px) {

	/* Nur wenn Text und Karten nebeneinander stehen: Der Text soll
	   oben auf Hoehe der Karten beginnen, statt in der Spaltenmitte
	   zu schweben. */
	.ph-workshops-dreispaltig .fusion-flex-align-items-center {
		align-items: flex-start;
	}
}