/* =====================
   Projects.css
===================== */

/* Force cards to match height */
.radar-like-slider .slick-track {
  display: flex !important;
  align-items: stretch;
}

.radar-like-slider .slick-slide {
  height: inherit !important;
  display: flex !important;
}

.radar-like-slider .slick-slide > div {
   width: 100% !important;
  height: 100% !important;
}
/* --- Fix for Overlapping Dots Grid --- */
.radar-like-slider .slick-dots {
  bottom: -40px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* Forces dots into a single horizontal row */
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  width: 100% !important;
}

/* --- Mobile View Adjustments --- */
@media (max-width: 768px) {
  /* Force the single card to fill the screen width to stop congestion */
  .radar-like-slider .slick-slide {
    width: 100% !important;
    padding: 0 15px; 
  }

  /* Expand image area for the single-card layout */
  .radar-image-container {
    aspect-ratio: 16 / 9 !important;
    width: 100%;
    border-radius: 12px 12px 0 0 !important;
  }

  /* Position arrows so they are easy to use on mobile */
  .slick-prev, .slick-next {
    z-index: 20 !important;
    top: 40% !important; 
    width: 35px !important;
    height: 35px !important;
  }
  
  .slick-prev { left: 5px !important; }
  .slick-next { right: 5px !important; }
}