/*
 * Replaces swiper-bundle.min.css (16,466 B) with only what the site's two
 * sliders actually use.
 *
 * The class names are Swiper's on purpose — usearea.css styles
 * `.references-swiper .swiper-wrapper` / `.swiper-slide`, main.home.css and
 * main.purified.css carry `.swiper-slide-active` rules, and the parity harness
 * selects `.swiper`. See components/Slider.tsx.
 *
 * The base rules below are Swiper 8's own, minus everything these two sliders
 * never touch (vertical mode, 3D/fade/cube/flip effects, pagination, scrollbar,
 * zoom, lazy, a11y, autoheight, css-mode scroll-snap). Two deliberate drops:
 *
 *   - `transition-property: transform` on the wrapper and slides. Swiper
 *     transitions in CSS; embla animates the transform itself frame by frame,
 *     so a CSS transition would fight it and lag every scroll.
 *   - the inline slide widths Swiper wrote from JS. Those move here, into CSS,
 *     which is the one real structural difference between the two engines.
 *
 * Widths reproduce Swiper's arithmetic exactly:
 *   slideWidth = (containerWidth - spaceBetween × (slidesPerView - 1)) / slidesPerView
 * with `margin-right: spaceBetween` on every slide.
 */

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
}

.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
}

/*
 * Home brand slider — spaceBetween 24, slidesPerView 1 / 2 / 3 / 4 / 5.
 * Breakpoints copied from the `data-slider-options` attribute that
 * main.min.js used to read.
 */
.gt-slider .swiper-slide {
  margin-right: 24px;
  width: 100%;
}

@media (min-width: 576px) {
  .gt-slider .swiper-slide {
    width: calc((100% - 24px) / 2);
  }
}

@media (min-width: 768px) {
  .gt-slider .swiper-slide {
    width: calc((100% - 48px) / 3);
  }
}

@media (min-width: 1025px) {
  .gt-slider .swiper-slide {
    width: calc((100% - 72px) / 4);
  }
}

@media (min-width: 1400px) {
  .gt-slider .swiper-slide {
    width: calc((100% - 96px) / 5);
  }
}

/*
 * References slider — Swiper ran this one with `width: 300`, which overrode the
 * measured container width in its arithmetic, so slides were a fixed
 * (300 - 12) / 2 = 144px at every viewport regardless of how wide
 * `.references-swiper` actually was. Reproduced literally.
 */
.references-swiper .swiper-slide {
  width: 144px;
  margin-right: 12px;
}