/*
 * Ratgeber-Hubs -- Kategorie-Archive des Ratgebers als Themenseiten.
 *
 * Eigene Datei statt main.css: an main.css arbeiten parallel andere
 * Bauabschnitte, und diese Regeln betreffen ausschliesslich die Archive
 * unter /ratgeber/ und /ratgeber/<unterkategorie>/. Geladen wird sie nur
 * dort (siehe shouraki_hub_stil() in template-parts/ratgeber-hub.php).
 *
 * Alle Farben, Abstaende und Schriften kommen aus den Tokens in main.css,
 * hier steht kein einziger eigener Farbwert. Kanten bleiben hart
 * (--sk-radius = 2px), wie im uebrigen Theme.
 *
 * @package Shouraki
 */

/* ==========================================================================
   1. Kopf und Einleitung
   ========================================================================== */

/* Der Einleitungstext nutzt das Inhaltsraster (.entry-content) und traegt
   deshalb dessen oberen Abstand; der untere entfaellt, weil direkt darunter
   der erste Abschnitt mit eigenem Abstand folgt. */
.sk-hub__intro {
	padding-block-end: 0;
}

/* Lesemass: lange Fliesstextstrecken sollen nicht ueber die volle
   Containerbreite laufen. Ueberschriften bleiben bewusst breit. */
.sk-hub__intro > p,
.sk-hub__intro > ul,
.sk-hub__intro > ol {
	max-width: var(--sk-measure);
}

.sk-hub__intro a {
	color: var(--sk-color-gold);
}

/* ==========================================================================
   2. Abschnitte
   ========================================================================== */

.sk-hub__abschnitt {
	padding-block-start: var(--sk-section-y);
	padding-inline: var(--sk-gutter);
}

.sk-hub__abschnitt > * {
	max-width: var(--sk-container);
	margin-inline: auto;
	min-width: 0;
}

.sk-hub__abschnitt > * + * {
	margin-block-start: var(--sk-space-md);
}

/* Letzter Abschnitt vor dem Aufruf-Band: etwas Luft, damit das Band nicht
   an der Kursliste klebt. */
.sk-hub__kurse {
	padding-block-end: var(--sk-space-xl);
}

/* ==========================================================================
   3. Karten (Bereiche und Beitraege)
   ========================================================================== */

.sk-hub__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--sk-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-hub-karte {
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-2xs);
	background-color: var(--sk-color-panel);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
	padding: var(--sk-space-md);
	min-width: 0;
	transition: border-color var(--sk-transition), background-color var(--sk-transition);
}

.sk-hub-karte:hover,
.sk-hub-karte:focus-within {
	background-color: var(--sk-color-panel-raised);
	border-color: rgba(var(--sk-color-gold-rgb), 0.45);
}

.sk-hub-karte__titel {
	font-size: var(--sk-fs-h4);
	line-height: var(--sk-lh-heading);
	margin: 0;
	/* Lange Kampfsportnamen duerfen umbrechen statt die Karte zu sprengen. */
	overflow-wrap: anywhere;
}

.sk-hub-karte__titel a {
	color: var(--sk-color-heading);
	text-decoration: none;
}

.sk-hub-karte__titel a:hover,
.sk-hub-karte__titel a:focus-visible {
	color: var(--sk-color-gold);
}

.sk-hub-karte__text {
	margin: 0;
	color: var(--sk-color-text-muted);
	font-size: var(--sk-fs-base);
	line-height: var(--sk-lh-body);
}

.sk-hub-karte__meta {
	margin: 0;
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

.sk-hub-karte__meta:empty {
	display: none;
}

/* Der Weiterlesen-Link steht immer unten, damit die Karten einer Reihe
   auf derselben Linie enden. */
.sk-hub-karte__link {
	margin: 0;
	margin-block-start: auto;
	padding-block-start: var(--sk-space-2xs);
	font-size: var(--sk-fs-small);
}

/* ==========================================================================
   4. Hinweis auf geplante Themen (Hub ohne Beitrag)
   ========================================================================== */

.sk-hub__hinweis {
	background-color: var(--sk-color-panel);
	border: 1px solid var(--sk-color-border);
	/* Gold nur als schmale Kante links -- Akzent ohne Flaeche. */
	border-left: 3px solid var(--sk-color-gold);
	border-radius: var(--sk-radius);
	padding: var(--sk-space-md);
	max-width: var(--sk-measure);
}

.sk-hub__hinweis > * {
	margin-block: 0;
}

.sk-hub__hinweis > * + * {
	margin-block-start: var(--sk-space-sm);
}

.sk-hub__hinweis p {
	color: var(--sk-color-text-muted);
}

.sk-hub__themen {
	margin: 0;
	padding-inline-start: var(--sk-space-md);
	color: var(--sk-color-text);
	display: grid;
	gap: var(--sk-space-3xs);
}

/* ==========================================================================
   5. Kursbox
   ========================================================================== */

.sk-hub__kurse-text {
	color: var(--sk-color-text-muted);
	max-width: var(--sk-measure);
}

.sk-hub__kursliste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-hub__kursliste li {
	min-width: 0;
}

.sk-hub__kursliste a {
	display: inline-block;
	background-color: var(--sk-color-panel);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
	padding: var(--sk-space-2xs) var(--sk-space-sm);
	color: var(--sk-color-text);
	text-decoration: none;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-h6);
	letter-spacing: var(--sk-tracking-heading);
	line-height: 1.35;
	transition: border-color var(--sk-transition), color var(--sk-transition), background-color var(--sk-transition);
	overflow-wrap: anywhere;
}

.sk-hub__kursliste a:hover,
.sk-hub__kursliste a:focus-visible {
	background-color: var(--sk-color-panel-raised);
	border-color: var(--sk-color-gold);
	color: var(--sk-color-gold);
}

/* ==========================================================================
   6. Schmale Anzeigen (bis 400 px getestet)
   ========================================================================== */

@media (max-width: 599.98px) {
	.sk-hub__raster {
		grid-template-columns: 1fr;
	}

	.sk-hub-karte {
		padding: var(--sk-space-sm);
	}

	.sk-hub__kursliste {
		display: grid;
		grid-template-columns: 1fr;
	}

	.sk-hub__kursliste a {
		display: block;
	}
}