/**
 * W48 PERF-css — shared hero image slider (services + portfolio).
 * BEM prefixes differ (.bhm-svc__* / .bhm-pf__*); anatomy is identical.
 * Desktop aspect-ratio overrides stay in page CSS media queries.
 */

.bhm-svc__slider-viewport,
.bhm-pf__slider-viewport {
	aspect-ratio: 361 / 300;
	overflow: hidden;
	width: 100%;
}

.bhm-svc__slider-track,
.bhm-pf__slider-track {
	display: flex;
	height: 100%;
	transition: transform 0.35s var(--bhm-ease, ease);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.bhm-svc__slider-track,
	.bhm-pf__slider-track {
		transition: none;
	}
}

.bhm-svc__slide,
.bhm-pf__slide {
	flex: 0 0 100%;
	margin: 0;
	height: 100%;
}

.bhm-svc__slide img,
.bhm-pf__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero slider nav — Figma portfolio ImageContainer 1:2585 (24×24 edge chevrons, no plate) */
.bhm-svc__slider-nav,
.bhm-pf__slider-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transform: translateY(-50%);
}

.bhm-svc__slider-nav img,
.bhm-pf__slider-nav img {
	display: block;
	width: 24px;
	height: 24px;
}

.bhm-svc__slider-nav--prev,
.bhm-pf__slider-nav--prev {
	left: 0;
}

.bhm-svc__slider-nav--next,
.bhm-pf__slider-nav--next {
	right: 0;
}

.bhm-svc__slider-dots,
.bhm-pf__slider-dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 2;
	display: flex;
	gap: 6px;
	transform: translateX(-50%);
}

.bhm-svc__slider-dot,
.bhm-pf__slider-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

.bhm-svc__slider-dot.is-active,
.bhm-pf__slider-dot.is-active {
	width: 24px;
	background: rgba(7, 100, 253, 0.6);
}