/* ═══════════════════════════════════════════════════════════════
   VALLEY PHOTO STACK — Elementor Widget CSS
   Two modes: Stack (piled) and Spread (horizontal)
   ═══════════════════════════════════════════════════════════════ */

/* ── SHARED ── */
.vps-photo {
	transition: transform .4s cubic-bezier(.25, 1, .5, 1), filter .3s ease;
	cursor: pointer;
	transform: rotate(var(--vps-rot, 0deg)) translate(var(--vps-x, 0px), var(--vps-y, 0px));
}

/* Spread mode applies offset_y via transform translateY and offset_x via margin-left */
.vps-spread .vps-photo {
	transform: rotate(var(--vps-rot, 0deg)) translateY(var(--vps-y, 0px));
	margin-left: var(--vps-x, 0px);
}

.vps-spread .vps-photo + .vps-photo {
	margin-left: calc(var(--vps-spread-overlap, -30px) + var(--vps-x, 0px));
}

/* Column mode applies offset_x via transform translateX and offset_y via margin-top */
.vps-column .vps-photo {
	transform: rotate(var(--vps-rot, 0deg)) translateX(var(--vps-x, 0px));
	margin-top: var(--vps-y, 0px);
}

.vps-column .vps-photo + .vps-photo {
	margin-top: calc(var(--vps-col-gap, 16px) + var(--vps-y, 0px));
}

.vps-frame {
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, .06);
}

.vps-frame img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

/* Modern frame */
.vps-modern .vps-frame {
	background: #fff;
}

/* Vintage frame */
.vps-aged .vps-frame {
	background: #f5f0e0;
	border-color: rgba(160, 130, 70, .15);
}

.vps-aged .vps-frame img {
	filter: sepia(.12) contrast(.95);
}

/* ── STACK MODE (piled) ── */
.vps-stack {
	position: relative;
	width: 460px;
	height: 360px;
}

.vps-stack .vps-photo {
	position: absolute;
	width: 300px;
}

/* ── SPREAD MODE (horizontal) ── */
.vps-spread {
	position: relative;
	display: flex;
	align-items: center;
	height: 320px;
	overflow: visible;
}

.vps-spread .vps-photo {
	position: relative;
	flex-shrink: 0;
	width: 280px;
}

/* ── COLUMN MODE (vertical stack) ── */
.vps-column {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 320px;
	overflow: visible;
}

.vps-column .vps-photo {
	position: relative;
	flex-shrink: 0;
	width: 280px;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST BADGE OVERLAY — circular medallion that floats over the stack
   ═══════════════════════════════════════════════════════════════ */
.vps-badge {
	--vtb-size: 200px;
	--vtb-bg: #0f2c4d;
	--vtb-text: #fff;
	--vtb-ring: #c9a961;
	--vtb-rope-dark: #1a1a1a;
	--vtb-rope-light: #3d3d3d;
	--vtb-border-thickness: 8px;
	--vtb-ring-thickness: 2px;
	--vtb-ring-inset: 12px;
	--vtb-pos: translate(0, 0) rotate(0deg);
	--vtb-hover-intensity: 100;
	position: absolute;
	top: 0;
	left: 0;
	width: var(--vtb-size);
	height: var(--vtb-size);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vtb-bg);
	color: var(--vtb-text);
	text-align: center;
	transform: var(--vtb-pos);
	transform-origin: center;
	transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
}

/* Default: no pointer events so the badge doesn't block photo clicks below.
   When a hover effect is active we re-enable pointer events. */
.vps-badge:not([class*="vps-badge-hover-"]) {
	pointer-events: none;
}

.vps-badge .vtb-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12% 10%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* Rope: alternating dark/light segments */
.vps-badge.vtb-border-rope {
	background: repeating-conic-gradient(from 0deg, var(--vtb-rope-dark) 0deg 8deg, var(--vtb-rope-light) 8deg 16deg);
	padding: var(--vtb-border-thickness);
}

.vps-badge.vtb-border-rope .vtb-inner {
	background: var(--vtb-bg);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}

/* Notch: tighter dashes */
.vps-badge.vtb-border-notch {
	background: repeating-conic-gradient(from 0deg, var(--vtb-rope-dark) 0deg 4deg, var(--vtb-rope-light) 4deg 8deg);
	padding: var(--vtb-border-thickness);
}

.vps-badge.vtb-border-notch .vtb-inner {
	background: var(--vtb-bg);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}

/* Solid: plain dark ring */
.vps-badge.vtb-border-solid {
	background: var(--vtb-rope-dark);
	padding: var(--vtb-border-thickness);
}

.vps-badge.vtb-border-solid .vtb-inner {
	background: var(--vtb-bg);
}

/* None */
.vps-badge.vtb-border-none {
	background: var(--vtb-bg);
}

/* Inner accent ring */
.vps-badge.vtb-has-inner-ring .vtb-inner::before {
	content: "";
	position: absolute;
	top: var(--vtb-ring-inset);
	left: var(--vtb-ring-inset);
	right: var(--vtb-ring-inset);
	bottom: var(--vtb-ring-inset);
	border: var(--vtb-ring-thickness) solid var(--vtb-ring);
	border-radius: 50%;
	pointer-events: none;
}

/* Typography */
.vps-badge .vtb-top {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 48px;
	line-height: 1;
	margin-bottom: .05em;
}

.vps-badge .vtb-middle {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.1;
	text-transform: uppercase;
}

.vps-badge .vtb-bottom {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.1;
	text-transform: uppercase;
	margin-top: .6em;
	opacity: .9;
}

/* Spread + column modes: badge anchors to wrapper origin, not flex-flow */
.vps-spread .vps-badge, .vps-column .vps-badge {
	position: absolute;
}

/* ── BADGE HOVER EFFECTS ──
   All compose ON TOP of --vtb-pos so the badge keeps its translated/rotated
   resting position. --vtb-hover-intensity (default 100) scales the strength. */
[class*="vps-badge-hover-"] {
	cursor: pointer;
}

/* Lift — float upward */
.vps-badge-hover-lift:hover {
	transform: var(--vtb-pos) translateY(calc(-10px * ( var(--vtb-hover-intensity) / 100 )));
}

/* Grow — gentle scale */
.vps-badge-hover-grow:hover {
	transform: var(--vtb-pos) scale(calc(1 + .08 * ( var(--vtb-hover-intensity) / 100 )));
}

/* Pulse — scale + brightness boost */
.vps-badge-hover-pulse:hover {
	transform: var(--vtb-pos) scale(calc(1 + .06 * ( var(--vtb-hover-intensity) / 100 )));
	filter: brightness(calc(1 + .12 * ( var(--vtb-hover-intensity) / 100 )));
}

/* Wobble — quick rotation jitter */
@keyframes vps-badge-wobble {
	0% {
		transform: var(--vtb-pos) rotate(0deg);
	}
	
	20% {
		transform: var(--vtb-pos) rotate(calc(-4deg * ( var(--vtb-hover-intensity) / 100 )));
	}
	
	40% {
		transform: var(--vtb-pos) rotate(calc(3deg * ( var(--vtb-hover-intensity) / 100 )));
	}
	
	60% {
		transform: var(--vtb-pos) rotate(calc(-2deg * ( var(--vtb-hover-intensity) / 100 )));
	}
	
	80% {
		transform: var(--vtb-pos) rotate(calc(1deg * ( var(--vtb-hover-intensity) / 100 )));
	}
	
	100% {
		transform: var(--vtb-pos) rotate(0deg);
	}
}

.vps-badge-hover-wobble:hover {
	animation: vps-badge-wobble .6s ease-in-out;
}

/* Pop — scale up + small tilt */
.vps-badge-hover-pop:hover {
	transform: var(--vtb-pos) scale(calc(1 + .1 * ( var(--vtb-hover-intensity) / 100 ))) rotate(calc(-3deg * ( var(--vtb-hover-intensity) / 100 )));
}