/* ==========================================================================
   Artists Page Specific Styles
   ========================================================================== */

   body.artists { /* Optional: for body-specific styles */
    background-color: var(--color-background-alt); /* Match section bg */
}

/* Top Section */
.top-section.artists { /* Select the artists variation */
  position: relative;
  display: flex;
  min-height: 90vh; /* Adjust as needed */
  padding-top: 184px;
  padding-bottom: 120px;
  justify-content: center;
  align-items: center;
  z-index: 12; /* Ensure it's above tab content initially */
  background-image: linear-gradient(180deg, var(--color-overlay-dark), var(--color-overlay-dark)), url("../assets/artist-page.jpeg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}
.top-section.artists .title { color: var(--color-white); } /* Ensure title is white */
.top-section.artists .paragraph-white { color: var(--color-white); } /* Ensure paragraph is white */
.top-section.artists .button.v2 { /* Style button specifically if needed */
    margin-top: 20px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
}
.top-section.artists .button.v2:hover {
    padding-right: 32px;
    padding-left: 32px;
}

/* Artist Tabs Component */
.my-tabs { /* Base container */
  position: relative;
}
/* Add clearfix for potential floats within */
.my-tabs:before, .my-tabs:after { content: " "; display: table; }
.my-tabs:after { clear: both; }

.my-tab-menu { /* Tab Links container */
  position: relative;
}

.my-tab-link { /* Individual tab link */
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-dark);
  background-color: var(--color-grey-light);
}
.my-tab-link.my--current { background-color: var(--color-grey-medium); } /* Active link style */
.my-tab-link:focus { outline: 0; }

.my-tab-content { /* Tab Panes container */
  position: relative;
  display: block;
  overflow: hidden;
}

.my-tab-pane { /* Individual tab pane */
  position: relative;
  display: none;
  /* Add fade transition */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.my--tab-active { /* Active tab pane style */
  display: block;
  opacity: 1;
}

/* Artist Tabs Specific Styles */
.artists-tabs {
  background-color: var(--color-background-alt);
}

.artists-tabs-menu {
  position: -webkit-sticky;
  position: sticky;
  top: 90px; /* Adjust based on nav height */
  z-index: 9; /* Below nav */
  display: flex;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--color-border-dark);
  background-color: var(--color-white);
}

.artists-tabs-content {
  background-color: var(--color-background-alt);
}

.tab-pane {
  padding-top: 120px;
}

.tab-link { /* Overrides .my-tab-link base */
  position: relative;
  display: flex;
  height: 80px;
  margin-left: -1px;
  padding: 0px; /* Remove padding */
  justify-content: center;
  align-items: center;
  flex: 1;
  border-bottom: 3px solid transparent;
  border-left: 1px solid var(--color-border-light);
  background-color: transparent; /* Override base */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-dark);
  cursor: pointer;
}
.tab-link.my--current { /* Override base */
  border-bottom-color: var(--color-accent); /* Use accent color */
  background-color: transparent; /* Ensure no background */
  color: var(--color-accent); /* Highlight text */
  font-weight: 700;
}

.tab-heading {
  /* Styles for the text inside the tab link */
  font-weight: 600; /* Default weight */
   transition: color 0.3s ease;
}
.tab-link.my--current .tab-heading {
     font-weight: 700; /* Bolder when active */
}

/* Artist Card Image Styles */
.artist-image {
  width: 100%; /* Changed from 300px to match container width */
  height: 350px; /* Fixed height - adjust if needed */
  object-fit: cover; /* Ensures image covers the area, cropping if needed */
  object-position: top center; /* Changed from 'center' to prioritize the top */
  border-radius: 12px; /* Rounded corners for a softer look */
  margin-bottom: 20px; /* Space below the image */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  display: block; /* Ensure it behaves as a block element */
}

/* Artists List component uses common styles */


/* Media Queries for Artists Specifics */
@media screen and (max-width: 991px) {
    .top-section.artists { height: auto; padding: 120px 0 100px 0; }
    .artists-tabs-menu { top: 64px; } /* Adjust sticky */
    .tab-link { height: 72px; }
    .artists-list { grid-column-gap: 24px; grid-row-gap: 48px; padding-left: 15px; padding-right: 15px;}
}

@media screen and (max-width: 767px) {
    .top-section.artists { padding: 100px 0 80px 0; }
    .tab-heading { font-size: 13px; }
    .artists-list { max-width: 470px; padding-left: 15px; padding-right: 15px;}
}

@media screen and (max-width: 479px) {
    .top-section.artists { padding: 80px 0 60px 0; }
    .artists-tabs-menu { height: auto; flex-direction: column; align-items: center; position: static; border-bottom: none; }
    .tab-link { width: 100%; flex: 0 auto; border-right: none; border-left: none; border-bottom: 1px solid var(--color-border-light); height: 60px; font-size: 12px; }
    .tab-link:last-child { border-bottom: none; }
    .tab-link.my--current { border-bottom: 3px solid var(--color-accent); }
    .tab-pane { padding-top: 60px; }
    .artists-list { grid-template-columns: 1fr; padding-left: 15px; padding-right: 15px;}

}