/* =========================================================
   03 — LAYOUT FOUNDATION
   PURPOSE: Shared rails, sections, grids, and page shells.
   DEVELOPER NOTE:
   - Use these classes across every rebuilt PHP page.
   - Do not create one-off width wrappers unless a real layout exception exists.
   ========================================================= */

.cpc-page { background: var(--cpc-bg); }

.cpc-container,
.cpc-wrap {
  width: min(var(--cpc-wide), calc(100vw - 36px));
  margin-inline: auto;
}

.cpc-container--narrow { width: min(var(--cpc-max), calc(100vw - 36px)); }
.cpc-container--ultra { width: min(var(--cpc-ultra), calc(100vw - 36px)); }

.cpc-section {
  padding: var(--cpc-section-y) 0;
}

.cpc-section > .cpc-container,
.cpc-section > .cpc-wrap { position: relative; }

.cpc-section__head {
  max-width: 820px;
  margin: 0 0 24px;
}

.cpc-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.cpc-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.88fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
}

.cpc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.cpc-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cpc-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cpc-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cpc-divider {
  height: 1px;
  border: 0;
  background: var(--cpc-line-soft);
  margin: 28px 0;
}