/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .code-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 880px){
  /* offset for Dark Code's fixed site mobile-topbar (components.css) sitting above this */
  .topic-mobile-topbar{
    display:flex; align-items:center; gap:10px; position:sticky; top:74px; z-index:40;
    background: var(--surface); border-bottom:1px solid var(--border); padding:10px 14px;
  }
  .mobile-menu-btn{
    flex:1; height:40px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface); display:flex; align-items:center; justify-content:flex-start; gap:10px;
    padding:0 13px; color:var(--ink);
  }
  .mobile-menu-label{
    font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--ink);
  }

  .app-shell{ display:block; max-width:none; margin:0; padding:0; padding-top:74px; }
  .sidebar{
    position:fixed; top:74px; left:0; z-index:60; height:calc(100vh - 74px);
    margin:0; border-radius:0; border:none; border-right:1px solid var(--border);
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg);
  }
  body.sidebar-open .sidebar{ transform:none; }
  body.sidebar-open .sidebar-scrim{ display:block; position:fixed; inset:0; background:rgba(15,23,32,.4); z-index:50; }

  .main-scroll{ height:auto; padding-top:0; }
  .lesson-root{ padding: 26px 18px 70px; }
  .lesson-header h1{ font-size:26px; }
  .related-grid{ grid-template-columns:1fr; }
  .rel-card:last-child{ align-items:flex-start; text-align:left; }
}

@media (max-width: 480px){
  .func-grid{ grid-template-columns:1fr; }
  .before-after{ flex-direction:column; }
  .ba-arrow{ transform: rotate(0deg); align-self:center; }
}