/* Songs Page Specific Styles */

/* Search Box */
.search-container {
    max-width: 600px;
    margin: 0 auto 3rem;
    text-align: center;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-input {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 30px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.9);
}

.search-input:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
    background: white;
}

.search-button {
    padding: 0 1.25rem;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 30px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-button:hover {
    background: rgba(255,255,255,0.3);
    border-color: white;
    transform: scale(1.05);
}

.clear-search {
    padding: 0.75rem 1.25rem;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.3);
}

.clear-search:hover {
    background: rgba(255,255,255,0.3);
    border-color: white;
}

.search-results-count {
    color: #666;
    font-style: italic;
    margin-top: 1rem;
}

.songs-header {
    background: linear-gradient(135deg, #e91e63 0%, #880e4f 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

/* Audio waveform texture overlay */
.songs-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60 C10 60 10 40 20 40 S30 80 40 80 S50 30 60 30 S70 90 80 90 S90 50 100 50 S110 70 120 70 S130 20 140 20 S150 100 160 100 S170 60 180 60 S190 60 200 60' stroke='rgba(255,255,255,0.1)' stroke-width='3' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 400px 120px;
    animation: soundwave 3s linear infinite;
}

@keyframes soundwave {
    0% { background-position-x: 0; }
    100% { background-position-x: 400px; }
}

.songs-header .container {
    position: relative;
    z-index: 1;
}

.social-links {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-link {
    padding: 0.5rem 1.5rem;
    background: rgba(255,255,255,0.2);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.social-link:hover {
    background: white;
    color: #f5576c;
    transform: translateY(-2px);
}

.songs-main {
    padding: 4rem 0;
    background: var(--bg-light);
    position: relative;
}

.songs-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='150' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q10 10 20 20 T40 20 Q50 30 60 20 T80 20 Q90 15 100 20 T120 20 Q130 25 140 20 T150 20' stroke='%23d1416c' stroke-width='1' fill='none' opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
}

.intro-section {
    max-width: 800px;
    margin: 0 auto 4rem;
    text-align: center;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-dark);
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 5rem;
}

.video-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
}

.video-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #d1416c 0%, #a92856 50%, #d1416c 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(169, 40, 86, 0.15);
}

.video-card:hover::after {
    transform: scaleX(1);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 200px;
    background: var(--gradient-1);
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.video-info {
    padding: 1.5rem;
}

.video-info h3 {
    font-size: 1.25rem;
    color: #a92856;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.video-description {
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.video-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #666;
}

/* Playlist Section */
.playlist-section {
    margin-bottom: 5rem;
}

.playlist-section h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.playlist-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.playlist-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.playlist-card p {
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

/* Shorts Section */
.shorts-section {
    text-align: center;
}

.shorts-section h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.shorts-section > p {
    color: var(--text-dark);
    margin-bottom: 2rem;
}

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.short-preview {
    position: relative;
    padding-bottom: 177.77%; /* 9:16 aspect ratio */
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.short-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-2);
    opacity: 0.3;
}

/* Video wrapper for YouTube embeds */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Emphasis text in header */
.emphasis-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    margin-top: 1rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
    
    .shorts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}