/* =========================================================================
   WW1AHT MASTER — LAYOUTS  (containers, main, grids)
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.wrap--read { max-width: var(--maxw-read); }

.site-main {
  padding-block: var(--space-xl) calc(var(--space-xl) + var(--space-lg));
}

/* Card grids — look good from a handful of items to hundreds. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

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

@media (max-width: 860px) {
  .wrap { padding-inline: var(--space-md); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .grid-cards { grid-template-columns: 1fr; }
}

/* Main content wrapper (no padding — full-bleed heroes sit flush under the header).
   Inner .wrap.site-main blocks still provide content spacing. */
.site-content { min-height: 50vh; }