/* =========================================================
   PROGRAMS & SYSTEMS - Numbered Cards
   Numbers INSIDE cards (works with overflow:hidden)
   ========================================================= */

/* Initialize counter */
.shelf-track {
  counter-reset: shelf-counter;
}

/* Increment counter on each item */
.shelf-item {
  counter-increment: shelf-counter;
}

/* Large number inside the card - top left corner */
.shelf-item::after {
  content: counter(shelf-counter);
  position: absolute;
  top: -32px;
  left: -4px;
  font-size: 14rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  z-index: 1;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-shadow:
    0 18px 36px rgba(0, 0, 0, 0.38),
    0 3px 8px rgba(0, 0, 0, 0.22),
    0 -1px 0 rgba(255, 255, 255, 0.35);
}

/* For light cards, use dark numbers */
.shelf-item.light::after {
  color: rgba(0, 0, 0, 0.5);
  text-shadow:
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 2px 5px rgba(0, 0, 0, 0.12),
    0 -1px 0 rgba(255, 255, 255, 0.25);
}

/* Ensure content stays above */
.shelf-item .shelf-content,
.shelf-item > div {
  position: relative;
  z-index: 2;
}


/* =========================================================
   ALTERNATIVE: Outline stroke style (more Netflix-like)
   ========================================================= */

/*
.shelf-item::after {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.3);
  text-shadow: none;
}
*/


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  .shelf-item::after {
    font-size: 9rem;
    top: -18px;
    left: -2px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .shelf-item::after {
    font-size: 9rem;
    top: -10px;
    left: -1px;
  }
  
  .shelf-item.light::after {
    color: rgba(0, 0, 0, 0.42);
  }
}