/* ------------------------------------------------------------------ *
 * Kategori-hub — quiz-kort-listning. Ligger i /public (uhashet, uden   *
 * for bundlen), så den ikke ændrer CSS-hashen på øvrige sider. Bruger  *
 * designsystemets --sh-*-tokens. Kun hub-sider loader den.             *
 * ------------------------------------------------------------------ */

.qf-hub { max-width: var(--sh-maxw); }
.qf-hub__list { display: grid; gap: var(--sh-space-6); }

/* Quiz-kort: thumbnail venstre (260px) + tekst højre. */
.qf-hubcard {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  background: var(--sh-surface);
  border: 1px solid var(--sh-slate-200);
  border-radius: var(--sh-radius-lg);
  overflow: hidden;
}
.qf-hubcard--nothumb { grid-template-columns: 1fr; }

.qf-hubcard__thumb { display: block; aspect-ratio: 16 / 10; background: var(--sh-slate-100); }
.qf-hubcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.qf-hubcard__body {
  padding: var(--sh-space-6);
  display: flex; flex-direction: column; gap: var(--sh-space-2);
  min-width: 0;
}
.qf-hubcard__title { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; }
.qf-hubcard__title a { color: var(--sh-ink-950); text-decoration: none; }
.qf-hubcard__title a:hover { color: var(--sh-slate-700); }
.qf-hubcard__excerpt {
  font-size: 15px; line-height: 1.5; color: var(--sh-slate-700);
  margin: 0; overflow-wrap: anywhere;
}
.qf-hubcard__more {
  align-self: flex-start; margin-top: var(--sh-space-1);
  font-size: 15px; font-weight: 600; color: var(--sh-ink-950);
  text-decoration: none; border-bottom: 1px solid var(--sh-slate-300);
}
.qf-hubcard__more:hover { border-bottom-color: var(--sh-ink-950); }

/* Brødkrummer (Hjem / Kategori). */
.qf-crumbs { display: flex; flex-wrap: wrap; gap: var(--sh-space-2); align-items: center; margin-bottom: var(--sh-space-6); font-size: 14px; color: var(--sh-slate-500); }
.qf-crumbs a { color: var(--sh-slate-700); text-decoration: none; }
.qf-crumbs a:hover { color: var(--sh-ink-950); }
.qf-crumbs__sep { color: var(--sh-slate-300); }
.qf-crumbs__current { color: var(--sh-ink-950); font-weight: 600; }

/* Hub-intro over kort-listen. */
.qf-hub__intro { margin: 0 0 var(--sh-space-8); max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--sh-slate-700); }

/* Mobil: thumbnail stables øverst. */
@media (max-width: 720px) {
  .qf-hubcard { grid-template-columns: 1fr; }
  .qf-hubcard__thumb { aspect-ratio: 16 / 9; }
}

/* Quiz-klynge som kompakt ikon-kort-grid (referansedesignets kategori-kort). */
.qf-qgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sh-space-4);
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.qf-qcard {
  display: flex; flex-direction: column; gap: var(--sh-space-3); height: 100%;
  padding: var(--sh-space-6);
  background: var(--sh-surface); border: 1px solid var(--sh-slate-200);
  border-radius: var(--sh-radius-lg); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  color: var(--sh-ink-950); text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.qf-qcard:hover {
  border-color: var(--sh-lime-500);
  box-shadow: 0 8px 24px -12px rgba(16, 24, 40, 0.25);
  transform: translateY(-2px);
}
.qf-qcard__ic {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--sh-radius-md);
  background: var(--sh-lime-400); color: var(--sh-ink-950);
}
.qf-qcard__ic svg { width: 24px; height: 24px; }
.qf-qcard__title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.qf-qcard__blurb {
  font-size: 14px; line-height: 1.5; color: var(--sh-slate-700);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qf-qcard__more { margin-top: auto; padding-top: var(--sh-space-1); font-size: 14px; font-weight: 600; color: var(--sh-ink-950); }

@media (max-width: 520px) { .qf-qgrid { grid-template-columns: 1fr; } }