/* ============================================================
   LAYOUT — container.css
   Max-width wrapper with automatic horizontal padding.
   Usage: <div class="container">
   Variants via data attribute or modifier class:
     <div class="container" data-size="sm">
     <div class="container" data-size="xl">
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container[data-size="xs"] { max-width: var(--container-xs); }
.container[data-size="sm"] { max-width: var(--container-sm); }
.container[data-size="md"] { max-width: var(--container-md); }
.container[data-size="lg"] { max-width: var(--container-lg); }
.container[data-size="xl"] { max-width: var(--container-xl); }

/* Print variant — narrower width for on-screen invoice preview */
.container[data-layout="print"] {
  max-width: var(--container-sm);
}

/* Full bleed — edge to edge, but centres children */
.container[data-size="full"] {
  max-width: 100%;
  padding-inline: 0;
}