/*
 * shared carousel parts for the whole site.
 *
 * 1) unav - paired "back / forward" switch (figma: two 40x40 halves of one pill).
 *    <div class="unav"><button class="unav-btn unav-prev" data-dir="-1">..</button><button class="unav-btn unav-next" data-dir="1">..</button></div>
 *    only the look lives here. where the switch stands is up to the block.
 *
 * 2) ucar - carousel on native scroll (js/up-carousel.js):
 *    <div class="ucar" data-ucar> <div class="ucar-view"><div class="ucar-track"> cards </div></div> ... .unav ... </div>
 *    touch devices scroll it natively (inertia, snap), arrows and mouse drag are for desktop.
 */

/* ---------- unav ---------- */
.unav{display:flex;align-items:center}
.unav-btn{width:40px;height:40px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #DFDFDF;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease,background .2s ease}
.unav-prev{border-radius:100px 0 0 100px}
.unav-next{border-radius:0 100px 100px 0}
.unav-btn img{display:block;width:24px;height:24px;pointer-events:none}
.unav-btn:hover{background:#fff}
.unav-btn:focus-visible{outline:2px solid #EC7529;outline-offset:2px;position:relative;z-index:1}
/* no way to go further in that direction */
.unav-btn:disabled,.unav-btn.is-off{opacity:.4;cursor:default;background:rgba(255,255,255,.75)}
/* everything fits, nothing to scroll */
.unav.is-hidden{display:none}

/* ---------- ucar ---------- */
.ucar{position:relative}
.ucar-view{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;touch-action:pan-x pan-y}
.ucar-view::-webkit-scrollbar{display:none}
.ucar-track{display:flex;flex-wrap:nowrap;width:max-content;margin:0;padding:0;list-style:none;box-sizing:border-box}
.ucar-track > *{flex:0 0 auto;scroll-snap-align:start}
.ucar.is-drag .ucar-view{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}
@media (max-width:768px){
	.ucar-view{scroll-snap-type:x mandatory}
}