/* ==========================================================================
   LAYOUT STRUCTURE
   ========================================================================== */

/* Main Wrapper (App Container)
   ===================================== */
.layout-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 0.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Split View (Sidebar + Content)
   ===================================== */
/* Mobile First: Stacked layout */
.layout-split {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.layout-plain {
  width: 100%;
  margin-inline: auto;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.primary-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ==========================================================================
   LAYOUT MEDIA QUERIES
   ========================================================================== */

/* Tablet & Desktop Layouts (>= 768px)
   ===================================== */
@media (min-width: 768px) {
  .layout-wrapper {
    padding: 1.8rem;
    gap: 1.4rem;
  }

  /* Switch to 2-column layout */
  .layout-split {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.4rem;
  }

  .sidebar:has(.toc-sidebar) {
    align-self: start;
    position: sticky;
    top: 2rem;
  }
}