/* ================================================================
   BR — Reviews Page
   ================================================================ */

.br-reviews-page__title {
	margin-bottom: var(--br-gap-xl);
}

/* Summary */
.br-rev-summary {
	display: flex;
	align-items: center;
	gap: var(--br-gap-xl);
	flex-wrap: wrap;
	margin-bottom: var(--br-gap-xl);
	padding: var(--br-gap-lg);
	background: var(--br-pine-mist);
	border-radius: var(--br-r-lg);
}

.br-rev-summary__score {
	display: flex;
	align-items: center;
	gap: var(--br-gap-md);
}

.br-rev-summary__avg {
	font-size: 48px;
	font-weight: 700;
	color: var(--br-pine);
}

.br-rev-summary__stars {
	color: var(--br-sun);
	font-size: 22px;
	letter-spacing: 2px;
	display: block;
}

.br-rev-summary__total {
	font-size: var(--br-text-sm);
	color: var(--br-ink-faded);
	display: block;
}

.br-rev-summary__sources {
	display: flex;
	gap: var(--br-gap-md);
	flex-wrap: wrap;
}

.br-rev-summary__source {
	padding: 6px 14px;
	background: var(--br-paper);
	border-radius: var(--br-r-pill);
	font-size: var(--br-text-sm);
	font-weight: 500;
}

/* Filters */
.br-rev-filters {
	display: flex;
	gap: var(--br-gap-sm);
	margin-bottom: var(--br-gap-xl);
	flex-wrap: wrap;
}

.br-rev-filters__btn {
	padding: 10px 20px;
	border: 1px solid var(--br-line);
	border-radius: var(--br-r-pill);
	font-size: 15px;
	font-weight: 600;
	transition: all var(--br-ease);
	color: var(--br-ink);
	background: var(--br-paper);
}

.br-rev-filters__btn:hover {
	border-color: var(--br-pine);
}

.br-rev-filters__btn.is-active {
	background: var(--br-pine);
	border-color: var(--br-pine);
	color: #fff;
}

/* External block */
.br-rev-external {
	margin-bottom: var(--br-gap-2xl);
}

.br-rev-external__head {
	display: flex;
	align-items: baseline;
	gap: var(--br-gap-md);
	margin-bottom: var(--br-gap-lg);
	flex-wrap: wrap;
}

.br-rev-external__meta {
	font-size: var(--br-text-sm);
	color: var(--br-ink-faded);
}

.br-rev-external__embed {
	margin-bottom: var(--br-gap-lg);
	border-radius: var(--br-r-lg);
	overflow: hidden;
}

.br-rev-external__screens {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--br-gap-md);
	margin-bottom: var(--br-gap-lg);
}

.br-rev-external__screen {
	border-radius: var(--br-r-md);
	overflow: hidden;
	border: 1px solid var(--br-line);
	transition: all var(--br-ease);
}

.br-rev-external__screen:hover {
	box-shadow: var(--br-shadow-soft);
	transform: scale(1.02);
}

.br-rev-external__screen img {
	width: 100%;
	height: auto;
}

.br-rev-external__link {
	color: var(--br-pine);
	font-weight: 600;
	font-size: 16px;
	transition: color var(--br-ease);
}

.br-rev-external__link:hover {
	color: var(--br-berry);
}

/* Screenshots */
.br-rev-screens {
	margin-bottom: var(--br-gap-2xl);
}

.br-rev-screens h2 {
	margin-bottom: var(--br-gap-lg);
}

.br-rev-screens__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--br-gap-md);
}

.br-rev-screens__item {
	border-radius: var(--br-r-md);
	overflow: hidden;
	border: 1px solid var(--br-line);
	transition: all var(--br-ease);
	cursor: pointer;
}

.br-rev-screens__item:hover {
	box-shadow: var(--br-shadow-soft);
	transform: scale(1.02);
}

.br-rev-screens__item img {
	width: 100%;
	height: auto;
}

/* Site reviews */
.br-rev-site {
	margin-bottom: var(--br-gap-2xl);
}

.br-rev-site h2 {
	margin-bottom: var(--br-gap-lg);
}

.br-rev-site__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--br-gap-lg);
}

.br-rev-site__product {
	display: block;
	font-size: var(--br-text-sm);
	color: var(--br-pine);
	font-weight: 500;
	margin-bottom: 6px;
	transition: color var(--br-ease);
}

.br-rev-site__product:hover {
	color: var(--br-berry);
}

@media (max-width: 991px) {
	.br-rev-site__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	.br-rev-site__grid { grid-template-columns: 1fr; }
}

/* CTA */
.br-rev-cta {
	margin-bottom: var(--br-gap-2xl);
}

.br-rev-cta__inner {
	background: var(--br-gradient);
	color: #fff;
	padding: var(--br-gap-xl);
	border-radius: var(--br-r-xl);
	text-align: center;
}

.br-rev-cta__inner h2 {
	margin-bottom: var(--br-gap-sm);
}

.br-rev-cta__inner p {
	opacity: .85;
	margin-bottom: var(--br-gap-lg);
	font-size: var(--br-text-md);
}