/* ==========================================================================
   Content panel / grid
   ========================================================================== */
#content-panel {
  position: relative; z-index: var(--z-content);
  margin-top: calc(var(--banner-h) - var(--panel-overlap));
  padding-bottom: 1rem;
}
/* On the home page the panel slides up over the hero: let clicks fall through
   to the banner text and its links, and re-enable them where the panel really
   starts (the grid and the footer). Upstream: body.is-home.enable-banner. */
html[data-wallpaper-mode="banner"] body.is-home #content-panel > #content-panel-inner { pointer-events: none; }
html[data-wallpaper-mode="banner"] body.is-home #content-panel #main-grid,
html[data-wallpaper-mode="banner"] body.is-home #content-panel .site-footer { pointer-events: auto; }
#content-panel-inner {
  width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 0 1rem;
}
@media (min-width: 1280px) {
  /* keep the content column the same width as the navbar bar */
  #content-panel-inner { width: 92vw; }
}
#main-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
#content-column { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
/* Everything a page stacks in the reading column (listing head, post list,
   pagination, article, comments) keeps the same gap between blocks. */
#content-wrapper { display: flex; flex-direction: column; gap: 1rem; }

.sidebar { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
/* a column whose only widget (e.g. the TOC) came up empty is taken out of the grid */
.sidebar.is-empty { display: none; }

/* mobile: content first, widgets below */
#content-column { order: 1; }
.sidebar-left { order: 2; }
.sidebar-right { order: 3; }

/* Tablet and desktop (upstream's md/xl: 768px / 1280px) turn the sidebars into
   sticky columns anchored under the navbar. The column count is keyed off which
   sidebars the page actually rendered (see partial/sidebar.ejs): a listing page
   has no TOC, so its right column collapses instead of leaving an empty gap. */
@media (min-width: 768px) {
  /* the sticky columns are anchored under the navbar; `top` is animated so the
     tops travel with the bar when it slides away (see body.navbar-hidden) */
  .sidebar { position: sticky; top: calc(var(--navbar-h) + 1rem); order: 0; transition: top var(--dur) var(--ease); }
  /* dynamic navbar hidden (scrolled down): the bar no longer covers the top, so
     the sticky column tops rise to where the bar used to be */
  body[data-navbar-mode="dynamic"].navbar-hidden .sidebar { top: 1rem; }
  #content-column { order: 0; }
  #main-grid:has(> .sidebar-left:not(.is-empty)) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  #main-grid:has(> .sidebar-right:not(.is-empty)) { grid-template-columns: minmax(0, 1fr) var(--sidebar-w); }
  #main-grid:has(> .sidebar-left:not(.is-empty)):has(> .sidebar-right:not(.is-empty)) {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--sidebar-w);
  }
}
/* Tablet (768-1279px): three columns would squeeze the reading column, so
   upstream keeps a single side — `sidebar.tabletSidebar`, left by default. The
   hidden column is dropped from the template as well (a hidden grid item still
   occupies its track). */
@media (min-width: 768px) and (max-width: 1279px) {
  body[data-sidebar-position="both"]:not([data-tablet-sidebar="right"]) #main-grid > .sidebar-right { display: none; }
  body[data-sidebar-position="both"]:not([data-tablet-sidebar="right"]) #main-grid:has(> .sidebar-right:not(.is-empty)) {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-sidebar-position="both"]:not([data-tablet-sidebar="right"]) #main-grid:has(> .sidebar-left:not(.is-empty)):has(> .sidebar-right:not(.is-empty)) {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  body[data-sidebar-position="both"][data-tablet-sidebar="right"] #main-grid > .sidebar-left { display: none; }
  body[data-sidebar-position="both"][data-tablet-sidebar="right"] #main-grid:has(> .sidebar-left:not(.is-empty)) {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-sidebar-position="both"][data-tablet-sidebar="right"] #main-grid:has(> .sidebar-left:not(.is-empty)):has(> .sidebar-right:not(.is-empty)) {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  }
}