/*
 * Services: card grid, single layout with sidebar + help box, and the
 * carousel shell used by the services widget.
 */

/* ------------------------------------------------------------ card grid */

.asli-card-grid {
	display: grid;
	gap: 3.5rem var(--asli-space-lg);
	align-items: start;
}

.asli-card-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.asli-card-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.asli-card-grid--3,
	.asli-card-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.asli-card-grid--3,
	.asli-card-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------- single */

.asli-service-single__grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--asli-space-2xl);
	align-items: start;
}

@media (max-width: 1024px) {
	.asli-service-single__grid {
		grid-template-columns: 1fr;
	}

	.asli-service-sidebar {
		order: 2;
	}
}

.asli-service-single__image {
	width: 100%;
	border-radius: var(--asli-radius-card);
	margin-block-end: var(--asli-space-lg);
}

/* -------------------------------------------------------------- sidebar */

.asli-service-sidebar {
	display: grid;
	gap: var(--asli-space-lg);
	position: sticky;
	top: var(--asli-space-lg);
}

.asli-service-sidebar__nav {
	background: var(--asli-surface-alt);
	border-radius: var(--asli-radius-box);
	padding: var(--asli-space-md);
}

.asli-service-sidebar__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.asli-service-sidebar__nav a {
	display: flex;
	align-items: center;
	gap: var(--asli-space-sm);
	padding: 0.7rem var(--asli-space-md);
	border-radius: var(--asli-radius-tile);
	color: var(--asli-ink);
	font-weight: var(--asli-weight-medium);
}

.asli-service-sidebar__nav a .asli-icon {
	color: var(--asli-blue);
}

.asli-service-sidebar__nav a:hover {
	background: var(--asli-surface);
	color: var(--asli-blue);
}

.asli-service-sidebar__nav .is-current a {
	background: var(--asli-blue);
	color: var(--asli-text-on-dark);
}

.asli-service-sidebar__nav .is-current a .asli-icon {
	color: var(--asli-yellow);
}

/* ------------------------------------------------------------- help box */

.asli-service-sidebar__help {
	background: var(--asli-surface-alt);
	border-radius: var(--asli-radius-box);
	padding: var(--asli-space-xl);
	text-align: center;
}

.asli-service-sidebar__help .asli-badge {
	margin-block-end: var(--asli-space-sm);
}

.asli-service-sidebar__help-title {
	margin: 0 0 var(--asli-space-2xs);
	font-family: var(--asli-font-heading);
	font-weight: var(--asli-weight-heading);
	color: var(--asli-ink);
}

.asli-service-sidebar__help-phone {
	font-family: var(--asli-font-heading);
	font-size: var(--asli-text-h3);
	font-weight: var(--asli-weight-heading-bold);
}

/* ------------------------------------------------------------- carousel */

.asli-carousel {
	position: relative;
}

.asli-carousel__track {
	--asli-carousel-gap: 1.875rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--asli-carousel-gap)) / 3);
	gap: 3.5rem var(--asli-carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block-end: var(--asli-space-xs);
}

.asli-carousel__track::-webkit-scrollbar {
	display: none;
}

.asli-carousel__track > * {
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.asli-carousel__track {
		grid-auto-columns: calc((100% - var(--asli-carousel-gap)) / 2);
	}
}

@media (max-width: 767px) {
	.asli-carousel__track {
		grid-auto-columns: 92%;
	}
}

.asli-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--asli-space-xs);
	margin-block-start: var(--asli-space-lg);
}

.asli-carousel__dot {
	width: 24px;
	height: 24px;
	border-radius: var(--asli-radius-pill);
	border: 0;
	padding: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.asli-carousel__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: var(--asli-radius-pill);
	background: var(--asli-border);
	transition: background-color var(--asli-duration) var(--asli-ease), width var(--asli-duration) var(--asli-ease);
}

.asli-carousel__dot.is-active::before {
	background: var(--asli-blue);
	width: 22px;
}