/* ===== Styling Umum untuk Semua Kategori ===== */

/* ===== Styling Judul Seksi (misal: "Komunitas", "Keluarga") ===== */
.section-title {
  text-align: left;
  font-size: 1rem; /* disamakan dengan trending-section-title */
  font-weight: 600;
  color: #035c79; /* disamakan dengan trending */
  margin: 5px 0 15px;
  position: relative;
  font-family: 'Inter', sans-serif; /* opsional, bisa diwariskan */
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60px;
  height: 3px;
  border-radius: 3px;
  background: #0e9bd3;
}

/* ===== Judul Berita — DISERAGAMKAN DENGAN TRENDING ===== */
.kategori-news-title,
.kesehatan-news-title,
.keluarga-news-title,
.komunitas-news-title {
  font-size: 1.1rem;       /* = 20.8px — SAMA DENGAN .trending-title */
  font-weight: 600;
  line-height: 1.2;
  color: #222222;
  margin: 0 0 8px;
  font-family: inherit;    /* warisi dari body/global */
}

.kategori-news-title a,
.kesehatan-news-title a,
.keluarga-news-title a,
.komunitas-news-title a {
  color: inherit;
  text-decoration: none;
}

.kategori-news-title a:hover,
.kesehatan-news-title a:hover,
.keluarga-news-title a:hover,
.komunitas-news-title a:hover {
  color: #05525f; /* disamakan dengan trending */
}



/* ===== Grid Berita Umum ===== */
.kategori-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.kategori-news-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
}

.kategori-news-card:hover {
  transform: translateY(-6px);
}

.kategori-news-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.kategori-news-content {
  padding: 14px;
  flex: 1;
}

.kategori-news-meta {
  font-size: 0.8125rem; /* = 13px — disamakan dengan trending */
  color: #666;
  margin-bottom: 0.25rem;
  font-family: inherit;
}

/* ===== Load More & Show Less Button — Versi Baru (Oval + Border Biru) ===== */
.load-more-container {
  text-align: left;
  margin: 20px 0 30px;
  display: flex;
  justify-content: left;
  gap: 10px;
}

.load-more-btn,
.show-less-btn {
  background: white;
  color: #0198f5 !important;
  border: 2px solid #0198f5;
  padding: 8px 16px;
  border-radius: 30px; /* Oval */
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
}

.load-more-btn:hover,
.show-less-btn:hover {
  background: #0198f5;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(1, 152, 245, 0.2);
}

.load-more-btn:disabled {
  background: #f5f5f5;
  border-color: #ccc;
  color: #999 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.show-less-btn {
  display: none; /* default hidden */
}

.show-less-btn:active {
  background: #0198f5;
  color: white !important;
}
/* Responsive: 1 kolom di mobile */
@media (max-width: 768px) {
  .kategori-grid {
    grid-template-columns: 1fr;
  }
  .kategori-news-title,
  .kesehatan-news-title,
  .keluarga-news-title,
  .komunitas-news-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  }
}

/* ===== GANTI UKURAN FONT DI MOBILE — tetap 1.3rem (jangan dibesarkan!) ===== */
@media (max-width: 600px) {
  .kategori-news-title,
  .kesehatan-news-title,
  .keluarga-news-title,
  .komunitas-news-title {
    font-size: 1.2rem; /* tetap sama — jangan jadi 20px! */
    line-height: 1.3;
  }
}