/* ==========================================================================
   Services listing (/services/) — card index
   Loaded on the `services` post type archive. Markup: archive-services.php.

   Shares the design language of the service detail pages it links into
   (css/service-detail.css): Montserrat display, a monospace utility face for
   labels and figures, hairline rules, and red (#ef0d33) used structurally
   rather than decoratively. The cards carry line icons instead of photography,
   so the grid reads as one drawn set rather than seven unrelated images.
   ========================================================================== */

.svc_index {
	--svc-accent: #ef0d33;
	--svc-ink: #0f1115;
	--svc-body: #50565f;
	--svc-muted: #969ca6;
	--svc-line: #e4e7ec;
	--svc-line-strong: #d3d8df;
	--svc-paper: #ffffff;
	--svc-mist: #f5f6f8;
	--svc-radius: 12px;
	--svc-maxw: 1200px;
	--svc-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

	background: var(--svc-paper);
	color: var(--svc-body);
	font-family: montserrat_light, "Montserrat", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	padding-bottom: clamp(72px, 9vw, 124px);
}

.svc_index *,
.svc_index *::before,
.svc_index *::after { box-sizing: border-box; }

.svc_index__wrap {
	width: 100%;
	max-width: var(--svc-maxw);
	margin: 0 auto;
	padding: 0 clamp(20px, 5vw, 44px);
}

/* ---- Page header ---------------------------------------------------------
   One dark moment at the top, the same note the detail-page heroes open on.
   The dot field is a static echo of that hero's drawn grid — no canvas, no JS.
   ------------------------------------------------------------------------- */

.svc_index__head {
	position: relative;
	background-color: var(--svc-ink);
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 22px 22px;
	color: #fff;
	padding: clamp(88px, 12vw, 148px) 0 clamp(56px, 7vw, 88px);
	margin-bottom: clamp(52px, 6.5vw, 88px);
	overflow: hidden;
}
/* A single accent hairline seals the band to the grid below. */
.svc_index__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(120px, 18vw, 260px);
	height: 3px;
	background: var(--svc-accent);
}

.svc_index__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--svc-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 22px;
}
.svc_index__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--svc-accent);
	flex: 0 0 auto;
}

.svc_index__title {
	font-family: montserrat_semibold, "Montserrat", sans-serif;
	font-weight: 600;
	font-size: clamp(32px, 4.8vw, 58px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 22px;
}
.svc_index__title em {
	font-style: normal;
	color: var(--svc-accent);
}

.svc_index__lede {
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.68);
	margin: 0;
	max-width: 54ch;
}

/* The count is real data — how many lines the practice actually runs. */
.svc_index__count {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: clamp(32px, 4vw, 48px) 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-family: var(--svc-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}
.svc_index__count span {
	font-size: 20px;
	letter-spacing: 0.02em;
	color: var(--svc-accent);
}

/* ---- Card grid ----------------------------------------------------------- */

.svc_index__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(18px, 2.2vw, 26px);
}

.svc_card { display: flex; }

.svc_card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 34px 30px 26px;
	background: var(--svc-paper);
	border: 1px solid var(--svc-line);
	border-radius: var(--svc-radius);
	text-decoration: none;
	overflow: hidden;
	transition: border-color .28s ease, background .28s ease;
}

/* Signature: a rule drawn across the card's top edge on approach. Mechanical
   rather than lifted — the page answers, it doesn't float. */
.svc_card__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 0;
	background: var(--svc-accent);
	transition: width .38s cubic-bezier(.22, .61, .36, 1);
}

.svc_card__link:hover,
.svc_card__link:focus-visible {
	border-color: var(--svc-line-strong);
	background: var(--svc-mist);
}
.svc_card__link:hover::before,
.svc_card__link:focus-visible::before { width: 100%; }

.svc_card__link:focus-visible {
	outline: 2px solid var(--svc-accent);
	outline-offset: 3px;
}

/* ---- Icon ---------------------------------------------------------------- */

.svc_card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 26px;
	border: 1px solid var(--svc-line-strong);
	border-radius: var(--svc-radius);
	background: var(--svc-paper);
	color: var(--svc-accent);
	flex: 0 0 auto;
	transition: background .28s ease, border-color .28s ease, color .28s ease;
}
.svc_card__icon svg {
	width: 26px;
	height: 26px;
	display: block;
}
.svc_card__link:hover .svc_card__icon,
.svc_card__link:focus-visible .svc_card__icon {
	background: var(--svc-accent);
	border-color: var(--svc-accent);
	color: #fff;
}

/* ---- Copy ---------------------------------------------------------------- */

.svc_card__title {
	display: block;
	font-family: montserrat_semibold, "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--svc-ink);
	margin-bottom: 12px;
}

.svc_card__text {
	display: block;
	font-size: 14.5px;
	line-height: 1.66;
	color: var(--svc-body);
	margin-bottom: 26px;
}

/* ---- Card footer --------------------------------------------------------- */

.svc_card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--svc-line);
}

.svc_card__meta {
	font-family: var(--svc-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--svc-muted);
}

.svc_card__cue {
	display: inline-flex;
	color: var(--svc-line-strong);
	flex: 0 0 auto;
	transition: color .28s ease, transform .28s ease;
}
.svc_card__cue svg {
	width: 20px;
	height: 20px;
	display: block;
}
.svc_card__link:hover .svc_card__cue,
.svc_card__link:focus-visible .svc_card__cue {
	color: var(--svc-accent);
	transform: translateX(5px);
}

.svc_index__empty {
	font-size: 16px;
	color: var(--svc-muted);
	margin: 0;
}

/* ---- Narrow screens ------------------------------------------------------ */

@media only screen and (max-width: 640px) {
	.svc_index__grid { grid-template-columns: 1fr; }
	.svc_card__link { padding: 28px 24px 22px; }
	.svc_card__icon { width: 46px; height: 46px; margin-bottom: 22px; }
	.svc_card__icon svg { width: 23px; height: 23px; }
	.svc_index__title br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.svc_index *,
	.svc_index *::before,
	.svc_index *::after {
		transition-duration: .01ms !important;
	}
	.svc_card__link:hover .svc_card__cue,
	.svc_card__link:focus-visible .svc_card__cue { transform: none; }
}