/**
 * Bewertungs-Widget im Frontend.
 *
 * Farben kommen aus dem Theme (--c-*); die Fallbacks halten das Widget auch
 * mit anderen Themes brauchbar.
 */

.osr {
	--osr-surface: var(--c-surface, #fffdf7);
	--osr-alt: var(--c-surface-alt, #f2ecdc);
	--osr-text: var(--c-text, #241f17);
	--osr-muted: var(--c-muted, #6c6455);
	--osr-primary: var(--c-primary, #2c4413);
	--osr-border: var(--c-border, #e4dcc7);
	--osr-busy: var(--c-busy, #b3543c);
	--osr-radius: var(--radius, 14px);

	color: var(--osr-text);
}

/* ------------------------------------------------------------ Kopfbereich */

.osr__head {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-bottom: 1.5rem;
}

.osr__scorebadge {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	flex: 0 0 auto;
	border-radius: 18px 18px 18px 4px;
	background: var(--osr-primary);
	color: var(--c-on-primary, #fcf8dc);
	font-family: var(--ff-display, inherit);
	font-size: 1.55rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	box-shadow: var(--shadow, 0 6px 18px rgb(0 0 0 / 0.12));
}

.osr__headtext b {
	display: block;
	font-size: 1.25rem;
	line-height: 1.25;
}

.osr__headtext span {
	color: var(--osr-muted);
	font-size: 0.95rem;
}

.osr__headtext a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.osr__headtext a:hover {
	color: var(--osr-primary);
}

/* -------------------------------------------------------------- Teilnoten */

.osr__subscores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.65rem 2rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--osr-border);
	border-radius: var(--osr-radius);
	background: color-mix(in srgb, var(--osr-surface) 65%, transparent);
}

.osr__subscores li {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		'label score'
		'bar bar';
	align-items: center;
	gap: 0.3rem 0.8rem;
	font-size: 0.9rem;
}

.osr__sublabel {
	grid-area: label;
}

.osr__subscores b {
	grid-area: score;
}

.osr__subbar {
	grid-area: bar;
}

.osr__sublabel {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--osr-muted);
}

.osr__subbar {
	height: 6px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--osr-primary) 14%, transparent);
	overflow: hidden;
}

.osr__subbar i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--osr-primary);
}

.osr__subscores b {
	font-variant-numeric: tabular-nums;
	font-size: 0.92rem;
}

/* ------------------------------------------------------------------ Karten */

.osr__grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	align-items: start;
}

.osr__card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.35rem 1.45rem;
	border: 1px solid var(--osr-border);
	border-radius: var(--osr-radius);
	background: var(--osr-surface);
	box-shadow: var(--shadow-sm, 0 1px 4px rgb(0 0 0 / 0.05));
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.osr__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow, 0 10px 28px rgb(0 0 0 / 0.1));
}

.osr__cardhead {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.osr__chip {
	flex: 0 0 auto;
	padding: 0.28rem 0.65rem;
	border-radius: 10px 10px 10px 3px;
	background: color-mix(in srgb, var(--osr-primary) 14%, transparent);
	color: var(--osr-primary);
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.osr__title {
	margin: 0.1rem 0 0;
	font-size: 1.02rem;
	line-height: 1.4;
	font-weight: 600;
	font-family: var(--ff-body, inherit);
	letter-spacing: 0;
}

.osr__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.osr__negative {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--osr-muted);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.osr__negative span {
	color: var(--osr-busy);
	font-weight: 600;
}

.osr__meta {
	margin-top: auto;
	padding-top: 0.55rem;
	border-top: 1px solid color-mix(in srgb, var(--osr-border) 70%, transparent);
	font-size: 0.82rem;
	color: var(--osr-muted);
}