/* GLOBAL STYLES & FONT IMPORT */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Nunito", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/aa462558-0106-4268-9864-d34a4f35531f);
  background-repeat: no-repeat;
  background-size: cover;
  color: #e5e5e5; /* Default text color for content */
}

img {
  width: 100%;
  display: block; /* Prevents extra space below images */
}

h1 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: inherit; /* Inherit color unless specified */
}

ul {
  list-style: none;
}

/* MAIN LAYOUT */
main {
  display: grid;
  grid-template-columns: 1fr; /* Single column layout for smaller screens */
  width: 95%;
  max-width: 1600px; /* Max width for very large screens */
  margin: 40px auto; /* Centering main content */
  background: rgba(16, 21, 61, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden; /* Contains floated/absolute children if main isn't body child */
}

@media (min-width: 768px) { /* Apply sidebar layout only on larger screens */
  main {
    grid-template-columns: 220px 1fr; /* Fixed width for nav, rest for content */
  }
}

/* MAIN MENU (NAV) */
.main-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px 0 0 15px; /* Only makes sense if nav is on the left */
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  padding: 12px 0 20px;
  user-select: none;
}

.main-menu ul li {
  outline: 0;
}

.user-info img {
  padding: 12px 24px 6px;
  border-radius: 50%;
  max-width: 100px; /* Control user image size */
  margin: 0 auto;
}

.user-info p {
  color: #fff;
  font-size: clamp(0.8rem, 3vw, 1rem);
  font-weight: 500;
  text-align: center;
  padding: 0 6px 32px;
}

.nav-item a {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align items to the start */
  color: #fff;
  font-size: 1rem;
  padding: 12px 20px; /* Adjusted padding */
  margin: 0 8px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.nav-item.active a,
.nav-item a:hover {
  background: rgba(106, 109, 155, 0.5);
}

.nav-icon {
  width: 20px;  /* Fixed width for icon */
  height: 20px;
  font-size: 1.1rem;
  margin-right: 15px; /* Space between icon and text */
  text-align: center;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.nav-text {
  display: none; /* Hide nav text by default on small screens */
}

@media (min-width: 768px) {
  .nav-text {
    display: block; /* Show nav text on larger screens */
  }
}

/* CONTENT AREA */
.content {
  display: grid;
  grid-template-columns: 1fr; /* Default to single column */
  padding: 20px;
  color: #e5e5e5;
  overflow-y: auto; /* Allow content area to scroll if it overflows */
  max-height: calc(100vh - 80px); /* Example: Adjust based on header/footer or main margin */
}

@media (min-width: 1024px) {
  .content {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); /* Responsive 3/4 and 1/4 split */
    gap: 20px;
  }
}

.main-content {
  /* Styles for the main content area if needed */
}

.sidebar {
  /* Styles for the sidebar if needed */
}

/* SLIDER STYLES */
.slider-container {
  margin: 0 auto 30px auto; /* Added bottom margin */
  width: 100%;
}

.slider-container h1 { /* Styling for the heading above the slider */
  color: #fff;
  margin-bottom: 16px;
  padding-left: 10px; /* Align with slide content if desired */
}

.swiper {
  width: 100%;
  padding: 16px 0 30px; /* Increased bottom padding for pagination */
}

.swiper-wrapper {
  /* Swiper handles this, but you can add alignment if needed */
}

.swiper-slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  /* width is handled by Swiper's slidesPerView or breakpoints */
}

.swiper-slide img {
  border-radius: 20px;
  width: 100%;
  height: 16 / 9; /* Consider aspect-ratio for responsiveness: aspect-ratio: 16 / 9; */
  object-fit: cover;
  border: 2px solid rgba(159, 160, 168, 0.5);
}

/* Swiper Pagination */
.swiper-pagination {
  --swiper-pagination-color: #fff; /* Color for active bullet / main pagination color */
  --swiper-pagination-bullet-inactive-color: #ffffffe7;
  --swiper-pagination-bullet-inactive-opacity: 0.7;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 6px;
  --swiper-pagination-bottom: 0px; /* Position from bottom of swiper container */
  position: relative; /* Ensure it's positioned correctly relative to swiper */
  margin-top: 10px; /* Add some space if pagination is below slides */
}

/* If you need to style bullets directly (e.g. if CSS vars aren't fully supported by Swiper version or setup): */
/*
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-size, 10px);
  height: var(--swiper-pagination-bullet-size, 10px);
  background-color: var(--swiper-pagination-bullet-inactive-color, #ffffffe7);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.7);
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px) !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--swiper-pagination-color, #fff);
  opacity: 1;
  width: 18px; // Or calc(var(--swiper-pagination-bullet-size) * 1.8)
  border-radius: var(--swiper-pagination-bullet-size, 10px); // Or a smaller value for pill shape
}
*/


/* SLIDE OVERLAY (INSIDE .swiper-slide) */
.slide-overlay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  row-gap: 12px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; /* Match parent slide height */
  background: linear-gradient(
    180deg, /* Top to bottom */
    transparent 50%,
    rgba(38, 21, 149, 0.6) 70%,
    rgba(16, 21, 61, 0.9) 100%
  );
  border-radius: 20px; /* Match image border-radius */
  padding: 20px;
  box-sizing: border-box;
}

.slide-overlay h2 {
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 700;
  color: #fff;
}

.slide-overlay button {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  padding: 10px 14px;
  background: #e9e6eb2a;
  color: #e8e5e5;
  border: 1px solid rgba(159, 160, 168, 0.4);
  border-radius: 12px;
  font-size: clamp(0.7rem, 2.5vw, 0.9rem);
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide-overlay button:is(:hover, :focus-visible) {
  background: #e9e6eb;
  color: #000;
  transform: translateY(-2px);
}
.slide-overlay button i {
  font-size: 1.1em;
}

/* FEATURED SECTIONS (Artists, Albums) */
.featured-sections {
  display: grid;
  grid-template-columns: 1fr; /* Stack by default */
  gap: 30px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .featured-sections {
    grid-template-columns: 1fr 1fr; /* Side by side on larger screens */
  }
}

.artists, .albums {
  /* Common styles for these sections */
}

.artists h1, .albums h1 { /* These h1 are inside <a> tags in your HTML */
  color: #fff;
  margin-bottom: 20px;
  padding-left: 10px;
}
.artists > a > h1, .albums > a > h1 { /* More specific if h1 is always child of a */
    color: #fff;
    margin-bottom: 20px;
    padding-left: 10px;
}
.artists > a:hover h1, .albums > a:hover h1 {
    color: #ddd; /* Example hover effect */
}


.artist-container, .album-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  background-color: rgba(255,255,255,0.05);
  padding: 15px;
  border-radius: 10px;
}

/* Example artist item styling */
.artist {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ccc;
}

.artist-img-container img {
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(169, 150, 253, 0.5);
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
  box-shadow: rgba(221, 221, 221, 0.3) 0px 6px 18px -3px;
}
.artist p {
    font-size: 0.9rem;
}

/* Styles for individual album items (adapted from your first CSS file) */
/* Ensure your .album-container will contain .album-item elements for these to apply */
.albums .album-item {
  background: rgba(38, 21, 149, 0.3); /* A bit darker, customize as needed */
  border-radius: 10px;
  padding: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #e5e5e5;
}
.albums .album-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.albums .album-cover img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.1);
}
.albums .album-info h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
  font-weight: 600;
}
.albums .album-info p {
  font-size: 0.9rem;
  color: #b0b0b0; /* Lighter text for artist/details */
}


/* SIDEBAR - Recommended Songs */
.recommended-songs h1 {
  color: #fff;
  margin-bottom: 20px;
}
.song-container { /* This container in your HTML has text 'Flambam' directly */
  background-color: rgba(255,255,255,0.05);
  padding: 15px;
  border-radius: 10px;
  color: #ccc; /* Example text color */
  /* Add styles for individual songs if .song-container will hold a list */
}

/* FOOTER */
.footer {
  grid-column: 1 / -1; /* Ensure footer spans all columns in main grid if main has columns */
  text-align: center;
  padding: 20px;
  background: rgba(16, 21, 61, 0.7);
  color: #aaa;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  /* margin-top: auto; /* Only works if parent is flex and has height */
}