/* ==========================================================================
   Shared "single card at a time" carousel, progressively applied by
   card-carousel.js to tall card grids (Board Members' .ebm-grid, Programs'
   .program-cards) at phone widths only. Desktop/tablet never see this —
   the JS tears it back down to the plain CSS grid above the breakpoint.
   ========================================================================== */

.exegypt-carousel {
	display: block !important;
}

.exegypt-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -1px;
}

.exegypt-carousel__track::-webkit-scrollbar {
	display: none;
	height: 0;
}

.exegypt-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	padding: 0 1px;
}

.exegypt-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.exegypt-carousel__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 8px visual dot inside a 24px tap target — meets the WCAG 2.2 24x24px
   minimum without inflating the dot's appearance (same technique as the
   featured-testimonials dots, see testimonials.css). */
.exegypt-carousel__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.exegypt-carousel__dot::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 45, 114, 0.18);
	transition: background-color 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}

.exegypt-carousel__dot.is-active::after {
	width: 20px;
	border-radius: 4px;
	background: #002D72;
}

/* Smaller visual disc for the Program cards carousel specifically — the
   24x24 tap target underneath is unchanged (shrinking that would reopen
   the WCAG 2.2 24x24px touch-target minimum this was built to meet). */
.program-cards .exegypt-carousel__dot::after {
	width: 6px;
	height: 6px;
}

.program-cards .exegypt-carousel__dot.is-active::after {
	width: 14px;
}

.exegypt-carousel__dot:focus-visible {
	outline: 2px solid #002D72;
	outline-offset: 3px;
	border-radius: 4px;
}

.exegypt-carousel__play-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(0, 45, 114, 0.15);
	border-radius: 50%;
	background: #fff;
	color: #002D72;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.exegypt-carousel__play-toggle:hover,
.exegypt-carousel__play-toggle:focus-visible {
	background: rgba(0, 45, 114, 0.06);
	border-color: rgba(0, 45, 114, 0.3);
}

.exegypt-carousel__play-toggle svg {
	width: 14px;
	height: 14px;
}

.exegypt-carousel__play-toggle .exegypt-carousel__icon-pause {
	display: none;
}

.exegypt-carousel__play-toggle[aria-pressed="true"] .exegypt-carousel__icon-play {
	display: none;
}

.exegypt-carousel__play-toggle[aria-pressed="true"] .exegypt-carousel__icon-pause {
	display: block;
}

.exegypt-carousel__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}