/* [kompas_reviews]: the review block of the old kompasmakelaars.nl, with its measurements and colours. */
.kr {
	--kr-navy: #071d49;
	--kr-gold: #ebc273;
	--kr-star: #d9b070;
	--kr-light: #eae8e5;
	--kr-gap: 27px;
	display: grid; grid-template-columns: 1fr; gap: 30px;
	font-family: "Geograph Test", sans-serif; color: #454240;
}
@media (min-width: 992px) {
	/* Bootstrap col-lg-3 | offset-1 | col-lg-8 of the old site. */
	.kr { grid-template-columns: 3fr 8fr; column-gap: calc(100% / 12); align-items: start; }
	.kr--slider-only { grid-template-columns: 1fr; }
}

.kr__intro { text-align: center; }
@media (min-width: 768px) { .kr__intro { text-align: left; } }
/* Small gold label above the title, as above the other titles of the site. */
body .kr .kr__eyebrow { margin: 0 0 10px; color: #c99a3c; font-size: 13px; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
body .kr .kr__text { margin: -8px 0 24px; font-size: 17px; line-height: 1.6; }
body .kr .kr__title {
	position: relative; margin: 0 0 30px; padding-bottom: 15px;
	color: var(--kr-navy); font-family: inherit; font-size: 32px; font-weight: 700; line-height: 1.2; text-transform: uppercase;
}
@media (min-width: 1200px) { body .kr .kr__title { font-size: 38px; line-height: 42px; } }
.kr__title::after { content: " "; position: absolute; top: 100%; left: 50%; width: 80px; height: 5px; background: var(--kr-navy); transform: translateX(-50%); }
@media (min-width: 992px) { .kr__title::after { left: 0; transform: none; } }

.kr__score { display: flex; gap: 20px; align-items: center; justify-content: center; color: #fff; }
@media (min-width: 768px) { .kr__score { justify-content: flex-start; } }
@media (min-width: 992px) { .kr__score { margin-bottom: 20px; } }
.kr__score img { width: auto; height: 30px; }
body .kr .kr__number { margin: 0; color: #fff; font-size: 50px; font-weight: 700; line-height: 1.2; }

body .kr .kr__button {
	display: inline-block; min-width: 250px; margin: 15px 0 1rem; padding: 18px 30px;
	border: 0; border-radius: 0; background: var(--kr-gold); color: var(--kr-navy);
	font: 700 16px/1.2 "Geograph Test", sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
body .kr .kr__button:hover, body .kr .kr__button:focus-visible { color: var(--kr-navy); transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0, 0, 0, .1); }
body .kr .kr__button:focus-visible { outline: 2px solid var(--kr-navy); outline-offset: 3px; }

/* The track runs out to the right edge of the screen, cut off on the left at the column (as the old clip-path). */
.kr__slider { min-width: 0; clip-path: inset(-100vw -100vw -100vw 0); }
.kr__track {
	display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none;
	touch-action: pan-y; cursor: grab; user-select: none; will-change: transform;
}
.kr__track.is-dragging { cursor: grabbing; }
.kr__card {
	flex: 0 0 calc((100% - var(--kr-gap)) / 2); margin: 0 var(--kr-gap) 0 0;
}
@media (max-width: 767px) { .kr__card { flex-basis: 100%; } }

.kr__top { padding: 35px 30px 30px; background: var(--kr-light); }
body .kr .kr__name { margin: 0 0 10px; color: var(--kr-navy); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.kr__stars { display: flex; align-items: center; margin: 0; }
.kr__stars svg { width: 20px; height: 20px; fill: var(--kr-star); }
.kr__bottom { padding: 30px; background: #fff; }
.kr__bottom p { margin: 0; font-size: 16px; line-height: 28px; }