/* 现代化响应式补充样式 */

/* 粘性定位 */
.sticky-top {
    position: sticky;
    top: 20px;
    z-index: 10;
}

/* 移动端隐藏/显示 */
.hidden {
    display: none;
}

.block {
    display: block;
}

@media (max-width: 1024px) {
    .lg\:col-span-2 {
        grid-column: span 1;
    }
    
    .lg\:col-span-1 {
        grid-column: span 1;
    }
    
    .lg\:block {
        display: none;
    }
}

@media (max-width: 768px) {
    .md\:hidden {
        display: none;
    }
    
    .md\:block {
        display: block;
    }
}

@media (max-width: 640px) {
    .sm\:hidden {
        display: none;
    }
    
    .sm\:block {
        display: block;
    }
}

/* 文章详情页特殊样式 */
.prose {
    color: #374151;
    max-width: none;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #1f2937;
    font-weight: 600;
    line-height: 1.25;
}

.prose h1 { font-size: 2em; margin-top: 2em; margin-bottom: 1em; }
.prose h2 { font-size: 1.5em; margin-top: 1.5em; margin-bottom: 0.75em; }
.prose h3 { font-size: 1.25em; margin-top: 1.25em; margin-bottom: 0.5em; }

.prose p {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.75;
}

.prose a {
    color: #667eea;
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    color: #764ba2;
}

.prose ul, .prose ol {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 2em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose blockquote {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding-left: 1em;
    border-left: 4px solid #667eea;
    font-style: italic;
    color: #6b7280;
}

.prose code {
    color: #1f2937;
    background-color: #f3f4f6;
    padding: 0.125em 0.25em;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.prose pre {
    color: #f3f4f6;
    background-color: #1f2937;
    overflow-x: auto;
    border-radius: 0.5rem;
    padding: 1em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

.prose img {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose th, .prose td {
    padding: 0.75em;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.prose th {
    font-weight: 600;
    color: #1f2937;
}

/* 导航面包屑样式 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb a {
    color: #667eea;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: #764ba2;
}

.breadcrumb-separator {
    color: #9ca3af;
}

/* 卡片阴影效果增强 */
.card-enhanced {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.card-enhanced:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-8px);
}

/* 按钮组样式 */
.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-group .btn {
    flex: 1;
    min-width: 120px;
}

/* 移动端优化 */
@media (max-width: 640px) {
    .container {
        padding: 0 12px;
    }
    
    .card-body {
        padding: 16px;
    }
    
    .article-content {
        padding: 16px;
    }
    
    .article-title {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .article-description {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .article-meta {
        font-size: 11px;
        gap: 8px;
    }
    
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        width: 100%;
    }
    
    .prose h1 { font-size: 1.75em; }
    .prose h2 { font-size: 1.5em; }
    .prose h3 { font-size: 1.25em; }
}

/* 加载状态优化 */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
    .prose {
        color: #e5e7eb;
    }
    
    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        color: #f3f4f6;
    }
    
    .prose a {
        color: #818cf8;
    }
    
    .prose a:hover {
        color: #a5b4fc;
    }
    
    .prose blockquote {
        color: #9ca3af;
        border-left-color: #818cf8;
    }
    
    .prose code {
        color: #f3f4f6;
        background-color: #374151;
    }
    
    .prose th, .prose td {
        border-bottom-color: #4b5563;
    }
    
    .prose th {
        color: #f3f4f6;
    }
    
    .breadcrumb a {
        color: #818cf8;
    }
    
    .breadcrumb a:hover {
        color: #a5b4fc;
    }
    
    .breadcrumb-separator {
        color: #6b7280;
    }
}