/* ADSC homepage Services slider — 2026-09-27
   4 cards desktop, 3 small desktop, 2 tablet, exactly 1 on phones. No autoplay.
   Loaded on the front page by mu-plugins/adsc-header-lockup.php. */

.adsc-svs-section { --svs-gap: 24px; --svs-per: 4; }
@media (max-width: 1279.98px) { .adsc-svs-section { --svs-per: 3; } }
@media (max-width: 1023.98px) { .adsc-svs-section { --svs-per: 2; --svs-gap: 20px; } }
@media (max-width: 639.98px)  { .adsc-svs-section { --svs-per: 1; --svs-gap: 16px; } }

.adsc-svs-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}
.adsc-svs-headtext { max-width: 720px; }
html body .adsc-home .adsc-svs-head h2 { margin-bottom: .35em !important; }
.adsc-svs-intro { margin: 0; color: #424245; font-size: 17px; line-height: 1.5; }

.adsc-svs-arrows { display: flex; gap: 12px; flex: none; }
/* In the original #services section the arrows sit in a bar between the header and the cards. */
.adsc-svs-arrows--bar { justify-content: flex-end; margin: 4px 0 16px; }
.adsc-svs-arrows[hidden], .adsc-svs-dots[hidden] { display: none !important; }

.adsc-svs-btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid #172852;
	background: #fff;
	color: #172852;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.adsc-svs-btn:hover { background: #172852; color: #fff; }
.adsc-svs-btn[aria-disabled="true"] { opacity: .35; cursor: default; background: #fff; color: #172852; }
.adsc-svs-btn:focus-visible,
.adsc-svs-dot:focus-visible {
	outline: 3px solid #172852;
	outline-offset: 3px;
}

.adsc-svs { position: relative; }

.adsc-svs-track {
	list-style: none;
	margin: 0;
	/* room for card shadows and focus rings inside the scroll area */
	padding: 6px 2px 14px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--svs-per) - 1) * var(--svs-gap)) / var(--svs-per));
	gap: var(--svs-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.adsc-svs-track::-webkit-scrollbar { display: none; }

.adsc-svs-slide {
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	min-width: 0;
	display: flex;
}
.adsc-svs-slide::before, .adsc-svs-slide::marker { content: none; }

.adsc-svs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(23, 40, 82, .08), 0 10px 28px rgba(23, 40, 82, .08);
	transition: box-shadow .25s ease, transform .25s ease;
}
.adsc-svs-card:hover { box-shadow: 0 2px 6px rgba(23, 40, 82, .10), 0 16px 36px rgba(23, 40, 82, .14); }
.adsc-svs-card:focus-within { outline: 3px solid #172852; outline-offset: -3px; }

.adsc-svs-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f5f5f7;
	display: grid;
	place-items: center;
}
.adsc-svs-media img.adsc-svs-img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 22%;
	display: block;
}
/* Neutral brand tile for services without a genuine photo */
.adsc-svs-media.is-tile {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(122, 104, 55, .10), rgba(122, 104, 55, 0) 60%),
		linear-gradient(160deg, #f7f5ef 0%, #eef0f5 100%);
}
.adsc-svs-media .adsc-svs-icon {
	width: 56px;
	height: 56px;
	color: #172852;
}
.adsc-svs-media.is-tile::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 22%;
	width: 36px;
	height: 1.5px;
	transform: translateX(-50%);
	background: #b97c2c;
	opacity: .7;
}

.adsc-svs-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 22px;
	flex: 1;
}
html body .adsc-home h3.adsc-svs-title,
html body h3.adsc-svs-title {
	margin: 0 !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
	color: #1d1d1f !important;
	letter-spacing: -.01em;
}
.adsc-svs-desc {
	margin: 0;
	color: #424245;
	font-size: 15.5px;
	line-height: 1.5;
	flex: 1;
}
html body a.adsc-svs-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: 4px;
	font-weight: 600;
	font-size: 16px;
	color: #172852 !important;
	text-decoration: none;
}
html body a.adsc-svs-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html body a.adsc-svs-link:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; }
/* whole card clickable with a mouse; the link stays the single focus stop */
.adsc-svs-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }

.adsc-svs-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 14px;
}
.adsc-svs-dot {
	position: relative;
	width: 32px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 8px;
}
.adsc-svs-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: #80859a;
	transition: width .2s ease, background-color .2s ease, border-radius .2s ease;
}
.adsc-svs-dot:hover::before { background: #4d5366; }
.adsc-svs-dot[aria-current="true"]::before { width: 24px; border-radius: 5px; background: #172852; }

.adsc-svs-cta { margin-top: 40px; }

@media (max-width: 639.98px) {
	.adsc-svs-media { aspect-ratio: 16 / 10; }
	.adsc-svs-dots { gap: 2px; flex-wrap: wrap; }
	html body .adsc-svs-dot { width: 24px; min-width: 24px; }
	.adsc-svs-dot[aria-current="true"]::before { width: 18px; }
	.adsc-svs-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
	.adsc-svs-arrows { align-self: flex-end; }
	.adsc-svs-body { padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.adsc-svs-track { scroll-behavior: auto; }
	.adsc-svs-card, .adsc-svs-btn, .adsc-svs-dot::before { transition: none; }
}