/* ITER 277 — Generic skeleton-loader CSS (BS-parity).
 *
 * Pairs with: frontend/mobile/assets/js/components/skeleton-loader.js
 *
 * Namespace: .bs-skel / .bs-skel-wrap (avoids collision with):
 *   - .game-item--skeleton + .game-skeleton__shimmer (slot-deep-fixes.css)
 *   - .search-results-skeleton + .search-skel-item   (search-instant.js inline)
 *   - .slot-skeleton-item                            (slot-deep-fixes.css)
 *
 * Animation: bsSkelPulse opacity 0.3↔0.7 over 1.4s (matches existing srchPulse
 * timing in search-instant.js — keeps pulse rhythm consistent across the app).
 * ============================================================= */

@keyframes bsSkelPulse {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.65; }
}

/* ===== ITER 326 hotfix — [hidden] attribute MUST override variant display rules =====
 * Bug: variants (.bs-skel-wrap--slot/--card/--provider, .bs-skel-chip-row) declare
 * `display: grid|flex` further down which beats the user-agent `[hidden] { display: none }`.
 * Result: skeletons with `hidden` attr remained visible above real grid (slot page black mass).
 * Fix: explicit [hidden] guards with !important so SSR-emitted hidden attr always hides. */
.bs-skel-wrap[hidden],
.bs-skel-wrap--slot[hidden],
.bs-skel-wrap--card[hidden],
.bs-skel-wrap--provider[hidden],
.bs-skel-chip-row[hidden] {
  display: none !important;
}

.bs-skel-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

/* ===== Card variant: 2-col grid (matches typical game/provider grid) ===== */
.bs-skel-wrap--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* default 2-col mobile */
  gap: 8px;
  padding: 8px;
}
@media (min-width: 600px) {
  .bs-skel-wrap--card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .bs-skel-wrap--card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Common skeleton item base ===== */
.bs-skel {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bs-skel--card {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.bs-skel--block {
  height: 64px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  animation: bsSkelPulse 1.4s ease-in-out infinite;
}

.bs-skel--line {
  display: block;
  padding: 4px 0;
}

/* ===== Skeleton sub-elements ===== */
.bs-skel__img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  animation: bsSkelPulse 1.4s ease-in-out infinite;
}

.bs-skel__img--card {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 1:1 aspect, matches game card thumbnails */
}

.bs-skel__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.bs-skel__line {
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  animation: bsSkelPulse 1.4s ease-in-out infinite;
}
.bs-skel--card .bs-skel__line:nth-child(2) { animation-delay: 0.15s; }
.bs-skel--card .bs-skel__line:nth-child(3) { animation-delay: 0.3s; }
.bs-skel--list-row .bs-skel__line { animation-delay: 0.2s; }

.bs-skel__line--w50 { width: 50%; }
.bs-skel__line--w60 { width: 60%; }
.bs-skel__line--w80 { width: 80%; }
.bs-skel__line--w90 { width: 90%; }

/* ===== ITER 294 — Extended variants (B#62 expansion) ===== */
.bs-skel__img--slot {
  aspect-ratio: 5 / 7;
  width: 100%;
  height: auto;
  padding-bottom: 0;
  border-radius: 8px;
}
.bs-skel__img--banner {
  aspect-ratio: 21 / 9;
  width: 100%;
  height: auto;
  padding-bottom: 0;
  border-radius: 12px;
}
.bs-skel__img--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.bs-skel__chip {
  display: inline-block;
  height: 28px;
  width: 80px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  animation: bsSkelPulse 1.4s ease-in-out infinite;
  margin-right: 6px;
}
.bs-skel-chip-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bs-skel-chip-row::-webkit-scrollbar { display: none; }

/* Slot grid wrap (5:7 aspect cards) */
.bs-skel-wrap--slot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}
@media (min-width: 480px) {
  .bs-skel-wrap--slot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Provider list wrap (vertical rows) */
.bs-skel-wrap--provider {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
}

/* Reduced motion: disable pulse — keep solid placeholders */
@media (prefers-reduced-motion: reduce) {
  .bs-skel--block,
  .bs-skel__img,
  .bs-skel__line,
  .bs-skel__chip {
    animation: none;
    opacity: 0.45;
  }
}