/* ==========================================================================
   Про нас — картки команди + стрілки каруселі
   Активна (крупна) картка керується JS-класом .is-active (front-page.php),
   а не позицією в DOM — при кліку на стрілку крупною стає наступна/попередня.
   ========================================================================== */

.team-carousel{
	display:flex;
	gap:27px;
	align-items:flex-start;
}

.team-card{
	position:relative;
	flex:0 0 290px;
	width:290px;
	height:330px;
	padding:35px 24px 24px;
	border-radius:20px;
	text-align:center;
	overflow:hidden;
	color:#fff;

	background:rgba(159, 255, 136, 0.1);
	border:1px solid rgba(9, 100, 21, 0.3);
	backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
	transition:flex-basis .25s ease, width .25s ease, height .25s ease;
}

/* активна картка — крупніша, як featured-елемент у макеті */
.team-card.is-active{
	flex-basis:329.55px;
	width:329.55px;
	height:375px;
	border-radius:22.73px;
	backdrop-filter:blur(22.73px);
	-webkit-backdrop-filter:blur(22.73px);
}

.team-photo{
	width:194px;
	height:194px;
	margin:0 auto 18px;
	border-radius:50%;
	overflow:hidden;
	background:#fff;
	border:1px solid rgba(9, 100, 21, 0.3);
	transition:width .25s ease, height .25s ease;
}
.team-card.is-active .team-photo{
	width:220.45px;
	height:220.45px;
	margin-bottom:22px;
}
.team-photo img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.team-card h4{
	margin:0 0 4px;
	font-family:var(--font-display, 'Unbounded'), sans-serif;
	font-weight:500;
	font-size:18px;
	line-height:22px;
}
.team-card.is-active h4{
	font-size:22px;
	line-height:27px;
}

.team-card span{
	font-family:var(--font-body, 'Montserrat'), sans-serif;
	font-weight:400;
	font-size:18px;
	line-height:22px;
	color:rgba(255,255,255,.85);
}
.team-card.is-active span{
	font-size:22px;
	line-height:27px;
}

/* Стрілки каруселі — кружки з іконкою, як у макеті */
.carousel-controls{
	display:flex;
	justify-content:flex-end;
	gap:12px;
	margin-top:28px;
}

.carousel-prev,
.carousel-next{
	width:42px;
	height:42px;
	border-radius:50%;
	border:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	line-height:1;
	background:#D9D9D9;
	transition:opacity .2s ease;
}

.carousel-prev{
	color:rgba(233, 96, 26, 0.3); /* неактивное направление — приглушённое */
}
.carousel-next{
	color:#E9601A; /* активное направление — насыщенный оранжевый */
}
.carousel-prev:hover,
.carousel-next:hover{
	opacity:.85;
}

@media (max-width:900px){
	.team-carousel{ flex-wrap:wrap; }
	.team-card,
	.team-card.is-active{ flex:1 1 100%; width:100%; height:auto; }
}