/* ===================================================
   Mania AI — Layout (Container, Grid, Sidebar)
   =================================================== */

@layer layout {

  /* ── Container ── */
  .m-container {
    max-inline-size: 75rem;
    margin-inline: auto;
    padding-inline: var(--m-space-lg);
    flex: 1;
  }

  /* ── 2-Column Layout ── */
  .m-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--m-space-xl);
    padding-block: var(--m-space-xl);
  }

  @media (max-width: 1023px) {
    .m-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .m-layout--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ── Sidebar ── */
  .m-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-lg);
  }
}