/**
 * Walhalla-Katalog "Tiere & Ausrüstung" (Auftrag 15.09.2026).
 * Nutzt bewusst die bereits im Theme global verfügbaren CSS-Variablen
 * (Theme theme.json Farbpalette + soldestroyer.css :root-Variablen wie
 * --sd-radius/--sd-focus/--sd-ink-muted/--accent), damit sich der Katalog
 * optisch nahtlos in die bestehende Walhalla-Seite einfügt, ohne die
 * Palette hier zu duplizieren. Eigener, plugin-eigener Klassenpräfix
 * "swk-", damit nichts mit vorhandenen Theme-Klassen kollidiert.
 */

.swk-page { padding: 0 1.25rem 2rem; max-width: 72rem; margin: 0 auto; }

.swk-hero { padding: 2rem 0 1.25rem; text-align: center; }
.swk-hero__eyebrow { margin: 0 0 .3em; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sd-ink-muted, inherit); }
.swk-hero__title { margin: 0 0 .4em; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--sd-gold-bright, var(--wp--preset--color--sd-gold)); }
.swk-hero__intro { max-width: 42rem; margin: 0 auto; color: var(--sd-ink-muted, inherit); }

.swk-jump { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.swk-jump a {
	display: inline-block;
	padding: .5em 1em;
	border: 1px solid color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 45%, transparent);
	border-radius: var(--sd-radius, 8px);
	text-decoration: none;
	color: inherit;
}
.swk-jump a:hover,
.swk-jump a:focus-visible { border-color: var(--accent, var(--wp--preset--color--sd-gold)); }

.swk-tools { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; margin: 1.5rem 0; }
.swk-search label { display: block; font-size: .85rem; margin-bottom: .3em; color: var(--sd-ink-muted, inherit); }
.swk-search input[type="search"] {
	padding: .55em .8em;
	border-radius: var(--sd-radius, 8px);
	border: 1px solid color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 35%, transparent);
	background: rgba(0,0,0,.24);
	color: inherit;
	min-width: 14rem;
	font-size: 1rem;
}
.swk-search input[type="search"]:focus-visible { outline: 3px solid var(--sd-focus, var(--wp--preset--color--sd-gold)); outline-offset: 2px; }

.swk-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.swk-filter__btn {
	padding: .45em .9em;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 35%, transparent);
	background: transparent;
	color: inherit;
	font-size: .85rem;
	cursor: pointer;
}
.swk-filter__btn.is-active { background: color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 25%, transparent); border-color: var(--accent, var(--wp--preset--color--sd-gold)); }
.swk-filter__btn:focus-visible { outline: 3px solid var(--sd-focus, var(--wp--preset--color--sd-gold)); outline-offset: 2px; }

.swk-abschnitt { padding: 1.5rem 0; }
.swk-abschnitt h2 { color: var(--sd-gold-bright, var(--wp--preset--color--sd-gold)); margin-bottom: .8em; }

.swk-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
}
@media (min-width: 640px) {
	.swk-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.swk-grid { grid-template-columns: repeat(3, 1fr); }
}

.swk-karte {
	border: 1px solid color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 25%, transparent);
	border-radius: var(--sd-radius, 8px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* Bugfix 17.09.2026: assets/js/katalog.js blendet gefilterte Karten über das
   hidden-Attribut aus (karte.hidden = true). Ohne diese Regel gewinnt aber
   das eigene "display: flex" oben gegen die UA-Regel "[hidden]{display:none}"
   (Autor-CSS schlägt UA-CSS unabhängig von Spezifität), die Karte blieb also
   trotz hidden=true sichtbar – Suche und Filter-Buttons wirkten dadurch
   optisch wirkungslos, obwohl die JS-Logik selbst korrekt lief. */
.swk-karte[hidden] { display: none; }
.swk-karte__media { aspect-ratio: 3 / 2; overflow: hidden; background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.swk-karte__media img,
.swk-karte__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.swk-karte__bild--platzhalter { object-fit: contain; padding: 1.5rem; opacity: .8; }
.swk-karte__body { padding: .9rem 1rem 1.1rem; }
.swk-karte__title { margin: 0 0 .3em; font-size: 1.05rem; color: var(--sd-gold-bright, var(--wp--preset--color--sd-gold)); }
.swk-karte__labels { margin: 0 0 .4em; font-size: .8rem; color: var(--sd-ink-muted, inherit); text-transform: uppercase; letter-spacing: .02em; }
.swk-karte__excerpt { margin: 0; font-size: .92rem; color: var(--sd-ink-muted, inherit); }

/* Ganze Karte klickbar (Auftrag 17.09.2026): ein einziges <a> umschließt
   Bild, Titel, Kategorie und Auszug – so ist die Karte per Maus, Tastatur
   (Tab/Enter) und Screenreader (Linktext = Titel + Kategorie + Auszug)
   erreichbar, ganz ohne zusätzliches JavaScript. */
.swk-karte__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.swk-karte__link:focus-visible {
	outline: 3px solid var(--sd-focus, var(--wp--preset--color--sd-gold));
	outline-offset: -2px;
}
.swk-karte__link:hover .swk-karte__title,
.swk-karte__link:focus-visible .swk-karte__title { text-decoration: underline; }

.swk-empty { padding: 1.5rem; border: 1px dashed color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 35%, transparent); border-radius: var(--sd-radius, 8px); }
.swk-empty p { margin: 0 0 .6em; }
.swk-empty p:last-child { margin-bottom: 0; }
.swk-empty--filter { margin-top: 1rem; }

.swk-btn {
	display: inline-block;
	padding: .5em 1em;
	border-radius: var(--sd-radius, 8px);
	background: var(--accent, var(--wp--preset--color--sd-gold));
	color: #0b1a22;
	text-decoration: none;
	font-weight: 600;
}
.swk-btn:hover,
.swk-btn:focus-visible { filter: brightness(1.08); }

.swk-karte:focus-within { outline: 3px solid var(--sd-focus, var(--wp--preset--color--sd-gold)); outline-offset: 2px; }

/* Detailseite eines einzelnen Tiers/Gegenstands (Auftrag 17.09.2026). */
.swk-detail { padding-top: 1rem; }
.swk-detail__kopf { padding: 1.5rem 0 1rem; text-align: center; }
.swk-detail__titel { margin: 0 0 .3em; font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--sd-gold-bright, var(--wp--preset--color--sd-gold)); }
.swk-detail__media { max-width: 32rem; margin: 0 auto 1.5rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--sd-radius, 8px); background: rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.swk-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swk-detail__media .swk-karte__bild--platzhalter { object-fit: contain; padding: 2rem; opacity: .8; }
.swk-detail__einleitung { max-width: 48rem; margin: 0 auto 1.5rem; font-size: 1.05rem; }
.swk-detail__block { max-width: 48rem; margin: 0 auto; padding: 1.25rem 0; border-top: 1px solid color-mix(in srgb, var(--accent, var(--wp--preset--color--sd-gold)) 20%, transparent); }
.swk-detail__block h2 { color: var(--sd-gold-bright, var(--wp--preset--color--sd-gold)); margin-bottom: .5em; font-size: 1.15rem; }
.swk-detail__block p { margin: 0 0 .8em; }
.swk-detail__block p:last-child { margin-bottom: 0; }
.swk-detail__block--stichpunkte ul { margin: 0; padding-left: 1.2em; }
.swk-detail__block--stichpunkte li { margin-bottom: .4em; }
.swk-quellen__liste { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--sd-ink-muted, inherit); }
.swk-quellen__liste li { margin-bottom: .5em; overflow-wrap: anywhere; }
.swk-quellen__hinweis { font-size: .92rem; margin-bottom: .8em; }
.swk-detail__back-bottom { display: flex; justify-content: center; margin: 2rem auto 3rem; }

/* Dezente Bildquelle auf der Detailseite (Auftrag 17.09.2026) – bewusst
   klein und unaufdringlich, erscheint nur bei vorläufigen Online-Bildern
   (siehe swk_katalog_bild_quelle_html() in inc/bilder.php); bei eigenen
   Screenshots wird dieser Block gar nicht erst ausgegeben. */
.swk-detail__bildquelle {
	max-width: 32rem;
	margin: -1rem auto 1.5rem;
	font-size: .78rem;
	color: var(--sd-ink-muted, inherit);
	opacity: .85;
	text-align: center;
}
.swk-detail__bildquelle a { color: inherit; }