/*
 * ============================================================
 * layout.css — Page structure, containers, section spacing, and grid layouts
 * ============================================================
 *
 * WHAT THIS FILE DOES:
 *   - Controls how wide the content area is (container width).
 *   - Sets top/bottom spacing for each page section.
 *   - Defines multi-column grid layouts (e.g., two-column, three-column).
 *
 * EDITING TIPS (no CSS knowledge required):
 *   - To make the site content wider or narrower, change the --container
 *     variable in base.css (not here).
 *   - To add more or less space between sections, change the padding values
 *     in .section (currently 82px top and bottom).
 *   - .section.alt gives alternating sections a subtle different background.
 *   - .two-col and grids like .modes-grid control side-by-side layouts.
 *     On mobile these automatically become single-column (see responsive.css).
 *
 * DEPENDENCIES:
 *   - Uses CSS variables from base.css.
 *   - Loaded after base.css.
 * ============================================================
 */

/* ── Content width wrappers ───────────────────────────────── */
.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.narrow {
  width: min(780px, calc(100% - 32px));
  margin: 0 auto;
}

.center { text-align: center; }

/* ── Section spacing ──────────────────────────────────────── */
.section { padding: 82px 0; }
.section.alt {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
}

.section-heading { margin-bottom: 28px; }

.section-heading h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

/* ── Two-column layout ────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}

.download-layout {
  align-items: start;
}

/* ── Grid layouts (number of columns per section) ─────────── */
.product-grid,
.feature-grid,
.three-up,
.service-grid,
.donation-grid,
.download-steps {
  display: grid;
  gap: 20px;
}

.product-grid { grid-template-columns: 1fr 1fr; }
.service-grid { grid-template-columns: repeat(4, 1fr); }
.donation-grid { grid-template-columns: 1fr 1.25fr; align-items: start; position: relative; z-index: 1; }
.download-steps { grid-template-columns: 1fr; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.three-up { grid-template-columns: repeat(3, 1fr); }

/* ── Modes two-track layout ───────────────────────────────── */
.modes-tracks {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin-top: 34px;
}

.modes-track-solo {
  flex: 1;
  min-width: 0;
}

.modes-track-pair {
  flex: 2;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
}