/* ============================================
   加拿大2.8 — 响应式样式表
   CSS前缀: jb-
   ============================================ */

/* --- xl: ≥ 1280px (默认桌面端) --- */

/* --- lg: 1024px - 1279px --- */
@media (max-width: 1279px) {
    .jb-hero h1 {
        font-size: 3rem;
    }
    .jb-algorithm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .jb-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .jb-analysis-page {
        grid-template-columns: 220px 1fr 260px;
    }
}

/* --- md: 768px - 1023px --- */
@media (max-width: 1023px) {
    .jb-hero h1 {
        font-size: 2.5rem;
    }
    .jb-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .jb-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .jb-archive-layout {
        grid-template-columns: 1fr;
    }
    .jb-analysis-layout {
        grid-template-columns: 1fr;
    }
    .jb-analysis-visual {
        order: -1;
    }
    .jb-articles-layout {
        grid-template-columns: 1fr;
    }
    .jb-article-card.jb-featured {
        grid-row: span 1;
    }
    .jb-honors-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .jb-analysis-page {
        grid-template-columns: 1fr;
    }
    .jb-model-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .jb-model-list h3 {
        width: 100%;
    }
    .jb-page-hero h1 {
        font-size: 2rem;
    }
    .jb-nav-links {
        display: none;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: #3E2723;
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .jb-nav-links.jb-nav-open {
        display: flex;
    }
    .jb-nav-links li a {
        padding: 0.75rem 2rem;
    }
    .jb-hamburger {
        display: flex;
    }
    .jb-thermometer-grid {
        flex-wrap: wrap;
    }
}

/* --- sm: 640px - 767px --- */
@media (max-width: 767px) {
    .jb-hero h1 {
        font-size: 2rem;
    }
    .jb-hero-subtitle {
        font-size: 1rem;
    }
    .jb-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .jb-stat-number {
        font-size: 1.5rem;
    }
    .jb-video-grid {
        grid-template-columns: 1fr;
    }
    .jb-algorithm-grid {
        grid-template-columns: 1fr;
    }
    .jb-comments-grid {
        grid-template-columns: 1fr;
    }
    .jb-grid-2,
    .jb-grid-3,
    .jb-grid-4 {
        grid-template-columns: 1fr;
    }
    .jb-footer-grid {
        grid-template-columns: 1fr;
    }
    .jb-lottery-numbers {
        gap: 1rem;
    }
    .jb-number-circle {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    .jb-download-buttons {
        flex-direction: column;
        align-items: center;
    }
    .jb-thermometer-grid {
        gap: 1rem;
    }
    .jb-thermo-tube {
        height: 150px;
        width: 32px;
    }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    .jb-container {
        padding: 0 1rem;
    }
    .jb-section {
        padding: 3rem 0;
    }
}

/* --- xs: < 640px --- */
@media (max-width: 639px) {
    .jb-hero {
        min-height: 600px;
    }
    .jb-hero h1 {
        font-size: 1.6rem;
    }
    .jb-hero-badge {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
    .jb-hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .jb-btn-primary,
    .jb-btn-outline {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    .jb-note-card {
        padding: 1.5rem;
    }
    .jb-page-hero {
        padding: 4rem 0 2rem;
    }
    .jb-page-hero h1 {
        font-size: 1.5rem;
    }
    .jb-thermometer-grid {
        gap: 0.5rem;
    }
    .jb-thermo-tube {
        height: 120px;
        width: 28px;
    }
}

/* --- 分析室三栏布局响应式 --- */
@media (max-width: 1279px) {
    .jb-analysis-grid {
        grid-template-columns: 220px 1fr 260px;
    }
}

@media (max-width: 1023px) {
    .jb-analysis-grid {
        grid-template-columns: 1fr;
    }
    .jb-analysis-sidebar .jb-model-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .jb-analysis-sidebar .jb-model-item {
        flex: 1 1 auto;
        min-width: 180px;
    }
    .jb-app-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .jb-analysis-sidebar .jb-model-item {
        min-width: 100%;
    }
    .jb-param-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }
    .jb-param-row label {
        min-width: auto;
    }
    .jb-param-row .jb-form-select,
    .jb-param-row .jb-form-input {
        max-width: 100%;
    }
    .jb-app-features {
        grid-template-columns: 1fr;
    }
    .jb-chart-bars {
        height: 150px;
    }
}