/* ==========================================================================
   Stepify — Tutorials Listing Page
   Styles specific to /tutorials index page.
   Requires base.css loaded first.
   ========================================================================== */

/* ---- Additional theme variables (listing-specific) ---- */
:root {
  --card-bg: #fff; --card-border: #e2e8f0; --card-hover: #0891B2;
  --filter-bg: transparent; --filter-text: #475569; --filter-border: #e2e8f0;
  --filter-active-bg: #0E7490; --filter-active-text: #fff;
  --platform-bg: rgba(15,23,42,0.7); --thumb-bg: #e2e8f0;
}
[data-theme="dark"] {
  --card-bg: #1E293B; --card-border: #334155; --card-hover: #22D3EE;
  --filter-bg: transparent; --filter-text: #94A3B8; --filter-border: #475569;
  --filter-active-bg: #0E7490; --filter-active-text: #fff;
  --platform-bg: rgba(2,6,23,0.8); --thumb-bg: #334155;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --card-bg: #1E293B; --card-border: #334155; --card-hover: #22D3EE;
    --filter-bg: transparent; --filter-text: #94A3B8; --filter-border: #475569;
    --filter-active-bg: #0E7490; --filter-active-text: #fff;
    --platform-bg: rgba(2,6,23,0.8); --thumb-bg: #334155;
  }
}

/* ---- Hero (listing variant) ---- */
.hero { margin-bottom: 2rem; }
.hero h1 {
  font-family: var(--font-heading); font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700; color: var(--text); margin-bottom: 0.5rem;
}
.hero .subtitle { color: var(--body); font-size: 1rem; max-width: 560px; margin-bottom: 0.5rem; }
.hero .stats { color: var(--muted); font-size: 0.85rem; font-weight: 500; }

/* ---- Filter bar ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-btn {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  padding: 0.4rem 1rem; border-radius: 9999px; border: 1px solid var(--filter-border);
  background: var(--filter-bg); color: var(--filter-text); cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--card-hover); color: var(--card-hover); }
.filter-btn.active {
  background: var(--filter-active-bg); color: var(--filter-active-text);
  border-color: var(--filter-active-bg);
}

/* ---- Cards grid ---- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cards-grid { grid-template-columns: 1fr; } }

/* ---- Tutorial card ---- */
.tut-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s; display: block;
  border-bottom: 2px solid var(--badge-accent);
}
.tut-card:hover {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-decoration: none;
}

/* ---- Card thumbnail ---- */
.card-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--thumb-bg); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-thumb-empty { display: flex; align-items: flex-end; padding: 0.75rem; }
.card-platform {
  position: absolute; top: 0.5rem; left: 0.5rem; background: var(--platform-bg);
  color: white; font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.5rem;
  border-radius: 4px; letter-spacing: 0.03em; text-transform: uppercase;
}
.card-thumb-empty .card-platform { position: static; }

/* ---- Card body ---- */
.card-body { padding: 1rem; }
.card-body h2 {
  font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600;
  color: var(--heading); line-height: 1.4; margin-bottom: 0.25rem;
}
.card-meta { font-size: 0.8rem; color: var(--muted); }

/* ---- Card preview & badge ---- */
.card-preview {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.tut-card:hover .card-preview, .tut-card:focus-within .card-preview { opacity: 1; }
.card-badge {
  position: absolute; bottom: 0.5rem; right: 0.5rem; width: 28px; height: 28px;
  background: rgba(0,0,0,0.6); border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
}
.card-badge svg { width: 12px; height: 12px; fill: white; margin-left: 1px; }

/* ---- Empty state ---- */
.empty-state { text-align: center; color: var(--muted); padding: 3rem 1rem; font-size: 0.95rem; }

/* ---- Pagination ---- */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 0.4rem;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.page-btn {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  padding: 0.4rem 0.75rem; border-radius: 6px; border: 1px solid var(--filter-border);
  background: var(--surface); color: var(--body); text-decoration: none;
  cursor: pointer; transition: all 0.15s;
}
.page-btn:hover { border-color: var(--card-hover); color: var(--card-hover); text-decoration: none; }
.page-current {
  background: var(--filter-active-bg); color: var(--filter-active-text);
  border-color: var(--filter-active-bg); cursor: default;
}
.page-current:hover { color: var(--filter-active-text); border-color: var(--filter-active-bg); }
.page-ellipsis { color: var(--muted); padding: 0 0.25rem; }

/* ---- Footer override (listing adds border-top) ---- */
footer { border-top: 1px solid var(--border); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .card-preview { display: none !important; }
}