/* =========================================================
   NEWS – JP INFRA DEVELOPERS
   ========================================================= */

/* ================= GRID ================= */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
}

/* ================= CARD ================= */
.news-card{
  background: var(--bg-card); /* */
  border: 1px solid var(--border); /* */
  overflow:hidden;
  transition:transform .25s ease;
}

.news-card:hover{
  transform:translateY(-4px);
  box-shadow: 0 12px 28px rgba(var(--brand-dark-rgb), 0.12); /* Added dynamic shadow */
}

/* ================= THUMB ================= */
.news-thumb-wrap{
  overflow:hidden;
}

.news-thumb-wrap img{
  width:100%;
  height:190px;
  object-fit:contain;
  filter:contrast(1.05);
  transition:transform .4s ease;
}

.news-card:hover .news-thumb-wrap img{
  transform:scale(1.06);
}

/* ================= BODY ================= */
.news-body{
  padding:18px;
}

.news-title{
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  margin-bottom:6px;
  display:block;
  color: var(--text); /* Pehle static default tha */
}

.news-excerpt{
  font-size:.85rem;
  color: var(--muted); /* Static #555 replaced */
  margin:10px 0;
}

/* ================= META ================= */
.news-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}

.news-meta span{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
  background: var(--brand); /* */
  color: var(--accent); /* */
 border:1px solid var(--accent);

}

/* ================= READ MORE ================= */
.news-read{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.news-read:hover{
  text-decoration:underline;
}

/* =========================================================
   SINGLE NEWS PAGE
   ========================================================= */

.news-detail{
  background: var(--card); /* Static #fff replaced */
  border:1px solid var(--border);
  padding:28px;
}

.news-detail-title{
  font-size:1.8rem;
  line-height:1.3;
  margin-bottom:10px;
  color: var(--text); /* Dynamic text color */
}

.news-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:16px;
}

.news-detail-meta span{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
  background: var(--brand); /* */
  color: var(--accent); /* */
  border: 1px solid var(--accent);
}

/* ================= IMAGE ================= */
.news-detail-thumb img{
  width:100%;
  max-height:380px;
  object-fit:contain;
  margin-bottom:18px;
}

/* ================= CONTENT ================= */
.news-detail-body{
  font-size:.95rem;
  color: var(--text); /* Static #333 replaced */
  line-height:1.8;
}

/* ================= SHARE ================= */
.news-share{
  display:flex;
  gap:10px;
  margin-top:20px;
}

.news-share a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--brand); /* */
  color: var(--accent); /* */
  border:1px solid var(--accent);
}

.news-share a:hover{
  background: var(--accent); /* */
  color: var(--brand-dark); /* */
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:768px){
  .news-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .news-thumb-wrap img{
    height:160px;
  }

  .news-detail{
    padding:20px;
  }

  .news-detail-title{
    font-size:1.4rem;
  }
}
