/* ==========================================================================
   Probit LLC — Services Page & Single Service
   ========================================================================== */

.site-main--services {
	background: #f4f6f9;
}

/* Services archive page */
.services-page__hero {
	background: linear-gradient(180deg, #f4f7fb 0%, #f4f6f9 100%);
	padding-top: 48px;
	padding-bottom: 32px;
}

.services-page__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.services-page__breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
}

.services-page__breadcrumb a:hover {
	text-decoration: underline;
}

.services-page__breadcrumb-current {
	color: #718096;
	font-weight: 700;
}

.services-page__title {
	margin: 0 0 16px;
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.15;
	color: #0f1b2d;
}

.services-page__desc {
	margin: 0;
	max-width: none;
	width: 100%;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #4a5568;
}

.services-page__grid-section {
	padding-top: 8px;
	padding-bottom: 72px;
}

.services-page__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 28px;
}

.services-page__grid--placeholder {
	display: flex;
	justify-content: center;
}

.services-page__grid--placeholder .service-card {
	max-width: 460px;
	width: 100%;
}

/* Service cards — aligned with homepage services block */
.services-page__grid .service-card {
	height: 100%;
	min-height: 100%;
	padding: 25px;
}

.services-page__grid .service-card__icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
}

.services-page__grid .service-card:not(.service-card--placeholder):hover .service-card__icon {
	background: none;
	transform: none;
}

/* Single service */
.site-main--service-single {
	background: var(--color-white);
}

.service-single__hero {
	background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
	padding-bottom: 32px;
}

.service-single__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	font-size: 0.8125rem;
	color: #718096;
}

.service-single__breadcrumb a {
	color: #4a5568;
	text-decoration: none;
	transition: color 0.2s ease;
}

.service-single__breadcrumb a:hover {
	color: var(--color-primary);
}

.service-single__breadcrumb-current {
	color: #2d3748;
	font-weight: 600;
}

.service-single__hero-inner {
	display: flex;
	align-items: center;
	gap: 32px;
}

.service-single__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	border-radius: 16px;
	background: var(--color-white);
	box-shadow: 0 10px 32px rgba(15, 27, 45, 0.08);
	border: 1px solid #e8edf5;
}

.service-single__title {
	margin: 0 0 12px;
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	line-height: 1.2;
	color: #0f1b2d;
}

.service-single__body {
	padding-top: 8px;
	padding-bottom: 48px;
}

.service-single__content {
	max-width: 820px;
	font-size: 1.0625rem;
	line-height: 1.85;
	color: #4a5568;
}

.service-single__content p {
	margin: 0 0 1.25rem;
}

.service-single__content p:last-child {
	margin-bottom: 0;
}

.service-single__content ul,
.service-single__content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.4rem;
	list-style: revert;
}

.service-single__content ul {
	list-style-type: disc;
}

.service-single__content ol {
	list-style-type: decimal;
}

.service-single__content li {
	display: list-item;
	margin-bottom: 0.35rem;
}

.service-single__content strong {
	font-weight: 700;
	color: #2d3748;
}

.service-single__content em {
	font-style: italic;
}

.service-single__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.service-single__content blockquote {
	margin: 0 0 1.25rem;
	padding: 12px 16px;
	border-left: 3px solid var(--color-primary);
	background: #f7f9fc;
	color: #4a5568;
}

.service-single__related {
	background: #e8ebf0;
	padding-top: 36px;
	padding-bottom: 40px;
}

.service-single__related-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.service-single__related-title {
	margin: 0;
	font-size: 1.25rem;
	color: #0f1b2d;
}

.service-single__related-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.service-single__related-link:hover {
	gap: 8px;
}

.service-single__related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 20px;
}

.service-single__related-grid .service-card {
	height: 100%;
	min-height: 100%;
	padding: 10px;
}

@media (max-width: 1200px) {
	.services-page__grid,
	.service-single__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 768px) {
	.services-page__grid,
	.service-single__related-grid {
		grid-template-columns: 1fr;
	}

	.service-single__hero-inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.service-single__related-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.services-page__grid .service-card {
		height: 100%;
		min-height: 100%;
		padding: 10px;
	}
	.services-page__desc {
		font-size: 14px;
	}
	.service-card__desc {
		font-size: 14px;
	}
	.service-card__cta {
		font-size: 13px;
	}
	.service-single__title {
		font-size: 22px;
		padding-top: 10px;
	}
	.service-single__content {
		font-size: 14px;
	}
	.service-single__icon {
		width: 90px;
		height: 80px;
	}
}