/**
 * STRYKE Base — Blog (1.35.0)
 *
 * Beitragsübersicht, Einzelbeitrag und „Neueste Beiträge" auf der Startseite.
 * Geladen NUR auf diesen Flächen (Blog::stylesheet).
 *
 * NUR DESIGN-TOKENS aus inc/class-design-system.php / style.css — keine
 * festen Farben. Tippziele mindestens 44 px; am Handy (390 px) kein seitliches
 * Scrollen: Raster-Kinder mit `min-width: 0`, Bilder mit `max-width: 100%`.
 */

.stryke-blog {
	padding-block: var(--stryke-space-xl);
}

.stryke-blog__rahmen {
	width: 100%;
	max-width: var(--stryke-content-width);
	margin-inline: auto;
	padding-inline: var(--stryke-space-md);
	box-sizing: border-box;
	min-width: 0;
}

/* ------------------------------------------------------------ Kopf ------ */

.stryke-blog__kopf {
	margin-block-end: var(--stryke-space-lg);
}

.stryke-blog__titel {
	margin: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.stryke-blog__einleitung {
	margin-block-start: var(--stryke-space-sm);
	color: var(--stryke-text-muted);
	max-width: 65ch;
}

/* ------------------------------------------------- Kategorie-Leiste ------ */

.stryke-blog-kats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stryke-space-xs);
	margin-block-end: var(--stryke-space-lg);
}

.stryke-blog-kats__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--stryke-space-md);
	border: 1px solid var(--stryke-border);
	border-radius: 999px;
	color: var(--stryke-text);
	text-decoration: none;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stryke-blog-kats__link:hover,
.stryke-blog-kats__link:focus-visible {
	border-color: var(--stryke-primary);
}

.stryke-blog-kats__link.is-aktiv {
	background-color: var(--stryke-primary-fill);
	border-color: var(--stryke-primary-fill);
	color: var(--stryke-on-primary);
}

/* ---------------------------------------------------------- Raster ------ */

.stryke-blog-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--stryke-space-lg);
}

.stryke-blog-raster > * {
	min-width: 0;
}

/* ----------------------------------------------------------- Karte ------ */

.stryke-blog-karte {
	display: flex;
	flex-direction: column;
	background-color: var(--stryke-bg-alt);
	border: 1px solid var(--stryke-border);
	border-radius: var(--stryke-radius);
	overflow: hidden;
}

.stryke-blog-karte__bildlink {
	display: block;
}

.stryke-blog-karte__bild {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.stryke-blog-karte__text {
	display: flex;
	flex-direction: column;
	gap: var(--stryke-space-xs);
	padding: var(--stryke-space-md);
	min-width: 0;
}

.stryke-blog-karte__titel {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	overflow-wrap: break-word;
	hyphens: auto;
}

.stryke-blog-karte__titel a {
	color: var(--stryke-text);
	text-decoration: none;
	/* Der Titel-Link trägt die Karte — die ganze Fläche ist das Tippziel. */
	display: block;
	min-height: 44px;
}

.stryke-blog-karte__titel a:hover,
.stryke-blog-karte__titel a:focus-visible {
	color: var(--stryke-primary-ink);
	text-decoration: underline;
}

.stryke-blog-karte__auszug {
	margin: 0;
	color: var(--stryke-text-muted);
	/* Lange Wörter liefen bei 390 px sichtbar über den Kartenrand (gemessen). */
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ------------------------------------------------------------ Meta ------ */

.stryke-blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--stryke-space-xs) var(--stryke-space-sm);
	margin: 0;
	font-size: 0.875rem;
	color: var(--stryke-text-muted);
}

.stryke-blog-meta__kat {
	color: var(--stryke-primary-ink);
	font-weight: 600;
	text-decoration: none;
}

a.stryke-blog-meta__kat {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --------------------------------------------------------- Knöpfe ------ */

.stryke-blog-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--stryke-space-md);
	border-radius: var(--stryke-radius);
	background-color: var(--stryke-primary-fill);
	color: var(--stryke-on-primary);
	text-decoration: none;
	font-weight: 600;
}

.stryke-blog-knopf:hover,
.stryke-blog-knopf:focus-visible {
	color: var(--stryke-on-primary);
	filter: brightness(1.08);
}

.stryke-blog-knopf--leise {
	background-color: transparent;
	color: var(--stryke-primary-ink);
	border: 1px solid var(--stryke-border-strong);
}

.stryke-blog-knopf--leise:hover,
.stryke-blog-knopf--leise:focus-visible {
	color: var(--stryke-primary-ink);
	border-color: var(--stryke-primary);
	filter: none;
}

/* ----------------------------------------------- Seitennummerierung ------ */

.stryke-blog .pagination,
.stryke-blog-seiten {
	margin-block-start: var(--stryke-space-xl);
}

.stryke-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stryke-space-xs);
}

.stryke-blog .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--stryke-space-sm);
	border: 1px solid var(--stryke-border);
	border-radius: var(--stryke-radius);
	color: var(--stryke-text);
	text-decoration: none;
	box-sizing: border-box;
}

.stryke-blog .page-numbers.current {
	background-color: var(--stryke-primary-fill);
	border-color: var(--stryke-primary-fill);
	color: var(--stryke-on-primary);
}

/* ------------------------------------------------------ Leer-Zustand ------ */

.stryke-blog-leer {
	padding: var(--stryke-space-xl) var(--stryke-space-md);
	border: 1px dashed var(--stryke-border-strong);
	border-radius: var(--stryke-radius);
	text-align: center;
}

.stryke-blog-leer h2 {
	margin-block-start: 0;
}

/* ---------------------------------------------------- Einzelbeitrag ------ */

.stryke-blog-beitrag {
	/* Lesbare Textbreite — der Rahmen ist schmaler als die Inhaltsbreite. */
	max-width: calc(72ch + 2 * var(--stryke-space-md));
}

.stryke-blog-zurueck {
	margin: 0 0 var(--stryke-space-sm);
}

.stryke-blog-zurueck a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	color: var(--stryke-primary-ink);
	text-decoration: none;
}

.stryke-blog-beitrag__kopf {
	display: flex;
	flex-direction: column;
	gap: var(--stryke-space-sm);
	margin-block-end: var(--stryke-space-lg);
}

.stryke-blog-beitrag__titel {
	margin: 0;
	/* Am Handy kleiner und mit Silbentrennung — bei 390 px brach ein langes
	   Wort sonst hart in der Mitte (gemessen). */
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
	line-height: 1.2;
	overflow-wrap: break-word;
	hyphens: auto;
}

.stryke-blog-autor {
	margin: 0;
	color: var(--stryke-text-muted);
}

.stryke-blog-autor a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--stryke-text);
	font-weight: 600;
}

.stryke-blog-beitrag__bild {
	margin: 0 0 var(--stryke-space-lg);
}

.stryke-blog-beitrag__bild img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--stryke-radius);
}

.stryke-blog-inhalt {
	overflow-wrap: break-word;
}

.stryke-blog-inhalt img,
.stryke-blog-inhalt iframe,
.stryke-blog-inhalt video {
	max-width: 100%;
	height: auto;
}

.stryke-blog-inhalt pre,
.stryke-blog-inhalt table {
	max-width: 100%;
	overflow-x: auto;
}

.stryke-blog-schlagworte {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stryke-space-xs);
	margin-block: var(--stryke-space-lg);
}

.stryke-blog-schlagworte a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--stryke-space-sm);
	border: 1px solid var(--stryke-border);
	border-radius: 999px;
	color: var(--stryke-text);
	text-decoration: none;
}

.stryke-blog-anfrage {
	margin-block: var(--stryke-space-xl);
	padding: var(--stryke-space-lg);
	border-radius: var(--stryke-radius);
	background-color: var(--stryke-bg-alt);
	border: 1px solid var(--stryke-border);
}

.stryke-blog-anfrage h2 {
	margin-block-start: 0;
}

.stryke-blog-weitere {
	padding-block-start: var(--stryke-space-xl);
}

.stryke-blog-weitere h2 {
	margin-block: 0 var(--stryke-space-md);
}

/* ------------------------------------------ Startseite: Neueste Beiträge -- */

.stryke-blog-neu__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--stryke-space-sm);
	margin-block-end: var(--stryke-space-md);
}

.stryke-blog-neu__kopf h2 {
	margin: 0;
}

@media (max-width: 600px) {
	.stryke-blog {
		padding-block: var(--stryke-space-lg);
	}

	.stryke-blog-neu__kopf .stryke-blog-knopf {
		width: 100%;
	}
}