/* COUNT THE CATCH — home page extras (page-specific; styles.css untouched) */

/* featured grid: reuse .grid.g4 + .t-card from styles.css */

/* loading skeletons */
.skel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.skel .sk-photo { aspect-ratio: 16/9; }
.skel .sk-line { height: 14px; border-radius: 7px; margin: 14px 18px 0; }
.skel .sk-line.w60 { width: 60%; }
.skel .sk-line.w40 { width: 40%; margin-bottom: 18px; }
.skel .sk-photo, .skel .sk-line {
  background: linear-gradient(90deg, #0d130d 25%, #162016 50%, #0d130d 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s infinite linear;
}
@keyframes sk-shimmer { to { background-position: -200% 0; } }

/* honest empty state */
.empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 52px 28px;
  text-align: center;
  color: var(--muted);
  grid-column: 1 / -1;
  background: rgba(166,255,0,.02);
}
.empty h3 {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  color: #e8eee6;
  font-size: 24px;
  margin-bottom: 10px;
}
.empty p { font-size: 14px; margin-bottom: 20px; }
.empty .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.load-err {
  border: 1px solid rgba(255,110,110,.35);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  color: #e8b0b0;
  grid-column: 1 / -1;
  background: rgba(255,80,80,.04);
}
.load-err p { margin-bottom: 16px; font-size: 14px; }