/* The handful of arrangements every page reaches for. Keep this file
   small: anything that belongs to one component belongs in
   components/ instead. */

@layer layout {
  /* Centres content and holds the page gutter on small screens. */
  .container {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }

  .container--narrow {
    --container: 52rem;
  }

  /* Breder dan de standaard, voor een blok dat naast elkaar gelezen moet
     worden: het scanrapport zet een ring, vier categorieën en drie
     kostentegels op één regel. */
  .container--wide {
    --container: 84rem;
  }

  /* Vertical rhythm without margins on individual elements. Override
     the gap per instance with --flow. */
  .stack > * + * {
    margin-block-start: var(--flow, var(--space-s));
  }

  /* Iets onder --space-2xl op breed: zes rem boven én onder elke
     sectie stapelde tot lege vlakten tussen de verhalen. */
  .section {
    padding-block: clamp(3.5rem, 2.75rem + 2.5vw, 5.5rem);
  }

  .section--tight {
    padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  }

  .section--tinted {
    background: var(--color-surface);
  }

  .section--dark {
    background: var(--gradient-dark);
    color: #ffffff;
  }

  .section--dark .lede,
  .section--dark .section-head p {
    color: rgb(255 255 255 / 0.72);
  }

  /* The heading block that opens most sections. */
  .section-head {
    max-width: 44rem;
  }

  .section-head--centred {
    margin-inline: auto;
    text-align: center;
  }

  .section-head--centred p {
    margin-inline: auto;
  }

  /* Een losse regel onder een gecentreerde sectie hoort ook gecentreerd
     te staan, niet links uitgelijnd op de tekstbreedte. */
  .text-centre p,
  p.text-centre {
    margin-inline: auto;
  }

  .eyebrow {
    display: inline-block;
    margin-block-end: var(--space-xs);
    color: var(--color-accent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .section--dark .eyebrow {
    color: #a78bfa;
  }

  .lede {
    color: var(--color-muted);
    font-size: var(--step-1);
    line-height: 1.5;
  }

  /* Two columns that fold to one on a phone, used by every
     text-beside-a-mockup section. */
  /* Tekst en beeld beginnen bovenaan op dezelfde regel; alleen waar
     een blok duidelijk korter is, oogt centreren beter. */
  .split {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
  }

  .split--centred {
    align-items: center;
  }

  @media (min-width: 56rem) {
    .split {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2xl);
    }

    .split--flip > :first-child {
      order: 2;
    }
  }

  .grid-cards {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}