.cl-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.cl-card {
  background:#1b1b1b; border:1px solid #2a2a2a; border-radius:12px;
  padding:16px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.cl-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.cl-badge { font-size:.8rem; background:#2c2c2c; padding:4px 8px; border-radius:999px; }
.cl-version { font-weight:700; }
.cl-date { opacity:.8; font-size:.9rem; margin-left:auto; }
.cl-title { font-size:1.2rem; margin:.25rem 0 0.5rem; }
.cl-body { white-space:pre-wrap; line-height:1.5; }
@media (min-width: 900px) { .cl-grid { grid-template-columns: 1fr 1fr; } }

.news-header{
	text-align:center;
}

/* --- Override the News page grid so Changelogs can be centered --- */
.container.news-container {
  /* kill the 2-col grid from news.css */
  display: block !important;

  /* center the page content and set a nice max width */
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Card look */
.cl-card {
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Header row inside a card */
.cl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cl-badge {
  font-size: .8rem;
  background: #2c2c2c;
  padding: 4px 8px;
  border-radius: 999px;
}

.cl-version { font-weight: 700; }

.cl-date {
  opacity: .8;
  font-size: .9rem;
  margin-left: auto;
}

.cl-title {
  font-size: 1.2rem;
  margin: .25rem 0 .5rem;
}

.cl-body {
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Page header: centered */
.news-header { text-align: center; }

.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 520px));
  justify-content: center;
  gap: 20px;
}

/* Markdown body polish */
.cl-body h1, .cl-body h2, .cl-body h3 { margin: .4rem 0 .25rem; }
.cl-body p { margin: .4rem 0; }
.cl-body ul, .cl-body ol { margin: .4rem 0 .6rem 1.25rem; }
.cl-body li { margin: .15rem 0; }

.cl-body a { text-decoration: underline; }

.cl-body code {
  background:#121212;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}
.cl-body .cl-pre {
  background:#121212;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 12px;
  overflow:auto;
  margin: .6rem 0;
}
.cl-body .cl-pre code { background: transparent; padding: 0; }