/* Shared by every [data-park-carousel] (parking/banners, the brand carousel): a scroll-snap track and the nav the module
   @parking/carousel adds (arrows + dots). Without the script the track scrolls and there is no nav.
   The root reserves the nav row (48px), so adding it after load does not move the page (CLS). */
[data-park-carousel] { position: relative; padding-bottom: 48px; }
.park-carousel-track { position: relative; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: thin; }
.park-carousel-track > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
[data-park-carousel][data-ready] .park-carousel-track { scrollbar-width: none; }
[data-park-carousel][data-ready] .park-carousel-track::-webkit-scrollbar { display: none; }
.park-carousel-track:focus-visible { outline: 3px solid var(--park-accent, #6d52ff); outline-offset: 2px; }

.park-carousel-nav { position: absolute; inset: auto 0 0; height: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.park-carousel-arrow { flex: none; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--park-glass, rgba(18, 22, 31, .08)); color: var(--wp--preset--color--foreground, #14161c);
	box-shadow: inset 0 0 0 1px var(--park-rim, rgba(18, 22, 31, .14)); transition: transform .4s var(--park-spring, ease); }
.park-carousel-arrow:hover { transform: scale(1.08); }
.park-carousel-arrow:focus-visible, .park-carousel-dot:focus-visible { outline: 3px solid var(--park-accent, #6d52ff); outline-offset: 2px; }
.park-carousel-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.park-carousel-dots { display: flex; align-items: center; }
/* 24px tap target around an 8px dot; the current dot is a pill. */
.park-carousel-dot { position: relative; width: 24px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.park-carousel-dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px;
	background: var(--wp--preset--color--muted, #5f6472); opacity: .45; transition: width .4s var(--park-spring, ease), margin .4s var(--park-spring, ease), opacity .3s; }
.park-carousel-dot[aria-current="true"]::before { width: 22px; margin-left: -11px; opacity: 1; background: var(--park-accent, #6d52ff); }
@media (prefers-reduced-motion: reduce) {
	.park-carousel-arrow, .park-carousel-dot::before { transition: none; }
}
.park-carousel-nav[hidden], .park-carousel-dots[hidden] { display: none; }