/* Social Proof: testimonials, logo bar and numbers. */

.vsk-social-proof__grid {
	--vsk-columns: 3;
	--vsk-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(var(--vsk-columns), minmax(0, 1fr));
	gap: var(--vsk-gap);
}

.vsk-sp-card {
	position: relative;
	margin: 0;
	padding: var(--vsk-space-5);
	border-radius: var(--vsk-radius);
	background: var(--vsk-surface);
	transition: transform var(--vsk-duration) var(--vsk-ease), box-shadow var(--vsk-duration) var(--vsk-ease), border-color var(--vsk-duration) var(--vsk-ease), background-color var(--vsk-duration) var(--vsk-ease);
}

/* Testimonials. */
.vsk-quote {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--vsk-space-4);
}

.vsk-quote__rating {
	display: flex;
	gap: 2px;
	color: var(--vsk-color-accent);
}

.vsk-quote__star {
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentcolor;
	opacity: 0.22;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3 6.1 20.6l1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vsk-quote__star.is-on {
	opacity: 1;
}

.vsk-quote__text {
	flex: 1;
	font-style: normal;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-heading);
	font-size: 1.125rem;
	line-height: 1.55;
}

.vsk-quote__text > :last-child {
	margin-bottom: 0;
}

.vsk-quote__author {
	font-style: normal;
	display: flex;
	align-items: center;
	gap: var(--vsk-space-3);
}

.vsk .vsk-quote__avatar {
	flex: none;
	width: 3rem;
	height: 3rem;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
}

.vsk-quote__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vsk-quote__name {
	color: var(--vsk-color-primary);
	font-weight: 650;
	line-height: 1.3;
}

.vsk-quote__role {
	color: var(--vsk-color-secondary);
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Logo bar. */
.vsk-social-proof--logos .vsk-social-proof__grid {
	--vsk-columns: 5;
	align-items: center;
}

.vsk-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vsk-space-3);
	border-radius: var(--vsk-radius-sm);
	transition: opacity var(--vsk-duration) var(--vsk-ease), filter var(--vsk-duration) var(--vsk-ease);
}

.vsk .vsk-logo__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 2.5rem;
	object-fit: contain;
}

.vsk-social-proof--gray .vsk-logo {
	filter: grayscale(1);
	opacity: 0.6;
}

.vsk-social-proof--gray .vsk-logo:hover {
	filter: none;
	opacity: 1;
}

/* Numbers. */
.vsk-social-proof--stats .vsk-social-proof__grid {
	--vsk-columns: 4;
}

.vsk-stat {
	display: flex;
	flex-direction: column;
	gap: var(--vsk-space-2);
	text-align: center;
}

.vsk-stat__value {
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-heading);
	font-weight: var(--vsk-weight-heading);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.vsk-stat__label {
	color: var(--vsk-color-secondary);
	font-size: 0.95rem;
	line-height: 1.4;
}

/* Presets. Quotes and numbers sit on cards; "theme" drops the card entirely. */
.vsk-social-proof.vsk-preset--theme:not(.vsk-social-proof--logos) .vsk-sp-card {
	padding-inline: 0;
	background: transparent;
}

.vsk-social-proof.vsk-preset--outline .vsk-sp-card {
	border: 1px solid var(--vsk-border);
}

.vsk-social-proof.vsk-preset--elevated .vsk-sp-card {
	box-shadow: var(--vsk-shadow-sm);
}

.vsk-social-proof.vsk-preset--elevated .vsk-sp-card:hover {
	box-shadow: var(--vsk-shadow-md);
	transform: translateY(-3px);
}

.vsk-social-proof.vsk-preset--tinted .vsk-sp-card {
	background: var(--vsk-surface-muted);
}

.vsk-social-proof.vsk-preset--tinted .vsk-logo {
	background: var(--vsk-surface-muted);
}

/* A logo with no image shows the name as text. */
.vsk-logo__name {
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-heading);
	font-weight: var(--vsk-weight-heading);
	font-size: 1.15rem;
	line-height: 1.25;
	text-align: center;
}