/* NEWS BANNER */
.news-banner { position:relative; height:380px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.banner-bg { position:absolute; inset:0; }
.banner-img { width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.banner-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.54); }
.banner-title { position:relative; z-index:2; color:#fff; font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:0.02em; text-shadow:0 2px 12px rgba(0,0,0,0.4); }

/* NEWS SECTION */
.news-section { padding:56px 0 72px; background:#fff; }

/* 3-column grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

/* NEWS CARD */
.news-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s;
}
.news-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

/* Card image */
.nc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 12/10;
  overflow: hidden;
  background: #f0f0f0;
}
.nc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.news-card:hover .nc-img img { transform: scale(1.07); }

/* Overlay on hover */
.nc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(74,158,92,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.news-card:hover .nc-overlay { opacity: 1; }
.nc-overlay .nc-desc {
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 0 12px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-overlay span {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid #fff;
  padding: 7px 18px;
  border-radius: 3px;
}

/* Card body */
.nc-body {
  padding: 16px 16px 18px;
}
.nc-title {
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.news-card:hover .nc-title { color: var(--green); }

.nc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.nc-meta svg { stroke: var(--green); flex-shrink: 0; }

/* PAGINATION */
.news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.pg-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.pg-btn:hover { border-color: var(--green); color: var(--green); transform: translateY(-1px); }
.pg-btn.active { background: var(--green); color: #fff; border-color: var(--green); }
.pg-next { font-size: 20px; }

/* FLOAT CHAT */
.float-chat { position:fixed; bottom:28px; right:28px; width:50px; height:50px; border-radius:50%; background:var(--green); color:#fff; border:none; cursor:pointer; box-shadow:0 4px 16px rgba(74,158,92,0.45); display:flex; align-items:center; justify-content:center; transition:background 0.2s,transform 0.2s; z-index:200; }
.float-chat:hover { background:var(--green-dark); transform:scale(1.08); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.55s ease,transform 0.55s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:900px){ .news-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:580px){ .news-grid { grid-template-columns:1fr; } .banner-title { font-size:28px; } .article-body{font-size: 16px;}}
@media(max-width:480px){
  .news-banner { height: 140px; }
  .banner-title { font-size: 22px; }
  .news-section { padding: 40px 0 48px; }
  .nc-title { font-size: 13px; }
  .nc-body { padding: 12px; }
  .news-grid { gap: 16px; grid-template-columns: repeat(2, 1fr);}
  .article-body{font-size: 16px;}
}