/* Section Layout */
.first-section,
.section {
    margin: 40px 0;
    min-width: 0;
    display: grid;
    z-index: -1;
}

.first-section {
    margin-top: 100px; /* Extra top margin for the first section to avoid overlap with fixed menu and navbar */
}

.first-section:hover,
.section:hover {
    transform: scale(1.01);
    transition: transform 0.3s ease-in-out;
    color: #fa8128;
}

h2 {
    margin-left: 20px;
}

/* Horizontal Scrolling Grid */
.item-list {
    display: grid;
    grid-auto-flow: column; /* Arrange items in a horizontal row */
    grid-auto-columns: 135px; /* Card width */
    min-width: 0; /* Prevent overflow issues */
    gap: 20px; /* Space between cards */
    padding: 20px;

    overflow-x: scroll;  /*Enable horizontal scrolling */
    overflow-y: hidden; /* Disable vertical scrolling */

    scroll-behavior: smooth; /* smooth scrolling */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
    
    /* Hiding Scrollbar */
    .item-list::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }
    .item-list {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
    }

/* Card Styles */
.card {
    display: grid;
    grid-template-rows: auto 1fr; /* Image on top, info below */
    justify-content: center; 
    align-content: center; 
    padding: 2px;;
    border-radius: 10px;
    box-shadow: 8px 8px 15px black, 10px 10px 15px #051121 inset;
    overflow: hidden; 
    cursor: pointer;
}

.card img {
    width: 120px;
    height: 120px;
    object-fit: cover; /* Scales the image to fill the container */
    border-width: 1px; /* Note: Added for visualization while testing functionality, can be removed later if we want to (23.11. 19:12) */
    border-radius: 10px;
    border-style: solid;
    border-color: #ffffff;
}

.artist-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-width: 1px; /* Note: Added for visualization while testing functionality, can be removed later if we want to (23.11. 19:12) */
    border-radius: 50%; /* Circular image for artist profile picture */
    border-style: solid;
    border-color: #ffffff;
}

.card .info {
    display: grid;
    row-gap: 5px;
    margin-top: 10px;
}

.card .info p {
    margin: 0;
    text-align: center; 
    word-wrap: break-word;
}

/* Link Styles */
a {
    color: #ffffff;
    text-decoration: none;
    /* font-weight: bold; */
}

a:visited {
    color: #ffffff;
}

a:hover {
color: #fa8128;
/* font-weight: bold; */
font-style: italic;
}