/* Music Section - Minimal styles that Tailwind doesn't handle */

/* Title hover effect (not easily done in Tailwind) */

.musicsec-title{
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.musicsec-title h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #1F3A93;
}
.spotify-playlist iframe {
    height: 400px;
    max-width: 100%;
    transition: all 0.3s ease;
}

/* Font family for headers */
.spotify-playlist-AOTM-title h3, 
.spotify-playlist-RTChart-title h3, 
.spotify-playlist-Genre-title h3 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
}

/* Responsive iframe heights - can't easily do with Tailwind */
@media screen and (min-width: 1200px) {
    .spotify-playlist iframe {
        height: 450px;
    }
}

@media screen and (max-width: 991px) {
    .spotify-playlist iframe {
        height: 380px;
    }
}

@media screen and (max-width: 768px) {
    .spotify-playlist iframe {
        height: 350px;
    }
}

@media screen and (max-width: 400px) {
    .spotify-playlist iframe {
        height: 280px !important;
    }
}

@media screen and (max-width: 320px) {
    .spotify-playlist iframe {
        height: 240px !important;
    }
}