/* layout.css — page shell, grid, spacing utilities */

.page-shell {
  width: min(100% - var(--space-page) * 2, var(--max-width));
  margin-inline: auto;
}

main { display: block; }

.section {
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-4xl));
}
.section--tight { padding-block: var(--space-2xl); }
.section--dark {
  background: var(--color-ink);
  color: var(--color-bg);
}
.section--surface { background: var(--color-surface); }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.col-span-full { grid-column: 1 / -1; }
.col-span-half { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .col-span-half { grid-column: span 4; }
}
@media (min-width: 1080px) {
  .col-span-half { grid-column: span 6; }
  .col-span-7    { grid-column: span 7; }
  .col-span-5    { grid-column: span 5; }
  .col-span-4    { grid-column: span 4; }
  .col-span-8    { grid-column: span 8; }
}

.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-xl); }
.stack-xl > * + * { margin-top: var(--space-2xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media (min-width: 720px) {
  .split { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .split > * { flex: 1; }
}

.center { display: flex; align-items: center; justify-content: center; }

.hide-mobile { display: none; }
@media (min-width: 720px) { .hide-mobile { display: revert; } }
.show-mobile { display: revert; }
@media (min-width: 720px) { .show-mobile { display: none; } }