/* [applari_arvostelut]: base shape for the summary, the list, the stars and
   the meta line. The theme overrides through the classes and variables. */
.applari-arvostelut {
	--applari-tahti: #f5b301;
	--applari-tahti-pois: #d4d4d0;
	--applari-arvostelut-reuna: rgba(0, 0, 0, 0.1);
	--applari-arvostelut-min: 260px;
	display: grid;
	gap: 1rem;
}

.applari-tahdet {
	display: inline-flex;
	gap: 0.05em;
	line-height: 1;
	white-space: nowrap;
	vertical-align: -0.1em;
}

.applari-tahdet > span {
	color: var(--applari-tahti-pois, #d4d4d0);
}

.applari-tahdet > span.is-on {
	color: var(--applari-tahti, #f5b301);
}

/* The markup has ☆ for empty stars so the value reads without CSS; with
   CSS every star is the filled glyph and the colour tells them apart. */
.applari-tahdet > span:not(.is-on) {
	position: relative;
	visibility: hidden;
}

.applari-tahdet > span:not(.is-on)::before {
	content: "★";
	position: absolute;
	left: 0;
	visibility: visible;
	color: var(--applari-tahti-pois, #d4d4d0);
}

.applari-arvostelut-yhteenveto {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
}

.applari-arvostelut-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--applari-arvostelut-min)), 1fr));
}

.applari-arvostelu {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--applari-arvostelut-reuna);
	border-radius: 8px;
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

.applari-arvostelu-teksti {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}

.applari-arvostelu-teksti::before,
.applari-arvostelu-teksti::after {
	content: none;
}

.applari-arvostelu-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.75em;
	font-size: 0.875em;
	opacity: 0.8;
}

.applari-arvostelu-nimi {
	font-style: normal;
	font-weight: 600;
}