/*
  ===== 12-column grid =====
  margin (outer) = 40px = 4rem, gutter (between cols) = 40px = 4rem @1920.
  Everything scales via the root font-size defined in base.css.
*/
.container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding-inline: var(--grid-margin);
  width: 100%;
}

/* Let content shrink within its columns instead of widening the page. */
.container > * { min-width: 0; }

/* Column span (child of .container).
   Set the END as a span so it composes correctly with .start-N (which sets the
   START line). Using the `grid-column` shorthand here would overwrite the start. */
.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

/* Explicit start line (1..13) — use when a block must begin on a given column */
.start-1  { grid-column-start: 1; }
.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }

/*
  ===== Mobile / tablet (< 1200px): 4-column grid =====
  margin 16px = 1.6rem, gutter 16px = 1.6rem, baseline 390px.
  Default: every column block stacks full width. Opt into side-by-side with .m-col-N.
*/
@media (max-width: 1199px) {
  :root {
    --grid-columns: 4;
    --grid-margin: 1.6rem;   /* 16px @390 */
    --grid-gutter: 1.6rem;   /* 16px @390 */
  }
  [class*="col-"]   { grid-column: 1 / -1; }        /* full-width stack by default */
  [class*="start-"] { grid-column-start: auto; }
  .m-col-1 { grid-column: span 1; }
  .m-col-2 { grid-column: span 2; }
  .m-col-3 { grid-column: span 3; }
  .m-col-4 { grid-column: span 4; }
}

/*
  ===== Dev grid overlay =====
  Add class "show-grid" to <body> to visualize the 12 columns.
  Toggle in styleguide with the button, or press "g".
*/
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: none;
}
.show-grid .grid-overlay { display: grid; }
.grid-overlay .container { height: 100%; }
.grid-overlay .container > span {
  grid-column: span 1;
  background: rgba(232, 38, 45, 0.08);
  border-inline: 1px solid rgba(232, 38, 45, 0.18);
}