/* ============================================================
   MRCO Advocates — Layout System
   Source: Docs/02-design-tokens.md, Docs/18-tech-stack.md
   ============================================================ */

/* === CONTAINER === */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--narrow { max-width: 780px; }
.container--wide   { max-width: 1440px; }

/* === SECTION SPACING === */
.section    { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section--sm { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.section--lg { padding-top: var(--space-20); padding-bottom: var(--space-20); }

@media (max-width: 767px) {
  .section    { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .section--lg { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

/* === BACKGROUNDS === */
.bg-cream     { background-color: var(--color-cream); }
.bg-white     { background-color: var(--color-white); }
.bg-navy      { background-color: var(--color-navy); }
.bg-navy-dark { background-color: var(--color-navy-dark); }
.bg-navy-soft { background-color: var(--color-navy-soft); }

/* === GRID === */
.grid { display: grid; gap: var(--space-8); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--practice  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--people    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); justify-content: center; }
.grid--insights  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--values    { grid-template-columns: repeat(2, 1fr); }
.grid--contact   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--footer    { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); }

@media (max-width: 1023px) {
  .grid--3, .grid--4, .grid--practice,
  .grid--people, .grid--insights, .grid--footer {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4, .grid--practice,
  .grid--people, .grid--insights, .grid--values,
  .grid--contact, .grid--footer {
    grid-template-columns: 1fr;
  }
}

/* === FLEX === */
.flex            { display: flex; }
.flex--col       { flex-direction: column; }
.flex--wrap      { flex-wrap: wrap; }
.flex--center    { align-items: center; justify-content: center; }
.flex--between   { justify-content: space-between; }
.flex--align-center { align-items: center; }
.flex--gap-2 { gap: var(--space-2); }
.flex--gap-4 { gap: var(--space-4); }
.flex--gap-6 { gap: var(--space-6); }
.flex--gap-8 { gap: var(--space-8); }

/* === SPLIT LAYOUT === */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 767px) {
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* === FULL-BLEED === */
.full-bleed { width: 100vw; margin-left: calc(-50vw + 50%); }

/* === PAGE MAIN === */
.page-main { min-height: calc(100vh - var(--header-total-desktop)); }
@media (max-width: 767px) {
  .page-main { min-height: calc(100vh - var(--header-h-mobile)); }
}

/* === ASPECT RATIOS === */
.aspect-16-9 { aspect-ratio: 16 / 9; object-fit: cover; }
.aspect-3-4  { aspect-ratio: 3 / 4; object-fit: cover; }

/* === SPACING UTILITIES === */
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.text-center { text-align: center; }