/* ==========================================================================
   Carousel container

   Family:
     .carousel

  API (inline styles):
    --cols               Base visible columns (default: 1)
    --cols-md            Override at 40rem+
    --cols-lg            Override at 64rem+
    --cols-xl            Override at 90rem+
    --rows               Base row count (default: 1)
    --rows-md            Override at 40rem+
    --rows-lg            Override at 64rem+
    --rows-xl            Override at 90rem+
    --row                Optional child grid row
    --row-md             Optional child grid row at 40rem+
    --row-lg             Optional child grid row at 64rem+
    --row-xl             Optional child grid row at 90rem+

  Runtime contexts (from container API):
    --c                 Resolved column count for current breakpoint
    --r                 Resolved row count for current breakpoint
    --pi                Inline padding context
    --gap               Spacing rhythm context

   Family modifiers:
     .carousel--full-groups-only
     .carousel--rows-2
     .carousel--hint-inset

   Example markup:
    <div class="carousel" style="--cols: 1; --cols-xl: 4;">...</div>
    <div class="carousel gap-0" style="--cols: 2;">...</div>
     <div class="carousel mw-full" style="--cols: 2; --cols-xl: 5; --rows-lg: 2;">...</div>
   ========================================================================== */

.carousel {
  --c: var(--cols, 1);
  --r: var(--rows, 1);
  --carousel-pages: 1;
  --carousel-progress: 0;
  --carousel-handle-width: 100%;
  --carousel-handle-left: 0%;
  --carousel-track-color: var(--wp--preset--color--light-brown);
  --carousel-track-color: color-mix(in srgb, var(--wp--preset--color--warm-brown) 16%, transparent);
  --carousel-handle-color: var(--wp--preset--color--warm-brown);
  --carousel-track-height: var(--s-2);
  --carousel-handle-height: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  width: 100%;
  min-width: 0;
}

.section.brown .carousel {
  --carousel-track-color: var(--wp--preset--color--off-white);
  --carousel-track-color: color-mix(in srgb, var(--wp--preset--color--off-white) 24%, transparent);
  --carousel-handle-color: var(--wp--preset--color--off-white);
}

.carousel__viewport {
  display: grid;
  grid-auto-flow: column dense;
  grid-auto-columns: calc((100% - (var(--c) - 1) * var(--gap)) / var(--c));
  grid-template-rows: repeat(var(--r), minmax(0, 1fr));
  align-items: start;
  gap: var(--gap);
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__viewport > * {
  min-width: 0;
  grid-row: var(--row, auto);
  scroll-snap-align: none;
}

.carousel__viewport > .is-snap-start {
  scroll-snap-align: start;
}

.carousel--rows-2 {
  --rows: 2;
}

.carousel__hint {
  width: 100%;
}

.carousel--hint-inset .carousel__hint {
  padding-inline: max(var(--gap), var(--pi));
}

.carousel__hint[hidden] {
  display: none;
}

.carousel__hint-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--carousel-pages), minmax(0, 1fr));
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: var(--s-16);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.carousel__hint-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--carousel-track-height);
  background-color: var(--carousel-track-color);
  transform: translateY(-50%);
  border-radius: 9999rem;
}

.carousel__hint-handle {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: var(--carousel-handle-width);
  height: var(--carousel-handle-height);
  background-color: var(--carousel-handle-color);
  border-radius: 9999rem;
  left: var(--carousel-handle-left);
  transform: translateY(-50%);
  pointer-events: auto;
  cursor: grab;
}

.carousel.is-dragging .carousel__hint-handle {
  cursor: grabbing;
  transition: none;
}

.carousel.is-snapping .carousel__hint-handle {
  transition: left 0.25s ease-out;
}

.carousel__hint-track:focus-visible {
  outline: 1px solid var(--carousel-handle-color);
  outline-offset: var(--s-4);
}

@media (min-width: 40rem) {
  .carousel {
    --c: var(--cols-md, var(--cols, 1));
    --r: var(--rows-md, var(--rows, 1));
  }

  .carousel__viewport > * {
    grid-row: var(--row-md, var(--row, auto));
  }
}

@media (min-width: 64rem) {
  .carousel {
    --c: var(--cols-lg, var(--cols-md, var(--cols, 1)));
    --r: var(--rows-lg, var(--rows-md, var(--rows, 1)));
  }

  .carousel__viewport > * {
    grid-row: var(--row-lg, var(--row-md, var(--row, auto)));
  }
}

@media (min-width: 90rem) {
  .carousel {
    --c: var(--cols-xl, var(--cols-lg, var(--cols-md, var(--cols, 1))));
    --r: var(--rows-xl, var(--rows-lg, var(--rows-md, var(--rows, 1))));
  }

  .carousel__viewport > * {
    grid-row: var(--row-xl, var(--row-lg, var(--row-md, var(--row, auto))));
  }
}