/* Class-only selectors. This file is the single source of truth for
   spacing/rhythm — nothing else in the codebase sets section-level
   padding or margin. */

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

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

  .section--tight {
    padding-block: calc(var(--space-section-y) * 0.5);
  }

  .section--flush-top {
    padding-top: 0;
  }

  .section--dark {
    background: var(--color-inverse-bg);
    color: var(--color-inverse-text);
  }

  .section--dark h1,
  .section--dark h2,
  .section--dark h3 {
    color: var(--color-inverse-text);
  }

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

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

  .stack > * + * {
    margin-top: var(--space-4);
  }

  .stack--lg > * + * {
    margin-top: var(--space-8);
  }

  .grid-editorial {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
  }
  .grid-editorial > * { min-width: 0; }

  @media (min-width: 768px) {
    .grid-editorial--2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-editorial--3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .grid-editorial--4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .grid-editorial--asym {
      grid-template-columns: 7fr 5fr;
      align-items: center;
      gap: var(--space-12);
    }
    .grid-editorial--asym-rev {
      grid-template-columns: 5fr 7fr;
      align-items: center;
      gap: var(--space-12);
    }
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -60px;
    background: var(--color-text);
    color: var(--color-bg);
    padding: var(--space-3) var(--space-5);
    z-index: 100;
    transition: top 200ms ease;
  }

  .skip-link:focus {
    top: var(--space-4);
  }
}