/*
 * Struktur- und Feinschliff-CSS für den Shortcode [sus_spiele_der_woche]
 * (PR6: das strukturell nötige CSS-Grid und der Responsive-Umbruch; PR7:
 * Vereins-CD-Styling gemäß Anchor.md, Abschnitt "Corporate-Design-
 * Referenz").
 *
 * Nutzt ausschließlich die CSS-Custom-Properties aus assets/frontend-
 * shared.css (u.a. --sus-color-primary, --sus-radius, --sus-shadow-card) –
 * keine fest verdrahteten Farb-/Radius-/Schatten-Werte in den Regeln unten.
 * frontend-shared.css wird von WeekMatchesShortcode::enqueue_assets()
 * zusätzlich und vor dieser Datei eingebunden.
 */

/*
 * Überschrift über der Spiele-Liste (per `titel`-Attribut abschaltbar, siehe
 * WeekMatchesShortcode::render_heading()) im Stil des alten Widgets: Text in
 * der Standard-Überschriftenfarbe mit einer farbigen Unterstreichung in der
 * Vereinsfarbe (--sus-color-primary, siehe "Design-Werte anpassen" in der
 * README), analog zu .sus-mannschaft-liga im Mannschafts-Widget.
 */
.sus-woche-heading {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--sus-color-primary);
	color: var(--sus-color-heading);
	font-size: 1.3em;
}

.sus-woche-widget {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--sus-color-text);
	font-size: var(--sus-font-size-base);
	font-family: var(--sus-font-family);
}

.sus-woche-notice {
	margin: 0;
	color: var(--sus-color-text-secondary);
}

/* Jede Zeile als eigene Karte (Anchor.md: Radius/Schatten gemäß CD-Referenz). */
.sus-woche-row {
	border: none;
	background: #ffffff;
	border-radius: var(--sus-radius);
	box-shadow: var(--sus-shadow-card);
	overflow: hidden;
}

/*
 * Feste Spaltenstruktur per CSS-Grid (nicht Flexbox mit variablen Breiten),
 * damit Logos, Namen und Uhrzeiten über alle Zeilen exakt untereinander
 * stehen – identische Spaltenreihenfolge für jede Zeile: Datum ·
 * Heim/Auswärts-Badge · Mannschaftsname 1 (rechtsbündig) · Logo 1 · „vs." ·
 * Logo 2 · Mannschaftsname 2 (linksbündig) · Uhrzeit/Ergebnis · Chevron.
 */
.sus-woche-row-summary {
	display: grid;
	/*
	 * Datums-Spalte 68px statt 60px (Anchor.md-Korrektur nach Live-Test auf
	 * schmalerem Container als im Staging-Test): "So DD.MM." brach bei
	 * manchen Zeilen zweizeilig um ("So" / "20.09."), während "Sa DD.MM."
	 * einzeilig blieb – "So" ist durch die Buchstabenform minimal breiter
	 * als "Sa" und überschritt die knapp bemessene 60px-Breite. Ein paar
	 * Pixel Puffer statt exaktem Pixel-Grenzfall.
	 */
	grid-template-columns: 68px 74px minmax(0, 1fr) 54px 24px 54px minmax(0, 1fr) 84px 20px;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	cursor: pointer;
	list-style: none;
}

/* Entfernt das Standard-Dreieck von <summary>, der eigene Chevron ersetzt es. */
.sus-woche-row-summary::-webkit-details-marker {
	display: none;
}

/*
 * Zusätzlich zu `align-items: center` auf dem Grid-Container (oben) noch
 * einmal explizit `align-self: center` auf jeder einzelnen Spalte
 * (Anchor.md-Ergänzung vom 15.09.2026: "Zeilenelemente liegen nicht auf
 * derselben horizontalen Achse") – dieselbe gemeinsame Basis-Klasse
 * `sus-woche-col` sitzt bereits auf jeder Spalte (siehe
 * WeekMatchesShortcode::render_row()). Robuster gegen ein aktives
 * WordPress-Theme, das Grid-Kinder (z.B. generische `span`-Regeln)
 * anderweitig vertikal ausrichtet, analog zum expliziten `border: 0`-Reset
 * gegen Theme-Rahmen in der Standings-Tabelle.
 */
.sus-woche-col {
	align-self: center;
}

.sus-woche-col--date {
	color: var(--sus-color-text-secondary);
	font-size: 0.9em;
	/* Nie umbrechen, unabhängig vom exakten Pixel-Grenzfall (s.o.). */
	white-space: nowrap;
}

/*
 * Heim/Auswärts-Badge-Farben: .sus-badge / .sus-badge--heim /
 * .sus-badge--auswaerts kommen jetzt aus assets/frontend-shared.css
 * (Anchor.md-Korrektur: dieselbe visuelle Sprache/dieselben CSS-Regeln wie
 * im Mannschafts-Widget statt einer eigenen Kopie hier).
 */

.sus-woche-col--name1 {
	text-align: right;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

.sus-woche-col--name2 {
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}

.sus-woche-col--vs {
	text-align: center;
	color: var(--sus-color-meta);
}

/*
 * Logo-Spalten horizontal zentrieren (Anchor.md-Ergänzung vom 15.09.2026),
 * analog zur bereits umgesetzten Logo-Zentrierung in der Standings-Tabelle
 * des Mannschafts-Widgets. Betrifft NUR die Logo-Spalten selbst – die
 * Namens-Spalten (`--name1`/`--name2`) bleiben bewusst rechts-/linksbündig
 * zur Bildschirmmitte hin ausgerichtet (siehe oben).
 */
.sus-woche-col--logo1,
.sus-woche-col--logo2 {
	text-align: center;
}

/*
 * Eigene Mannschaft hervorgehoben (analog zur eigenen Tabellenzeile im
 * Mannschafts-Widget) in der Farbe --sus-color-own-team – seit "Weitere
 * Ausbaustufe" (Anchor.md) ein eigenständiges Farbfeld, Default identisch
 * mit der Vereinsfarbe. Die Klasse sitzt je nach Heim/Auswärts auf
 * Name-/Logo-Spalte 1 oder 2 (siehe WeekMatchesShortcode::render_row()).
 */
.sus-woche-team--own {
	color: var(--sus-color-own-team);
	font-weight: 700;
}

/*
 * Rundes Logo-Framing wie bei handball.net (Anchor.md-Vorgabe, neu in PR7).
 * Bewusst OHNE Hintergrundfläche (Anchor.md-Korrektur: "Rund heißt rund,
 * ohne eckigen Rahmen/Hintergrund darum") – nur das kreisrund zugeschnittene
 * Bild selbst, ein transparentes Logo-PNG zeigt sonst ein sichtbares
 * weißes Quadrat hinter dem runden Ausschnitt. Größe/Klipping sitzt auf dem
 * `.sus-logo-frame`-Rahmen (siehe frontend-shared.css) statt direkt auf dem
 * `<img>` – Bug-Fix nach dem zweiten PR7-Staging-Test ("Logos weiterhin
 * eckig"): eine fehlgeschlagene Bildladung (defekte/tote Logo-URL) rendert
 * sonst ein Broken-Image-Icon, das `border-radius` auf dem `<img>` selbst
 * in mehreren Browsern ignoriert – der Rahmen-Container mit
 * `overflow: hidden` klippt zuverlässig auch diesen Fall.
 */
.sus-woche-logo-frame {
	width: 24px;
	height: 24px;
}

.sus-woche-team--own .sus-woche-logo-frame {
	box-shadow: 0 0 0 2px var(--sus-color-own-team);
}

.sus-woche-col--time {
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
}

.sus-woche-col--chevron {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Chevron als eigenständiges, abgesetztes Element (Anchor.md-Korrektur,
 * Teil 8: "bei handball.net ... in einem runden/abgesetzten
 * Button-Bereich") statt eines kaum wahrnehmbaren Zeichens – runde Fläche
 * mit Dashicon, dreht sich beim Aufklappen und wechselt in die Vereinsfarbe.
 */
.sus-woche-chevron-icon.dashicons {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 14px;
	border-radius: 50%;
	background: var(--sus-color-draw-bg);
	color: var(--sus-color-text-secondary);
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sus-woche-row[open] .sus-woche-chevron-icon.dashicons {
	transform: rotate(90deg);
	background: var(--sus-color-primary);
	color: #ffffff;
}

/*
 * Akkordeon-Detailbereich sauber abgesetzt (Anchor.md-Vorgabe: "dezenter
 * Hintergrund oder Rahmen beim Aufklappen").
 */
.sus-woche-details {
	padding: 10px 12px 12px;
	margin: 0 12px 10px;
	background: var(--sus-color-draw-bg);
	border-radius: var(--sus-radius);
	font-size: 0.9em;
	color: var(--sus-color-text-secondary);
}

/* Status-Pille "Anstehend"/"Beendet" (Teil 8) – Farben siehe frontend-shared.css. */
.sus-woche-status-badge {
	margin-bottom: 8px;
}

/*
 * Zweispaltiges Icon-Grid wie bei handball.net (Teil 7 der
 * PR7-Korrekturen). Sechs Felder in fester Reihenfolge, siehe
 * WeekMatchesShortcode::render_details_content() für die genaue
 * Spalten-1/Spalten-2-Zuordnung über die HTML-Reihenfolge.
 */
.sus-woche-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
}

.sus-woche-detail-item {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.sus-woche-detail-icon.dashicons {
	flex: none;
	width: 16px;
	height: 16px;
	font-size: 16px;
	margin-top: 1px;
	color: var(--sus-color-meta);
}

.sus-woche-detail-label {
	font-weight: 600;
	white-space: nowrap;
}

.sus-woche-detail-value {
	overflow-wrap: break-word;
}

/* Platzhalter für Felder ohne Wert im Cache, dezent/kursiv (Anchor.md-Vorgabe). */
.sus-woche-detail-value--empty {
	color: var(--sus-color-text-tertiary);
	font-style: italic;
}

/*
 * Responsive-Umbruch (Anchor.md, "Corporate-Design-Referenz": 1024px, 768px,
 * 480px, bewährt aus dem alten Widget).
 *
 * 1024px: das alte Widget blendete hier eine sekundäre "Liga"-Spalte aus –
 * dieses Grid zeigt gar keine Liga-/Wettbewerbsspalte in der Kurzansicht
 * (sie steht nur in der aufklappbaren Detailansicht, "Staffel/Runde"), jede
 * hier sichtbare Spalte (Datum, Badge, Teams, Logos, Uhrzeit/Ergebnis,
 * Chevron) ist für den schnellen Wochen-Überblick ohnehin bereits
 * Kernbestandteil. Für diese Zeilenübersicht gibt es also keine sinnvoll
 * "sekundäre" Spalte zum Ausblenden bei 1024px – bewusst keine Änderung an
 * dieser Stelle, statt eine künstliche auszudenken.
 *
 * 768px entspricht dem "Wechsel Tabellen-/Card-Layout bzw. Umbruch" des
 * alten Widgets: hier bricht jede Zeile auf zwei Zeilen um (oben Datum +
 * Badge + Uhrzeit/Ergebnis + Chevron, darunter die komplette Team-Zeile mit
 * beiden Logos und Namen) – ersetzt den bisherigen 700px-Wert aus PR6, das
 * Grid-Muster selbst (gleiche Klassen, nur andere grid-area-Zuordnung)
 * bleibt unverändert. Ab 480px zusätzlich "weitere Kompaktierung: kleinere
 * Schrift, kleinere Logos" laut CD-Referenz.
 */
@media (max-width: 768px) {
	.sus-woche-row-summary {
		grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
		grid-template-areas:
			"date badge . time chevron"
			"name1 logo1 vs logo2 name2";
		row-gap: 6px;
	}

	.sus-woche-col--date {
		grid-area: date;
	}

	.sus-woche-col--badge {
		grid-area: badge;
	}

	.sus-woche-col--name1 {
		grid-area: name1;
	}

	.sus-woche-col--logo1 {
		grid-area: logo1;
	}

	.sus-woche-col--vs {
		grid-area: vs;
	}

	.sus-woche-col--logo2 {
		grid-area: logo2;
	}

	.sus-woche-col--name2 {
		grid-area: name2;
	}

	.sus-woche-col--time {
		grid-area: time;
	}

	.sus-woche-col--chevron {
		grid-area: chevron;
	}
}

@media (max-width: 480px) {
	.sus-woche-widget {
		font-size: calc(var(--sus-font-size-base) - 2px);
	}

	.sus-woche-row-summary {
		padding: 8px 10px;
	}

	.sus-woche-logo-frame {
		width: 20px;
		height: 20px;
	}

	.sus-woche-details {
		margin: 0 10px 8px;
	}

	/* Ein Icon-Feld pro Zeile statt zweispaltig, auf sehr schmalen Displays. */
	.sus-woche-details-grid {
		grid-template-columns: 1fr;
	}
}