/* ==========================================================================
   DESKTOP STYLES (Applies strictly to screens larger than 992px)
   ========================================================================== */

@media (min-width: 993px) {

  /* 1. Main Layout & Sidebar Grid */
  .site-main-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    margin: 24px auto 40px auto;
  }

  .main-content {
    min-width: 0;
  }

  .sidebar-container {
    width: 100%;
    min-width: 0;
  }

  /* 2. Primary Header Navigation */
  .primary-navigation {
    display: flex;
    align-items: center;
  }

  .mobile-menu-toggle {
    display: none !important;
  }

  .mobile-nav-drawer {
    display: none !important;
  }

  /* 3. Novel Grid Layout */
  .novel-grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 18px;
  }

  /* 4. Horizontal Carousel Sliders */
  .slider-track .novel-card {
    flex: 0 0 calc((100% - (var(--visible-cards, 5) - 1) * 12px) / var(--visible-cards, 5));
    width: calc((100% - (var(--visible-cards, 5) - 1) * 12px) / var(--visible-cards, 5));
    min-width: 0;
  }

  .slider-arrow {
    display: flex;
  }

  /* 5. Reader View Desktop Enhancements */
  .reader-toolbar {
    flex-wrap: nowrap;
  }

  .chapter-nav-bar {
    flex-direction: row;
  }

  .nav-chapter-btn {
    width: auto;
  }
}