/* ===== Your existing card styles (retained) ===== */
.dark-news-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
 
.dark-news-card {
  background: #0b3c2e;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
 
/* --- Modern polish (subtle, optional) --- */
.dark-news-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: saturate(120%) blur(0.5px);
}
.dark-news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  background: radial-gradient(1200px 160px at 20% -10%, rgba(255,255,255,0.06), transparent 40%);
  opacity: 0.6;
}
 
.dark-news-card:hover {
  transform: translateY(-6px);
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}
 
.dark-news-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
  background: #0b3c2e;
}
 
.dark-news-card:hover img { transform: scale(1.05); }
 
.dark-news-content {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
 
.dark-news-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #f9cc6c;
  line-height: 1.5;
}
 
.dark-news-content p {
  font-size: 0.95rem;
  color: #e3e3d1;
  margin-bottom: 15px;
  line-height: 1.6;
  flex-grow: 1;
}
 
.posted-by {
  display: block;
  font-size: 0.85rem;
  color: #999;
  margin-top: auto;
}
.posted-by strong { color: #f9cc6c; }
 
@media (max-width: 768px) {
  .dark-news-content h3 { font-size: 1.1rem; }
  .dark-news-card img { height: 180px; }
}
 
/* ===== New: slider shell ===== */
:root {
  --news-gap: 30px;         /* matches your grid gap */
  --card-peek: 12px;        /* show a bit of next card on mobile */
  --btn-size: 44px;
}
 
.dark-news-section {
  color: #0b3c2e;
  background: #ffffff;
  padding: 40px 0 20px;
}
 
.dark-news-slider {
  position: relative;
}
 
.dark-news-viewport {
  overflow: hidden;
  padding-inline: var(--card-peek);
}
 
.dark-news-track {
  display: flex;
  gap: var(--news-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 8px;
}
 
/* Hide scrollbar but keep scrollability */
.dark-news-track::-webkit-scrollbar { height: 0; }
.dark-news-track { scrollbar-width: none; }
 
/* Each slide wraps your existing .dark-news-card */
.dark-news-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
 
/* 2-up on small tablets, 3-up on desktops, 4-up on xl */
@media (min-width: 576px) {
  .dark-news-slide {
    flex-basis: calc(50% - var(--news-gap) / 2);
  }
}
 
/* Desktop: 3 per row */
@media (min-width: 992px) {
  .dark-news-slide {
    flex-basis: calc(33.333% - (2 * var(--news-gap)) / 3);
  }
}
 
/* Large desktop: ~3.3 per row (adjust as needed) */
@media (min-width: 1400px) {
  .dark-news-slide {
    flex-basis: calc(30% - (3 * var(--news-gap)) / 4);
  }
}
 
/* Nav buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,31,0.75);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  backdrop-filter: blur(6px);
}
.slider-btn:hover { background: rgba(16,20,40,0.9); transform: translateY(-1px); }
.slider-btn:disabled { opacity: .45; cursor: default; }
 
.slider-btn.prev { left: -8px; }
.slider-btn.next { right: -8px; }
@media (min-width: 768px) {
  .slider-btn.prev { left: -14px; }
  .slider-btn.next { right: -14px; }
}
 
/* Pagination (optional) */
.dark-news-pagination {
  text-align: center;
  margin-top: 12px;
  font-size: .95rem;
  color: #9aa3c0;
}

@media (min-width: 1200px) {
  .dark-news-section .container {
    max-width: 1350px !important;
  }
}