/* ===== Main ===== */
.main-container { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }

/* ===== Page Title ===== */
.page-title-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.page-title { font-size: 24px; font-weight: 700; color: #37474F; display: flex; align-items: center; gap: 10px; }
.page-title-icon { width: 36px; height: 36px; background: #FFF3E0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* ===== Category Filter - Pure CSS ===== */
.category-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-radio { display: none; }
.cat-label {
  padding: 6px 16px; border: 2px solid #ECEFF1; border-radius: 20px;
  background: #FFF; font-size: 13px; font-weight: 500; color: #78909C;
  cursor: pointer; transition: all 0.2s; user-select: none;
}
.cat-label:hover { border-color: #FFB74D; color: #F57C00; }
.cat-radio:checked + .cat-label { border-color: #F57C00; background: #FFF3E0; color: #F57C00; }

/* ===== News List ===== */
.news-list { display: flex; flex-direction: column; gap: 16px; }
.news-item {
  background: #FFF; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden; display: flex; transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer; text-decoration: none; color: inherit;
}
.news-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,124,0,0.12); color: inherit; }
.news-item-banner {
  width: 200px; min-height: 160px;
  background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;
}
.news-item-banner-icon { font-size: 48px; opacity: 0.5; }
.news-item-category {
  position: absolute; top: 12px; left: 12px; background: #F57C00; color: #FFF;
  padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 600;
}
.news-item-body { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; }
.news-item-title { font-size: 17px; font-weight: 700; color: #37474F; line-height: 1.5; margin-bottom: 10px; }
.news-item-summary { font-size: 14px; color: #78909C; line-height: 1.7; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ECEFF1; }
.news-item-date { font-size: 13px; color: #B0BEC5; }
.news-item-read { font-size: 13px; color: #F57C00; font-weight: 600; }

/* ===== CSS-only category filtering ===== */
#cat-all:checked ~ .news-list .news-item,
.news-list .news-item { display: flex; }

#cat-rate:checked ~ .news-list .news-item:not(.cat-rate),
#cat-provident:checked ~ .news-list .news-item:not(.cat-provident),
#cat-policy:checked ~ .news-list .news-item:not(.cat-policy),
#cat-knowledge:checked ~ .news-list .news-item:not(.cat-knowledge) { display: none; }

/* ===== Responsive (List) ===== */
@media (max-width: 768px) {
  .news-item { flex-direction: column; }
  .news-item-banner { width: 100%; min-height: 120px; }
  .page-title-bar { flex-direction: column; align-items: flex-start; }
}