/* ============================================================================
   GitHubDB · css/home.css — LANDING PAGE (Startseite)
   ----------------------------------------------------------------------------
   Zuständig für die datendichte Startseite (js/home.js).
   EIGENE COMPONENT-CLASSES (hier definieren; Base-Primitive wie .panel,
   .repo-table, .btn, .skeleton werden NUR kontextuell erweitert, nie neu
   definiert):
     .hero, .hero-eyebrow, .hero h1, .hero-sub, .hero-actions,
     .home-grid, .home-panel, .panel-head, .panel-title, .panel-go,
     .panel-body, .home-table, .home-feed, .home-events, .home-feed-meta,
     .stat-strip, .stat-strip-head, .stat-strip-note, .stat-strip-grid,
     .big-stat, .big-stat-value, .big-stat-label, .stat-skel
   Nur Tokens aus css/tokens.css; Dark-only; genau ein Akzent (GitHub-Grün);
   alle Zahlen in --font-mono + tabular-nums. Reduced Motion übernimmt der
   globale Kill-Switch in base.css.
   ========================================================================== */

/* ---------- Hero (kompakt, daten-App — kein Marketing-Hero) ---------- */
.hero {
  padding: var(--space-5) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--space-3);
}
.hero h1 {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-2xl);
  color: var(--text-1);
  margin-bottom: var(--space-2);
}
.hero h1 .accent { color: var(--accent); }
.hero-sub {
  color: var(--text-2);
  font-size: var(--text-md);
  max-width: 62ch;
  margin-bottom: var(--space-4);
}
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- "GitHub in Zahlen" — Zahlenband (rate-limit-aware) ---------- */
.stat-strip {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.stat-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.stat-strip h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.stat-strip-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.big-stat { min-width: 0; padding: 0 var(--space-4); }
.big-stat + .big-stat { border-left: 1px solid var(--border); }
.big-stat:first-child { padding-left: 0; }
.big-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.big-stat-value .stat-skel { width: 85%; height: 24px; }
.big-stat.low .big-stat-value { color: var(--danger); }
.big-stat-label {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: var(--leading-xs);
}

/* ---------- Ranking-Panels ---------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.home-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: background-color var(--transition-fast) var(--ease-out),
              color var(--transition-fast) var(--ease-out);
}
.panel-head:hover { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.panel-head:active { background: var(--surface-3); }
.panel-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-go {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.panel-head:hover .panel-go { color: var(--accent); }
.panel-body { flex: 1; overflow-x: auto; min-width: 0; }

.home-table { font-size: var(--text-sm); }
.home-table th { background: var(--bg); }
.home-table td { padding: 7px var(--space-3); }
.home-table .col-rank { width: 32px; color: var(--text-3); }
/* Stars-Spalte = subtiler Akzent (DOM-Spalte 4) */
.home-table td:nth-child(4) { color: var(--success); font-weight: var(--weight-semibold); }
.home-table td:nth-child(4) .skeleton { background: var(--surface-2); }
/* Sprache & Issues in den Home-Panels ausblenden (Dichte) */
.home-table .col-lang,
.home-table th:nth-child(6),
.home-table td:nth-child(6) { display: none; }
/* Dichte Skeleton-/Status-Zeilen in den Panels */
.home-table .skeleton-row td { padding: 12px var(--space-3); }
.home-panel .status { padding: var(--space-6) var(--space-3); }
.home-table .empty-state { padding: var(--space-6) var(--space-3); }

/* ---------- Live-Event-Feed (eventLineHtml aus misc.js) ---------- */
.home-feed { padding: 0; overflow: hidden; }
.home-events {
  padding: var(--space-1) var(--space-3) 0;
  max-height: 430px;
  overflow-y: auto;
}
.home-events .event-line {
  padding: 8px var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast) var(--ease-out);
}
.home-events .event-line:hover { background: var(--surface-2); }
.home-events .event-line .skeleton { height: 10px; }
.home-feed-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) var(--space-4) var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .stat-strip-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4) var(--space-3);
  }
  .big-stat { padding: 0; }
  .big-stat + .big-stat { border-left: none; }
}
@media (max-width: 960px) {
  .home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero { padding-top: var(--space-4); }
  .stat-strip { padding: var(--space-4); }
  .stat-strip-head { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .stat-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-events { max-height: 360px; }
}
@media (max-width: 560px) {
  .stat-strip-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--text-2xl); }
}