/* CORRECTED CSS - FORCING SPECIFIC COLUMN COUNTS */

/* Main container */
#Card-hold {
  background-color: transparent !important;
  width: 100% !important;
}

#card-container {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Row styling - Override Bootstrap's row */
#card-place {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important; /* This gap is used in the calc() functions */
  width: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
}

/* Column styling - Override Bootstrap's columns */
#card-place [id="card-wrapper"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}

/* Card styling */
[id="movie-card"] {
  position: relative !important;
  width: 100% !important; /* Card fills its wrapper */
  max-width: 230px !important; /* But won't get wider than 230px */
  height: 345px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  border: none !important;
  margin: 0 !important;
  transition: transform 0.3s ease !important;
  border-radius: 8px !important;
}

.card-img-container {
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  background-color: #1a1a1a;
}

/* POSTER IMAGE STYLING */
.card-img-top-af {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

[id="movie-card"]:hover .card-img-top-af {
  transform: scale(1.05) !important;
}

.card-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0) 100%) !important;
  padding: 5% !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

[id="movie-card"]:hover .card-overlay {
  opacity: 1 !important;
}

.movie-title {
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.movie-rating {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.rating-stars {
  display: flex !important;
  margin-right: 10px !important;
}

.rating-stars i {
  color: #ffd700 !important;
  font-size: 0.9rem !important;
  margin-right: 2px !important;
}

.rating-value {
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
}

.play-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 3rem !important;
  color: #fff !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  z-index: 10 !important;
}

[id="movie-card"]:hover .play-icon {
  opacity: 0.8 !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.play-icon:hover {
  transform: translate(-50%, -50%) scale(1.2) !important;
  color: #e50914 !important;
}

/* Link styling */
.card-img-container a {
  text-decoration: none !important;
  display: block !important;
  height: 100% !important;
  position: relative !important;
}

/* ===== RESPONSIVE LAYOUT - FORCING COLUMN COUNT ===== */

/* XS (Extra Small) - Default: 1 card per row (screens < 576px) */
#card-place [id="card-wrapper"] {
  width: 100% !important; /* Takes full width */
  max-width: 230px !important; /* But is capped at 230px */
}

[id="movie-card"] {
  height: 300px !important;
}

/* SM (Small) - 2 cards per row (screens ≥ 576px) */
@media screen and (min-width: 576px) {
  #card-place {
    gap: 15px !important;
  }
  
  #card-place [id="card-wrapper"] {
    width: calc(50% - 8px) !important; /* Forces 2 per row */
    max-width: 230px !important;
  }
  
  [id="movie-card"] {
    height: 320px !important;
  }
}

/* MD (Medium) - 4 cards per row (screens ≥ 768px) */
@media screen and (min-width: 768px) {
  #card-place {
    gap: 15px !important;
  }
  
  #card-place [id="card-wrapper"] {
    width: calc(25% - 12px) !important; /* Forces 4 per row */
    max-width: 230px !important;
  }
  
  [id="movie-card"] {
    height: 330px !important;
  }
}

/* LG (Large) - 5 cards per row (screens ≥ 992px) */
@media screen and (min-width: 992px) {
  #card-place {
    gap: 15px !important;
  }
  
  #card-place [id="card-wrapper"] {
    width: calc(20% - 12px) !important; /* Forces 5 per row */
    max-width: 230px !important;
  }
  
  [id="movie-card"] {
    height: 345px !important;
  }
}

/* XL (Extra Large) - 5 cards per row (screens ≥ 1200px) */
@media screen and (min-width: 1200px) {
  #card-place {
    gap: 15px !important;
  }
  
  #card-place [id="card-wrapper"] {
    width: calc(20% - 12px) !important; /* Forces 5 per row */
    max-width: 230px !important;
  }
  
  [id="movie-card"] {
    height: 360px !important;
  }
}

@media screen and (hover: none) {
  [id="movie-card"] .card-overlay {
    opacity: 1 !important;
  }
  [id="movie-card"] .play-icon {
    opacity: 0.8 !important;
  }
}