/* layout.css — container, grid helpers, page regions (12 §4).
   Bootstrap grid (row/col-*) is loaded before this file; .container is re-sized here. */

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

.container--prose { max-width: calc(var(--w-prose) + 2 * var(--gutter)); }

/* Auto-fit card grid: .grid--2/3/4 set the column count from md/lg up. */
.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-6); }

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

/* Article + sticky sidebar (posts, app pages) */
.with-sidebar { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 992px) {
  .with-sidebar { grid-template-columns: minmax(0, 1fr) var(--w-sidebar); }
  .with-sidebar__aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; }
}

.site-main { display: block; min-height: 60vh; }