/*
  layout.css — rutnät, container, sektionsavstånd.
  Inga komponenter (knappar, kort, fält) här — bara struktur.
*/
@layer layout {
  .container {
    width: 100%;
    max-width: var(--grid-max);
    margin-inline: auto;
    padding-inline: var(--grid-margin-mobile);
  }
  @media (min-width: 700px) {
    .container {
      padding-inline: var(--grid-margin);
    }
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
  }

  /* Kolumn-spann, mobil-first: allt full bredd under 700px om inget
     annat anges. */
  [class*="col-"] {
    grid-column: 1 / -1;
  }
  @media (min-width: 700px) {
    .col-2  { grid-column: span 2; }
    .col-3  { grid-column: span 3; }
    .col-4  { grid-column: span 4; }
    .col-5  { grid-column: span 5; }
    .col-6  { grid-column: span 6; }
    .col-7  { grid-column: span 7; }
    .col-8  { grid-column: span 8; }
    .col-9  { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-12 { grid-column: span 12; }
  }

  /* Sektion — samma lodräta avstånd överallt, aldrig ett
     sektionsspecifikt värde. */
  .section {
    padding-block: var(--section-gap-mobile);
  }
  @media (min-width: 900px) {
    .section {
      padding-block: var(--section-gap);
    }
  }

  /* Hårlinje över full bredd mellan sektioner — ersätter färgbyte
     som avdelare. */
  .section-rule {
    border-top: 1px solid var(--rule);
  }

  .stack > * + * {
    margin-top: var(--s-5);
  }
  .stack-tight > * + * {
    margin-top: var(--s-3);
  }
  .stack-loose > * + * {
    margin-top: var(--s-7);
  }

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