/* =========================
   PAGE WRAPPER
========================= */
.artists-page {
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

/* =========================
   PAGE HEADER
========================= */
.page-header {
  margin-bottom: 15px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}


/* PAGE TITLE */
.page-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #222;
}

.page-header h1 {
  font-size: 24px;
  color: #DFFF00; /* brand color */
  margin: 0;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .page-header h2 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .page-header h2 {
    font-size: 18px;
  }
}

/* =========================
   NAV FILTERS (HORIZONTAL)
========================= */
.songs-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.songs-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 20px;
  background: #111;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: 0.2s;
}

.nav-item:hover {
  background: #222;
  color: #fff;
}

.nav-item.active {
  background: #DFFF00;
  color: #000;
  font-weight: 600;
}

/* =========================
   ARTISTS GRID
========================= */
.artists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 3fr));
  gap: 10px;
}

/* =========================
   ARTIST CARD
========================= */
.artist-card {
  text-align: center;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease;
}

.artist-card:hover {
  transform: translateY(-5px);
}

/* IMAGE (CIRCLE) */
.artist-image {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  background: #222;
  border: 2px solid transparent;
  transition: 0.3s;
}

.artist-card:hover .artist-image {
  border-color: #DFFF00;
}

.artist-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NAME */
.artist-info {
  margin-top: 8px;
}

.artist-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* =========================
   PAGINATION
========================= */
.pagination {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #111;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s;
}

.pagination a:hover {
  background: #222;
  color: #fff;
}

.pagination a.active {
  background: #DFFF00;
  color: #000;
  font-weight: 600;
}




@media (min-width: 400px) {
 .artists-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(40px, 3fr));
   gap: 10px;
  }
}  
  

  
  
/* =========================
   TABLET
========================= */
@media (min-width: 600px) {
  .artists-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .artist-name {
    font-size: 15px;
  }
  .nav-item {
    padding: 4px 7px;
}

/* =========================
   DESKTOP
========================= */
@media (min-width: 900px) {
  .artists-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .page-header h1 {
    font-size: 28px;
  }

  .nav-item {
    font-size: 15px;
    padding: 10px 16px;
  }
}