/* Controls are siblings of the scrolling track so overflow cannot clip them. */
.services-section { position: relative; z-index: 1; }
.services-carousel { position: relative; overflow: visible; }
.services-carousel--ready .service-grid {
	display: grid;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--aditi-layout-gap, 5px)) / 4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.services-carousel--ready .service-grid::-webkit-scrollbar { display: none; }
.services-carousel .service-card { scroll-snap-align: start; }
.services-carousel__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--aditi-brand-orange);
	border-radius: 50%;
	background: var(--aditi-surface-primary);
	color: var(--aditi-brand-orange);
	box-shadow: 0 2px 10px rgb(var(--aditi-shadow-rgb) / .15);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.services-carousel__arrow[hidden] { display: none; }
.services-carousel__arrow--previous { left: 0; }
.services-carousel__arrow--next { right: 0; }
.services-carousel__arrow:focus-visible { outline: 3px solid var(--aditi-brand-orange); outline-offset: 3px; }
.services-carousel .service-card a:focus-visible { outline-offset: -3px; }
@media (max-width: 1050px) {
	.services-carousel--ready .service-grid { grid-auto-columns: calc((100% - var(--aditi-layout-gap, 5px)) / 2); }
}
@media (max-width: 520px) {
	.services-carousel--ready .service-grid { grid-auto-columns: 100%; }
}