/**
 * Peregrine for WordPress — carousel stylesheet.
 *
 * Vanilla-JS slider used by the categories-carousel and products-carousel
 * blocks: viewport + track + slides + accent-coloured nav arrows + pagination
 * dots, plus the neutral hover styling for the slide content shells.
 *
 * Sits inside @layer peregrine-base. Depends on `peregrine-base-components`
 * for the tokens + button styling that downstream slide bodies may inherit.
 *
 * Nav arrow colours are overridable via --pk-carousel-nav-bg /
 * --pk-carousel-nav-color so themes can tune them without duplicating the
 * full rule set.
 *
 * @package Peregrine\WordPress
 */

@layer peregrine-base {

	.peregrine-carousel {
		position: relative;
		overflow: hidden;
		padding: 0.5rem 0;
	}
	.peregrine-carousel__viewport {
		overflow: hidden;
	}
	.peregrine-carousel__track {
		display: flex;
		gap: 1rem;
		will-change: transform;
	}
	.peregrine-carousel__slide {
		flex: 0 0 auto;
		min-width: 0;
	}

	/* Navigation arrows — accent background by default for good visibility
	   on any background (light or dark). Overridable via
	   --pk-carousel-nav-bg / --pk-carousel-nav-color. */
	.peregrine-carousel__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
		width: 3rem;
		height: 3rem;
		border: none;
		background: var(--pk-carousel-nav-bg, var(--pk-accent));
		color: var(--pk-carousel-nav-color, var(--pk-accent-on));
		border-radius: var(--pk-radius-pill);
		font-size: 1.5rem;
		font-weight: 800;
		line-height: 1;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
		            box-shadow 200ms ease,
		            opacity 200ms ease;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18),
		            0 2px 6px rgba(0, 0, 0, 0.12);
		opacity: 0.95;
	}
	.peregrine-carousel__nav:hover,
	.peregrine-carousel__nav:focus-visible {
		transform: translateY(-50%) scale(1.12);
		opacity: 1;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28),
		            0 4px 10px rgba(0, 0, 0, 0.18);
		outline: none;
	}
	.peregrine-carousel__nav:active {
		transform: translateY(-50%) scale(0.98);
	}
	.peregrine-carousel__nav--prev { left: 0.75rem; }
	.peregrine-carousel__nav--next { right: 0.75rem; }

	/* Pagination dots */
	.peregrine-carousel__dots {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1rem;
	}
	.peregrine-carousel__dot {
		width: 0.625rem;
		height: 0.625rem;
		border-radius: var(--pk-radius-pill);
		border: none;
		background: var(--pk-border);
		cursor: pointer;
		padding: 0;
		transition: background 150ms ease, transform 150ms ease;
	}
	.peregrine-carousel__dot:hover {
		transform: scale(1.2);
	}
	.peregrine-carousel__dot.is-active {
		background: var(--pk-accent);
		width: 1.5rem;
	}

	/* Slide content (category or product) — neutral baseline,
	   overridable by the theme. */
	.peregrine-carousel-category,
	.peregrine-carousel-product {
		display: flex;
		flex-direction: column;
		gap: var(--pk-space-2);
		padding: var(--pk-space-3);
		background: var(--pk-surface);
		border: 1px solid var(--pk-border);
		border-radius: var(--pk-radius-lg);
		text-decoration: none;
		color: inherit;
		transition: transform 200ms ease, box-shadow 200ms ease;
	}
	.peregrine-carousel-category:hover,
	.peregrine-carousel-product:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	}
	.peregrine-carousel-category__image,
	.peregrine-carousel-product__image {
		aspect-ratio: 16 / 10;
		overflow: hidden;
		border-radius: var(--pk-radius);
		background: var(--pk-surface-2);
	}
	.peregrine-carousel-category__image img,
	.peregrine-carousel-product__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 400ms ease;
	}
	.peregrine-carousel-category:hover .peregrine-carousel-category__image img,
	.peregrine-carousel-product:hover .peregrine-carousel-product__image img {
		transform: scale(1.06);
	}
	.peregrine-carousel-category__title,
	.peregrine-carousel-product__title {
		font-size: 1.125rem;
		font-weight: 700;
		margin: 0;
		color: inherit;
	}
	.peregrine-carousel-category__count,
	.peregrine-carousel-product__price {
		font-size: 0.875rem;
		color: var(--pk-text-muted);
	}

}