/* ============================================================
   Valentine-Team — full-width scrolling team carousel
   Layout widths + the animation shift are set from JS; this
   file only styles the pieces. Colours borrow the theme tokens
   with sensible fallbacks so it also works standalone.
   ============================================================ */

.vt-team {
	position: relative;
}

.vt-team-head {
	max-width: 760px;
	margin: 0 auto var(--vt-space-above, 32px);
	padding: 0 24px;
	text-align: center;
}

.vt-team-intro {
	margin-top: 14px;
	color: var(--clr-text-muted, #6B6560);
	line-height: 1.7;
}

.vt-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--vt-bg, var(--clr-bg-alt, #F3EFE9));
	margin-bottom: var(--vt-space-below, 0);
}

/* Break out of a constrained container to the full viewport width. */
.vt-carousel--fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.vt-track {
	display: flex;
	width: max-content;
	will-change: transform;
	/* Duration is set inline by JS; --vt-shift is the distance of one full set. */
	animation: vt-scroll linear infinite;
}

.vt-slide {
	flex: 0 0 auto;
	height: var(--vt-height, 340px);
	/* Width + right margin (the gap) are applied inline by JS. */
	overflow: hidden;
	background: var(--clr-border, #E3DDD5);
}

.vt-slide .vt-img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: cover;
	object-position: center top;
}

/* ---- Border (combines with any frame) ---- */
.vt-has-border .vt-img {
	border: var(--vt-border-width, 0) solid var(--vt-border-color, #000);
}

/* ---- Picture-style presets ---- */

/* Rounded box */
.vt-frame-rounded .vt-slide { background: transparent; }
.vt-frame-rounded .vt-img { border-radius: 14px; }

/* Circle — crops to a centred square so it stays a true circle */
.vt-frame-circle .vt-slide {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vt-frame-circle .vt-img {
	height: 100%;
	width: auto;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	border-radius: 50%;
}

/* Polaroid — white frame with a deeper base and a soft shadow */
.vt-carousel.vt-frame-polaroid { padding: 26px 0; }
.vt-frame-polaroid .vt-slide {
	background: #fff;
	padding: 10px 10px 30px;
	overflow: visible;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Film strip — dark frame with sprocket-hole perforations */
.vt-frame-film .vt-slide {
	position: relative;
	background: #141414;
	padding: 16px 6px;
}
.vt-frame-film .vt-img { border-radius: 2px; }
.vt-frame-film .vt-slide::before,
.vt-frame-film .vt-slide::after {
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	height: 6px;
	background-image: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 14px);
}
.vt-frame-film .vt-slide::before { top: 5px; }
.vt-frame-film .vt-slide::after  { bottom: 5px; }

@keyframes vt-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--vt-shift, 0px))); }
}

/* Respect users who ask for less motion — show a static row. */
@media (prefers-reduced-motion: reduce) {
	.vt-track { animation: none; }
}