/* Sample test-site stylesheet. Neutral greys only; the real design comes in a later plan.
   Spacing numbers live in the three custom properties below and nowhere else. */
:root {
  --gap: 1rem;
  --pad: 1rem;
  --page-max: 72rem;
}

body {
  margin: 0;
  font-family: sans-serif;
  color: #222;
}

[data-section] {
  padding: var(--pad) 0;
  border-bottom: 1px solid #ddd;
}

/* Phone first: one track, so every cell stacks full width in the order the editor lists them. */
[data-columns] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

/* A cell with an unknown or empty span takes the whole row. */
[data-column] {
  grid-column: 1 / -1;
  min-width: 0;
}

[data-width="contained"] > [data-columns] {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

[data-width="full"] > [data-columns] {
  padding: 0;
}

[data-column] > [data-component="missing"] {
  min-height: 3rem;
  outline: 1px dashed #aaa;
}

/* a picture never draws wider than the column it sits in */
[data-component="image"] img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  [data-columns] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  [data-span="1"] { grid-column: span 1; }
  [data-span="2"] { grid-column: span 2; }
  [data-span="3"] { grid-column: span 3; }
  [data-span="4"] { grid-column: span 4; }
  [data-span="5"] { grid-column: span 5; }
  [data-span="6"] { grid-column: span 6; }
  [data-span="7"] { grid-column: span 7; }
  [data-span="8"] { grid-column: span 8; }
  [data-span="9"] { grid-column: span 9; }
  [data-span="10"] { grid-column: span 10; }
  [data-span="11"] { grid-column: span 11; }
  [data-span="12"] { grid-column: span 12; }
}

/* Tablet step: three or four narrow cells are unreadable at this width, so they go two per row. */
@media (min-width: 640px) and (max-width: 1023px) {
  [data-columns="3"] > [data-column],
  [data-columns="4"] > [data-column] {
    grid-column: span 6;
  }
  [data-columns="3"] > [data-column]:last-child {
    grid-column: 1 / -1;
  }
}