/* Reviews carousel - element sc_reviews_carousel / shortcode [sc_reviews] */

.sc-reviews {
	--sc-review-star: #f5b301;
}

/* Impreza sets this globally, but the cards combine width:100% with padding, so do not
   depend on that reset being there */
.sc-reviews,
.sc-reviews *,
.sc-reviews *:before,
.sc-reviews *:after {
	box-sizing: border-box;
}

.sc-reviews .sc-reviews__list {
	margin: 0;
}

/* Fallback for when Owl is unavailable, see sc-reviews.js */
.sc-reviews__list:not(.owl-carousel) {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Owl floats its items, so cards never match heights. Flexing the stage fixes that.
   Scoped to .sc-reviews so the native Impreza carousels are untouched. */
.sc-reviews .owl-carousel .owl-stage {
	display: flex;
}

.sc-reviews .owl-carousel .owl-item {
	display: flex;
	float: none;
}

/* Fills the flexed .owl-item, which is what gives the cards a matching height */
.sc-reviews__item {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	padding: 1.5rem;
	border-radius: 10px;
	background: var(--color-content-bg-alt, #f7f7f7);
}

.sc-reviews__stars {
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	line-height: 1;
	letter-spacing: 2px;
	color: var(--sc-review-star);
}

.sc-reviews__stars i.is-empty {
	color: var(--color-content-border, #dddddd);
}

.sc-reviews__text {
	flex: 1 1 auto;
}

.sc-reviews__text p:last-child {
	margin-bottom: 0;
}

.sc-reviews__meta {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-content-border, #dddddd);
	font-size: 0.9rem;
	line-height: 1.5;
}

.sc-reviews__meta span {
	display: block;
}

.sc-reviews__name {
	font-weight: 600;
}

.sc-reviews__author,
.sc-reviews__location,
.sc-reviews__source,
.sc-reviews__date {
	color: var(--color-content-faded, #8b8b8b);
}

/* Owl navigation.
   The nav/dot markup differs per Owl version: the copy in this theme is 2.2.1 and renders
   <div class="owl-prev">, while the one Impreza ships is 2.3.4 and renders <button>. These
   selectors are class only so they cover both, with four classes so they still beat
   `.owl-carousel .owl-nav button.owl-prev` from the Owl stylesheet.
   Scoped to .sc-reviews, so the native Impreza carousels keep their own skin. */
.sc-reviews .owl-nav,
.sc-reviews .owl-dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

/* Owl marks these disabled when arrows or dots are turned off */
.sc-reviews .sc-reviews__list .owl-nav.disabled,
.sc-reviews .sc-reviews__list .owl-dots.disabled {
	display: none;
}

.sc-reviews .sc-reviews__list .owl-nav .owl-prev,
.sc-reviews .sc-reviews__list .owl-nav .owl-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid var(--color-content-border, #dddddd);
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sc-reviews .sc-reviews__list .owl-nav .owl-prev:hover,
.sc-reviews .sc-reviews__list .owl-nav .owl-next:hover {
	border-color: var(--color-content-primary, #333333);
	background: var(--color-content-primary, #333333);
	color: #ffffff;
}

.sc-reviews .sc-reviews__list .owl-nav .owl-prev.disabled,
.sc-reviews .sc-reviews__list .owl-nav .owl-next.disabled {
	opacity: 0.35;
	cursor: default;
}

.sc-reviews .sc-reviews__list .owl-dots .owl-dot {
	display: flex;
	align-items: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.sc-reviews .sc-reviews__list .owl-dots .owl-dot > span {
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--color-content-border, #dddddd);
	transition: background 0.2s ease;
}

.sc-reviews .sc-reviews__list .owl-dots .owl-dot.active > span {
	background: var(--color-content-primary, #333333);
}

/* With both arrows and dots enabled they should not sit a full gap apart */
.sc-reviews .owl-nav + .owl-dots {
	margin-top: 0.75rem;
}

@media (max-width: 600px) {
	.sc-reviews__item {
		padding: 1.25rem;
	}
}