/* SR Image Reel */

.sr-image-reel-footer-shell{
  margin: clamp(20px, 3vw, 36px) auto 24px;
  padding-inline: clamp(6px, 1vw, 12px);
  width: min(1920px, 100%);
}

.sr-image-reel-footer-card{
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.sr-image-reel-footer-reel{
  padding: 14px 0 6px;
}

.sr-image-reel-footer-reel .sr-reel{
  background: transparent;
}

.sr-image-reel-footer-reel .sr-reel--fullbleed{
  width: 100%;
  margin-left: 0;
}

.sr-image-reel-footer-reviews{
  padding: 8px 18px 18px;
}

.sr-image-reel-footer-reviews:empty{
  display: none;
}

.sr-reel{
  --sr-tile-w: 240px;
  --sr-tile-h: 240px;
  --sr-gap: 10px;
  --sr-speed: 35s;
  --sr-bg: transparent;
  --sr-radius: 0px;
  background: var(--sr-bg);
}

.sr-reel--fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.sr-reel-viewport{
  overflow: hidden;
}

.sr-reel-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: sr-reel-scroll var(--sr-speed) linear infinite;
}

.sr-reel--dir-right .sr-reel-track{
  animation-direction: reverse;
}

.sr-reel--pause:hover .sr-reel-track{
  animation-play-state: paused;
}

.sr-reel-group{
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: repeat(2, auto);
  gap: var(--sr-gap);
  /* Half-gap padding gives subtle separation between group instances without a big runway */
  padding: calc(var(--sr-gap) / 2);
}

.sr-reel--rows1 .sr-reel-group{
  grid-template-rows: repeat(1, auto);
}

.sr-reel-row{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--sr-tile-w);
  gap: var(--sr-gap);
}

.sr-reel-tile{
  width: var(--sr-tile-w);
  height: var(--sr-tile-h);
  overflow: hidden;
  border-radius: var(--sr-radius);
}

.sr-reel-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Loop distance is set in JS via --sr-shift */
@keyframes sr-reel-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--sr-shift, 0px))); }
}

/* Mobile: shrink tiles a bit */
@media (max-width: 600px){
  .sr-image-reel-footer-shell{
    margin-top: 16px;
    padding-inline: 10px;
  }

  .sr-image-reel-footer-reviews{
    padding: 8px 10px 12px;
  }

  .sr-reel{
    --sr-tile-w: 170px;
    --sr-tile-h: 170px;
  }
}