/* =========================================================
   PANTRY grid v0.2
   The one layout grid. Every section is built on it, and the Grid
   overlay (button or G) draws exactly these columns, so what the
   overlay shows is what the page uses. Rules: DESIGN-SYSTEM.md.

   How it works
   - .container: max width plus the outer margin (--gutter).
   - .grid-12: 12 columns on desktop, 8 on tablet, 4 on mobile, no gap.
   - Bays: every 3 columns on desktop (4 on tablet). The vertical page
     lines sit on bay edges, so a cell edge that lands on a bay edge is
     on a line.
   - .col + one .l-* class: span per breakpoint (--d, --t, --m).
   - .cell: a column that holds text. It pads the text away from its
     edges by --cell-pad. That padding is the gutter: two cells side by
     side keep 2 x --cell-pad between their text.
   - Media (images, frames) use .col without .cell and run edge to edge,
     from line to line.
   ========================================================= */

/* Active column count. Breakpoints can't be variables, so they are the
   only literal values in this file.
   --cols: grid columns. --bays: lanes between the vertical lines.
   --line-gutter: clear space between a line and text. --cell-pad adds two
   line widths: one for the line itself, one for the up to half pixel the
   canvas line is snapped to the pixel grid. The gap never drops below the gutter. */
:root {
  --cols: var(--grid-columns);
  --bays: var(--grid-bays);
  --line-gutter: var(--line-gutter-desktop);
  --cell-pad: calc(var(--line-gutter) + var(--line-width) * 2);
}

@media (max-width: 1023px) {
  :root {
    --cols: var(--grid-columns-tablet);
    --bays: var(--grid-bays-tablet);
    --line-gutter: var(--line-gutter-mobile);
  }
}

@media (max-width: 639px) {
  :root {
    --cols: var(--grid-columns-mobile);
    --bays: var(--grid-bays-mobile);
  }
}

/* ---------- Container ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- 12-column grid ----------
   Children use .col plus one layout class that sets their span
   per breakpoint: --d desktop, --t tablet, --m mobile.
   No column gap: the gutter is the cell padding (see .cell). */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: 0;
  row-gap: var(--space-32);
}

/* Older markup still adds .lane-grid. It is the same grid now. */
.lane-grid {
  column-gap: 0;
}

.col {
  grid-column: span var(--d);
}

@media (max-width: 1023px) {
  .col {
    grid-column: span var(--t);
  }
}

@media (max-width: 639px) {
  .col {
    grid-column: span var(--m);
  }
}

.l-full {
  --d: var(--grid-columns);
  --t: var(--grid-columns-tablet);
  --m: var(--grid-columns-mobile);
}

.l-display {
  --d: 10;
  --t: var(--grid-columns-tablet);
  --m: var(--grid-columns-mobile);
}

.l-title {
  --d: 9;
  --t: var(--grid-columns-tablet);
  --m: var(--grid-columns-mobile);
}

.l-wide {
  --d: 8;
  --t: var(--grid-columns-tablet);
  --m: var(--grid-columns-mobile);
}

.l-half {
  --d: 6;
  --t: 4;
  --m: var(--grid-columns-mobile);
}

.l-lead {
  --d: 6;
  --t: 6;
  --m: var(--grid-columns-mobile);
}

.l-third {
  --d: 4;
  --t: 4;
  --m: var(--grid-columns-mobile);
}

.l-nav-logo {
  --d: 3;
  --t: 2;
  --m: 1;
}

.l-nav-actions {
  --d: 9;
  --t: 6;
  --m: 3;
}

/* One bay: 3 of 12 columns on desktop, 4 of 8 on tablet. */
.l-bay {
  --d: 3;
  --t: 4;
  --m: var(--grid-columns-mobile);
}

/* ---------- Text cells ----------
   The lines are never cut. Text sits inside one bay (.l-bay). The only
   exception is a big heading (.cell--wide): it is wider than a bay, so the
   lines run behind it. */

.cell {
  min-width: 0;
  padding-inline: var(--cell-pad);
  overflow-wrap: break-word;
}

/* Starts a new grid row, so a one-bay block does not sit beside the
   block before it. */
.col.new-row {
  grid-column: 1 / span var(--d);
}

@media (max-width: 1023px) {
  .col.new-row {
    grid-column: 1 / span var(--t);
  }
}

@media (max-width: 639px) {
  .col.new-row {
    grid-column: 1 / span var(--m);
  }
}

/* ---------- Grid overlay (toggle with the Grid button or G) ----------
   Built by scripts/grid.js from the same .container and .grid-12.
   Each column is tinted only where text can sit (inside --cell-pad), so
   every text edge on the page lands on a tint edge. Bay edges, where the
   page lines are, get a red rule. Columns are numbered at the top. */

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  display: none;
}

.show-grid .grid-overlay {
  display: block;
}

.grid-overlay .container,
.grid-overlay .grid-12 {
  height: 100%;
}

.grid-overlay .grid-12 {
  grid-template-rows: 100%;
  counter-reset: grid-col;
}

.grid-overlay-col {
  position: relative;
  padding-inline: var(--cell-pad);
  background: var(--grid-overlay-color);
  background-clip: content-box;
  counter-increment: grid-col;
}

.grid-overlay-col::before {
  content: counter(grid-col);
  position: absolute;
  top: var(--space-4);
  left: var(--cell-pad);
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-lh);
  color: var(--color-red-text);
}

/* Bay edges: the first column of each bay, and the right end. */
.grid-overlay-col:nth-child(3n + 1) {
  box-shadow: inset var(--line-width) 0 0 var(--color-red-signal);
}

.grid-overlay-col:nth-child(12) {
  box-shadow: inset calc(var(--line-width) * -1) 0 0 var(--color-red-signal);
}

@media (max-width: 1023px) {
  .grid-overlay-col:nth-child(n) {
    box-shadow: none;
  }

  .grid-overlay-col:nth-child(4n + 1) {
    box-shadow: inset var(--line-width) 0 0 var(--color-red-signal);
  }

  .grid-overlay-col:nth-child(8) {
    box-shadow: inset calc(var(--line-width) * -1) 0 0 var(--color-red-signal);
  }

  .grid-overlay-col:nth-child(n + 9) {
    display: none;
  }
}

@media (max-width: 639px) {
  .grid-overlay-col:nth-child(n) {
    box-shadow: none;
  }

  .grid-overlay-col:nth-child(1) {
    box-shadow: inset var(--line-width) 0 0 var(--color-red-signal);
  }

  .grid-overlay-col:nth-child(4) {
    box-shadow: inset calc(var(--line-width) * -1) 0 0 var(--color-red-signal);
  }

  .grid-overlay-col:nth-child(n + 5) {
    display: none;
  }
}

.grid-toggle {
  position: fixed;
  left: var(--space-16);
  bottom: var(--space-16);
  z-index: 1001;
  padding: var(--space-8) var(--space-12);
  border: var(--line-width) solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-canvas);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-lh);
  letter-spacing: var(--text-label-ls);
  text-transform: uppercase;
  cursor: pointer;
}

.grid-toggle[aria-pressed="true"] {
  border-color: var(--color-red-signal);
  color: var(--color-red-text);
}