/*
 * TradeKit Reviews block styles.
 */

.tk-reviews {
	--tk-reviews-bg: var(--wp--preset--color--light);
	--tk-reviews-heading: var(--wp--preset--color--dark);
	--tk-reviews-body: var(--wp--preset--color--neutral-600);
	--tk-reviews-accent: var(--wp--preset--color--accent);
	--tk-reviews-card-bg: #fff;
	--tk-reviews-card-text: var(--wp--preset--color--dark);
	--tk-reviews-quote-mark: color-mix(in srgb, var(--tk-reviews-accent) 70%, #fff 30%);
	--tk-reviews-overlay: #0f172a;
	--tk-reviews-overlay-opacity: 0.52;
	--tk-reviews-radius: var(--tk-radius-default);
	--tk-features-carousel-arrow-color: var(--tk-reviews-heading);
	--tk-features-carousel-arrow-bg: color-mix(in srgb, var(--tk-reviews-card-bg) 90%, transparent);
	--tk-features-carousel-arrow-border: color-mix(in srgb, var(--tk-reviews-heading) 20%, transparent);
	--tk-features-carousel-dot-color: color-mix(in srgb, var(--tk-reviews-heading) 26%, transparent);
	--tk-features-carousel-dot-active-color: var(--tk-reviews-accent);
	--tk-features-per-view: 1;
	--tk-reviews-gap: clamp(14px, 1.8vw, 24px);
	background: var(--tk-reviews-bg);
	color: var(--tk-reviews-heading);
}

.wp-block-tradekit-reviews,
.tk-reviews {
	max-inline-size: 100%;
	width: 100%;
}

.wp-block-tradekit-reviews.alignfull,
.tk-reviews.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: none;
	width: auto;
}

.tk-reviews .tk-section-block__background-overlay {
	background-color: var(--tk-reviews-overlay);
	opacity: var(--tk-reviews-overlay-opacity);
}

.tk-reviews :where(.tk-section-intro__eyebrow) {
	--tk-section-accent: var(--tk-reviews-accent);
}

.tk-reviews :where(.tk-section-intro__headline) {
	--tk-section-heading: var(--tk-reviews-heading);
}

.tk-reviews :where(.tk-section-intro__copy) {
	--tk-section-body: var(--tk-reviews-body);
}

.tk-reviews__grid {
	display: grid;
	gap: var(--tk-reviews-gap);
}

.tk-reviews--columns-2 .tk-reviews__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tk-reviews--columns-3 .tk-reviews__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tk-reviews--columns-4 .tk-reviews__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tk-reviews__item {
	background: var(--tk-reviews-card-bg);
	border: 1px solid color-mix(in srgb, var(--tk-reviews-heading) 12%, transparent);
	border-radius: var(--tk-reviews-radius);
	display: grid;
	gap: 12px;
	padding: clamp(16px, 2vw, 24px);
}

.tk-reviews--card-outline-none .tk-reviews__item {
	border: 0;
}

.tk-reviews__quote-mark {
	color: var(--tk-reviews-quote-mark);
	font-size: clamp(1.8rem, 2.5vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
}

.tk-reviews__rating {
	display: flex;
	gap: 4px;
}

.tk-reviews__star {
	color: color-mix(in srgb, var(--tk-reviews-heading) 20%, transparent);
	font-size: 0.95rem;
	line-height: 1;
}

.tk-reviews__star.is-filled {
	color: var(--tk-reviews-accent);
}

.tk-reviews__quote {
	color: var(--tk-reviews-card-text);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.tk-reviews__quote p {
	margin: 0;
}

.tk-reviews__author {
	align-items: center;
	display: flex;
	gap: 10px;
}

.tk-reviews__avatar {
	border-radius: 999px;
	display: inline-flex;
	height: 2.7rem;
	overflow: hidden;
	width: 2.7rem;
}

.tk-reviews__avatar-image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.tk-reviews__author-meta {
	display: grid;
	gap: 2px;
}

.tk-reviews__name {
	color: var(--tk-reviews-card-text);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.tk-reviews__meta {
	color: color-mix(in srgb, var(--tk-reviews-card-text) 70%, transparent);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.tk-reviews--layout-compact .tk-reviews__item {
	gap: 8px;
	padding: clamp(12px, 1.6vw, 18px);
}

.tk-reviews--surface-dark {
	--tk-reviews-bg: var(--wp--preset--color--dark);
	--tk-reviews-heading: var(--wp--preset--color--light);
	--tk-reviews-body: var(--wp--preset--color--neutral-100);
	--tk-reviews-card-bg: color-mix(in srgb, var(--wp--preset--color--dark) 80%, #1e293b 20%);
	--tk-reviews-card-text: var(--wp--preset--color--light);
}

.tk-reviews--surface-brand {
	--tk-reviews-bg: var(--wp--preset--color--primary);
	--tk-reviews-heading: var(--wp--preset--color--light);
	--tk-reviews-body: var(--wp--preset--color--neutral-100);
	--tk-reviews-accent: var(--wp--preset--color--light);
	--tk-reviews-card-bg: color-mix(in srgb, var(--wp--preset--color--light) 94%, var(--wp--preset--color--primary) 6%);
	--tk-reviews-card-text: var(--wp--preset--color--dark);
}

.tk-reviews--geometry-clean {
	--tk-reviews-radius: var(--tk-radius-clean);
}

.tk-reviews--geometry-soft {
	--tk-reviews-radius: var(--tk-radius-soft);
}

.tk-reviews--geometry-cut {
	--tk-reviews-radius: var(--tk-radius-cut);
}

.tk-reviews--geometry-cut .tk-reviews__item {
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.tk-reviews--intro-center .tk-section-intro {
	justify-items: center;
	margin-inline: auto;
	text-align: center;
}

.tk-reviews--carousel-active .tk-features__carousel {
	padding-inline: clamp(52px, 5.5vw, 76px);
	position: relative;
}

.tk-reviews--carousel-active .tk-features__viewport {
	overflow: hidden;
	width: 100%;
}

.tk-reviews--carousel-active .tk-features__items--carousel {
	display: flex;
	gap: var(--tk-reviews-gap);
	padding: 4px 0;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.tk-reviews--carousel-active .tk-features__slide {
	flex: 0 0 calc((100% - (var(--tk-reviews-gap) * (var(--tk-features-per-view) - 1))) / var(--tk-features-per-view));
	max-width: calc((100% - (var(--tk-reviews-gap) * (var(--tk-features-per-view) - 1))) / var(--tk-features-per-view));
}

.tk-reviews .tk-features__carousel-arrow {
	align-items: center;
	background: var(--tk-features-carousel-arrow-bg);
	border: 1px solid var(--tk-features-carousel-arrow-border);
	border-radius: 999px;
	color: var(--tk-features-carousel-arrow-color);
	display: inline-flex;
	height: 2.6rem;
	justify-content: center;
	width: 2.6rem;
}

.tk-reviews .tk-features__carousel-dots {
	display: flex;
	gap: 8px;
}

.tk-reviews .tk-features__carousel-dot {
	background: var(--tk-features-carousel-dot-color);
	border: 0;
	border-radius: 999px;
	height: 8px;
	padding: 0;
	width: 8px;
}

.tk-reviews .tk-features__carousel-dot.is-active {
	background: var(--tk-features-carousel-dot-active-color);
}

@media (max-width: 1023px) {

	.tk-reviews--columns-4 .tk-reviews__grid,
	.tk-reviews--columns-3 .tk-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {

	.tk-reviews__grid,
	.tk-reviews--columns-2 .tk-reviews__grid,
	.tk-reviews--columns-3 .tk-reviews__grid,
	.tk-reviews--columns-4 .tk-reviews__grid {
		grid-template-columns: 1fr;
	}
}