/**
 * Shared hero slider — one lightweight carousel component used by every page
 * that has a top banner (Home, My Family Rewards, Support My School).
 *
 * Extracted verbatim from home.css 2026-08-28 when the Home/Rewards/Schools
 * heroes were unified onto one component backed by the cw_hero_slide CPT
 * (inc/hero-slides.php) — Rewards and Schools previously ran live Smart
 * Slider 3 instances (sliders 5 and 6) on the SAME 2560x867 design canvas as
 * this component already used, which is why zero visual change was needed:
 * only the content SOURCE moved, not the design.
 *
 * @package cw-bricks-child
 */

.cwpr-hero-wrap {
	width: 100%;
}

.cwpr-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 2560 / 867;
	overflow: hidden;
	background: #fff;
	touch-action: pan-y;
	cursor: grab;
}

/* Added 2026-08-31 (user request): click-and-drag navigation, the mouse
   equivalent of the swipe this already had on touch. */
.cwpr-hero.is-dragging {
	cursor: grabbing;
}

/* The track is one viewport wide and its slides overflow it, so a slide step is
   always exactly translateX(-100%) — no track-width arithmetic to keep in sync
   with the slide count. */
.cwpr-hero__track {
	display: flex;
	height: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad */
	will-change: transform;
}

/* Used for the seamless wrap from the last slide back to the first, AND while
   a drag is live — the track must track the pointer with zero lag, not ease
   toward it. */
.cwpr-hero.is-snapping .cwpr-hero__track,
.cwpr-hero.is-dragging .cwpr-hero__track {
	transition: none;
}

.cwpr-hero__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: block;
	line-height: 0;
}

.cwpr-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Prev/next arrows — deliberately quiet: a dark translucent disc reads on any
   banner photo (light or dark) without needing a per-image contrast check,
   and stays low-opacity at rest so it never competes with the slide's own
   design. Real 40px targets throughout (touch accessibility) even though the
   visible disc looks smaller. */
.cwpr-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.32);
	color: #fff;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.cwpr-hero__arrow:hover,
.cwpr-hero__arrow:focus-visible {
	opacity: 1;
	background: rgba(20, 20, 20, 0.55);
}

.cwpr-hero__arrow:active {
	transform: scale(0.92);
}

.cwpr-hero__arrow svg {
	width: 20px;
	height: 20px;
}

.cwpr-hero__arrow--prev {
	left: 14px;
}

.cwpr-hero__arrow--next {
	right: 14px;
}

@media (max-width: 480px) {
	.cwpr-hero__arrow {
		width: 32px;
		height: 32px;
		margin-top: -16px;
	}

	.cwpr-hero__arrow svg {
		width: 16px;
		height: 16px;
	}

	.cwpr-hero__arrow--prev {
		left: 8px;
	}

	.cwpr-hero__arrow--next {
		right: 8px;
	}
}