/* ==========================================================================
   AnimeRadar - serverseitig vorgerenderte Listen (SEO-Hubs)
   Phase 2 (2026-09-25): /season, /kalender und /toplisten liefern ihre
   Listen bereits im ersten HTML (api/_seo-hubs.js). Der Browser ersetzt den
   Block beim Laden durch die interaktive Fassung; bis dahin - und ohne
   JavaScript - sieht die Liste so aus. Farben und Abstaende folgen den
   Karten der jeweiligen Seite, ohne deren Regeln anzufassen.
   ========================================================================== */

html body .seo-hub {
  display: grid;
  gap: 14px;
  padding: 4px 0 12px;
  color: #cbbcc0;
}

html body .seo-hub-intro {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
}

html body .seo-hub a {
  color: #f5eef0;
  font-weight: 600;
  text-decoration: none;
}

html body .seo-hub a:hover,
html body .seo-hub a:focus-visible {
  color: #ff5a68;
}

html body .seo-hub small {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: #a8a2a2;
}

/* Season: Raster wie die Seasons-Karten */
html body .seo-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .seo-hub-grid li {
  display: grid;
  gap: 6px;
}

html body .seo-hub-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 120 / 170;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, .06);
}

/* Kalender: Tage als Abschnitte */
html body .seo-hub-day h3 {
  margin: 6px 0 4px;
  font-size: 14px;
  color: #f5eef0;
}

html body .seo-hub-day ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

html body .seo-hub-day li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
  font-size: 14px;
}

html body .seo-hub-day time {
  color: #a8a2a2;
  font-variant-numeric: tabular-nums;
}

html body .seo-hub-day small {
  grid-column: 2;
}

/* Toplisten: Rangliste */
html body .seo-hub-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

html body .seo-hub-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
  font-size: 14px;
}

html body .seo-hub-rank {
  font-weight: 700;
  color: #e53949;
}

html body .seo-hub-list small {
  grid-column: 2;
}

/* Phase 3 (2026-09-25): Season-Archive und Season-Navigation */
html body .seo-season-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
  line-height: 18px;
}

html body .seo-season-nav a {
  font-weight: 600;
}

html body .seo-hub-more {
  margin: 0;
  font-size: 13px;
  color: #a8a2a2;
}

html body .seo-hub-day.is-today h3 {
  color: #ff5a68;
}

/* Phase 4 (2026-09-26): News-Hub mit serverseitigen Feed-Teasern (Aggregator).
   Cleanup 2026-09-26: Styles fuer eigene Artikelseiten entfernt - AnimeRadar
   veroeffentlicht keine eigenen News-Artikel. */
html body .seo-news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

html body .seo-news-list li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}

html body .seo-news-list .seo-news-meta {
  font-size: 12px;
  color: #a8a2a2;
}

html body .seo-news-list .seo-news-meta a {
  color: #d9c9cd;
  font-weight: 500;
}

html body .seo-news-list p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: #cbbcc0;
}