/* layout.css — grid/flex utilities and containers. */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 80ch;
}

/* Section base */
.section {
  padding-block: var(--section-pad-y);
}

.section--soft   { background-color: var(--color-bg-soft); }
.section--warm   { background-color: var(--color-bg-warm); }
.section--stone  { background-color: var(--color-bg-stone); }
.section--invert {
  background-color: var(--color-bg-invert);
  color: var(--color-text-invert);
}

/* Two-column grid used by most label + content sections.
   Mobile: stacked. Desktop: narrow label column + wide content column. */
.section__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .section__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--space-9);
  }
}

/* Accessible visually-hidden helper */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  background: var(--color-text);
  color: var(--color-text-invert);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible {
  top: var(--space-3);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}