/**
 * KIM Google Reviews
 *
 * Bewust terughoudend: het component erft de typografie van het thema.
 * Lettergroottes staan in em (schalen mee met de omgeving), afstanden in rem.
 * Let op: in het kim-framework is 1rem = 20px, in de meeste andere thema's 16px.
 * Alles is te overschrijven via de custom properties hieronder.
 */

.kgr {
	--kgr-gap: 1rem;
	--kgr-padding: 1rem;
	--kgr-radius: 0.4rem;
	--kgr-border: 0.05rem solid rgba(0, 0, 0, 0.12);
	--kgr-star: #fbbc04;
	--kgr-muted: rgba(0, 0, 0, 0.6);
	--kgr-avatar: 2rem;
}

/* Samenvatting boven de kaarten */

.kgr__heading {
	margin-block-end: var(--kgr-gap);
}

.kgr__summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: var(--kgr-gap);
}

.kgr__score {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
}

.kgr__count {
	color: var(--kgr-muted);
	font-size: 0.875em;
}

/* Sterren */

.kgr__stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

.kgr__stars-full {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
}

/* Hoge specificiteit: veel thema's zetten een generieke svg { width: 100% }. */
.kgr .kgr__stars svg.kgr__star {
	inline-size: 1em;
	block-size: 1em;
	max-inline-size: 1em;
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	fill: rgba(0, 0, 0, 0.15);
}

.kgr .kgr__stars .kgr__stars-full svg.kgr__star {
	fill: var(--kgr-star);
}

/* Kaarten */

.kgr__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kgr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kgr__item {
	margin: 0;
}

.kgr__card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	block-size: 100%;
	padding: var(--kgr-padding);
	border: var(--kgr-border);
	border-radius: var(--kgr-radius);
}

.kgr__text {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.9375em;
	font-style: normal;
	quotes: none;
}

.kgr__author {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.kgr__avatar {
	inline-size: var(--kgr-avatar);
	block-size: var(--kgr-avatar);
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.kgr__meta {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.kgr__name {
	font-weight: 600;
	font-size: 0.875em;
}

.kgr__date {
	color: var(--kgr-muted);
	font-size: 0.8125em;
}

.kgr__source {
	margin-block-start: var(--kgr-gap);
	font-size: 0.875em;
}

/* Responsief: mobile first, kolommen groeien per breekpunt tot het
   ingestelde maximum. Em in een media query is altijd 16px, ongeacht de
   font-size op html. */

@media (min-width: 36em) {
	.kgr--cols-2 .kgr__list,
	.kgr--cols-3 .kgr__list,
	.kgr--cols-4 .kgr__list,
	.kgr--cols-5 .kgr__list,
	.kgr--cols-6 .kgr__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.kgr--cols-3 .kgr__list,
	.kgr--cols-4 .kgr__list,
	.kgr--cols-5 .kgr__list,
	.kgr--cols-6 .kgr__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 80em) {
	.kgr--cols-4 .kgr__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.kgr--cols-5 .kgr__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.kgr--cols-6 .kgr__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* Vanaf vijf kolommen wordt elke kaart smal: minder lucht, kleinere tekst. */

@media (min-width: 80em) {
	.kgr--cols-5,
	.kgr--cols-6 {
		--kgr-gap: 0.75rem;
		--kgr-padding: 0.75rem;
		--kgr-avatar: 1.6rem;
	}

	.kgr--cols-5 .kgr__text,
	.kgr--cols-6 .kgr__text {
		font-size: 0.875em;
	}

	.kgr--cols-5 .kgr__name,
	.kgr--cols-6 .kgr__name {
		font-size: 0.8125em;
	}

	.kgr--cols-5 .kgr__date,
	.kgr--cols-6 .kgr__date {
		font-size: 0.75em;
	}
}