/* css/hero-playlist.css */

/* Hero Playlist Specific Styles */
#heroPlaylistCard {
    min-height: 300px;
}

/* Ensure grid works properly */
.hero-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Playlist items scrollbar */
#playlistItems::-webkit-scrollbar {
    width: 6px;
}

#playlistItems::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#playlistItems::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.5);
    border-radius: 3px;
}

#playlistItems::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.7);
}

/* Active playlist item */
.playlist-item.active {
    background: rgba(20, 184, 166, 0.2);
}

/* Smooth transitions */
#heroCurrentCover,
#heroCurrentTitle,
#heroCurrentCategory {
    transition: all 0.3s ease;
}

/* Larger hero text - increase font sizes */
.hero-text-content h1 {
    font-size: 2.5rem !important;
    /* Increased from default */
    line-height: 1.2;
}

.hero-text-content p {
    font-size: 1.125rem !important;
    /* Larger paragraph text */
    line-height: 1.6;
}

@media (min-width: 768px) {
    .hero-text-content h1 {
        font-size: 3.5rem !important;
    }

    .hero-text-content p {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 1024px) {
    .hero-text-content h1 {
        font-size: 3.5rem !important;
        /* Even larger on desktop */
    }

    .hero-text-content p {
        font-size: 1rem !important;
    }
}