/**
 * Zweck: Das Grundstylesheet des Blocks `mwpd/post-list`.
 *
 *        BEWUSST MINIMAL. Der Maßstab des Blocks lautet: Wir liefern die
 *        Abfrage und ehrliches Markup, die vertrauten Gestaltungsmittel
 *        kommen vom Kern (Abstände, Farben, Rahmen, Schrift — über
 *        `supports`), alles darüber hinaus ist CSS.
 *
 *        Hier steht deshalb nur, was ohne Gestaltungsabsicht nicht
 *        funktionierte: die Aufhebung der Listenpunkte und das Gitter.
 *        Keine Farben, keine Schriftgrößen, keine Abstände innerhalb der
 *        Karte — das wäre eine Meinung, die der Nutzer erst überschreiben
 *        müsste.
 *
 *        Die Klassennamen sind die zugesagte Schnittstelle für eigenes
 *        CSS: mwpd-postlist, -item, -image, -title, -date, -excerpt,
 *        -more, -link.
 *
 *        Diese Datei liegt beim Block und NICHT im Bauordner: Der wird
 *        bei jedem Lauf geleert. Sie ist Quelltext, kein Build-Ergebnis.
 * Öffentliche Schnittstelle: die genannten Klassen.
 * Letzte Änderung: v1.3.17.1-beta
 */

.mwpd-postlist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	/* Der Abstand zwischen den Karten kommt aus dem Kern-Bedienelement
	   „Blockabstand". Der Rückfallwert greift nur, solange niemand
	   etwas gewählt hat. */
	gap: var( --wp--style--block-gap, 1.5rem );
}

.mwpd-postlist.is-grid {
	grid-template-columns: repeat(
		var( --mwpd-postlist-columns, 1 ),
		minmax( 0, 1fr )
	);
}

/* Unter 600 px fällt jedes Gitter auf eine Spalte. Ein dreispaltiges
   Raster auf einem Telefon ist keine Gestaltungsfrage, sondern
   unlesbar. */
@media ( max-width: 600px ) {
	.mwpd-postlist.is-grid {
		grid-template-columns: 1fr;
	}
}

.mwpd-postlist-item {
	margin: 0;
	min-width: 0;
}

.mwpd-postlist-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Nur der Vorgabe-Außenabstand der Überschrift wird genommen, damit der
   Kern-Blockabstand allein bestimmt. Die Größe erbt sie vom Theme. */
.mwpd-postlist-title {
	margin-top: 0;
}

.mwpd-postlist-excerpt,
.mwpd-postlist-date,
.mwpd-postlist-more {
	margin-bottom: 0;
}

/* ── Karte als Block (Schalter „Karte als Block") ──────────────────────
   Ohne ihn sind die Karten unterschiedlich hoch — dann hängen Rahmen und
   Schatten an verschieden hohen Kästen, und ein Gitter sieht unruhig
   aus. Mit ihm füllt jede Karte die Zeilenhöhe, und der Weiterlesen-Link
   sitzt unten bündig.

   Die Gestaltung selbst (Rahmen, Radius, Schatten, Hintergrund,
   Innenabstand) kommt aus den Kern-Bedienelementen; die Werte werden in
   PHP auf die Karte gesetzt (→ mwpd_post_list_card_style). Hier steht
   nur, was der Kern nicht kann: die Verteilung im Kasten. */
.mwpd-postlist.is-card .mwpd-postlist-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Der Weiterlesen-Link wandert ans untere Ende, damit er bei
   unterschiedlich langen Auszügen auf einer Linie steht. */
.mwpd-postlist.is-card .mwpd-postlist-more {
	margin-top: auto;
	padding-top: 0.6em;
}

/* ── Beschnitt der Beitragsbilder ──────────────────────────────────────
   Unterschiedlich hohe Bilder bringen Unruhe in ein Gitter. Der
   Zuschnitt läuft über `aspect-ratio` und `object-fit` — also über den
   Browser, ohne dass eine zweite Bilddatei entsteht.

   Der Wert kommt als Variable aus PHP. Ohne Auswahl steht die Klasse
   nicht da, und das Bild behält seine eigenen Maße. */
.mwpd-postlist.has-ratio .mwpd-postlist-image img {
	aspect-ratio: var( --mwpd-postlist-ratio );
	object-fit: cover;
	width: 100%;
}

/* ── Der Weiterlesen-Link ──────────────────────────────────────────────
   `mwpd-postlist-link` ist die dokumentierte Klasse für eigenes CSS.
   Trägt der Link zusätzlich `wp-element-button`, erbt er die
   Knopfgestaltung des Themes — dafür steht hier nichts, das ist genau
   der Punkt. */
.mwpd-postlist-more .wp-element-button {
	display: inline-block;
	text-decoration: none;
}