/* ====== Halaman Berita (daftar & detail) ====== */

/* Grid daftar berita */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  margin:14px 0 12px;
}
.news-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.news-image{
  width:100%; height:170px; object-fit:cover; background:#eef4fb;
}
.news-content{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.news-date{ font-size:12px; color:var(--muted); }
.news-title{ margin:0; font-size:18px; line-height:1.35; }
.news-title a{ color:var(--ink); }
.news-title a:hover{ color:var(--brand); }
.news-excerpt{ color:#334057; margin:0; min-height:52px; }

.btn-read{
  align-self:flex-start;
  background:var(--brand); color:#fff; border:0; border-radius:10px;
  padding:10px 12px; font-weight:600; text-decoration:none;
}
.btn-read:hover{ background:var(--brand-600); }

/* Pagination */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:10px 0 26px;
}
.pagination-btn{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.pagination-btn:hover{ border-color:#cbd8ee; }
.pagination-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ====== Detail Berita ====== */
.news-hero{
  width:100%; max-height:460px; object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  margin:10px 0 16px;
}
.news-body{
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:var(--radius); padding:20px; line-height:1.8; color:#25324a;
}
.news-body p{ margin:0 0 1em; }

.news-related{ margin:26px 0 6px; }
.news-related h3{ margin:0 0 10px; }
.news-related .news-card .news-image{ height:140px; }

/* ====== Utilities di halaman berita ====== */
#pageInfo{ color:var(--muted); }

/* ====== Responsif ====== */
@media (max-width: 640px){
  .news-grid{ grid-template-columns:1fr; }
  .news-hero{ max-height:360px; }
}