/* Customer Wall: photos and reviews, plus a share form that reuses the Forms look. */

.vsk-wall__list {
	--vsk-cols: 3;
	--vsk-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(var(--vsk-cols), minmax(0, 1fr));
	gap: var(--vsk-gap);
	align-items: start;
}

.vsk-customer-wall--masonry .vsk-wall__list {
	display: block;
	columns: var(--vsk-cols);
	column-gap: var(--vsk-gap);
}

.vsk-customer-wall--masonry .vsk-wall__card {
	break-inside: avoid;
	margin-bottom: var(--vsk-gap);
}

.vsk-wall__card {
	margin: 0;
	overflow: hidden;
	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);
}

.vsk-wall__photos {
	display: grid;
	gap: 2px;
	grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
	background: var(--vsk-surface-muted);
}

.vsk-wall__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 22rem;
	object-fit: cover;
}

.vsk-wall__body {
	display: grid;
	gap: var(--vsk-space-2);
	padding: var(--vsk-space-5);
}

.vsk-wall__stars {
	color: var(--vsk-color-highlight);
	font-size: 1.15rem;
	letter-spacing: 0.1em;
	line-height: 1;
}

.vsk-wall__text {
	margin: 0;
	line-height: 1.6;
}

.vsk-wall__text > :first-child {
	margin-top: 0;
}

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

.vsk-wall__who {
	margin: 0;
	font-size: 0.95rem;
}

.vsk-wall__name {
	color: var(--vsk-color-primary);
}

.vsk-wall__event {
	color: var(--vsk-color-secondary);
}

.vsk-wall__event::before {
	content: "· ";
}

.vsk-wall__empty {
	padding: var(--vsk-space-5);
	border: 1px dashed var(--vsk-border);
	border-radius: var(--vsk-radius);
	color: var(--vsk-color-secondary);
	text-align: center;
}

.vsk-wall__facebook-wrap {
	margin: var(--vsk-space-5) 0 0;
	text-align: center;
}

.vsk-wall__facebook {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: var(--vsk-radius-pill);
	background: var(--vsk-color-accent);
	color: var(--vsk-color-on-accent);
	font-family: var(--vsk-font-button);
	font-weight: var(--vsk-weight-button);
	text-decoration: none;
}

.vsk-wall__facebook:hover {
	filter: brightness(1.08);
}

/* Share form */
.vsk-wall__share {
	max-width: 40rem;
	margin: var(--vsk-space-6) auto 0;
	padding: var(--vsk-space-5);
	border: 1px solid var(--vsk-border);
	border-radius: var(--vsk-radius);
	background: var(--vsk-surface);
}

.vsk-wall__share-title {
	margin: 0;
	color: var(--vsk-color-primary);
	font-family: var(--vsk-font-heading);
	font-weight: var(--vsk-weight-heading);
	font-size: 1.5rem;
}

.vsk-wall__share-intro {
	margin: var(--vsk-space-2) 0 var(--vsk-space-4);
	color: var(--vsk-color-secondary);
	line-height: 1.55;
}

.vsk-wall__hint {
	margin: 0;
	color: var(--vsk-color-secondary);
	font-size: 0.85rem;
}

.vsk-wall__rate {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Five radios drawn as stars. Stored high to low and shown low to high, so a chosen star also fills the ones before it. */
.vsk-wall__rate-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.15rem;
}

.vsk-wall__rate-stars input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vsk-wall__rate-stars label {
	cursor: pointer;
	color: var(--vsk-border);
	font-size: 2rem;
	line-height: 1;
	transition: color var(--vsk-duration) var(--vsk-ease), transform var(--vsk-duration) var(--vsk-ease);
}

.vsk-wall__rate-stars label::before {
	content: "★";
}

.vsk-wall__rate-stars input:checked ~ label,
.vsk-wall__rate-stars label:hover,
.vsk-wall__rate-stars label:hover ~ label {
	color: var(--vsk-color-highlight);
}

.vsk-wall__rate-stars label:hover {
	transform: scale(1.15);
}

.vsk-wall__rate-stars input:focus-visible + label {
	outline: 2px solid var(--vsk-color-accent);
	outline-offset: 2px;
}

/* Presets */
.vsk-customer-wall.vsk-preset--theme .vsk-wall__card,
.vsk-customer-wall.vsk-preset--outline .vsk-wall__card {
	border: 1px solid var(--vsk-border);
}

.vsk-customer-wall.vsk-preset--elevated .vsk-wall__card {
	box-shadow: var(--vsk-shadow-sm);
}

.vsk-customer-wall.vsk-preset--tinted .vsk-wall__card {
	background: var(--vsk-surface-muted);
}

.vsk-preset--playful .vsk-wall__card,
.vsk-preset--playful .vsk-wall__share {
	border: 3px solid var(--vsk-color-primary);
	box-shadow: var(--vsk-shadow-sm);
}

.vsk-preset--playful .vsk-wall__card:nth-child(odd) {
	transform: rotate(-0.8deg);
}

.vsk-preset--playful .vsk-wall__card:nth-child(even) {
	transform: rotate(0.8deg);
}

@media (max-width: 1024px) {
	.vsk-wall__list {
		--vsk-cols: 2;
	}
}

@media (max-width: 640px) {
	.vsk-wall__list {
		--vsk-cols: 1;
	}
}