/* ============================================================
   Grid
   The twelve-column flex grid and page wrapper, under the
   Bootstrap 5.3 names the ERB views already use. Only the
   container, the row, and the handful of column widths the app
   actually asks for are defined here.
   ============================================================ */

@layer layout {
  /* ----------------------------------------------------------
     Container
     Full width, centred, with half a gutter of breathing room on
     each side, and a max width that steps up per breakpoint so
     text lines never run the full width of a wide monitor.
     ---------------------------------------------------------- */

  .container {
    --gutter-x: var(--space-4);

    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);

    @media (min-width: 576px) { max-width: 540px; }
    @media (min-width: 768px) { max-width: 720px; }
    @media (min-width: 992px) { max-width: 960px; }
    @media (min-width: 1200px) { max-width: 1140px; }
    @media (min-width: 1400px) { max-width: var(--container-max); }
  }

  /* ----------------------------------------------------------
     Row and columns

     Gutter maths: the row pulls itself out by half a gutter on
     each side, and every child pushes its content back in by the
     same half. Adjacent columns therefore sit a full gutter
     apart, while the outermost edges line up flush with whatever
     contains the row — no stray indent.

     Columns are flex items with an explicit percentage width
     (n/12), not flex-basis, so `flex: 0 0 auto` keeps them from
     growing or shrinking off that width. A column with no width
     class falls back to the 100% below and stacks.
     ---------------------------------------------------------- */

  .row {
    --gutter-x: var(--space-4);
    --gutter-y: 0;

    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--gutter-y));
    margin-right: calc(-0.5 * var(--gutter-x));
    margin-left: calc(-0.5 * var(--gutter-x));

    & > * {
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      padding-right: calc(var(--gutter-x) * 0.5);
      padding-left: calc(var(--gutter-x) * 0.5);
      margin-top: var(--gutter-y);
    }
  }

  /* Declared after `.row > *` so they beat its 100% fallback at
     equal specificity. */
  .col-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  @media (min-width: 576px) {
    .col-sm-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
    }

    .col-sm-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
    }
  }

  @media (min-width: 768px) {
    .col-md-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
    }

    .col-md-10 {
      flex: 0 0 auto;
      width: 83.33333333%;
    }
  }

  @media (min-width: 992px) {
    .col-lg-6 {
      flex: 0 0 auto;
      width: 50%;
    }

    .col-lg-7 {
      flex: 0 0 auto;
      width: 58.33333333%;
    }

    .col-lg-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
    }

    .col-lg-9 {
      flex: 0 0 auto;
      width: 75%;
    }
  }
}