/**
 * Component — Carousel Navigation
 *
 * Reusable prev/next controls for any horizontally-scrolling,
 * scroll-snap row (first consumer: the Homepage's Featured
 * Competitions carousel, assets/css/sections/featured-competitions.css
 * — this file owns no Homepage-specific rules at all). Purely a
 * supplementary control: the underlying track must already be
 * genuinely scrollable by wheel/trackpad/touch/drag on its own — this
 * component never replaces that, only adds an alternate way in.
 *
 * Desktop only, by design: hidden below 1024px, since every current
 * consumer's touch/scroll-snap experience is already the primary
 * interaction there. A future mobile/tablet use would extend this
 * gate, not remove it wholesale.
 *
 * Markup contract (see carousel-nav.js for the matching JS):
 *   <div class="ec-carousel" data-ec-component="carousel-nav">
 *     <button type="button" class="ec-carousel-nav ec-carousel-nav--prev"
 *             data-ec-carousel-prev data-material="water" aria-label="...">
 *       <span class="ec-carousel-nav__chevron" aria-hidden="true"></span>
 *     </button>
 *     <div data-ec-carousel-track> ...scrollable content... </div>
 *     <button type="button" class="ec-carousel-nav ec-carousel-nav--next"
 *             data-ec-carousel-next data-material="water" aria-label="...">
 *       <span class="ec-carousel-nav__chevron" aria-hidden="true"></span>
 *     </button>
 *   </div>
 * .ec-carousel is the positioning context (position: relative, no box
 * of its own) — the buttons are its absolutely-positioned children,
 * siblings of the scrollable track, not descendants of it, so they
 * never scroll away with the content and are never clipped by the
 * track's own overflow.
 */

.ec-carousel {
	position: relative;
}

.ec-carousel-nav {
	display: none;
}

@media (min-width: 1024px) {
	.ec-carousel-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border-radius: var(--ec-radius-full);
		/* Visibility pass: a stronger, component-local tint layered
		   over the shared Water glass token rather than editing
		   glass.css itself (that token is shared with Countdown/Draw
		   Badge and must stay exactly as it is for them). Same Water
		   hue, higher alpha, so the button reads clearly against a
		   busy card row instead of blending into it. */
		background-color: rgba(217, 251, 250, 0.62);
		backdrop-filter: blur(var(--ec-glass-blur));
		-webkit-backdrop-filter: blur(var(--ec-glass-blur));
		border: 1px solid var(--ec-glass-border);
		/* Elevation bumped slightly beyond --ec-elevation-1 alone with
		   one extra, component-local shadow layer — not switched to
		   --ec-elevation-2 wholesale, which would be a bigger jump
		   than "very slightly". */
		box-shadow: var(--ec-elevation-1), 0 2px 6px rgba(15, 23, 42, 0.14);
		cursor: pointer;
		transition:
			box-shadow var(--ec-material-duration) var(--ec-material-ease),
			opacity var(--ec-material-duration) var(--ec-material-ease);
		z-index: 1;
	}

	/* Fire glow on hover, deliberately referencing the concrete
	   --ec-material-fire-* tokens directly rather than the generic
	   [data-material] alias layer — the button's own surface stays
	   Water (data-material="water" in the markup) throughout; this is
	   the same kind of narrow, documented exception materials.css
	   already licenses elsewhere, not a second [data-material]
	   context or an extra DOM element. --ec-material-fire-glow itself
	   is inset-only (materials.css's own deliberate choice), so a
	   small extra outer glow is layered on top, component-local, for
	   a hover state that's actually visible on a 44px circular
	   button — not achieved by editing the shared token. */
	.ec-carousel-nav:hover:not(:disabled) {
		box-shadow:
			var(--ec-elevation-1),
			0 2px 6px rgba(15, 23, 42, 0.14),
			var(--ec-material-fire-glow),
			0 0 10px rgba(255, 152, 72, 0.4);
	}

	.ec-carousel-nav:focus-visible {
		outline: 2px solid var(--ec-material-color);
		outline-offset: 2px;
	}

	/* Real disabled state, not just a visual dim — the disabled
	   attribute itself (set by carousel-nav.js) is what removes the
	   button from tab order and makes clicks/keyboard activation a
	   no-op; this rule only supplies the matching visual. */
	.ec-carousel-nav:disabled {
		opacity: 0.35;
		cursor: default;
		pointer-events: none;
	}

	.ec-carousel-nav--prev {
		left: -1.375rem;
	}

	.ec-carousel-nav--next {
		right: -1.375rem;
	}

	.ec-carousel-nav__chevron {
		/* Bolder stroke was the biggest visibility issue — thickness
		   increased (2px -> 3px) and the chevron's own size nudged up
		   to match proportionally; the button's own dimensions above
		   are unchanged. */
		width: 0.7rem;
		height: 0.7rem;
		border-style: solid;
		border-color: var(--ec-color-neutral-0);
		border-width: 0 3px 3px 0;
	}

	.ec-carousel-nav--prev .ec-carousel-nav__chevron {
		transform: rotate(135deg) translate(-1px, -1px);
	}

	.ec-carousel-nav--next .ec-carousel-nav__chevron {
		transform: rotate(-45deg) translate(-1px, -1px);
	}
}