/**
 * Roster Slider - Single Player Carousel
 *
 * Layout: foto giocatore centrata, nome sotto, frecce laterali, CTA in basso.
 * Come nel design Figma della homepage Olimpia.
 */

/* ==============================================================
   Container
   ============================================================== */
.oas-roster-slider {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-2xl) 0;
	overflow: hidden;
}

/* ==============================================================
   Track & Slides
   ============================================================== */
.oas-roster-slider__track {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oas-roster-slider__slide {
	display: none;
	flex-direction: column;
	align-items: center;
	width: 100%;
	animation: oas-slider-fade-in 0.4s ease;
}

.oas-roster-slider__slide.is-active {
	display: flex;
}

@keyframes oas-slider-fade-in {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ==============================================================
   Photo
   ============================================================== */
.oas-roster-slider__photo {
	position: relative;
	width: 100%;
	max-width: 360px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}

.oas-roster-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.oas-roster-slider__img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-gray-200);
	background: var(--background-grey);
}

/* ==============================================================
   Info (nome)
   ============================================================== */
.oas-roster-slider__info {
	text-align: center;
	margin-top: var(--space-base);
}

.oas-roster-slider__name {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

/* ==============================================================
   CTA Button (pill circle with arrow)
   ============================================================== */
.oas-roster-slider__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
	margin-top: var(--space-lg);
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.oas-roster-slider__cta:hover {
	background-color: var(--color-primary-dark);
	transform: scale(1.05);
	color: var(--color-white);
}

.oas-roster-slider__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==============================================================
   Navigation Arrows (positioning only - style from .olimpia-icon-btn)
   ============================================================== */
.oas-roster-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.oas-roster-slider__nav--prev {
	left: 10%;
}

.oas-roster-slider__nav--next {
	right: 10%;
}

/* ==============================================================
   Responsive
   ============================================================== */
@media (max-width: 768px) {
	.oas-roster-slider__photo {
		max-width: 280px;
	}

	.oas-roster-slider__name {
		font-size: var(--font-size-xl);
	}

	.oas-roster-slider__nav--prev {
		left: 4%;
	}

	.oas-roster-slider__nav--next {
		right: 4%;
	}
}

@media (max-width: 480px) {
	.oas-roster-slider__photo {
		max-width: 220px;
	}

	.oas-roster-slider__nav--prev {
		left: 2%;
	}

	.oas-roster-slider__nav--next {
		right: 2%;
	}
}