/* ============================================================================
   Same-day carousel — arrows on the date/time, stacked matchup slides
   ----------------------------------------------------------------------------
   Loaded with next-game.css. One game: none of the .has-carousel rules apply
   and the block looks as it did. Several games on the next date: arrows sit
   either side of the date | time, matchups stacked in the
   stage so paging does not jump the layout.
   ========================================================================= */

.kcgc-next__head {
	max-width: 100%;
	position: relative;
	z-index: 3;
}

.kcgc-next__vs {
	pointer-events: none;
}

.kcgc-next__when-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem .7rem;
	max-width: 100%;
}

.kcgc-next__when-stack {
	display: grid;
	justify-items: center;
	min-width: 0;
}

.kcgc-next__when-stack .kcgc-next__when {
	grid-area: 1 / 1;
}

.kcgc-next.has-carousel .kcgc-next__when:not(.is-active),
.kcgc-next.has-carousel .kcgc-next__slide:not(.is-active) {
	opacity: 0;
	pointer-events: none;
}

/* Filled accent disc, same treatment as the news carousel arrows. No extra
   ring — the fill is the affordance. */
.kcgc-next button.kcgc-next__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kcgc-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(7, 10, 16, .4);
	transition: background var(--kc-speed, .24s) var(--kc-ease, ease),
		transform var(--kc-speed, .24s) var(--kc-ease, ease);
}

.kcgc-next button.kcgc-next__nav:is(:hover, :focus-visible) {
	background: var(--accent-hover, #0256a8);
	color: #fff;
}

.kcgc-next button.kcgc-next__nav:active {
	transform: scale(.94);
}

.kcgc-next button.kcgc-next__nav svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	pointer-events: none;
	display: block;
}

.kcgc-next__stage {
	display: grid;
}

.kcgc-next__slide {
	grid-area: 1 / 1;
}

.kcgc-next.has-carousel .kcgc-next__slide.is-active,
.kcgc-next.has-carousel .kcgc-next__when.is-active {
	z-index: 1;
}

.kcgc-next.has-carousel .kcgc-next__when,
.kcgc-next.has-carousel .kcgc-next__slide {
	transition: opacity .28s ease;
}

.kcgc-next .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Inactive slides stay fully painted so paging in is a fade, not a slam.
   The shock ring stays at 0 when it is not playing — forcing it to 1 left
   a white circle on every slide after the first. */
.kcgc-next.kcgc-armed.has-carousel .kcgc-next__slide:not(.is-active) .kcgc-team,
.kcgc-next.kcgc-armed.has-carousel .kcgc-next__slide:not(.is-active) .kcgc-next__vs,
.kcgc-next.kcgc-armed.has-carousel .kcgc-next__slide:not(.is-active) .kcgc-next__location {
	opacity: 1;
}

.kcgc-next.has-carousel.is-live .kcgc-next__slide:not(.is-active) .kcgc-team,
.kcgc-next.has-carousel.is-live .kcgc-next__slide:not(.is-active) .kcgc-next__vs,
.kcgc-next.has-carousel.is-live .kcgc-next__slide:not(.is-active) .kcgc-next__location {
	animation: none;
	opacity: 1;
}

.kcgc-next.has-carousel.is-live .kcgc-next__slide:not(.is-active) .kcgc-next__shock {
	animation: none;
	opacity: 0;
}

/* After the first move, teams and location stay put. VS and shock keep
   the original is-live entrance so each slide crashes in the same way. */
.kcgc-next.has-carousel.kcgc-carousel-moved.is-live .kcgc-next__slide.is-active .kcgc-team,
.kcgc-next.has-carousel.kcgc-carousel-moved.is-live .kcgc-next__slide.is-active .kcgc-next__location {
	animation: none;
	opacity: 1;
}

@media (max-width: 767px) {
	.kcgc-next.has-carousel .kcgc-next__head {
		padding-inline: clamp(.65rem, 3vw, 1.1rem);
	}

	.kcgc-next button.kcgc-next__nav {
		width: 2.1rem;
		height: 2.1rem;
	}

	.kcgc-next button.kcgc-next__nav svg {
		width: 14px;
		height: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kcgc-next.has-carousel .kcgc-next__when,
	.kcgc-next.has-carousel .kcgc-next__slide,
	.kcgc-next button.kcgc-next__nav {
		transition: none;
	}
}