/* ============================================================
   Solving for Pattern — layout utilities
   Container, grid, stack, section rhythm, accessibility helpers.
   ============================================================ */

/* ---------- Container: 1200px max, responsive gutters ---------- */
.sfp-container {
  width: 100%;
  max-width: calc(var(--sfp-container) + 2 * var(--sfp-gutter));
  margin-inline: auto;
  padding-inline: var(--sfp-gutter);
}

/* ---------- Section rhythm: 96–144px desktop, 64–96px mobile ---------- */
.sfp-section {
  padding-block: var(--sfp-section-y);
}

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

.sfp-section--subtle {
  background-color: var(--sfp-color-bg-subtle);
}

/* ---------- Grid: 12 / 6 / 4 columns ---------- */
.sfp-grid {
  display: grid;
  gap: var(--sfp-space-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .sfp-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sfp-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sfp-space-8);
  }
}

/* Span helpers. Mobile-first: everything spans full width by default. */
.sfp-col-4,
.sfp-col-6,
.sfp-col-8,
.sfp-col-12 {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .sfp-col-4 { grid-column: span 4; }
  .sfp-col-6 { grid-column: span 6; }
  .sfp-col-8 { grid-column: span 8; }
  .sfp-col-12 { grid-column: span 12; }
}

/* Card rows that collapse gracefully: 3-up → 2-up → 1-up */
.sfp-cardrow {
  display: grid;
  gap: var(--sfp-space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sfp-cardrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .sfp-cardrow--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sfp-cardrow--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Stack: vertical rhythm helper ---------- */
.sfp-stack > * + * { margin-top: var(--sfp-space-4); }
.sfp-stack--sm > * + * { margin-top: var(--sfp-space-2); }
.sfp-stack--lg > * + * { margin-top: var(--sfp-space-8); }

/* ---------- Cluster: horizontal wrap with gap ---------- */
.sfp-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-3);
  align-items: center;
}

/* ---------- Accessibility helpers ---------- */
.sfp-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;
}

/* ---------- Motif: topographic contour rings ----------
   An inline SVG helper class; the SVG itself lives in markup.
   Quiet by default — atmosphere, not wallpaper. */
.sfp-motif {
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}

.sfp-motif--faint {
  opacity: 0.25;
}

/* ---------- Notebook rule: a quiet horizontal divider ---------- */
.sfp-rule {
  border: 0;
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-rule--gold {
  border-top: var(--sfp-border-emphasis) solid var(--sfp-gold-500);
  width: var(--sfp-space-16);
}