/* Base styles */
.outer-container {
  padding-bottom: 20px;
  height: 70vh;
}
.main-heading {
  font-size: 2.5rem;
  padding-top: 20px;
  font-weight: bold;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: rgb(74,73,73);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  text-align: center;
}
.slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  margin-top: 40px;
  border: 2px hidden purple;
}

/* FIX: was width:50% (only ever left room for 2 cards).
   Now takes most of the screen so the JS can fit as many
   fixed-width cards as actually have room. */
.slider-container {
  overflow: hidden;
  width: 90%;
  max-width: 1300px;
  border: 2px hidden blue;
}

.slider-track {
  display: flex;
  transition: transform 0.6s ease;
}

/* FIX: removed the fixed "flex: 0 0 50%". Flex-basis is now
   set dynamically by JS based on how many cards actually fit
   in the container's current width. Padding here acts as the
   gap between cards and is included in the JS width math. */
.slide {
  flex: 0 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  border: 2px hidden red;
}

.latestnews-card {
  width: 100%;
  max-width: 310px;
  height: 310px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0; /* Removes unwanted line spacing */
  background: transparent;
  border: 2px hidden red;
}
.latestnews-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.arrow-btn {
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  flex-shrink: 0;
}
.arrow-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Responsive Styles */
@media (max-width: 768px) {
  .slider-container {
    width: 80%;
  }
  .latestnews-card {
    width: 100%;
    height: 300px;
    max-width: 310px;
  }
}
@media (max-width: 576px) {
  .slider-container {
    width: 75%;
  }
  .latestnews-card {
    width: 100%;
    height: 280px;
    max-width: 310px;
  }
}