/* Lovely Google Reviews – vormgeving afgestemd op lovely-photos.be */

.lgr {
	--lgr-lilac: #a89cd8;
	--lgr-ink: #2b3542;
	--lgr-text: #333;
	--lgr-muted: #8a8f99;
	--lgr-star: #f4a623;
	--lgr-star-off: #e3e5ea;
	--lgr-card: #fff;
	--lgr-border: #e4e4e8;
	--lgr-arrow: #333;
	--lgr-card-w: 265px;
	--lgr-card-h: 232px;
	--lgr-gap: 16px;
	--lgr-lines: 4;
	--lgr-font-heading: "Playfair Display", Georgia, serif;
	--lgr-font-body: "Nunito", "Nunito Sans", system-ui, sans-serif;

	font-family: var(--lgr-font-body);
	color: var(--lgr-text);
	padding: 24px 0 40px;
	box-sizing: border-box;
	overflow: visible;
	max-width: 1240px;
	margin: 0 auto;
	padding-left: 0; padding-right: 0;
}
.lgr *, .lgr *::before, .lgr *::after { box-sizing: inherit; }

/* Kop */
.lgr__header { text-align: center; margin-bottom: 26px; }
.lgr__eyebrow {
	margin: 0 0 22px;
	font-size: 13px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--lgr-lilac);
}
.lgr__title {
	margin: 0;
	font-family: var(--lgr-font-heading);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.15;
	color: var(--lgr-ink);
}

.lgr__summary { margin: 14px 0 0; font-size: 15px; color: var(--lgr-muted); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.lgr__summary-score { font-weight: 700; color: var(--lgr-ink); font-size: 17px; }
.lgr__summary-stars { color: var(--lgr-star); letter-spacing: 1px; font-size: 16px; }

/* Carrousel */
.lgr__carousel {
	position: relative;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lgr__viewport { flex: 0 1 auto; min-width: 0; width: 100%; max-width: var(--lgr-viewport-w, 100%); overflow: hidden; padding-top: 34px; /* ruimte voor de uitstekende avatar */ }
.lgr__track {
	display: flex;
	gap: var(--lgr-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1) !important;
	will-change: transform;
	touch-action: pan-y;
}
.lgr .lgr__track.is-dragging { transition: none !important; }
.lgr__slide {
	flex: 0 0 var(--lgr-slide-w, min(var(--lgr-card-w), 100%));
	display: flex;
}

/* Kaart */
.lgr__card {
	position: relative;
	width: 100%;
	background: var(--lgr-card);
	border: 1px solid var(--lgr-border);
	border-radius: 8px;
	padding: 44px 14px 22px;
	min-height: var(--lgr-card-h); /* vaste maat 265 x 232 zoals op de site; groeit mee bij 'lees verder' */
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lgr__avatar {
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: hsl(var(--lgr-hue, 260) 55% 42%);
	display: grid;
	place-items: center;
	overflow: visible;
}
.lgr__avatar img:not(.lgr__badge) {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	object-fit: cover;
}
.lgr__avatar img:not(.lgr__badge) ~ .lgr__initial { display: none; }
.lgr__initial {
	color: #fff;
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
}
.lgr__badge {
	position: absolute;
	right: -8px; bottom: -4px;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
	object-fit: contain;
	padding: 2px;
}
.lgr__badge--text {
	display: grid; place-items: center;
	font: 700 15px/1 Arial, sans-serif;
	color: #5f6368;
}
.lgr .lgr__card .lgr__name {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-family: var(--lgr-font-body) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--lgr-ink) !important;
}
.lgr .lgr__card .lgr__date { display: block; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--lgr-muted) !important; margin: 0 0 12px !important; }
.lgr__stars { display: flex; gap: 0; margin-bottom: 10px; }
.lgr__stars svg { fill: var(--lgr-star-off); width: 22px; height: 22px; }
.lgr__stars svg.is-on { fill: var(--lgr-star); }
.lgr .lgr__card .lgr__text {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--lgr-font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.45 !important;
	color: var(--lgr-text) !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lgr-lines);
	overflow: hidden;
}
.lgr__card.is-expanded .lgr__text { -webkit-line-clamp: unset; display: block; }
.lgr .lgr__card .lgr__more {
	margin-top: 4px;
	background: none !important; border: 0 !important; padding: 4px 8px !important;
	font: inherit !important; font-size: 15px !important; font-weight: 400 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	color: var(--lgr-muted) !important;
	cursor: pointer;
	border-radius: 3px;
	box-shadow: none !important;
}
.lgr .lgr__card .lgr__more:hover { color: var(--lgr-ink) !important; }
.lgr__more:focus-visible, .lgr__arrow:focus-visible, .lgr__dot:focus-visible {
	outline: 2px solid var(--lgr-lilac); outline-offset: 3px;
}

/* Pijlen */
.lgr .lgr__arrow {
	position: absolute;
	top: calc(50% + 17px); /* helft van de avatar-ruimte boven de kaarten */
	transform: translateY(-50%);
	z-index: 2;
	width: 36px; height: 36px;
	display: grid; place-items: center;
	background: #fff !important;
	border: 1px solid var(--lgr-border) !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 6px rgba(0,0,0,.14);
	padding: 0 !important;
	color: var(--lgr-arrow) !important;
	cursor: pointer;
	transition: box-shadow .2s, color .2s;
}
.lgr .lgr__arrow--prev { left: -16px; }
.lgr .lgr__arrow--next { right: -16px; }
.lgr .lgr__arrow svg { width: 16px; height: 16px; stroke-width: 2.6; }
.lgr .lgr__arrow:hover { color: var(--lgr-ink) !important; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.lgr .lgr__arrow[disabled] { opacity: .35; cursor: default; }

/* Bolletjes */
.lgr__dots { display: none; justify-content: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.lgr[data-dots="1"] .lgr__dots { display: flex; }
.lgr__dots:empty { display: none; }
.lgr__dot {
	width: 8px; height: 8px; border-radius: 50%;
	border: 0; padding: 0;
	background: var(--lgr-border);
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.lgr__dot.is-active { background: var(--lgr-lilac); transform: scale(1.3); }

.lgr__empty { text-align: center; color: var(--lgr-muted); }

/* Responsief */
@media (max-width: 560px)  {
	.lgr__arrow { display: none; }
	.lgr__text { font-size: 15px; }
}