/**
 * layout.css
 *
 * Container, grid system, and section wrappers.
 * Mobile-first: all grids start single-column and expand at breakpoints.
 * Loaded on every page.
 *
 * @package BeatTheFish
 * @since   2.1.0
 */

/* ═══ Container ═══════════════════════════════════════════════════ */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ═══ Section Backgrounds ═════════════════════════════════════════ */

.section-paper   { background: var(--bg);      padding: var(--space-xl) 0; }
.section-white   { background: #fff;           padding: var(--space-xl) 0; }
.section-surface { background: var(--surface);  padding: var(--space-xl) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section-felt    { background: var(--felt);     padding: var(--space-xl) 0; position: relative; overflow: hidden; }
.section-padded  { padding: 48px 0; }

/* ═══ Grid Base ═══════════════════════════════════════════════════ */
/*
 * Every grid starts as a single column on mobile.
 * Breakpoints expand columns progressively.
 *
 * Naming convention:
 *   .grid-{cols}          → equal columns
 *   .grid-{name}          → semantic layout (sidebar, featured, etc.)
 *   gap-{size}            → gap modifiers (via custom property)
 */

/* Utility grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ═══ Responsive — Container ══════════════════════════════════════ */

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}

@media (min-width: 768px) {
  :root { --gutter: 40px; }
}

@media (min-width: 1100px) {
  .wrap { padding: 0 var(--gutter); }
}

/* ═══ Responsive — Grids ══════════════════════════════════════════ */

@media (min-width: 600px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}