/**
 * Carousel — a row of cards that scrolls sideways when it outgrows the wide rail.
 *
 * Native scroll-snap does the moving, so touch, trackpad and keyboard (the track takes focus)
 * work with no script at all. carousel.js only adds the arrows, and only when there is
 * somewhere to go: three cards on a desktop are a plain row.
 */

.pwr-carousel { position: relative; }

/* Two classes: the track is also a .pwr-b-features list, whose grid rules print earlier. */
.pwr-carousel .pwr-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: none;
	/* From the start edge: the highlights grid centres its cards (blocks.css), and centred
	   tracks that overflow spill off BOTH ends — the first card half out of reach. */
	justify-content: start;
	/* Phones: one card and the edge of the next, which is the cue that the row moves. */
	grid-auto-columns: 85%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.pwr-carousel .pwr-carousel__track::-webkit-scrollbar { display: none; }
.pwr-carousel .pwr-carousel__track > * { scroll-snap-align: start; }
.pwr-carousel .pwr-carousel__track:focus-visible {
	outline: 2px solid var(--pwr-accent, var(--wp--preset--color--orange));
	outline-offset: 4px;
}

@media (min-width: 600px) {
	.pwr-carousel .pwr-carousel__track { grid-auto-columns: calc((100% - var(--wp--preset--spacing--m)) / 2); }
}
@media (min-width: 1024px) {
	.pwr-carousel .pwr-carousel__track { grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--m)) / 3); }
}
/* Four to a view: the case study highlights, whose grid runs four across (20 Oct). */
@media (min-width: 1024px) {
	.pwr-carousel--4up .pwr-carousel__track { grid-auto-columns: calc((100% - 3 * var(--wp--preset--spacing--m)) / 4); }
}

.pwr-carousel__nav {
	display: flex;
	/* Centred under the row (Wayne, 14 Oct). They sat bottom-right, which reads as a corner
	   control on a row that is itself centred; one rule, so the case study media and the
	   product gallery's strip agree. */
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	margin-block-start: var(--wp--preset--spacing--s);
}
.pwr-carousel__nav[hidden] { display: none; }

/* The brand double-chevron, the same file the lightbox wears; prev is it mirrored. Drawn as a
   MASK filled with the section's --pwr-accent rather than as a background image, because the
   file has its orange baked in: Highlights' arrows are green (Wayne, 12 Oct). */
/* No bounding box (Todd x Wayne, 13 Oct): the chevron stands alone, and hover deepens it to
   orange-dark with a soft glow, like the buttons. One rule for every arrow on the site — the
   card carousels and the gallery strip both use these classes.
   ORANGE ON EVERY SLIDER (design review 15 Oct, Monthly Checkpoint 16 Oct: "use PowerShift
   orange arrows on all sliders"). The arrows used to take the section's --pwr-accent, which
   made the solution carousel's arrows green; the accent still colours the pills and the
   card bars, the arrows are the brand chevron everywhere. */
.pwr-carousel__btn {
	position: relative;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.pwr-carousel__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--orange);
	-webkit-mask: url(../gallery/arrow-right.svg) no-repeat center / 1.4rem 1.4rem;
	mask: url(../gallery/arrow-right.svg) no-repeat center / 1.4rem 1.4rem;
}
.pwr-carousel__prev { transform: scaleX(-1); }
.pwr-carousel__btn::before { transition: background-color 0.2s ease; }
.pwr-carousel__btn:not(:disabled):is(:hover, :focus-visible) { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp--preset--color--orange) 70%, transparent)); }
.pwr-carousel__btn:not(:disabled):is(:hover, :focus-visible)::before { background-color: var(--wp--preset--color--orange-dark); }
.pwr-carousel__btn:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.pwr-carousel__btn:disabled { opacity: 0.3; cursor: default; }

/* The one exception: the case study highlights are the green section, and their arrows are
   green with it (Website To-Do #49, Wayne 23 Oct: "makes sense to have green scroller arrows
   here"). Same rule as the orange: rest green-light, hover deepens to green. */
.pwr-b-csstory--highlights .pwr-carousel__btn::before { background-color: var(--wp--preset--color--green-light); }
.pwr-b-csstory--highlights .pwr-carousel__btn:not(:disabled):is(:hover, :focus-visible) { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp--preset--color--green-light) 70%, transparent)); }
.pwr-b-csstory--highlights .pwr-carousel__btn:not(:disabled):is(:hover, :focus-visible)::before { background-color: var(--wp--preset--color--green); }
.pwr-b-csstory--highlights .pwr-carousel__btn:focus-visible { outline-color: var(--wp--preset--color--green-light); }

@media (prefers-reduced-motion: reduce) {
	.pwr-carousel .pwr-carousel__track { scroll-behavior: auto; }
	.pwr-carousel__btn { transition: none; }
}