/* Trending page */

/* Navbar uses the same styles as the homepage. */

body.page-trending .trend-hero{
  padding: 26px 0 10px;
}

body.page-trending .trend-hero h1{
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.02em;
}

body.page-trending .trend-hero p{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 62ch;
}

body.page-trending .trend-tabs{
  margin-top: 16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

body.page-trending .trend-tabs a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--shadow);
}

body.page-trending .trend-tabs a:hover{ transform: translateY(-1px); }

body.page-trending .trend-tabs a.is-active{
  border-color: rgba(0,122,255,.45);
  box-shadow: 0 0 0 3px rgba(0,122,255,.18);
}

body.page-trending .trend-section{
  margin-top: 18px;
}

body.page-trending .trend-section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
  margin: 20px 0 10px;
}

body.page-trending .trend-section__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

body.page-trending .trend-section__hint{
  color: var(--muted);
  font-size: 12px;
}

body.page-trending .trend-meta{
  margin-top: 8px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

body.page-trending .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

body.page-trending .pill--muted{
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  font-weight: 700;
}

body.page-trending .empty{
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 18px;
  color: var(--muted);
  background: var(--surface);
}

@media (max-width: 650px){
  body.page-trending .trend-hero h1{ font-size: 28px; }
  body.page-trending .trend-tabs a{ flex: 1 1 auto; justify-content:center; }
}