/* =============================================================================
   LAYOUT.CSS
   -----------------------------------------------------------------------------
   Container, grid and section-rhythm primitives. The source is built on a
   fluid column grid (4 / 8 / 12 columns across breakpoints) with outer and
   inner gutters that scale, plus generous vertical section spacing.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Page container — caps width and applies the responsive outer gutter.
   ----------------------------------------------------------------------------- */
.ds-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-outer);
}
.ds-container--narrow { max-width: 48rem; }
.ds-container--wide   { max-width: 100rem; }

/* -----------------------------------------------------------------------------
   Column grid — the workhorse. Children use .ds-col-span-N or the
   data attributes below to place onto the fluid grid.
   ----------------------------------------------------------------------------- */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter-inner);
  row-gap: var(--gutter-inner);
}

/* Span helpers (work against whatever --columns is active) */
.ds-col-span-1  { grid-column: span 1; }
.ds-col-span-2  { grid-column: span 2; }
.ds-col-span-3  { grid-column: span 3; }
.ds-col-span-4  { grid-column: span 4; }
.ds-col-span-6  { grid-column: span 6; }
.ds-col-span-8  { grid-column: span 8; }
.ds-col-span-12 { grid-column: span 12; }
.ds-col-full    { grid-column: 1 / -1; }

/* -----------------------------------------------------------------------------
   Flex helpers
   ----------------------------------------------------------------------------- */
.ds-flex        { display: flex; }
.ds-flex-col    { display: flex; flex-direction: column; }
.ds-items-center{ align-items: center; }
.ds-items-start { align-items: flex-start; }
.ds-items-end   { align-items: flex-end; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-center  { justify-content: center; }
.ds-wrap        { flex-wrap: wrap; }
.ds-gap-1 { gap: var(--space-1); }
.ds-gap-2 { gap: var(--space-2); }
.ds-gap-3 { gap: var(--space-3); }
.ds-gap-4 { gap: var(--space-4); }
.ds-gap-5 { gap: var(--space-5); }
.ds-gap-6 { gap: var(--space-6); }

/* -----------------------------------------------------------------------------
   Stack — vertical rhythm with a single control
   ----------------------------------------------------------------------------- */
.ds-stack     > * + * { margin-top: var(--space-4); }
.ds-stack-sm  > * + * { margin-top: var(--space-2); }
.ds-stack-lg  > * + * { margin-top: var(--space-6); }

/* -----------------------------------------------------------------------------
   Section rhythm — large, breathing vertical spacing between page blocks.
   Sections scale their vertical padding with the viewport.
   ----------------------------------------------------------------------------- */
.ds-section {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 8rem);
}
.ds-section--tight { padding-block: clamp(2rem, 5vw, 4rem); }
.ds-section--flush-bottom { padding-bottom: 0; }

/* Section header block (eyebrow + heading + intro) */
.ds-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
}
.ds-section-header[data-align="center"] {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

/* Tone surfaces — pair with data-tone="dark" for inverse color context */
.ds-surface-page    { background: var(--surface-page); color: var(--text-strong); }
.ds-surface-raised  { background: var(--surface-raised); }
.ds-surface-sunken  { background: var(--surface-sunken); }
.ds-surface-inverse { background: var(--surface-inverse); color: var(--text-on-dark); }
.ds-surface-support { background: var(--gradient-support); color: var(--text-strong); }

/* Rounded "block" wrappers — the site frames many sections in big rounded
   cards that sit on the page background. */
.ds-block {
  border-radius: var(--radius-block-large);
  overflow: clip;
}

/* -----------------------------------------------------------------------------
   .ds-aura — an ambient light orb behind a section.
   Glass has nothing to refract on a flat background; these orbs are what the
   panes actually blur, and what stops the page reading as a dark rectangle.

   Drop one (or two) as the first child of a section, position it with the
   custom properties, and mark the real content .ds-content-layer:

     <section class="ds-section">
       <div class="ds-aura" style="--aura-x:80%; --aura-y:10%"></div>
       <div class="ds-content-layer"> … </div>
     </section>

   Pure radial-gradient — no filter: blur(), which would repaint the whole
   surface on every scroll frame.
   ----------------------------------------------------------------------------- */
.ds-aura {
  position: absolute;
  z-index: 0;
  top: var(--aura-y, 50%);
  left: var(--aura-x, 50%);
  translate: -50% -50%;
  width: var(--aura-size, 42rem);
  aspect-ratio: 1;
  max-width: 130vw;
  background: var(--aura-color, var(--aura-gold));
  opacity: var(--aura-opacity, 1);
  pointer-events: none;
}
/* Sections that host an aura must clip it and establish a stacking context. */
.ds-section:has(> .ds-aura) { isolation: isolate; overflow: clip; }

/* Decorative background layer helper (for glows / gradients behind content) */
.ds-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ds-bg-layer > * { position: absolute; }
.ds-content-layer { position: relative; z-index: 1; }

/* Spacing utilities */
.ds-mt-0 { margin-top: 0; }
.ds-mt-4 { margin-top: var(--space-4); }
.ds-mt-6 { margin-top: var(--space-6); }
.ds-mt-8 { margin-top: var(--space-8); }
.ds-mb-4 { margin-bottom: var(--space-4); }
.ds-mb-6 { margin-bottom: var(--space-6); }
.ds-p-4 { padding: var(--space-4); }
.ds-p-6 { padding: var(--space-6); }
.ds-p-8 { padding: var(--space-8); }