/**
 * Services Hub Pages
 * Shared styles for /services/ and /commercial-services/
 */

/* Hero Section */
.services-hub-hero {
	padding-bottom: 2.5rem;
}

.services-hub-hero h1 {
	margin-bottom: 0.75rem;
}

.services-hub-hero .page-hero-subtitle {
	max-width: 540px;
	margin: 0 auto 1.5rem;
}

.services-hub-hero .wp-block-buttons {
	margin-bottom: 1.5rem;
}

.services-hub-hero .trust-items {
	justify-content: center;
	gap: 1rem 1.5rem;
	font-size: 0.875rem;
}

.services-hub-hero .trust-icon {
	width: 16px;
	height: 16px;
}

/* Hero Image Section */
.services-hub-image {
	padding: 0 0 2.5rem;
	max-width: 900px;
	margin: 0 auto;
}

.services-hub-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Commercial Proof Signals */
.commercial-proof {
	padding: 0 0 2.5rem;
	text-align: center;
}

.commercial-proof h2 {
	font-size: 1.5rem;
	margin-bottom: 1.25rem;
}

.commercial-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.commercial-tag {
	display: inline-block;
	padding: 0.375rem 1rem;
	background: var(--wp--preset--color--neutral, #f5f5f5);
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.commercial-capabilities {
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
}

.commercial-capabilities .check-item {
	transition: none;
	align-items: center;
}

.commercial-capabilities .check-item:hover {
	box-shadow: none;
}

.commercial-capabilities .check-content {
	padding-top: 0;
}

/* Services Grid Section */
.services-hub-grid {
	background: var(--wp--preset--color--neutral);
	padding: var(--section-padding) 0;
	margin-top: 0;
}

.services-hub-grid h2 {
	text-align: center;
	margin-bottom: var(--section-header-spacing);
}

.services-hub-grid .card-grid {
	max-width: 1000px;
	margin: 0 auto;
}

.services-hub-grid .feature-card {
	text-align: center;
}

.services-hub-grid .feature-icon {
	margin: 0 auto 1rem;
}

.services-hub-grid .feature-desc {
	flex: 1;
}

/* How It Works Section */
.services-hub-how-it-works {
	padding: var(--section-padding) 0 0;
}

.services-hub-how-it-works h2 {
	margin-bottom: 0.75rem;
}

.services-hub-how-it-works .section-intro {
	margin-bottom: var(--section-header-spacing);
}

/* Related/Cross-Link Section */
.services-hub-related {
	padding: var(--section-padding) 0 0;
}

.services-hub-related h2 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--contrast);
}

.services-hub-related > p {
	margin-bottom: 1rem;
	color: var(--wp--preset--color--contrast-alt, #6b7280);
}

.services-hub-related .link-list {
	margin: 0;
}

.services-hub-related .link-list-item {
	margin: 0;
}

.services-hub-related .link-list-item a {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.services-hub-related .link-list-item a:hover {
	opacity: 0.8;
}

.services-hub-related .link-list-item a::after {
	display: none;
}

/* Mobile */
@media (max-width: 767px) {
	.services-hub-hero {
		padding-bottom: 2rem;
	}

	.services-hub-hero .page-hero-subtitle {
		margin-bottom: 1.25rem;
	}

	.services-hub-hero .wp-block-buttons {
		margin-bottom: 1.25rem;
	}

	.services-hub-hero .trust-items {
		gap: 0.5rem;
	}

	.services-hub-image {
		padding: 0 0 2rem;
	}

	.commercial-proof {
		padding: 0 0 2rem;
	}

	.commercial-proof h2 {
		font-size: 1.25rem;
	}

	.commercial-tag {
		font-size: 0.8125rem;
		padding: 0.3125rem 0.75rem;
	}

	.services-hub-grid {
		padding: 2rem 0;
	}

	.services-hub-grid h2 {
		margin-bottom: 1.5rem;
	}

	.services-hub-how-it-works {
		padding: 2rem 0 0;
	}

	.services-hub-related {
		padding: 2rem 0 0;
		text-align: center;
	}

	.services-hub-related .link-list-item a {
		justify-content: center;
	}
}

/* Sub-service links */
.feature-sublinks {
	position: relative;
	z-index: 1;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--contrast-alt);
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border, #e5e5e5);
}

.feature-sublinks a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast);
}

.feature-sublinks a:hover {
	color: var(--wp--preset--color--primary);
}

.feature-sublinks span {
	margin: 0 0.375rem;
	opacity: 0.5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.services-hub-grid .feature-card {
		transition: none;
	}
}