/**
 * Vastraa — customer gallery page: the thumbnail grid and the popup's caption
 * and counter. The popup itself is the shared .vs-lightbox in components.css.
 */

.vs-feedback {
	padding-bottom: var(--vs-section);
}

.vs-feedback__intro {
	max-width: 720px;
	margin: 0 auto clamp(1.5rem, 1rem + 2vw, 3rem);
	text-align: center;
}

.vs-feedback__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.5rem, 0.25rem + 1vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vs-feedback__figure {
	margin: 0;
}

.vs-feedback__link {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--vs-radius);
	background: var(--vs-sand);
	cursor: zoom-in;
}

.vs-feedback__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--vs-ease);
}

.vs-feedback__link:hover .vs-feedback__img {
	transform: scale(1.04);
}

.vs-feedback__link:focus-visible {
	outline: 2px solid var(--vs-ink);
	outline-offset: 3px;
}

.vs-feedback__caption {
	margin-top: var(--vs-2);
	color: var(--vs-ink-70);
	font-size: var(--vs-fs-sm);
	text-align: center;
}

.vs-feedback__empty {
	color: var(--vs-ink-70);
	text-align: center;
}

.mt-0{
	margin-top: 0 !important;
	padding-bottom: 25px;
}

@media (max-width: 1024px) {
	.vs-feedback__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.vs-feedback__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vs-feedback__img {
		transition: none;
	}
}

/* Popup ------------------------------------------------------------------- */

.vs-lightbox--feedback {
	/* Pinch-zoom still works for reading screenshots; sideways swipes page. */
	touch-action: pan-y pinch-zoom;
}

.vs-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vs-3);
	max-width: 100%;
	margin: 0;
}

.vs-lightbox--feedback .vs-lightbox__img {
	max-height: calc(92vh - 3rem);
	-webkit-user-drag: none;
	user-select: none;
}

.vs-lightbox__caption {
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--vs-fs-sm);
	text-align: center;
}

.vs-lightbox__count {
	position: absolute;
	top: 32px;
	left: 24px;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--vs-fs-sm);
	letter-spacing: 0.08em;
}

/* On phones the arrows would sit on the photo — move them under it. */
@media (max-width: 640px) {
	.vs-lightbox--feedback {
		padding-bottom: 88px;
	}

	.vs-lightbox--feedback .vs-lightbox__nav {
		top: auto;
		bottom: 20px;
		transform: none;
	}

	.vs-lightbox--feedback .vs-lightbox__nav--prev {
		left: calc(50% - 60px);
	}

	.vs-lightbox--feedback .vs-lightbox__nav--next {
		right: calc(50% - 60px);
	}
}