/* Alexander Rudolph Manager – horizontal auto-scroll slider */

/* Prevents the 100vw full-bleed trick below from introducing a horizontal
   scrollbar. Safe here — this stylesheet only loads on pages using
   [arm_slider]. */
body {
	overflow-x: hidden;
}

.arm-slider {
	position: relative;
	/* Full-bleed, same reasoning as .arm-hero — the slider should always
	   run edge-to-edge even if wrapped in a boxed container somewhere. */
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	overflow: hidden;
	padding: clamp(8px, 2vw, 16px) 0 clamp(48px, 6vw, 80px);
	font-family: "Jost", system-ui, sans-serif;
}
.arm-slide-track {
	display: flex;
	width: max-content;
	animation: arm-slide-left var(--arm-sdur, 46s) linear infinite;
}
@keyframes arm-slide-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.arm-slider:hover .arm-slide-track {
	animation-play-state: paused;
}
.arm-slide {
	flex: 0 0 auto;
	height: clamp(300px, 58vh, 540px);
	margin-right: 8px;
	position: relative;
	overflow: hidden;
	background: #f0f0f0;
	cursor: pointer;
}
.arm-slide img {
	height: 100%;
	width: auto;
	display: block;
	transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.arm-slide:hover img {
	transform: scale(1.04);
}
.arm-slide .arm-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 14px 12px;
	background: linear-gradient(to top, rgba(20, 20, 20, .6), transparent);
	color: #fff;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 300;
	opacity: 0;
	transition: opacity .35s ease;
}
.arm-slide:hover .arm-cap {
	opacity: 1;
}

.arm-slide-ph {
	width: clamp(360px, 46vw, 560px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.arm-ph-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}

@media (max-width: 680px) {
	.arm-slide {
		height: clamp(260px, 48vh, 420px);
	}
}