/* ============================================
   MVR Studios — Responsive
   ============================================ */

/* Mobile: nav panel goes full width */
@media (max-width: 768px) {
  .nav-panel {
    width: var(--nav-panel-width-mobile);
  }

  .nav-tabs {
    padding: var(--space-3xl) var(--space-lg) var(--space-md);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs [role="tab"] {
    padding: var(--space-sm) var(--space-sm);
    font-size: calc(var(--text-xs) * 0.9);
  }

  .nav-panel [role="tabpanel"] {
    padding: var(--space-lg);
  }

  .character-item,
  .place-item {
    font-size: var(--text-2xl);
  }

  .faction__header {
    font-size: var(--text-xl);
  }

  .preview-image {
    display: none;
  }

  .nav-close {
    top: var(--space-md);
    right: var(--space-md);
  }

  .nav-toggle {
    top: var(--space-md);
    right: var(--space-md);
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-panel {
    width: 70vw;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  .nav-panel {
    width: 45vw;
  }
}