/**
 * Services layout — numbered service cards on bg2.
 * Typography via utility classes in markup (.fs-* / .fw-* / .lh-* / .text-*);
 * this file keeps layout, spacing and structural styles only.
 */

.flexible-section.services {
	background: var(--color-bg2);
}

.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12.4px, 0.613vw + 10.19px, 20px);
}

.svc-card {
	position: relative;
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: clamp(21.7px, 1.073vw + 17.84px, 35px) clamp(18.6px, 0.919vw + 15.29px, 30px);
}

.svc-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-navy), var(--color-gold2));
}

.svc-num {
	letter-spacing: 0.15em;
	margin-bottom: 10px;
}

.svc-title {
	margin-bottom: 8px;
}
.services.is-centered .section-ti, .services.is-centered .section-ey {
	text-align: center;
}
.services.is-centered .svc-grid-link {
	margin-block-start: clamp(30px,2vw, 45px);
}
/* Icon marker variant (phase-style cards) */
.svc-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(30px, 0.968vw + 26.52px, 45px);
	height: clamp(30px, 0.968vw + 26.52px, 45px);
	margin-bottom: clamp(12px, 0.516vw + 10.14px, 20px);
	border: 1px solid rgba(196, 154, 26, 0.28);
	border-radius: 9px;
	background: rgba(196, 154, 26, 0.12);
}

.svc-ic span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-gold2);
}

.svc-card-icon .svc-title {
	margin-bottom: 9px;
}

/* Link-card variant — the whole card is an anchor, flowing 4-up. */
.svc-grid-link {
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12.4px, 0.613vw + 10.19px, 20px);
}

/*
 * `.is-3up` — opt out of link mode's 4-column grid, keeping the row's authored
 * 3-up. Set via section_class on rows that existed as 3-up BEFORE their cards
 * were linked (Home row 3, Services rows 1-4), because services.php switches to
 * .svc-grid-link automatically as soon as any card carries a link. Without this
 * the homepage's clean 3x3 of 9 cards reflows to a ragged 4+4+1.
 *
 * The two media queries are NOT redundant: `.services.is-3up .svc-grid-link` is
 * (0,3,0) and would otherwise beat the (0,1,0) breakpoint rules below, pinning 3
 * columns all the way down to mobile.
 */
.services.is-3up .svc-grid-link { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
	.services.is-3up .svc-grid-link { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.services.is-3up .svc-grid-link { grid-template-columns: 1fr; }
}

.svc-card-link {
	display: block;
	text-decoration: none;
	padding: clamp(22px, 1.03vw + 18.3px, 37.5px) clamp(18.6px, 0.919vw + 15.29px, 30px);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.svc-card-link:hover,
.svc-card-link:focus-visible {
	border-color: var(--color-gold2);
	transform: translateY(-5px);
	box-shadow: 0 18px 34px -20px rgba(0, 0, 128, 0.42);
}

.svc-card-link .svc-num {
	margin-bottom: clamp(12px, 0.65vw + 9.7px, 20px);
}

.svc-card-link .svc-desc {
	margin-bottom: clamp(14px, 0.65vw + 11.7px, 22.5px);
}

.svc-go {
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.svc-grid { grid-template-columns: repeat(2, 1fr); }
	.svc-grid-link { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.svc-grid,
	.svc-grid-link { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.svc-card-link { transition: none; }
	.svc-card-link:hover,
	.svc-card-link:focus-visible { transform: none; box-shadow: none; }
}