/* ==========================================================================
   Team Section — layout, tipografia, stack immagine, stati hover
   ========================================================================== */

.team-section {
	padding: var(--spacing-160, 160px) var(--spacing-40, 40px);
}

.team-section__inner {
	margin: 0 auto;
}

.team-section__title {
color: var(--colori-pieni-blu-default);
text-align: center;

/* Heading/h3/as-h1/regular */
font-family: var(--font-heading);
font-size: var(--h1-size);
font-style: normal;
font-weight: var(--weight-regular);
line-height: var(--h1-line); /* 120% */
letter-spacing: -0.4px;
padding-bottom: var(--spacing-40, 40px);
}

/* ---------- Carosello: un solo membro visibile alla volta ---------- */
.team-carousel {
	position: relative;
	min-height: 510px;
}

.team-card {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--spacing-80, 80px);
	padding: 0 128px;
	pointer-events: none;
}

.team-card.is-active {
	pointer-events: auto;
}

.team-card:not(.is-active) .team-card__info {
	visibility:hidden;
}

.team-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
}

.team-card__info--left {
	padding-top: var(--spacing-40, 40px);
	align-self: stretch;
}

.team-card__info--right {
	justify-content: flex-end;
	padding-bottom: var(--spacing-40, 40px);
	align-self: stretch;
}

.team-card__role {
color: var(--colori-pieni-rosso-default);

/* Heading/h4/regular */
font-family: var(--font-heading);
font-size: var(--h4-size);
font-style: normal;
font-weight: var(--weight-regular);
line-height: var(--h4-line); /* 125% */
letter-spacing: -0.4px;
}

.team-card__name {
color: var(--colori-pieni-grigio-800);

/* Heading/h5/regular */
font-family: var(--font-heading);
font-size: var(--h5-size);
font-style: normal;
font-weight: var(--weight-regular);
line-height: var(--h5-line); /* 116.667% */
letter-spacing: -0.4px;
}

.team-card__help {
color: var(--colori-pieni-grigio-800);

/* Body/lg/Body lg-regular */
font-family: var(--font-heading);
font-size: var(--body-lg-size);
font-style: normal;
font-weight: var(--weight-regular);
line-height: var(--body-lg-line); /* 120% */
letter-spacing: -0.4px;
}

/* ---------- Stack immagine (due livelli sovrapposti) ---------- */
.team-card__stack {
	position: relative;
	width: 400px;
	height: 510px;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.team-card__image {
	position: relative;
	width: 360px;
	height: 480px;
	margin: 0;
	border-radius: var(--mm-radius-xl, 24px);
	overflow: hidden;
	will-change: transform, opacity;
}


.team-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Bottoni navigazione ---------- */

.team-section__nav {
	display: flex;
	justify-content: center;
	gap: var(--spacing-16, 16px);
	margin-top: var(--spacing-40, 40px);
}

.team-nav-btn {
	width: 64px;
	height: 64px;
	border: none;
	border-radius: var(--mm-radius-md, 8px);
	color: var(--colori-pieni-bianco-50, #fff);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
	display: flex;
	padding: var(--spacing-24, 24px);
	justify-content: center;
	align-items: center;
	gap: var(--spacing-8, 8px);
	border-radius: var(--mm-radius-md, 8px);
background: var(--colori-pieni-rosso-default);
}

.team-nav-btn:hover {
	background: #9e3647;
	transform: translateY(-2px);
}

.team-nav-btn:active {
	transform: translateY(0);
}

.team-nav-btn:disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {

	.team-section {
		padding: var(--spacing-56, 56px) var(--spacing-24, 24px);
	}

	.team-section__title {
		font-size: 40px;
		line-height: 48px;
	}

	.team-card {
		grid-template-columns: 1fr;
		gap: var(--spacing-24, 24px);
		padding: 0;
		text-align: center;
	}

	.team-carousel{
	perspective:900px;
}

.team-card{
	transform-origin:center right;
}

	.team-card__info--left,
	.team-card__info--right {
		padding: 0;
		align-items: center;
	}

	.team-card__stack {
		width: 280px;
		height: 360px;
		margin: 0 auto;
	}

	.team-card__stack-layer,
	.team-card__image {
		width: 240px;
		height: 320px;
	}
}