/**
 * Mobile swipe slider
 *
 * The Webflow export froze the carousel in a half-rendered state: the library's
 * viewport/slider wrappers sit in the markup, but the attributes the library
 * identifies its slides by are gone. It errors out on load, the wrappers keep
 * their zero height and overflow:hidden, and every card ends up stacked
 * invisibly on top of the next.
 *
 * This dissolves those wrappers so the cards become plain flex children again
 * and the row scrolls horizontally with snap points. mobile-slider.js adds the
 * pagination dots on top.
 *
 * To cover another slider, add its class prefix to the selector lists below and
 * to SLIDER_PREFIXES in mobile-slider.js. Expected markup:
 * <prefix>-carousel > <prefix>-slides > <prefix>-slide, plus an optional
 * <prefix>-points container.
 */

/* 1 — dissolve the frozen library wrappers */
.garageslider-slides .flickity-viewport,
.garageslider-slides .flickity-slider,
.businessslider-slides .flickity-viewport,
.businessslider-slides .flickity-slider {
  display: contents;
}

/* 2 — cards back into normal flow (the library CSS absolutely positions them) */
.garageslider-carousel .garageslider-slide,
.businessslider-carousel .businessslider-slide {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

/* 3 — the track; mobile-slider.js moves it by transform, one card per swipe */

/* The visible window spans the whole screen so an incoming card travels in from
 * the very edge instead of appearing inside the section's side padding. The
 * card keeps that padding as its own inset (see EDGE_INSET below). */
.garageslider-carousel,
.businessslider-carousel {
  /* the side gap the cards keep to the screen edge */
  --edge-inset: 16px;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.garageslider-carousel > .garageslider-slides,
.businessslider-carousel > .businessslider-slides {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: var(--card-gap, 16px);
  /* the side inset the cards keep, now that the window runs edge to edge */
  padding-inline: var(--edge-inset);
  overflow: visible;
  /* horizontal gestures belong to the slider, vertical ones to the page */
  touch-action: pan-y;
  will-change: transform;
  cursor: grab;
  /* the settle animation — the finger drags without it, see .is-dragging */
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.garageslider-slides.is-dragging,
.businessslider-slides.is-dragging {
  cursor: grabbing;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .garageslider-carousel > .garageslider-slides,
  .businessslider-carousel > .businessslider-slides {
    transition: none;
  }
}

/* 4 — card sizing */
.garageslider-carousel .garageslider-slide,
.businessslider-carousel .businessslider-slide {
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Tailored Solutions: one full card per view, nothing cut off */
.businessslider-carousel .businessslider-slide {
  flex: 0 0 calc(100vw - var(--edge-inset) * 2);
  width: calc(100vw - var(--edge-inset) * 2);
  max-width: none;
}

/* Garage Services: the card is only as wide as its list, so the next one
 * already shows at the right edge as the hint that this swipes */
.garageslider-carousel {
  --card-gap: 48px;
}

.garageslider-carousel .garageslider-slide {
  flex: 0 0 auto;
  width: auto;
  max-width: calc(100vw - var(--edge-inset) * 2);
}

@media screen and (max-width: 479px) {
  /* the export widens the row here; the track must stay clipped to the card */
  .garageslider-carousel,
  .businessslider-carousel {
    overflow: hidden;
  }
  .garageslider-carousel > .garageslider-slides,
  .businessslider-carousel > .businessslider-slides {
    overflow: visible;
  }
}

/* 5 — dots sit below the track and mark the card currently in view */
.garageslider-points,
.businessslider-points {
  cursor: pointer;
}