/* ==========================================================================
   04-LAYOUT.CSS
   Page-level structural scaffolding — the container system and any
   grid/flex wrappers shared across multiple pages. Component-internal
   layout (e.g. how a card's contents are arranged) lives in
   05-components.css alongside the component itself; this file is only for
   layout patterns that apply at the page/section level.

   A note on CSS Logical Properties (margin-inline, padding-block, etc.):
   these are used throughout intentionally (cleaner, direction-agnostic
   code) and have wide support in evergreen browsers. Each is preceded by
   an equivalent physical-property declaration as a zero-cost fallback for
   older engines that don't recognise the logical form — same value,
   belt-and-braces.
   ========================================================================== */

/* Centers content and constrains it to the style guide's 1200px container,
   with fluid side padding so it never touches the viewport edge on
   smaller screens. Used inside every section-level wrapper. */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
  padding-inline: var(--container-padding-inline);
}

/* Vertical rhythm for full-width page sections. Maps to the style guide's
   "80-120px vertical spacing" — the smaller end of that range, used for
   every content section on the site. (The larger end is used directly by
   the Landing/Contact hero components, which own their own spacing.) */
.section {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section-sm);
  padding-block: var(--space-section-sm);
}

/* Alternating background utility — style guide calls for a light-grey
   band between white sections to create visual rhythm down the page. */
.section--tinted {
  background-color: var(--color-section);
}