fix(frontend): stop single sidebar float overlap under fixed nav

Replace the fragile content-wrap float + negative-margin sidebar with a
main.container grid, add fixed-nav top breathing room so the breadcrumb
stays below the header, and mark the aside as content-layout__aside.

assets/css/frontend/single-post/shell.css

@@ -1,27 +1,44 @@
-/* Single page shell — Zibll float dual-column (scoped to body.single) */
-
-body.single .container {
-  position: relative;
-}
-
-body.single .content-wrap {
-  float: left;
-  width: 100%;
-}
+/* Single page shell — dual column + fixed-nav safe top spacing */
 
 /*
  * Global layout.css turns .content-layout into a 2-col grid that expects
  * .content-layout__primary + .content-layout__aside children.
  * Single posts put breadcrumb / article / author / related / comments as
- * direct children and float the sidebar outside — so the grid must be
- * disabled here or those sections tile left/right and look "broken".
+ * direct children of .content-layout, and render .sidebar as a sibling of
+ * .content-wrap under main.container. Force a page-owned layout here.
  */
+body.single main.container {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Extra breathing room under fixed header (body.nav-fixed already reserves
+ * --nav-height; this keeps breadcrumb from sitting flush under the bar). */
+body.single.nav-fixed main.container {
+  padding-top: 12px;
+}
+
+body.single main.container > .content-wrap {
+  float: none;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  grid-column: 1;
+  grid-row: 1;
+}
+
 body.single main.container .content-layout {
   display: block;
   grid-template-columns: none;
   gap: 0;
   width: 100%;
   min-width: 0;
+  margin-right: 0 !important; /* kill residual float-layout reservation */
 }
 
 body.single main.container .content-layout > * {
@@ -29,31 +46,47 @@ body.single main.container .content-layout > * {
   max-width: 100%;
 }
 
-/* Clear floats after main dual-column shell */
-body.single main.container::after {
-  content: "";
-  display: table;
-  clear: both;
+/* Breadcrumb must stay in the content flow and under the fixed header. */
+body.single main.container .content-layout > .breadcrumb,
+body.single main.container .content-layout > ul.breadcrumb,
+body.single main.container .content-layout > .breadcrumb-nav,
+body.single main.container .content-layout > .breadcrumbs-wrap {
+  position: relative;
+  z-index: 1;
+  margin-top: 0;
+  margin-bottom: 12px;
+  padding-top: 2px;
 }
 
-/* Default: no sidebar full width */
-body.single.container--no-sidebar .content-layout,
-body.single .container--no-sidebar .content-layout,
-body.single main.container--no-sidebar .content-layout {
-  margin-right: 0;
+/* Sidebar is a direct child of main.container (not inside .content-layout). */
+body.single main.container > .sidebar {
+  float: none;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin-left: 0;
+  grid-column: 1;
 }
 
-/* Zibll site-layout-2: content left, sidebar right (311px) */
+/* Desktop: content | sidebar in one row (no negative-margin float hack). */
 @media (min-width: 992px) {
-  body.single:not(.no-sidebar) main.container:not(.container--no-sidebar) .content-layout {
-    margin-right: calc(var(--sidebar-width, 311px) + 15px);
+  body.single main.container:not(.container--no-sidebar) {
+    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 300px);
+    column-gap: 20px;
   }
 
-  body.single:not(.no-sidebar) main.container:not(.container--no-sidebar) > .sidebar {
-    float: left;
-    width: var(--sidebar-width, 311px);
-    margin-left: calc(0px - var(--sidebar-width, 311px));
-    position: relative;
+  body.single main.container:not(.container--no-sidebar) > .content-wrap {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  body.single main.container:not(.container--no-sidebar) > .sidebar {
+    grid-column: 2;
+    grid-row: 1;
+    width: 100%;
+    margin-left: 0;
+    align-self: start;
   }
 }
 
@@ -61,10 +94,6 @@ body.single main.container--no-sidebar .content-layout {
   body.single main.container > .sidebar {
     display: none;
   }
-
-  body.single main.container .content-layout {
-    margin-right: 0 !important;
-  }
 }
 
 /* Sidebar widgets spacing */
@@ -77,3 +106,10 @@ body.single .sidebar .posts-nav-box.toc-widget {
   position: sticky;
   top: calc(var(--nav-height, 60px) + 16px);
 }
+
+/* Override generic sidebar.css absolute widths (280/311) so the grid cell owns sizing */
+@media (min-width: 992px) {
+  body.single main.container > .sidebar {
+    width: 100%;
+  }
+}