/* ==========================================================================
   Reviews page — page-templates/reviews.php
   Figma: Reviews Desktop 519:30789 / Tablet 519:49593 / Mobile 519:49970
   ========================================================================== */

/* ---------- Stars (shared by hero, overall card, cards) ---------- */
.reviews-stars { display: inline-flex; gap: 2px; color: var(--c-orange); }
.reviews-stars .tk-icon { width: 14px; height: 14px; flex: none; }
.reviews-stars .tk-icon.is-empty { color: #d8e3e5; }

/* ---------- Hero (shared page-hero, truck geometry) ---------- */
.page-hero--reviews { min-height: 600px; }
.page-hero--reviews .page-hero__media {
	top: 0; right: calc(max(0px, (100% - 1440px) / 2) - min(40.14%, 578px));
	width: min(142.92%, 2058px); aspect-ratio: 2058 / 772;
	margin-top: max(-7.71%, -111px);
	transform: none;
}
.page-hero--reviews .page-hero__img { object-position: center; }
.page-hero--reviews .page-hero__title { max-width: 640px; }
.page-hero--reviews .page-hero__text { max-width: 620px; }
.reviews-hero__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.reviews-hero__stars .tk-icon { width: 20px; height: 20px; }
.reviews-hero__score { font-weight: 400; font-size: 20px; line-height: 26px; color: #fff; white-space: nowrap; }
.reviews-hero__count { font-family: var(--ff-text); font-weight: 400; font-size: 15px; line-height: 18px; color: var(--c-on-dark); white-space: nowrap; }

/* ---------- Rating summary ---------- */
.reviews-summary { padding: 80px 0 48px; background: #fff; }
.reviews-summary__grid { display: flex; align-items: stretch; gap: 24px; }

.reviews-overall {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	width: 400px; flex: none; padding: 36px; border-radius: 16px; background: var(--c-blue); color: #fff;
}
.reviews-overall__label { font-family: var(--ff-mono); font-size: 12px; line-height: 18px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; }
.reviews-overall__value { font-weight: 300; font-size: 96px; line-height: 96px; letter-spacing: -3px; color: #fff; }
.reviews-overall__stars { gap: 4px; }
.reviews-overall__stars .tk-icon { width: 24px; height: 24px; }
.reviews-overall__text { font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 21px; color: var(--c-on-dark); }

.reviews-breakdown {
	display: flex; flex-direction: column; gap: 16px; flex: 1 1 0; min-width: 0;
	padding: 36px; border: 1px solid #ededed; border-radius: 16px; background: #fff;
}
.reviews-breakdown__title { font-weight: 400; font-size: 20px; line-height: 26px; color: var(--c-blue); }
.reviews-breakdown__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.reviews-breakdown__row { display: flex; align-items: center; gap: 14px; font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 16px; }
.reviews-breakdown__stars { display: inline-flex; align-items: center; gap: 1px; flex: none; color: var(--c-blue); }
.reviews-breakdown__stars .tk-icon { width: 13px; height: 13px; color: var(--c-orange); }
.reviews-breakdown__bar { position: relative; flex: 1 1 0; min-width: 0; height: 8px; border-radius: 4px; background: var(--c-bg-soft); overflow: hidden; }
.reviews-breakdown__bar > span {
	position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 2px; border-radius: 4px; background: var(--c-orange);
	transform-origin: left; transition: transform 1s var(--ease-out) .2s;
}
.js .reviews-breakdown[data-reveal]:not(.is-visible) .reviews-breakdown__bar > span { transform: scaleX(0); }
.reviews-breakdown__count { width: 40px; flex: none; text-align: right; color: var(--c-navy); }

.reviews-platforms { display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 300px; flex: none; margin: 0; padding: 0; list-style: none; }
.reviews-platform, .reviews-platform__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reviews-platform { padding: 20px; border-radius: 8px; background: #fff; }
.reviews-platform__link { flex: 1 1 auto; transition: opacity .2s; }
.reviews-platform__link:hover { opacity: .75; }
.reviews-platform__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.reviews-platform__logo { width: 70px; height: 20px; object-fit: contain; flex: none; }
.reviews-platform--1 .reviews-platform__logo { width: 59px; height: 33px; }
.reviews-platform--2 .reviews-platform__logo { width: 65px; height: 30px; }
.reviews-platform__logo-text { font-weight: 500; font-size: 14px; color: var(--c-blue); }
.reviews-platform__count { font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 16px; color: var(--c-navy); white-space: nowrap; }
.reviews-platform__rating { font-weight: 300; font-size: 30px; line-height: 38px; color: var(--c-blue); }

/* ---------- Reviews list ---------- */
.reviews-list { padding: 32px 0 96px; }
.reviews-list__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.reviews-list__filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.reviews-chip {
	display: inline-flex; align-items: center;
	padding: 8px 14px; border: .7px solid #dee8ec; border-radius: 100px; background: #fff; cursor: pointer;
	font-family: var(--ff-text); font-weight: 400; font-size: 13px; line-height: 15px; color: var(--c-blue); white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s;
}
.reviews-chip:hover { border-color: var(--c-blue); }
.reviews-chip.is-active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

.reviews-sort { position: relative; flex: none; }
.reviews-sort__select {
	appearance: none; -webkit-appearance: none;
	height: 37px; padding: 8px 40px 8px 14px; border: .7px solid #dee8ec; border-radius: 100px; background: #fff; cursor: pointer;
	font-family: var(--ff-text); font-weight: 400; font-size: 13px; line-height: 15px; color: var(--c-blue);
	transition: border-color .2s;
}
.reviews-sort__select:hover { border-color: var(--c-blue); }
.reviews-sort__icon { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; color: var(--c-orange); }

.reviews-list__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.reviews-list__grid.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
.reviews-list__grid.is-masonry > .reviews-card { margin-bottom: 24px; }
.reviews-card[hidden] { display: none; }

.reviews-card {
	display: flex; flex-direction: column; gap: 16px; min-width: 0;
	padding: 28px; border: .8px solid #dee8ec; border-radius: 8px; background: #fff;
	transition: box-shadow .3s var(--ease-out), border-color .3s;
	animation: reviews-card-in .45s var(--ease-out) both;
}
.reviews-card:hover { border-color: #c9d7de; box-shadow: 0 18px 40px -28px rgba(49, 43, 182, .45); }
.reviews-card:focus { outline: none; }
@keyframes reviews-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reviews-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reviews-card__category {
	padding: 4px 10px; border-radius: 100px; background: var(--c-bg-soft);
	font-family: var(--ff-mono); font-size: 10px; line-height: 15px; letter-spacing: .5px; text-transform: uppercase; color: var(--c-blue); white-space: nowrap;
}
.reviews-card__quote { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.reviews-card__highlight { font-weight: 400; font-size: 19px; line-height: 26px; color: var(--c-blue); }
.reviews-card__text, .reviews-card__text p { font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 21px; color: #65777e; }
.reviews-card__text p + p { margin-top: 8px; }
.reviews-card__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid #dee8ec; }
.reviews-card__avatar {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 40px; height: 40px; border-radius: 50%; background: var(--c-bg-soft); color: var(--c-blue); object-fit: cover;
}
.reviews-card__avatar .tk-icon { width: 20px; height: 20px; }
.reviews-card__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reviews-card__name { font-weight: 500; font-size: 14px; line-height: 18px; color: var(--c-blue); }
.reviews-card__role { font-family: var(--ff-text); font-weight: 400; font-size: 12px; line-height: 14px; color: #65777e; }

.reviews-list__empty { padding: 32px 0; font-family: var(--ff-text); font-size: 15px; color: #65777e; text-align: center; }
.reviews-list__more { display: flex; justify-content: center; margin-top: 8px; }
.reviews-list__more-btn { min-height: 54px; padding: 16px 32px; }
.reviews-list__more-btn[hidden] { display: none; }

/* ---------- Leave a review (shared cta-band) ---------- */
.reviews-cta .cta-band__copy { max-width: 640px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
	.page-hero--reviews { min-height: 612px; }
	.page-hero--reviews::before { display: none; }
	.page-hero--reviews .page-hero__media {
		top: 172px; bottom: auto; right: auto; left: -17.4%;
		width: 163.5%; height: auto; aspect-ratio: 2058 / 772; margin-top: 0;
	}
	.page-hero--reviews .page-hero__content { max-width: 470px; }
	.page-hero--reviews .reviews-hero__rating { gap: 12px 14px; }
	.page-hero--reviews .reviews-hero__stars { flex-basis: 100%; }

	.reviews-summary { padding: 64px 0 48px; }
	.reviews-summary__grid { flex-direction: column; }
	.reviews-overall, .reviews-platforms { width: auto; }
	.reviews-overall__value { font-size: 69px; line-height: 69px; }

	.reviews-list { padding: 32px 0 72px; }
	.reviews-list__bar { flex-direction: column; gap: 10px; }
	.reviews-list__grid { grid-template-columns: 1fr; }

	.reviews-cta { padding-top: 64px; padding-bottom: 77px; }
	.reviews-cta .cta-band--stacked { flex-direction: row; align-items: center; gap: 16px; padding: 48px 32px; }
	.reviews-cta .cta-band__copy { max-width: 432px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.page-hero--reviews { padding-bottom: 360px; }
	.page-hero--reviews .page-hero__media {
		position: absolute; order: 0; margin: 0;
		top: -45px; bottom: auto; left: calc(50% - 464.5px); right: auto;
		width: 810px; height: 915px; aspect-ratio: auto;
	}
	.page-hero--reviews .page-hero__img,
	.page-hero--reviews .page-hero__media picture:has(source) .page-hero__img { object-position: center; }
	.page-hero--reviews .page-hero__inner { position: relative; z-index: 2; }
	.page-hero--reviews .page-hero__title { font-size: 36px; line-height: 39px; letter-spacing: -1.6px; }
	.page-hero--reviews .reviews-hero__stars { flex-basis: auto; }
	.reviews-hero__score { font-size: 18px; }

	.reviews-summary { padding: 48px 0 36px; }
	.reviews-overall, .reviews-breakdown { padding: 27px 25px; }
	.reviews-overall__value { font-size: 36px; line-height: 36px; letter-spacing: -1px; }
	.reviews-breakdown__title { font-size: 18px; line-height: 23px; }

	.reviews-list { padding: 24px 0 58px; }
	.reviews-card { padding: 24px 20px; }
	.reviews-card__author { flex-direction: column; align-items: flex-start; }

	.reviews-cta { padding-top: 48px; padding-bottom: 58px; }
	.reviews-cta .cta-band--stacked { flex-direction: column; align-items: flex-start; gap: 20px; padding: 36px 20px; }
	.reviews-cta .cta-band__btns { width: auto; }
	.reviews-cta .cta-band__btns .btn { width: auto; }
}