/* ========================================
   QLS Team Grid
   ======================================== */
.qls-team {
	display: grid;
	grid-template-columns: repeat(var(--qls-team-cols, 4), 1fr);
	gap: 20px;
}

.qls-team__member {
	background: #fff;
	border: 1px solid rgba(0, 27, 51, 0.06);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.qls-team__member:hover {
	box-shadow: 0 8px 28px rgba(0, 27, 51, 0.08);
	transform: translateY(-2px);
}

/* Photo */
.qls-team__photo {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #d4e5f7;
}

.qls-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.qls-team__member:hover .qls-team__photo img {
	transform: scale(1.03);
}

/* Empty photo — initial fallback */
.qls-team__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.qls-team__photo--empty span {
	font-size: 2rem;
	font-weight: 700;
	color: #204d84;
	opacity: 0.4;
}

/* Info */
.qls-team__info {
	padding: 14px 16px 16px;
}

/* Name row with LinkedIn */
.qls-team__name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.qls-team__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: #0a0f1a;
	margin: 0;
	line-height: 1.3;
}

.qls-team__linkedin {
	color: rgba(0, 27, 51, 0.25);
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.qls-team__linkedin:hover {
	color: #0078ff;
}

.qls-team__title {
	font-size: 0.75rem;
	color: #204d84;
	margin: 2px 0 0;
	font-weight: 500;
}

/* Contact links */
.qls-team__contact {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid rgba(0, 27, 51, 0.06);
}

.qls-team__link {
	font-size: 0.6875rem;
	color: #64748b;
	text-decoration: none;
	transition: color 0.2s ease;
}

.qls-team__link:hover {
	color: #0078ff;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
	.qls-team {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.qls-team {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.qls-team {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.qls-team__member:hover {
		transform: none;
	}
}