/**
 * Expertise Page Styles
 *
 * @package Cypro_Theme
 */

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


/* ── Team Section ── */
.team-section .section-title {
	font-size: var(--font-size-h2);
}

.team-card {
	padding: var(--spacing-6);
	border-radius: var(--border-radius-lg);
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.team-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.team-card img {
	border: 3px solid var(--color-surface-medium-1);
	transition: border-color var(--transition-normal);
}

.team-card:hover img {
	border-color: var(--color-accent);
}

.team-card h3 {
	font-size: var(--font-size-body-md);
	margin-top: var(--spacing-3);
}

.team-card p {
	margin-top: var(--spacing-1);
}

/* ── Certifications Section ── */
.certifications-section {
	background-color: var(--color-surface-2);
}

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

.cert-badge {
	min-width: 120px;
	padding: var(--spacing-4);
	border-radius: var(--border-radius-md);
	transition: transform var(--transition-normal);
}

.cert-badge:hover {
	transform: scale(1.05);
}

.cert-badge img {
	filter: grayscale(0.3);
	transition: filter var(--transition-normal);
}

.cert-badge:hover img {
	filter: grayscale(0);
}

/* ── Sectors Section ── */
.sectors-list {
	background-color: var(--color-surface-white);
}

.sectors-list h2 {
	line-height: 1.2;
}

.sectors-list .bg-surface-2 {
	transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-left-color var(--transition-normal);
}

.sectors-list .bg-surface-2:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow-md);
	border-left-color: var(--color-accent-hover);
}

/* ── Partners Section ── */
.partners-section {
	background-color: var(--color-surface-2);
}

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

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

	.sectors-list .grid.lg\:grid-cols-2 {
		grid-template-columns: 1fr;
		gap: var(--spacing-8);
	}
}

@media (max-width: 767px) {
	.team-section .grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-5);
	}

	.team-card img {
		width: 120px;
		height: 120px;
	}

	.sectors-list .grid.md\:grid-cols-2 {
		grid-template-columns: 1fr;
	}

	.cert-badge {
		min-width: 100px;
	}
}

@media (max-width: 480px) {
	.team-section .grid {
		grid-template-columns: 1fr;
	}
}