app/src/styles/_layout.scss

// ============================================================================
// Layout – 3-column grid (TOC / Article / Aside)
// ============================================================================
.content-grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
.content-grid > main { max-width: 100%; margin: 0; padding: 0; }

// TOC (left column)
.toc { position: sticky; top: 24px; }
.toc nav { border-left: 1px solid var(--border-color); padding-left: 16px; font-size: 13px; }
.toc .title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }

// Hide in-article TOC (duplicated by sticky aside)
main > nav:first-of-type { display: none; }

// TOC look & feel
.toc nav ul { margin: 0 0 6px; padding-left: 1em; }
.toc nav li { list-style: none; margin: .25em 0; }
.toc nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }
.toc nav > ul > li > a { font-weight: 700; }
.toc nav a:hover { text-decoration: underline solid var(--muted-color); }
.toc nav a.active { text-decoration: underline; }

// Right aside (notes)
.right-aside { position: sticky; top: 24px; }
.right-aside .aside-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-color); }

// Responsive – collapse to single column
@media (max-width: 1100px) {
  .content-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .right-aside { display: none; }
  main > nav:first-of-type { display: block; }
}



.margin-aside { position: relative; margin: 12px 0; }

.margin-aside__aside {
  position: absolute;
  top: 0;
  right: -260px; /* push into the right grid column (width 260 + gap 32) */
  width: 260px;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 0.9rem;
  color: var(--muted-color);
}
@media (max-width: 1100px) {
  .margin-aside__aside {
    position: static;
    width: auto;
    margin-top: 8px;
  }
}


// ============================================================================
// Width helpers – slightly wider than main column, and full-bleed to viewport
// ----------------------------------------------------------------------------
// Usage in MDX:
// <div className="wide"> ... </div>
// <div className="full-bleed"> ... </div>
// These center the content relative to the viewport while keeping it responsive.
//
// Notes:
// - These helpers work inside the main article column; they break out visually
//   to be wider or fully span the viewport. On small screens, they fall back to 100%.
// - Adjust the target width in .wide if desired.
.wide,
.full-bleed { box-sizing: border-box; }

.wide {
  /* Target up to ~1100px while staying within viewport minus page gutters */
  width: min(1100px, 100vw - 32px);
  margin-left: 50%;
  transform: translateX(-50%);
}

.full-bleed {
  /* Span the full viewport width */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 1100px) {
  .wide,
  .full-bleed {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}