/* styles/layout.css
 * Layout primitives from the canvas Layout Library (coGvv topIJ). Spacing comes from tokens.css.
 * Content width: 342 at 390 (24px gutters), 1280 on D (80px gutters), 1680 on W (120px gutters).
 * Primitives set structure only: ratio, column count, gap and measure stay per instance. */
@layer layout {
  .container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }

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

  .section--xs { padding-block: var(--section-xs); }
  .section--sm { padding-block: var(--section-sm); }
  .section--lg { padding-block: var(--section-lg); }
  .section--xl { padding-block: var(--section-xl); }
  .section--2xl { padding-block: var(--section-2xl); }
  .section--3xl { padding-block: var(--section-3xl); }

  /* .section--ruled: a 1px Border/soft rule inside the gutter on top of a section that
     follows a peer on the same surface (no surface class counts as page). The rule sits on
     the peer's bottom edge, so a label between the two sections stays below it. No rule above
     a first section or across a surface change. */
  .section--ruled {
    position: relative;
  }

  :is(section, .section):is(:not([class*="surface--"]), .surface--page):has(+ .section--ruled:is(:not([class*="surface--"]), .surface--page), + :not(section, .section) + .section--ruled:is(:not([class*="surface--"]), .surface--page)),
  :is(section, .section).surface--paper:has(+ .section--ruled.surface--paper, + :not(section, .section) + .section--ruled.surface--paper),
  :is(section, .section).surface--card:has(+ .section--ruled.surface--card, + :not(section, .section) + .section--ruled.surface--card),
  :is(section, .section).surface--muted:has(+ .section--ruled.surface--muted, + :not(section, .section) + .section--ruled.surface--muted),
  :is(section, .section).surface--inverse:has(+ .section--ruled.surface--inverse, + :not(section, .section) + .section--ruled.surface--inverse),
  :is(section, .section).surface--inverse-textured:has(+ .section--ruled.surface--inverse-textured, + :not(section, .section) + .section--ruled.surface--inverse-textured) {
    position: relative;
  }

  :is(section, .section):is(:not([class*="surface--"]), .surface--page):has(+ .section--ruled:is(:not([class*="surface--"]), .surface--page), + :not(section, .section) + .section--ruled:is(:not([class*="surface--"]), .surface--page))::after,
  :is(section, .section).surface--paper:has(+ .section--ruled.surface--paper, + :not(section, .section) + .section--ruled.surface--paper)::after,
  :is(section, .section).surface--card:has(+ .section--ruled.surface--card, + :not(section, .section) + .section--ruled.surface--card)::after,
  :is(section, .section).surface--muted:has(+ .section--ruled.surface--muted, + :not(section, .section) + .section--ruled.surface--muted)::after,
  :is(section, .section).surface--inverse:has(+ .section--ruled.surface--inverse, + :not(section, .section) + .section--ruled.surface--inverse)::after,
  :is(section, .section).surface--inverse-textured:has(+ .section--ruled.surface--inverse-textured, + :not(section, .section) + .section--ruled.surface--inverse-textured)::after {
    content: "";
    position: absolute;
    inset-inline: var(--page-gutter);
    bottom: 0;
    max-width: var(--container-max);
    margin-inline: auto;
    height: 1px;
    background: var(--line);
    pointer-events: none;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap);
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* A band that spans the page. Place it outside .container; 100vw would add a
     horizontal scrollbar wherever scrollbars take layout width. */
  .full-bleed {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  /* Two slots. Stacks on M; on D and W the columns are --split, a two-track list set per
     instance (for example minmax(0, 1fr) minmax(0, 2fr) or 40% minmax(0, 1fr)). Gap is
     --split-gap, 24 by default and set per instance. */
  .split {
    --split: minmax(0, 1fr) minmax(0, 1fr);
    --split-gap: var(--space-24);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--split-gap);
  }

  /* Second slot first on M */
  .split--reverse > :first-child {
    order: 1;
  }

  /* N equal columns. One column on M; --cols columns on D and W. Gap is --grid-gap. */
  .grid {
    --cols: 4;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--grid-gap);
  }

  /* Logo and cell grids stay two-up on M */
  .grid--keep-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* An inline --grid-min keeps the auto-fit grid at every width */
  .grid[style*="--grid-min"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  }

  /* No gap; 1px Border/default rules between and around white cells */
  .grid--ruled {
    gap: 1px;
    padding: 1px;
    background: var(--line-2);
  }

  .grid--ruled > * {
    background: var(--white);
  }

  .measure {
    max-width: var(--measure);
  }

  @media (min-width: 900px) {
    .split {
      grid-template-columns: var(--split);
    }

    .split--wide-start {
      --split: minmax(0, 7fr) minmax(0, 5fr);
    }

    .split--wide-end {
      --split: minmax(0, 5fr) minmax(0, 7fr);
    }

    .split--reverse > :first-child {
      order: 0;
    }

    .grid {
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    }
  }
}