/* Containers */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container--prose {
  max-width: var(--container-prose-max);
}

.container--about {
  max-width: var(--container-about-max);
}

@media (max-width: 480px) {
  .container,
  .container--prose,
  .container--about {
    padding: 0 16px;
  }
}

/* Page shell — footer pinned to the bottom of short pages */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell > main {
  flex: 1;
}

/* Section / band pattern, reused from Phase 02 onward */
.section {
  padding: 72px 0;
}

.band {
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Card grid — home teaser and /apps index */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 18px;
}

/* The hairline-grid trick: container carries the border colour as its
   background and a small gap; each child is opaque, producing perfect 1px
   internal rules that reflow correctly at any column count. */
.hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.hairline-grid > * {
  background: var(--bg);
}

.hairline-grid--list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Feature grid — Phase 05, gap 2px on a slightly lighter hairline colour */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 2px;
  background: oklch(0.26 0.014 265);
  border: 1px solid oklch(0.26 0.014 265);
  border-radius: 10px;
  overflow: hidden;
}

.feature-grid > * {
  background: var(--bg);
}

/* Split hero / band grids. The minmax() floor is wrapped in min(...,100%) so
   the track never forces overflow below ~348px, where 300px no longer fits
   the container — it still behaves exactly like minmax(300px, 1fr) above that. */
.split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}

.split-grid--start {
  align-items: start;
}