/* 响应式样式 */

/* 平板设备 (768px 到 1024px) */
@media (max-width: 1024px) {
    .header .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .search-box {
        margin-left: 0;
        width: 100%;
        max-width: 400px;
    }
    
    .search-box input {
        flex: 1;
    }
    
    .lyrics-detail-container {
        flex-direction: column;
    }
}

/* 手机设备 (小于 768px) */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav ul {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .nav ul li {
        margin: 5px 10px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-box input {
        width: 100%;
    }
    
    .lyrics-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .lyrics-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .lyrics-card .avatar-link {
        width: 50%; /* 保持卡片宽度的50% */
        padding-top: 50%; /* 保持1:1宽高比 */
        margin: 0 auto 15px; /* 确保居中 */
    }
    
    .lyrics-card .card-content {
        width: 100%;
        padding: 0 10px;
    }
    
    .singer-info-mobile {
        display: flex;
    }
    
    .lyrics-sidebar {
        display: none;
    }
}

/* 小手机设备 (小于 480px) */
@media (max-width: 480px) {
    .lyrics-grid {
        grid-template-columns: 1fr;
    }
    
    .lyrics-card .avatar-link {
        width: 50%; /* 仍然保持卡片宽度的50% */
        padding-top: 50%;
    }
    
    .lyrics-card .card-content {
        width: 100%;
    }
}