/* =====================
   Tablet (≤ 1100px)
   ===================== */
@media (max-width: 1100px) {
  :root {
    --right-panel-width: 256px;
  }
}

/* =====================
   Laptop (≤ 960px)
   ===================== */
@media (max-width: 960px) {
  .app-right-panel {
    display: none;
  }

  .app-main {
    margin-right: 0;
  }

  .app-footer {
    padding-right: var(--space-4);
  }
}

/* =====================
   Mobile (≤ 768px)
   ===================== */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
    --footer-height: 64px;
  }

  .header-menu-btn {
    display: flex;
  }

  .header-logo-text {
    font-size: 13px;
  }

  .header-progress-bar {
    display: none;
  }

  .header-chapter-info {
    display: none;
  }

  .app-sidebar {
    left: calc(-1 * var(--sidebar-width));
    transition: left var(--transition);
  }

  .app-sidebar.open {
    left: 0;
  }

  .app-main {
    margin-left: 0;
    padding: var(--space-5) var(--space-4) var(--space-12);
  }

  .chapter-title {
    font-size: var(--text-3xl);
  }

  .concept-cards {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-wrapper {
    grid-template-columns: 1fr;
  }

  .intro-hero {
    padding: var(--space-8) var(--space-4);
  }

  .intro-hero-title {
    font-size: var(--text-3xl);
  }

  .intro-features {
    grid-template-columns: 1fr 1fr;
  }

  .app-footer {
    margin-left: 0;
    padding: 0 var(--space-4);
  }

  .footer-chapter-dots {
    display: none;
  }

  .flow-node {
    min-width: 120px;
    padding: var(--space-2) var(--space-4);
  }

  .quiz-section {
    padding: var(--space-4);
  }

  .learning-goal-card {
    padding: var(--space-4);
  }
}

/* =====================
   Small Mobile (≤ 480px)
   ===================== */
@media (max-width: 480px) {
  .chapter-title {
    font-size: var(--text-2xl);
  }

  .chapter-description {
    font-size: var(--text-base);
  }

  .concept-cards {
    grid-template-columns: 1fr;
  }

  .intro-features {
    grid-template-columns: 1fr;
  }

  .header-progress-percent {
    display: none;
  }

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

/* =====================
   Print
   ===================== */
@media print {
  .app-header,
  .app-sidebar,
  .app-right-panel,
  .app-footer {
    display: none !important;
  }

  .app-main {
    margin: 0;
    padding: 0;
  }
}