@layer components {
/* =============================================================================
   @elements/style — layout

   Layout primitives. These containers OWN spacing; components placed
   inside them do not set outer margins. This is the composition contract:


     - .stack     vertical flow with consistent gap
     - .cluster   horizontal flow with consistent gap, wraps
     - .row       horizontal flex, doesn't wrap
     - .page-shell  width-constrained page container with size variants
     - .page-hero   hero section above page content
     - .section     vertical rhythm between content blocks
     - .app         full-height app shell with optional sidebar
     - .center      flex-center, both axes
     - .divider     horizontal rule with presence

   No component in the design system sets margin on its outer element.
   If you need spacing between things, wrap them in .stack or .cluster.
============================================================================= */

/* STACK — vertical flow ---------------------------------------------- */

.stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.stack.is-xs { gap: var(--space-1); }
.stack.is-sm { gap: var(--space-2); }
.stack.is-md { gap: var(--space-4); }
.stack.is-lg { gap: var(--space-6); }
.stack.is-xl { gap: var(--space-8); }
.stack.is-2xl{ gap: var(--space-12); }

/* CLUSTER — horizontal flow that wraps ------------------------------- */

.cluster {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
}

.cluster.is-xs { gap: var(--space-1); }
.cluster.is-sm { gap: var(--space-2); }
.cluster.is-md { gap: var(--space-3); }
.cluster.is-lg { gap: var(--space-4); }
.cluster.is-xl { gap: var(--space-6); }

/* ROW — horizontal flex, no wrap ------------------------------------- */

.row {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.row.is-baseline { align-items: baseline; }
.row.is-start    { align-items: flex-start; }
.row.is-end      { align-items: flex-end; }
.row.is-stretch  { align-items: stretch; }

/* PAGE SHELL — width-constrained container --------------------------- */

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

.page-shell.is-narrow    { max-width: var(--container-sm); }
.page-shell.is-form      { max-width: var(--container-2xl); }
.page-shell.is-prose     { max-width: var(--container-prose); }
.page-shell.is-marketing { max-width: var(--container-5xl); }
.page-shell.is-wide      { max-width: var(--container-wide); }
.page-shell.is-full      { max-width: none; }

/* PAGE HERO — at top of page ----------------------------------------- */

.page-hero {
  padding-block: var(--space-12) var(--space-8);
}

.page-hero.is-sm { padding-block: var(--space-8)  var(--space-6); }
.page-hero.is-lg { padding-block: var(--space-16) var(--space-12); }

/* Vertical rhythm inside the hero — small-scale .prose-like rules */

.page-hero > .eyebrow {
  margin-bottom: var(--space-3);
}

.page-hero > h1,
.page-hero > .display {
  margin-bottom: var(--space-4);
}

.page-hero > .lede {
  max-width: var(--container-prose);
}

.page-hero > .lede + * {
  margin-top: var(--space-6);
}

/* SECTION — vertical rhythm between content blocks ------------------ */

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

.section.is-sm { padding-block: var(--space-6); }
.section.is-lg { padding-block: var(--space-16); }

.section + .section {
  border-top: 1px solid var(--rule-soft);
}

/* APP SHELL — full-height layout, optional sidebar ----------------- */

.app {
  display:    grid;
  min-height: 100vh;
  min-height: 100dvh;
}

.app.has-sidebar {
  grid-template-columns: var(--sidebar-width, 240px) 1fr;
}

.app-main {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

@media (max-width: 48rem) {
  .app.has-sidebar {
    grid-template-columns: 1fr;
  }
}

/* CENTER — flex-center on both axes --------------------------------- */

.center {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* DIVIDER — horizontal rule with presence --------------------------- */

.divider {
  height:     1px;
  background: var(--rule);
  border:     none;
  margin:     0;
}

.divider.is-soft   { background: var(--rule-soft); }
.divider.is-strong { background: var(--rule-strong); }

/* Vertical divider — works inside .row / .cluster */

.divider.is-vertical {
  width:     1px;
  height:    auto;
  align-self: stretch;
}

}