/* =========================
   Collections Widget (Sprite)
   - Desktop: sprite is horizontal (wide)
   - Mobile:  sprite is vertical (tall)
   - Hover: lift only hovered item
   - Uses CSS vars:
       --count: number of sprite slots (e.g. 11)
       --idx:   sprite slot index (0..)
       --bg:    url('...') for sprite image
   ========================= */

.collections-widget {
  margin: 1rem 0 1.5rem;
}

.collections-widget__title {
  margin: 0 0 .75rem;
  font-weight: 600;
}

/* =========================
   Desktop (>= md)
   ========================= */

.collections-widget__desktop {
  gap: 18px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.collection-card {
  text-decoration: none;
  color: inherit;
  flex: 1 1 120px;
  max-width: 190px;
}

.collection-card__name {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  opacity: .85;
}

/* Viewport for one sprite slot */
.collection-card__img {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 14px;
  transition: transform 180ms ease;
  will-change: transform;
  background: #fff;
}

/*
  Keep correct proportions dynamically for ANY --count.

  Your desktop sprite size: 2048 x 558
  One slot width  = 2048 / --count
  Slot height     = 558

  So: (height / width) = 558 / (2048 / --count) = (558 * --count) / 2048
*/
.collection-card__img::before {
  content: "";
  display: block;
  padding-top: calc(100% * 558 * var(--count) / 2048);
}

/* Lift animation: only hovered item */
@media (hover: hover) and (pointer: fine) {
  .collection-card:hover .collection-card__img {
    transform: translateY(-10px);
  }
}
.collection-card:focus-visible .collection-card__img {
  transform: translateY(-10px);
}
.collection-card:active .collection-card__img {
  transform: translateY(-6px);
}

/* =========================
   Mobile (< md)
   ========================= */

.collection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .55rem 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.collection-row__name {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
  flex: 0 0 auto;
}

.collection-row__img {
  position: relative;
  overflow: hidden;
  width: 50%;
  border-radius: 12px;
  transition: transform 180ms ease;
  will-change: transform;
  background: #fff;
}

/*
  Your mobile sprite size: 558 x 2048 (vertical)
  One slot height = 2048 / --count
  Slot width      = 558

  So: (height / width) = (2048 / --count) / 558 = 2048 / (558 * --count)
*/
.collection-row__img::before {
  content: "";
  display: block;
  padding-top: calc(100% * 2048 / (558 * var(--count)));
}

@media (hover: hover) and (pointer: fine) {
  .collection-row:hover .collection-row__img {
    transform: translateY(-8px);
  }
}
.collection-row:focus-visible .collection-row__img {
  transform: translateY(-8px);
}
.collection-row:active .collection-row__img {
  transform: translateY(-5px);
}

/* =========================
   Sprite background layer
   ========================= */

.collection-sprite-bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-color: #fff;
}

/*
  Important: background-position in % moves across the "extra size"
  beyond the viewport. Using idx/(count-1) gives an even step.
*/

/* Desktop: move by X */
.collection-sprite-bg--desktop {
  background-size: calc(var(--count) * 100%) 100%;
  background-position-x: calc((var(--idx) * 100%) / (var(--count) - 1));
  background-position-y: 0%;
}

/* Mobile: move by Y */
.collection-sprite-bg--mobile {
  background-size: 100% calc(var(--count) * 100%);
  background-position-y: calc((var(--idx) * 100%) / (var(--count) - 1));
  background-position-x: 0%;
}

/* =========================
   Reduced motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .collection-card__img,
  .collection-row__img {
    transition: none;
  }
}