/* ============================================
   responsive.css — 迪卓依思 djoyce.com 响应式适配
   ============================================ */

/* ---- Desktop Large (1440px+) ---- */
@media (min-width: 1440px) {
    .container { max-width: 1400px; }
}

/* ---- Tablet Landscape (1024px - 1439px) ---- */
@media (min-width: 1024px) and (max-width: 1439px) {
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
    .tracks-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: repeat(2, 1fr); }
    .calendar-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .publications-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet Portrait (768px - 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .section { padding: var(--space-3xl) 0; }

    .modules-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .tracks-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .content-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .calendar-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .publications-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }

    .about-grid { grid-template-columns: 1fr; }

    .path-line { left: 28px; }
    .path-step,
    .path-step:nth-child(even) { flex-direction: row; }
    .path-step-content { margin-left: var(--space-lg); }
}

/* ---- Mobile Landscape (480px - 767px) ---- */
@media (min-width: 480px) and (max-width: 767px) {
    .section { padding: var(--space-3xl) 0; }

    .modules-grid,
    .tracks-grid,
    .content-grid,
    .calendar-grid,
    .values-grid,
    .publications-grid,
    .stats-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }

    .nav-menu,
    .nav-secondary { display: none; }
    .mobile-toggle { display: flex; }

    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 100%; max-width: 280px; justify-content: center; }

    .path-line { left: 24px; }
    .path-step,
    .path-step:nth-child(even) { flex-direction: row; }
    .path-step-content { margin-left: var(--space-md); }

    .about-grid { grid-template-columns: 1fr; }

    .timeline-line { left: 20px; }
    .timeline-item { padding-left: 0; }
}

/* ---- Mobile Portrait (< 480px) ---- */
@media (max-width: 479px) {
    html { font-size: 15px; }
    .container { padding: 0 var(--space-md); }
    .section { padding: var(--space-2xl) 0; }

    .modules-grid,
    .tracks-grid,
    .content-grid,
    .calendar-grid,
    .values-grid,
    .publications-grid,
    .stats-grid { grid-template-columns: 1fr; gap: var(--space-lg); }

    .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }

    .nav-menu,
    .nav-secondary { display: none; }
    .mobile-toggle { display: flex; }

    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 100%; max-width: 280px; justify-content: center; }

    .module-card { padding: var(--space-xl) var(--space-lg); }
    .module-icon { width: 56px; height: 56px; font-size: 1.5rem; }

    .path-line { left: 20px; }
    .path-step,
    .path-step:nth-child(even) { flex-direction: row; }
    .path-step-number { width: 44px; height: 44px; font-size: 1.25rem; }
    .path-step-content { margin-left: var(--space-sm); padding: var(--space-lg); }

    .stat-number { font-size: 2rem; }

    .about-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }

    .timeline-line { left: 16px; }
    .timeline-item { gap: var(--space-md); padding-left: 0; }
    .timeline-dot { width: 32px; height: 32px; font-size: 0.625rem; }
    .timeline-content { padding: var(--space-md); }

    .content-tabs { flex-wrap: wrap; }
    .tab-btn { padding: var(--space-xs) var(--space-md); font-size: 0.875rem; }

    .track-card { aspect-ratio: 16/10; }

    .search-box { margin: 0 var(--space-md); }
    .search-input-wrap { padding: var(--space-sm) var(--space-md); }
    .search-input-wrap input { font-size: 1rem; }
}

/* ---- Mobile Menu Open State ---- */
.mobile-menu-open #main-nav .nav-menu,
.mobile-menu-open #main-nav .nav-secondary {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: white;
    padding: var(--space-md);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border-light);
    gap: 0;
}

.mobile-menu-open .nav-item { width: 100%; }
.mobile-menu-open .nav-link { padding: var(--space-md); border-radius: 0; }
.mobile-menu-open .dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: var(--space-xl);
    opacity: 1;
    visibility: visible;
    display: none;
}
.mobile-menu-open .nav-item.dropdown-open .dropdown { display: block; }
.mobile-menu-open .nav-secondary { border-top: 1px solid var(--color-border-light); margin-top: var(--space-sm); }

/* ---- Print Styles ---- */
@media print {
    #main-nav, #cta, #main-footer, .hero-scroll, .back-to-top { display: none; }
    .section { padding: var(--space-xl) 0; page-break-inside: avoid; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}