/* ==========================================================================
   Layout: page wrapper, 12-column grid, stacking
   ========================================================================== */

/* Content width: up to 1440px with fluid side margins inside it */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}

/* 12-column grid, 32px gutters */
.g12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Below 760px everything stacks to one column */
@media (max-width: 759.98px) {
  .g12 > * {
    grid-column: 1 / -1;
  }
}

/* Dev-only grid overlay, built by js/main.js with ?grid or the G key.
   12 translucent red columns plus 8px lines, as the canvas showGrid block. */
.dev-grid {
  position: absolute;
  inset: 0;
  z-index: var(--z-dev-grid);
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 80, 80, 0.18) 1px, transparent 1px);
  background-size: 100% 8px;
}
.dev-grid .wrap,
.dev-grid .g12 {
  height: 100%;
}
.dev-grid .g12 > span {
  grid-column: auto; /* keep 12 columns visible, even where content stacks */
  background: rgba(255, 80, 80, 0.14);
}
/* Phones have 4 columns */
@media (max-width: 759.98px) {
  .dev-grid .g12 > span:nth-child(n + 5) {
    display: none;
  }
}