/* General Styles */
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Container Styling */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px; /* Added top padding of 50px */
}

/* Grid Layout */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Featured Image Styling */
.featured-image {
    width: 100%; /* Make it responsive */
    aspect-ratio: 1 / 1; /* Enforce a square aspect ratio */
    object-fit: cover; /* Ensure the image fills the square */
    border-radius: 8px; /* Optional: Add rounded corners */
    max-width: 512px; /* Restrict maximum width */
    margin: 0 auto; /* Center image if needed */
}

/* Artist Details */
.artist-profile-details {
    padding: 1rem;
    background: #181C14;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.artist-profile-details h1 {
    margin-top: 0;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.artist-profile-details p {
    margin-bottom: 0.5rem;
    color: #4a5568; /* Tailwind Gray-600 */
}

.artist-profile-details a {
    color: #3182ce; /* Tailwind Blue-600 */
    text-decoration: none;
}

.artist-profile-details a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }

    .artist-profile-image img {
        margin-bottom: 1rem;
    }
}



/* Tab Navigation */
.artist-profile-tabs {
    margin-top: 5rem;
}

/* Tab Navigation Container */
.nav-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .nav-tabs-container {
        max-width: 100%;
        padding: 0 10px;
    }
}

/* Modern Tab Buttons */
.nav-tabs {
    display: flex;
    justify-content: left;
    border-bottom: none; /* Remove the bottom line */
    gap: 1rem; /* Add spacing between tabs */
}

.nav-tabs .nav-item {
    margin: 0; /* Reset margin for items */
}

.nav-tabs .nav-link {
    padding: 0.8rem 1.5rem;
    background: #F7FAFC; /* Light button background */
    border: 2px solid #CBD5E0; /* Subtle border */
    border-radius: 10px; /* Fully rounded buttons */
    color: #1A202C; /* Neutral dark text color */
    text-decoration: none;
    cursor: pointer;
    font-weight: 600; /* Bold text */
    transition: all 0.3s ease-in-out;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.nav-tabs .nav-link:hover {
    background: #E2E8F0; /* Highlight on hover */
    color: #2D3748; /* Slightly darker text */
    transform: translateY(-2px); /* Lift effect */
}

.nav-tabs .nav-link.active {
    background: #A08404; /* Highlight active tab with brand color */
    color: #FFF; /* White text for contrast */
    border-color: #A08404; /* Match border with background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Stronger shadow for active state */
}

/* Tab Content Styling */
.tab-content {
    padding: 1rem;
    background: #FFFFFF; /* White content background */
    border: 1px solid #CBD5E0; /* Border around content */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    color: #000;
}

.tab-pane {
    padding: 0 15px;
}

.tab-pane.active {
    display: block;
}

/* Mobile-Specific Adjustments */
@media (max-width: 767px) {
    .nav-tabs {
        flex-direction: column; /* Stack tabs vertically */
        gap: 0.5rem; /* Smaller spacing */
    }

    .nav-link {
        text-align: center;
        padding: 1rem; /* Larger padding for easier tapping */
    }
}



/* Gallery */
.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
    gap: 1.1rem; /* Spacing between items */
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.gallery-item a {
    display: block;
}

.gallery-item img {
    transition: transform 0.3s ease-in-out;
    width: 100%; /* Ensure images fill their containers */
    height: auto;
}

.gallery-item:hover img {
    transform: scale(1.1); /* Zoom effect on hover */
}

/* Responsive Design for Gallery */
@media (max-width: 767px) {
    .grid-cols-3 {
        display: flex; /* Change grid to flexbox for horizontal scrolling */
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Add snap scrolling */
        gap: 0.8rem; /* Adjust gap for mobile */
        padding: 0.5rem; /* Add padding for better appearance */
    }

    .gallery-item {
        flex: 0 0 auto; /* Prevent shrinking of items */
        scroll-snap-align: center; /* Center the items on scroll */
        width: 100px; /* Set width for each gallery item */
        height: auto; /* Maintain aspect ratio */
    }

    .gallery-item img {
        object-fit: cover; /* Ensure images fill the area proportionally */
        width: 100%; /* Adjust image width within the flex container */
        height: auto; /* Keep aspect ratio */
    }

    /* Optional: Customize the scrollbar */
    .grid-cols-3::-webkit-scrollbar {
        height: 3px; /* Reduce scrollbar height */
    }

    .grid-cols-3::-webkit-scrollbar-thumb {
        background: #888; /* Scrollbar thumb color */
        border-radius: 3px;
    }

    .grid-cols-3::-webkit-scrollbar-track {
        background: #f4f4f4; /* Scrollbar track color */
    }
}



/* Artist Profile Archive */
.artist-profile-archive {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.artist-profile-item {
  background-color: #181C14;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.artist-profile-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.artist-profile-item img {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.artist-profile-item h2 {
  font-size: 1rem;
  font-weight: bold;
  margin: 1rem;
}



.artist-profile-card {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.artist-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.artist-profile-card img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 12px;
}

.artist-profile-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.artist-stage-name {
    font-size: 1rem; /* Smaller font size for Stage Name */
    font-weight: 500;
    color: #A08404;
    margin-top: 4px;
}

.artist-ig-handle {
    font-size: 0.9rem; /* Smaller font size for Instagram Handle */
    font-weight: 500;
    color: #A08404; /* Instagram-like color */
    margin-top: 4px;
}

.artist-ig-handle a {
    text-decoration: none;
    color: #fff; /* Inherit color from .artist-ig-handle */
}

.artist-ig-handle a:hover {
    text-decoration: none;
}

.artist-profile-archive .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.artist-profile-card {
    width: 100%;
    margin-bottom: 20px;
}



@media (min-width: 768px) {
    .artist-profile-card {
        width: 32%; /* 3 cards per row */
    }
}


@media (max-width: 767px) {
  .artist-profile-archive {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Styling for Each Artist Entry */
.artist-entry {
    background-color: #A08404; /* Dark gray background */
    color: #fff; /* White text for contrast */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Inner padding for spacing */
    margin-bottom: 1px; /* Space between each entry */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .artist-entry {
        padding: 12px; /* Adjust padding for smaller screens */
    }
}