/* ==========================================================================
   layout.css — MR ANALYSIS 360 DESIGN SYSTEM
   --------------------------------------------------------------------------
   Page shell, container, section rhythm, grid and flow primitives.
   Everything here is MOBILE-FIRST: base declarations only. Every breakpoint
   override lives in responsive.css, exactly as the existing MR Analysis 360
   build already does it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-shell__main {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Container
   The only sanctioned horizontal framing element. Never add ad-hoc padding to
   a top-level wrapper.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--text {
  max-width: var(--container-text);
}

/* --------------------------------------------------------------------------
   Sections — the vertical rhythm of the whole site
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-y);
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--lg {
  padding-block: var(--section-y-lg);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--flush-bottom {
  padding-block-end: 0;
}

/* Alt band — a faint tint, never a gradient */
.section--alt {
  background-color: var(--color-surface-alt);
}

.section--surface {
  background-color: var(--color-surface);
}

/* Authority band — the ink surface used for CTA blocks and the footer.
   `.section--dark` is the name the page markup uses; it is kept as an exact
   alias of `.section--inverse` so the two vocabularies can never drift apart
   and every inverse rule below applies to both without duplication. */
.section--inverse,
.section--dark {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.section--inverse .h1,
.section--inverse .h2,
.section--inverse .h3,
.section--inverse .h4,
.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4,
.section--dark .h1,
.section--dark .h2,
.section--dark .h3,
.section--dark .h4,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-text-inverse);
}

.section--inverse .lead,
.section--inverse p,
.section--inverse .body,
.section--inverse .eyebrow,
.section--dark .lead,
.section--dark p,
.section--dark .body,
.section--dark .eyebrow {
  color: var(--color-text-inverse-muted);
}

.section--hairline {
  border-block-start: var(--border-hairline) solid var(--color-border);
}


/* --------------------------------------------------------------------------
   Grid primitives (mobile-first, single column by default)
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gutter);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--gap-sm {
  gap: var(--space-4);
}

.grid--gap-lg {
  gap: var(--space-8);
}

/* --------------------------------------------------------------------------
   Flex primitives
   -------------------------------------------------------------------------- */
.flex {
  display: flex;
}

.flex--col {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--align-center {
  align-items: center;
}

.flex--justify-between,
.flex--between {
  justify-content: space-between;
}

.flex--justify-center {
  justify-content: center;
}

.flex--gap-sm {
  gap: var(--space-2);
}

.flex--gap-md {
  gap: var(--space-4);
}

.flex--gap-lg {
  gap: var(--space-6);
}

/* END-OF-LAYOUT */