/* ============================================================
   PlayCourse — Course Card & Grid  (pc-course-card, pc-courses-*)
   Card shell and body are now Tailwind-driven; this file keeps
   the grid fallback, pagination, and load-more spinner styles.
   ============================================================ */

/* ── Grid (fallback for when Tailwind CDN isn't loaded) ─────── */
.pc-courses-wrap { width: 100%; }

.pc-courses-grid {
  display: grid;
  gap: 24px;
}

/* Tailwind responsive classes handle columns; these are the CSS fallback */
.pc-courses-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pc-courses-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pc-courses-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .pc-courses-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .pc-courses-grid--cols-3,
  .pc-courses-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pc-courses-grid--cols-2,
  .pc-courses-grid--cols-3,
  .pc-courses-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ── Pagination ──────────────────────────────────────────────── */
.pc-pagination .page-numbers {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pc-pagination .page-numbers li { display: flex; }
.pc-pagination .page-numbers a,
.pc-pagination .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--pc-border, #e5e7eb);
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--pc-text, #111827);
  text-decoration: none;
  background: #fff;
  transition: background .15s, border-color .15s, color .15s;
}
.pc-pagination .page-numbers a:hover {
  background: color-mix(in srgb, var(--pco-primary-color, #7A3FF2) 10%, white);
  border-color: var(--pco-primary-color, #7A3FF2);
  color: var(--pco-primary-color, #7A3FF2);
}
.pc-pagination .page-numbers .current {
  background: var(--pco-primary-color, #7A3FF2);
  border-color: var(--pco-primary-color, #7A3FF2);
  color: #fff;
}
.pc-pagination .page-numbers .dots {
  border-color: transparent;
  background: transparent;
}

/* ── Load More ───────────────────────────────────────────────── */
.pc-load-more-btn--loading {
  background: var(--pco-primary-color, #7A3FF2) !important;
  color: #fff !important;
  border-color: var(--pco-primary-color, #7A3FF2) !important;
}
.pc-load-more-btn:disabled { opacity: .7; cursor: wait; }
.pc-load-more-spinner i {
  display: inline-block;
  animation: pc-spin .7s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }