/* Demo Page Styles */
.demo-page .page-header {
    background: #f8f9fa;
    padding: 100px 0 60px;
    text-align: center;
    margin-bottom: 50px;
}

.demo-page .page-header h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 15px;
}

.demo-page .page-header p {
    font-size: 1.2em;
    color: #666;
}

.demo-section {
    padding-bottom: 80px;
}

/* 复用 home.css 中的 .subsite-card 样式，但需要确保 grid 布局正确 */
.demo-page .subsites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.demo-page .loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 1.1em;
}

.demo-page .no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 1.1em;
}

.demo-page .error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #dc3545;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .demo-page .subsites-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .demo-page .subsites-grid {
        grid-template-columns: 1fr;
    }
    
    .demo-page .page-header {
        padding: 80px 0 40px;
    }
    
    .demo-page .page-header h1 {
        font-size: 2em;
    }
}