/* --- Utilities (Prefixed) --- */
.for-school-endorsement-hidden {
	display: none !important;
}
.for-school-endorsement-relative {
	position: relative;
}

/* --- Container & Track --- */
.for-school-endorsement-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 8px 0;
}

.for-school-endorsement-track {
	display: flex;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	width: max-content;
	padding-bottom: 10px;
}

/* --- Slides --- */
.for-school-endorsement-slide {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background-color: #000;

	/* Mobile: Carousel Style */
	width: 85vw;
	aspect-ratio: 16 / 9;
	margin: 0 10px;
	opacity: 0.5;
	transform: scale(0.95);
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.for-school-endorsement-active {
	opacity: 1;
	transform: scale(1);
}

/* --- Desktop View (Side-by-Side) --- */
@media (min-width: 480px) {
	.for-school-endorsement-track {
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* gap: 2rem; */
		transform: none !important; /* Disable carousel movement */
		padding-bottom: 0;
	}

	.for-school-endorsement-slide {
		width: 49%;
		/* max-width: 595px; */
		margin: 0;
		opacity: 1 !important;
		transform: scale(1) !important;
	}

	/* Hide Controls on Desktop */
	.for-school-endorsement-controls-container {
		display: none !important;
	}
}

/* --- Video & Poster UI --- */
.for-school-endorsement-poster-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.for-school-endorsement-video-element {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play Overlay */
.for-school-endorsement-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	transition: opacity 0.3s;
}

.for-school-endorsement-play-icon {
	width: 75px;
	height: 75px;
	background-color: #faa106;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	transition:
		transform 0.2s,
		background-color 0.2s;
}

.for-school-endorsement-slide:hover .for-school-endorsement-play-icon {
	transform: scale(1.1);
}

.for-school-endorsement-play-icon svg {
	fill: white;
	margin-left: 4px;
}

/* --- Navigation Controls (Prefixed) --- */
.for-school-endorsement-controls-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 40px;
}

.for-school-endorsement-nav-btn {
	background: none;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	z-index: 20;
	padding: 0;
	transition: opacity 0.3s ease;
}

/* SVG Styles */
.for-school-endorsement-svg-container {
	transition: transform 0.2s;
}

/* physical "press" animation when tapped/clicked */
.for-school-endorsement-nav-btn:active .for-school-endorsement-svg-container {
	transform: scale(0.95);
}

/* 1. Default State (Grey background, dark arrow) */
.for-school-endorsement-svg-background {
	fill: #f1f1f1;
	transition: fill 0.2s ease;
}

.for-school-endorsement-svg-arrow {
	stroke: #02071d;
	fill: #02071d;
	transition:
		fill 0.2s ease,
		stroke 0.2s ease;
}

/* 3. Hover State ONLY for devices with a mouse (fixes mobile sticky hover) */
@media (hover: hover) {
	.for-school-endorsement-nav-btn:not(.disabled):hover .for-school-endorsement-svg-background {
		fill: #f5aa22;
	}

	.for-school-endorsement-nav-btn:not(.disabled):hover .for-school-endorsement-svg-arrow {
		fill: #ffffff;
		stroke: #ffffff;
	}
}

/* 4 & 5. Disabled State (First & Last slides) */
.for-school-endorsement-nav-btn.disabled {
	opacity: 0.4; /* Fades the button to make it look inactive */
	cursor: not-allowed;
	pointer-events: none; /* Disables hover effects and clicks */
}

/* Force disabled state back to grey in case a touch state gets stuck */
.for-school-endorsement-nav-btn.disabled .for-school-endorsement-svg-background {
	fill: #f1f1f1 !important;
}

.for-school-endorsement-nav-btn.disabled .for-school-endorsement-svg-arrow {
	fill: #02071d !important;
	stroke: #02071d !important;
}