@layer components {
  /* Page container */
  .page {
    margin-inline: auto;
    max-inline-size: var(--main-width);
    padding-block-end: calc(var(--footer-height) + var(--block-space) + env(safe-area-inset-bottom));
    padding-inline: var(--main-padding);
  }

  /* Centered content container */
  .container {
    margin-inline: auto;
    max-inline-size: var(--container-width, 40rem);
    padding-inline: var(--main-padding);
  }

  .container--narrow {
    --container-width: 30rem;
  }

  .container--wide {
    --container-width: 60rem;
  }

  /* Stack layout (vertical spacing) */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--block-space));
  }

  .stack--lg {
    --stack-gap: var(--block-space-double);
  }

  .stack--sm {
    --stack-gap: var(--block-space-half);
  }

  /* Legacy aliases */
  .stack--large { --stack-gap: var(--block-space-double); }
  .stack--small { --stack-gap: var(--block-space-half); }

  /* Row layout (horizontal spacing) */
  .row {
    align-items: center;
    display: flex;
    gap: var(--row-gap, var(--inline-space));
  }

  .row--between {
    justify-content: space-between;
  }

  .row--end {
    justify-content: flex-end;
  }

  .row--center {
    justify-content: center;
  }

  .row--wrap {
    flex-wrap: wrap;
  }

  /* Gap variations for rows */
  .gap-sm { gap: var(--inline-space-half); }
  .gap-lg { gap: var(--inline-space-double); }

  /* Grid layout */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--block-space));
    grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
  }

  .grid--2 { --grid-cols: 2; }
  .grid--3 { --grid-cols: 3; }
  .grid--4 { --grid-cols: 4; }

  @media (max-width: 639px) {
    .grid--2,
    .grid--3,
    .grid--4 {
      --grid-cols: 1;
    }
  }

  /* Section with padding */
  .section {
    padding-block: var(--block-space-double);
  }

  /* Spacer (block or inline) */
  .spacer {
    display: block;
    block-size: var(--block-space);
  }

  .spacer--large {
    block-size: var(--block-space-double);
  }

  .spacer--small {
    block-size: var(--block-space-half);
  }
}