/*
 * Drag Slider (`is-style-drag-slider` on a `core/group` with a grid layout).
 *
 * A row of cards that runs past the container when there are more of them than
 * fit, and is dragged from the first to the last. No loop, no clones, and
 * **nothing is clipped**: there is no scroll container, no `overflow` and no
 * mask anywhere in this file. What cuts the overrun off is the window —
 * `assets/css/global/reset.css` puts `overflow-x: clip` on the document — so a
 * card that is half past the edge reads as "there is more over there" rather
 * than as a sliced card, and the `card` shadow is never sliced flush with a
 * padding box the way a scroll container slices it.
 *
 * ## The rail is drawn only once the script is running
 *
 * Every rule below is behind `[data-kg-drag-slider]`, which
 * `src/interactions/drag-slider.js` sets and nothing else ever writes. Without
 * it — no JavaScript, a blocked script, the editor canvas — the block is core's
 * grid exactly as the editor authored it: two cards across on a desktop, one
 * under the next on a phone. That is a correct, readable section rather than a
 * degraded one, which matters here more than usual, because with no scroll
 * container a rail nobody can drag is a rail whose later cards are simply
 * unreachable.
 *
 * It also means the *editor* shows the grid, which is the right thing to edit:
 * cards side by side, all of them visible, none of them under a transform.
 *
 * ## How wide a card is
 *
 * `--kg-slider-per-view` — two at desktop, one below the theme's `mobile`
 * viewport — and the arithmetic is the obvious one: a whole rail, less the gaps
 * between the visible cards, divided by how many are visible. At two per view
 * that resolves to exactly the grid's own two columns, so switching the rail on
 * moves nothing at all on a desktop with two cards. At one per view the card is
 * the full rail and the next one peeks into the gutter on its own, which is the
 * phone frame.
 *
 * A **media** query and not a container query, though the rail's width is what
 * the number is really about: core's grid layout puts `container-type:
 * inline-size` on this very element, and a container styles its descendants, not
 * itself. A `@container` rule here would silently measure whatever container is
 * outside the block, or the viewport. 48rem is `settings.viewport.mobile`, so
 * this breaks where every `@mobile` state in the theme breaks.
 *
 * **`--kg-slider-gap` is measured, not stated.** The gap between cards is the
 * block's own `blockGap` — an editor control, and a `clamp()` more often than
 * not — and CSS cannot feed a resolved `gap` back into a `calc()`. So the script
 * reads the computed `column-gap` and publishes it here, and `gap` itself is left
 * entirely alone: core writes it from `blockGap` and the Dimensions panel still
 * means what it says. The `0px` below is the value that holds for the one frame
 * between the attribute landing and the measurement, and both happen in the same
 * task, so it is never painted.
 *
 * ## Specificity
 *
 * `.wp-block-group.is-style-drag-slider[data-kg-drag-slider]` is (0,3,0) against
 * core's own (0,1,0) layout class — which it has to beat outright, because
 * block-supports CSS is printed *after* every theme stylesheet and would
 * otherwise win on source order alone.
 */

.wp-block-group.is-style-drag-slider[data-kg-drag-slider] {
	--kg-slider-per-view: 2;
	--kg-slider-gap: 0px;

	display: grid;

	/*
	 * One row, however many cards there are. Core's `grid-template-columns` has
	 * to go with it: left in place it would keep the first two cards in explicit
	 * columns and drop the rest into implicit ones of a different size.
	 */
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: calc(
		(100% - (var(--kg-slider-per-view) - 1) * var(--kg-slider-gap)) /
			var(--kg-slider-per-view)
	);

	/*
	 * `start`, so the row begins at the rail's left edge and grows past its right
	 * one. The default is `normal`, which stretches the tracks to fill the
	 * container — harmless while everything fits and wrong the moment it does not.
	 */
	justify-content: start;
	align-items: stretch;

	/*
	 * A sideways drag is the slider's; an up-and-down one is the page's. Without
	 * this a touch browser waits to see which way the finger goes before it
	 * scrolls, and the page feels stuck for the first few pixels of every swipe.
	 */
	touch-action: pan-y;
}

/*
 * A photograph inside a card is a draggable thing in its own right as far as the
 * browser is concerned, and its ghost image hijacks the swipe that was meant for
 * the rail.
 */
.wp-block-group.is-style-drag-slider[data-kg-drag-slider] img {
	-webkit-user-drag: none;
	user-select: none;
}

@media (width <= 48rem) {
	.wp-block-group.is-style-drag-slider[data-kg-drag-slider] {
		--kg-slider-per-view: 1;
	}
}

/*
 * The dots.
 *
 * Built by the script and inserted straight after the track, and only while the
 * rail actually overruns — so the phone frame's two cards get them and the
 * desktop frame's two cards, which fill the row, do not. Same geometry as
 * `kg-product/panel-stack`'s, because they are the same control: an 8px dot
 * centred in a 24px box, the boxes meeting edge to edge so that the 24px minimum
 * touch target and the design's 24px between centres are one measurement rather
 * than two.
 *
 * The margin has to out-specify core's constrained-layout `blockGap`, which sets
 * `margin-block-start` on every child of the section and is printed after this
 * file. Naming the track in the selector takes it to (0,3,0) and settles it.
 */
.wp-block-group.is-style-drag-slider + .kg-drag-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-block: var(--wp--preset--spacing--3-xl) 0;
	padding: 0;
	list-style: none;
}

.kg-drag-slider__dot {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.kg-drag-slider__dot::before {
	content: "";
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--custom--overlay-black-20);
}

@media not (prefers-reduced-motion: reduce) {
	.kg-drag-slider__dot::before {
		transition: background-color 0.3s
			var(--wp--custom--transition-spring-smooth);
	}
}

/*
 * The script sets `aria-current` on the dot whose card is leading, so the state
 * an assistive technology is told about and the state that is drawn are one
 * attribute rather than two things to keep in step.
 */
.kg-drag-slider__dot[aria-current="true"]::before {
	background-color: var(--wp--preset--color--black);
}