/**
 * SDH Feed-Beitraege (Widget „SDH Feed-Beiträge").
 *
 * Zeigt Anreisser eines fremden Feeds im Kartenlook der Vorteilswelt.
 *
 * ZWEI REGELN FUER DIESE DATEI:
 *
 * 1. **Jede Farbe, Groesse und jeder Abstand laeuft ueber eine `--fp-*`-Variable**
 *    mit Fallback-Kette `var(--eigen, var(--erbe, literal))`. Nur so ist alles
 *    im Elementor-Widget einstellbar, ohne dass hier `!important` noetig wird.
 * 2. **Standardwerte stehen NUR hier**, nie als `default` im Control: Elementor
 *    schreibt jeden Control-Standard in die gecachte Seiten-CSS. Der Wert
 *    stuende dann zweimal, und eine Aenderung hier bliebe wirkungslos.
 *
 * Die Umbrueche entscheidet eine CONTAINER-Query, keine `@media`-Abfrage: Das
 * Widget kann in einer breiten Landingpage-Zeile ODER in einer schmalen Spalte
 * stehen — massgeblich ist die Breite der Komponente, nicht die des Fensters.
 */

/* ==========================================================================
   Breite des Widget-Rahmens — Notwendigkeit, nicht Kosmetik

   Elementor gibt Widgets in einem Container nur `max-width: 100%`, keine
   Breite. In einem Flex-Container muss der Browser die Eigengroesse des Kindes
   deshalb erst ausmessen — und in diesem Messdurchlauf meldet `.sdh-fp` wegen
   `container-type: inline-size` die Breite 0 (genau dafuer ist die Containment
   da, sonst waere die Container-Query zirkulaer). Der Inhalt wird also einmal
   bei 0 px ausgelegt, jedes Wort bricht einzeln um, und DIESE Hoehe bleibt am
   Widget stehen.

   Spezifitaet bewusst niedrig (0,1,0): Elementors eigene Breiten-Einstellung
   (`.elementor-widget.elementor-widget__width-initial`, 0,2,0) muss weiter
   gewinnen, sonst waere das Control im Reiter „Erweitert" wirkungslos.
   ========================================================================== */
.elementor-widget-sdh-feed-posts {
	width: 100%;
}

/* ==========================================================================
   Wurzel
   ========================================================================== */
.sdh-fp {
	container-type: inline-size;
	container-name: sdh-fp;
	font-size: var(--fp-font-size, 1rem);
	color: var(--fp-text, var(--sdh-gray-800, #343a40));
}

/* ==========================================================================
   Raster

   Die Spaltenzahl kommt aus `--fp-cols` (Control). Die Container-Query setzt
   sie in schmalen Umgebungen fest herunter — `repeat()` erlaubt keine
   Rechenausdruecke, deshalb feste Werte statt `min(var(--fp-cols), 2)`.
   ========================================================================== */
.sdh-fp-grid {
	display: grid;
	grid-template-columns: repeat(var(--fp-cols, 3), minmax(0, 1fr));
	gap: var(--fp-gap, 24px);
	align-items: stretch;
}

@container sdh-fp (max-width: 900px) {
	.sdh-fp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container sdh-fp (max-width: 600px) {
	.sdh-fp-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Karte — dieselbe Formensprache wie die Vorteils-Karte:
   weisse Flaeche, feine Umrandung, farbige Linie am Kopf.
   ========================================================================== */
.sdh-fp-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--fp-card-bg, #ffffff);
	border: 1px solid var(--fp-card-border, var(--sdh-gray-200, #e9ecef));
	border-top: var(--fp-accent-width, 3px) solid var(--fp-accent, var(--sdh-accent, #be1623));
	border-radius: var(--fp-card-radius, 0px);
	overflow: hidden;
	box-shadow: var(--fp-card-shadow, none);
	transition: box-shadow var(--fp-card-transition, 0.2s) ease;
}

/* Beide Schatten laufen ueber eine Variable, nicht ueber eine feste Angabe:
   sonst waere der Hover-Zustand im Editor nicht abschaltbar. Die Controls
   schreiben `--fp-card-shadow` bzw. `--fp-card-shadow-hover`; der Standard
   steht weiterhin nur hier. */
.sdh-fp-card:hover {
	box-shadow: var(--fp-card-shadow-hover, 0 6px 20px rgba(0, 0, 0, 0.10));
}

/* ==========================================================================
   Bild

   Die Hoehe sitzt am Slot, nicht am <img>: ein globales `img { height: auto }`
   aus Theme oder Elementor wuerde sie am Bild sonst wieder aushebeln.
   ========================================================================== */
.sdh-fp-visual {
	position: relative;
	flex: 0 0 auto;
}

.sdh-fp-image {
	position: relative;
	display: block;
	height: var(--fp-image-height, 180px);
	line-height: 0;
	background: var(--sdh-gray-100, #f8f9fa);
	overflow: hidden;
}

/* Der Selektor traegt bewusst eine Klasse mehr als noetig: Elementor setzt
   `.elementor img { height: auto }` — das ist mit (0,1,1) genauso spezifisch
   wie `.sdh-fp-image img`, und bei Gleichstand entscheidet die
   Ladereihenfolge. Mit (0,2,1) ist die Frage unabhaengig davon entschieden. */
.sdh-fp-card .sdh-fp-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

.sdh-fp-image--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sdh-fp-image--empty svg {
	width: 34px;
	height: 34px;
	color: var(--sdh-gray-300, #dee2e6);
}

/* Bildnachweis: gehoert sichtbar zum Bild, darf aber nichts verdecken —
   deshalb unter dem Slot statt als Overlay darin. */
.sdh-fp-credit {
	display: block;
	padding: 4px var(--fp-body-padding, 20px) 0;
	font-size: var(--fp-credit-size, 0.68rem);
	line-height: 1.4;
	color: var(--fp-credit-color, var(--fp-muted, var(--sdh-gray-600, #6c757d)));
	opacity: var(--fp-credit-opacity, 0.75);
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Text
   ========================================================================== */
.sdh-fp-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--fp-body-padding, 20px);
}

.sdh-fp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 10px;
	font-size: var(--fp-meta-size, 0.78rem);
	line-height: 1.3;
	color: var(--fp-meta-color, var(--fp-muted, var(--sdh-gray-600, #6c757d)));
}

/* Trenner zwischen den Meta-Angaben — nur ZWISCHEN ihnen, nie davor. */
.sdh-fp-meta > * + *::before {
	content: "·";
	margin-right: 10px;
}

.sdh-fp-category {
	font-weight: 700;
	color: var(--fp-category-color, var(--fp-accent, var(--sdh-accent, #be1623)));
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sdh-fp-title {
	margin: 0 0 10px;
	font-size: var(--fp-title-size, 1.05rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--fp-title-color, var(--sdh-gray-800, #343a40));
	overflow-wrap: anywhere;
}

.sdh-fp-title a {
	color: inherit;
	text-decoration: none;
}

.sdh-fp-card:hover .sdh-fp-title a,
.sdh-fp-title a:hover,
.sdh-fp-title a:focus-visible {
	color: var(--fp-title-hover, var(--fp-accent, var(--sdh-accent, #be1623)));
}

.sdh-fp-excerpt {
	margin: 0 0 18px;
	font-size: var(--fp-excerpt-size, 0.92rem);
	line-height: 1.6;
	color: var(--fp-excerpt-color, var(--fp-muted, var(--sdh-gray-600, #6c757d)));
}

/* Textlink am Kartenfuss — `margin-top: auto` schiebt ihn in allen Karten
   einer Zeile auf dieselbe Grundlinie, egal wie lang der Teaser ist. */
.sdh-fp-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-top: auto;
	font-size: var(--fp-link-size, 0.82rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fp-link-color, var(--fp-accent, var(--sdh-accent, #be1623)));
}

.sdh-fp-link svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

.sdh-fp-card:hover .sdh-fp-link svg,
.sdh-fp-link:hover svg {
	transform: translateX(4px);
}

/* ==========================================================================
   Quellenhinweis unter der Liste
   ========================================================================== */
.sdh-fp-note {
	margin: var(--fp-note-gap, 16px) 0 0;
	font-size: var(--fp-note-size, 0.78rem);
	line-height: 1.5;
	color: var(--fp-note-color, var(--fp-muted, var(--sdh-gray-600, #6c757d)));
}

/* ==========================================================================
   Kompakte Liste — dieselbe Karte, andere Anordnung.
   ========================================================================== */
.sdh-fp--list .sdh-fp-grid {
	grid-template-columns: 1fr;
	gap: var(--fp-gap, 16px);
}

.sdh-fp--list .sdh-fp-card {
	flex-direction: row;
	align-items: stretch;
}

.sdh-fp--list .sdh-fp-visual {
	flex: 0 0 var(--fp-list-image-width, 160px);
	max-width: var(--fp-list-image-width, 160px);
}

.sdh-fp--list .sdh-fp-image {
	height: 100%;
	min-height: var(--fp-list-image-min-height, 110px);
}

/* In der Liste steht der Nachweis unter dem Bild im Bildstreifen — dort ist
   kein Innenabstand der Textspalte, deshalb ein eigener kleiner. */
.sdh-fp--list .sdh-fp-credit {
	padding: 4px 10px 0;
}

.sdh-fp--list .sdh-fp-excerpt {
	margin-bottom: 12px;
}

@container sdh-fp (max-width: 480px) {
	.sdh-fp--list .sdh-fp-card {
		flex-direction: column;
	}

	.sdh-fp--list .sdh-fp-visual {
		flex: 0 0 auto;
		max-width: none;
	}

	.sdh-fp--list .sdh-fp-image {
		height: var(--fp-image-height, 180px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sdh-fp-card,
	.sdh-fp-link svg {
		transition: none;
	}

	.sdh-fp-card:hover .sdh-fp-link svg,
	.sdh-fp-link:hover svg {
		transform: none;
	}
}

/* ==========================================================================
   Hinweis im Elementor-Editor (im Frontend nie sichtbar)
   ========================================================================== */
.sdh-fp-editor-hint {
	padding: 20px;
	border: 1px dashed var(--sdh-gray-300, #dee2e6);
	background: var(--sdh-gray-100, #f8f9fa);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--sdh-gray-600, #6c757d);
}

.sdh-fp-editor-hint strong {
	color: var(--sdh-gray-800, #343a40);
}