/**
 * Services Page Styles
 *
 * @package Cypro_Theme
 */

/* ── Services Main ── */
.services-main {
	background-color: var(--color-surface-white);
}


/* ── Service Category Blocks ── */
.service-category .category-header h2 {
	font-size: var(--font-size-h3);
	line-height: 1.2;
}

.service-category .category-header p {
	font-size: var(--font-size-body-sm);
	color: var(--color-neutral-dark);
	max-width: 640px;
}

/* ── Service Cards Grid ── */
.services-list .service-card {
	border: none;
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-8);
	background: var(--color-surface-white);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.services-list .service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.services-list .service-card .card-icon {
	width: 56px;
	height: 56px;
	margin-bottom: var(--spacing-5);
	color: var(--color-accent);
}

.services-list .service-card h3 {
	font-size: var(--font-size-body-lg);
	font-weight: 700;
	color: var(--color-primary-dark-1);
	margin-bottom: var(--spacing-3);
}

.services-list .service-card p {
	font-size: var(--font-size-body-ms);
	color: var(--color-text-body-muted);
	line-height: 1.7;
}

.services-list .service-card .card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: var(--font-size-body-xs);
	color: var(--color-accent);
	margin-top: var(--spacing-4);
	transition: gap var(--transition-fast);
}

.services-list .service-card .card-link:hover {
	gap: 10px;
}

/* ── Why Choose Section ── */
.why-choose {
	background-color: var(--color-surface-2);
}

.why-choose .section-title {
	font-size: var(--font-size-h2);
}

.why-item {
	background: var(--color-surface-white);
	border-radius: var(--border-radius-lg);
	border: none;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-normal);
	cursor: default;
}

.why-item:hover {
	box-shadow: var(--shadow-md);
}

.why-item h3 {
	font-size: var(--font-size-body-md);
}

.why-item p {
	color: var(--color-text-body-muted);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
	.services-list .grid.lg\:grid-cols-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.services-list .grid {
		grid-template-columns: 1fr;
	}

	.why-choose .grid {
		grid-template-columns: 1fr;
	}

	.service-category {
		margin-bottom: var(--spacing-8) !important;
		padding-bottom: var(--spacing-8) !important;
	}

	.services-list .service-card {
		padding: var(--spacing-6);
	}
}