/* static/css/learn_tag.css */
.learn-shell{ max-width: 980px; margin: 0 auto; padding: 0 12px; }

.hero{
  margin-top: 14px;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.hero h1{ margin:0; font-size: 20px; line-height:1.7; }

.muted{ margin-top:10px; color: rgba(255,255,255,.72); line-height:1.9; }
.muted-gap{ margin-top:8px; }

.grid{ display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }

.card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.card a{ color: rgba(255,255,255,.92); text-decoration:none; }
.card a:hover{ text-decoration: underline; }

.meta{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.learn-breadcrumbs{ margin-top:10px; }
.learn-breadcrumb-link{ color:rgba(255,255,255,.7); text-decoration:none; }
.learn-breadcrumb-sep{ opacity:.5; }