/* Staff-authored homepage spotlight sections (Admin → Marketing).
 *
 * Cards are the rail `.pcard`, the same component Flash Deals, New Releases
 * and Biggest Movers use, so a spotlight reads as part of the homepage rather
 * than a separate design. `.pcard` looks right between roughly 185px and
 * 300px wide, so a page is sized to keep cells in that band instead of
 * stretching to the full section width — 2 columns across 1176px would be
 * 588px per cell, well past where the card holds up.
 *
 * Structure: .spot-grid holds one .spot-page per scroll page; pages snap
 * horizontally using the same mechanics as .p-rail. A page narrower than the
 * section means the next one peeks, which is the rails' own scroll cue.
 *
 * Breakpoints, desktop-first like the rest of the storefront:
 *   base (≥1024) — the layout the admin picked
 *   ≤1023        — same page count, fewer columns
 *   ≤680         — each layout keeps a distinct phone form; the point of
 *                  offering four layouts is variety on the front page
 */

.spot-slot:empty {
  display: none;
}

.spot-sec.has-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  padding: 28px;
  overflow: hidden;
}

/* Keep the title and lede readable over arbitrary uploaded art. */
.spot-sec.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 10, 0.88) 0%,
    rgba(10, 13, 10, 0.72) 45%,
    rgba(10, 13, 10, 0.86) 100%
  );
}

.spot-sec.has-bg > * {
  position: relative;
  z-index: 1;
}

.spot-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.spot-grid::-webkit-scrollbar {
  display: none;
}

.spot-page {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  gap: 16px;
}

/* Page widths chosen so each layout's cells land in .pcard's good range. */
.spot-grid.is-strip .spot-page {
  flex-basis: 100%;
  grid-template-columns: repeat(6, 1fr);
}

.spot-grid.is-pages_3x2 .spot-page {
  flex-basis: min(100%, 900px);
  grid-template-columns: repeat(3, 1fr);
}

.spot-grid.is-pages_2x2 .spot-page {
  flex-basis: min(100%, 620px);
  grid-template-columns: repeat(2, 1fr);
}

/* Mosaic: a portrait lead beside two stacked rail cards. The pair sets the
   row height and the lead matches it, so the section is no taller than 3x2.
   The page is wide enough that two of them overflow a 1192px section — at
   620px each they came to 1258 and left only 66px of scroll, which feels
   stuck rather than swipeable. */
.spot-grid.is-pages_mosaic .spot-page {
  flex-basis: min(100%, 720px);
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
}

.spot-grid.is-pages_mosaic .spot-page > .spot-lead {
  grid-row: span 2;
  min-height: 0;
}

/* ---- mosaic lead card ---- */

.spot-lead {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition: border-color 0.16s ease;
}

.spot-lead:hover {
  border-color: var(--green-deep);
}

.spot-lead-media {
  display: block;
  /* Contain the art stack. cardMediaInner() returns a blurred backdrop and a
     sharp cover; without containment they lay out one under the other and
     roughly double the card's height. */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

/* The lead uses the same art stack as every other card (theme.css): a blurred
   backdrop behind the whole cover, not a cropped fill. Stretching the cover to
   the cell instead cut 17.8% off a 2:3 key art at 1024+ -- the lead is the
   largest art on the page, so it is the worst place to lose the top and bottom.
   The .pcard parks its cover right because price and chips overlay the left;
   the lead carries its title below the art, so it centres instead. */
.spot-lead-media .art-fg-wrap {
  /* Centred by translate, not by a left/right pair: pinning both edges makes
     the width definite and the 2:3 aspect-ratio stops driving it. */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  /* The pcard's edge fade shapes the parked-right cover into its frame; a
     centred one would just look faded on both sides. */
  -webkit-mask-image: none;
  mask-image: none;
}

.spot-lead-media .art-fg {
  object-position: center;
}

.spot-lead-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.spot-lead-title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spot-lead-price {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
}

.spot-lead-price s {
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}

/* The inline discount is rendered only for spotlight cards, and only shown
   where the platform and region chips are hidden (narrow cells, below). */
.spot-grid .off-inline,
.spot-lead .off-inline {
  display: none;
}

.spot-lead .off-inline {
  display: inline;
  margin-right: 4px;
}

@media not all and (min-width: 1024px) {
  /* Tablet keeps the page count and drops a column so cells stay legible. */
  .spot-grid.is-strip .spot-page {
    grid-template-columns: repeat(4, 1fr);
  }

  .spot-grid.is-pages_3x2 .spot-page {
    grid-template-columns: repeat(2, 1fr);
  }

  .spot-sec.has-bg {
    padding: 22px;
  }
}

@media (max-width: 680px) {
  /* Four distinct phone forms rather than one shared rail — the layout an
     admin picks should still be visible on a phone. */
  .spot-grid {
    gap: 12px;
    scroll-snap-type: x proximity;
  }

  .spot-page {
    flex-basis: 100%;
  }

  /* strip — compact, roughly two and a half cards in view */
  .spot-grid.is-strip .spot-page {
    display: contents;
  }

  .spot-grid.is-strip > .spot-page > .pcard {
    flex: 0 0 42%;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* 2x2 — one larger card at a time */
  .spot-grid.is-pages_2x2 .spot-page {
    display: contents;
  }

  .spot-grid.is-pages_2x2 > .spot-page > .pcard {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* 3x2 — stays a real 2-column grid, swiping between pages */
  .spot-grid.is-pages_3x2 .spot-page {
    grid-template-columns: repeat(2, 1fr);
  }

  /* mosaic — the same shape as desktop, one page per screen, swipe between
     pages. The lead keeps its two-row span rather than going full width. */
  .spot-grid.is-pages_mosaic .spot-page {
    grid-template-columns: 1.2fr 1fr;
    gap: 10px;
  }

  .spot-grid.is-pages_mosaic .spot-page > .spot-lead {
    grid-row: span 2;
  }

  /* Narrow cells crowd the price: 164px in the 3x2 and mosaic pairs, 144px in
     the strip. Drop the platform and region chips there and put the discount
     in front of the price instead. The 2x2 card is 268px and keeps both. */
  .spot-grid.is-strip .pcard .plat,
  .spot-grid.is-strip .pcard .art-region,
  .spot-grid.is-strip .pcard .off-badge,
  .spot-grid.is-pages_3x2 .pcard .plat,
  .spot-grid.is-pages_3x2 .pcard .art-region,
  .spot-grid.is-pages_3x2 .pcard .off-badge,
  .spot-grid.is-pages_mosaic .pcard .plat,
  .spot-grid.is-pages_mosaic .pcard .art-region,
  .spot-grid.is-pages_mosaic .pcard .off-badge {
    display: none;
  }

  .spot-grid.is-strip .off-inline,
  .spot-grid.is-pages_3x2 .off-inline,
  .spot-grid.is-pages_mosaic .off-inline {
    display: inline;
    margin-right: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
  }

  /* .art-left is capped at 62% so the cover shows beside it. With the chips
     gone it no longer needs to be that narrow, and at ~62px of content the
     discount and price cannot share a line. Widen it and step the price down. */
  .spot-grid.is-strip .pcard .art-left,
  .spot-grid.is-pages_3x2 .pcard .art-left,
  .spot-grid.is-pages_mosaic .pcard .art-left {
    width: 78%;
    max-width: 78%;
  }

  /* Step the price down so the discount and the price share one line, and
     drop the old price to the line below. */
  .spot-grid.is-strip .pcard .art-price .now,
  .spot-grid.is-pages_3x2 .pcard .art-price .now,
  .spot-grid.is-pages_mosaic .pcard .art-price .now {
    font-size: 15px;
  }

  /* The strip's cell is 144px, tighter still — one more step keeps its
     discount and price on one line too. */
  .spot-grid.is-strip .pcard .art-price .now {
    font-size: 13px;
  }

  .spot-grid.is-strip .off-inline {
    font-size: 10px;
    margin-right: 4px;
  }

  .spot-grid.is-strip .pcard .art-price s,
  .spot-grid.is-pages_3x2 .pcard .art-price s,
  .spot-grid.is-pages_mosaic .pcard .art-price s {
    display: block;
    margin-left: 0;
    font-size: 11px;
  }

  .spot-sec.has-bg {
    padding: 18px 16px;
    border-radius: 14px;
  }
}