/**
 * TinkerSchool Public Models – Widget Styles
 *
 * Alle Selektoren sind mit `.tspm-widget` geprefixt, um Theme-CSS zu
 * überschreiben (Spezifität 0,2,0 statt 0,1,0). Layout-kritische Properties
 * nutzen zusätzlich `!important`, damit Themes mit aggressiven Defaults
 * (z. B. `input { width: 100% }`) das Plugin nicht zerschießen.
 *
 * Farben aus dem TinkerToys-Corporate-Identity:
 *   --tspm-primary  = #107FC3 (TT-Blau, primäre Aktion)
 *   --tspm-accent   = #05AB92 (TT-Teal, Fallback für Fach-Tags)
 *   --tspm-text     = #333
 *   --tspm-muted    = #8D8C8C (CI-Grau)
 *   --tspm-bg-soft  = #EDEDED (CI-Hellgrau)
 *
 * Schriftart wird vom Theme geerbt (TinkerToys-Webseite nutzt "Abel").
 */

.tspm-widget {
	--tspm-primary:        #107FC3;
	--tspm-primary-dark:   #0A6BA5;
	--tspm-primary-soft:   rgba(16, 127, 195, 0.15);
	--tspm-accent:         #05AB92;
	--tspm-accent-dark:    #036E5E;
	--tspm-text:           #333;
	--tspm-text-strong:    #222;
	--tspm-muted:          #8D8C8C;
	--tspm-border:         #d8d8d8;
	--tspm-bg-card:        #ffffff;
	--tspm-bg-soft:        #EDEDED;
	--tspm-card-radius:    8px;
	--tspm-card-shadow:    0 1px 3px rgba(0, 0, 0, 0.06);
	--tspm-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.10);

	display: block;
	font-family: inherit;
	color: var(--tspm-text);
}

/* =============================================================================
   Toolbar: Sort-Buttons | Fach-Dropdown | Suche, alle in einer Zeile
   ========================================================================== */

.tspm-widget .tspm-toolbar {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0 0 24px;
	padding: 0;
	align-items: center;
}

.tspm-widget .tspm-toolbar__sort {
	display: flex !important;
	gap: 8px;
	flex-shrink: 0;
}

/* =============================================================================
   Sort-Buttons: SVG-Cards aus der TinkerSchool-App
   ========================================================================== */

.tspm-widget .tspm-sort-button {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
	line-height: 0;
	width: 54px;
	height: 36px;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tspm-widget .tspm-sort-button:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.tspm-widget .tspm-sort-button:active {
	transform: translateY(0);
}

.tspm-widget .tspm-sort-button:focus-visible {
	outline: 2px solid var(--tspm-primary);
	outline-offset: 2px;
}

/* Das eigentliche Icon — SVG füllt den Button */
.tspm-widget .tspm-sort-button__icon {
	display: block !important;
	width: 54px !important;
	height: 36px !important;
	max-width: none !important;
	user-select: none;
	-webkit-user-drag: none;
	border-radius: 4px;
}

/* =============================================================================
   Form-Felder: Dropdown + Suche
   ========================================================================== */

.tspm-widget .tspm-toolbar__select,
.tspm-widget .tspm-toolbar__search {
	border: 1px solid var(--tspm-border);
	border-radius: 4px;
	padding: 7px 10px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	color: var(--tspm-text);
	height: 36px;
	box-sizing: border-box;
	margin: 0;
	flex-shrink: 0;
}

.tspm-widget .tspm-toolbar__select {
	width: 180px !important;
	min-width: 0;
}

.tspm-widget .tspm-toolbar__search {
	width: 220px !important;
	min-width: 0;
}

.tspm-widget .tspm-toolbar__select:focus,
.tspm-widget .tspm-toolbar__search:focus {
	outline: none;
	border-color: var(--tspm-primary);
	box-shadow: 0 0 0 3px var(--tspm-primary-soft);
}

@media (max-width: 600px) {
	.tspm-widget .tspm-toolbar__select,
	.tspm-widget .tspm-toolbar__search {
		width: 100% !important;
	}
}

/* =============================================================================
   Grid + Karten
   ========================================================================== */

.tspm-widget .tspm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.tspm-widget .tspm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tspm-widget .tspm-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tspm-widget .tspm-card {
	background: var(--tspm-bg-card);
	border-radius: var(--tspm-card-radius);
	box-shadow: var(--tspm-card-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	margin: 0;
	padding: 0;
}

.tspm-widget .tspm-card:hover {
	box-shadow: var(--tspm-card-shadow-hover);
	transform: translateY(-2px);
}

/*
 * Bildbereich: Aspect-Ratio 4:3, Bild deckt den Container vollständig ab
 * (object-fit: cover). Damit verschwindet der graue Letterbox-Rand, den
 * `contain` produziert hat. Container-Hintergrund ist weiß.
 */
.tspm-widget .tspm-card__image-wrap {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--tspm-bg-card);
	overflow: hidden;
}

.tspm-widget .tspm-card__image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	padding: 0;
}

.tspm-widget .tspm-card__likes {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tspm-text-strong);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.tspm-widget .tspm-card__likes-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.tspm-widget .tspm-card__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.tspm-widget .tspm-card__title {
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	color: var(--tspm-text-strong);
	margin: 0 !important;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tspm-widget .tspm-card__meta {
	font-size: 12px;
	color: var(--tspm-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: auto;
	padding-top: 6px;
}

.tspm-widget .tspm-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tspm-widget .tspm-card__subject {
	display: inline-block;
	align-self: flex-start;
	margin-top: 6px;
	font-size: 11px;
	background: var(--tspm-accent);
	color: #fff;
	border-radius: 3px;
	padding: 2px 7px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/*
 * Leerer Tag-Slot: visuell unsichtbar, aber das Element belegt weiterhin
 * Layout-Platz (visibility:hidden statt display:none). Damit bleiben die
 * Veröffentlicher-Namen über alle Karten hinweg auf einer Höhe — egal ob
 * die Karte ein Fach-Tag hat oder nicht.
 */
.tspm-widget .tspm-card__subject--empty {
	visibility: hidden !important;
	background: transparent !important;
}

/*
 * Fach-spezifische Farben aus dem TinkerToys-CI.
 * Codes ohne explizite Farbe (Che, Spr, Inf) erben den Fallback (--tspm-accent).
 */
.tspm-widget .tspm-card__subject--Mat { background: #C51C1C; }  /* Mathematik          – CI-Rot */
.tspm-widget .tspm-card__subject--Bio { background: #54AB1A; }  /* Biologie            – CI-Grün */
.tspm-widget .tspm-card__subject--Tec { background: #15628A; }  /* Technik             – Dunkelblau */
.tspm-widget .tspm-card__subject--KuG { background: #EC7608; }  /* Kunst und Gestalten – CI-Orange */
.tspm-widget .tspm-card__subject--Ast { background: #05AB92; }  /* Astronomie          – CI-Teal */
.tspm-widget .tspm-card__subject--Phy { background: #E69C0D; }  /* Physik              – CI-Helles Orange */
.tspm-widget .tspm-card__subject--Sau { background: #98C21D; }  /* Sachunterricht      – CI-Hellgrün */
.tspm-widget .tspm-card__subject--Fau { background: #C24A90; }  /* Fächerübergreifend  – CI-Pink */

/* =============================================================================
   Loading / Empty / Error States
   ========================================================================== */

.tspm-widget .tspm-state {
	text-align: center;
	padding: 40px 20px;
	color: var(--tspm-muted);
	font-size: 15px;
}

.tspm-widget .tspm-state--error {
	color: #b00020;
}

.tspm-widget .tspm-spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--tspm-primary);
	border-radius: 50%;
	animation: tspm-spin 0.8s linear infinite;
}

@keyframes tspm-spin {
	to { transform: rotate(360deg); }
}

.tspm-widget .tspm-loading-more {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	padding: 20px;
}