/* ============================================================
   layout.css — kapy.ch v2
   Pragmatic layout primitives (Every-Layout-inspired).
   Only utilities Tasks 4-10 actually consume.
   All built on tokens.css — no new variables.
   ============================================================ */

/* ============================================================
   1. CONTAINER — width-constrained wrapper
   ============================================================ */

.container {
  --container-width: var(--cq-default); /* 960px default */
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  /* Mobile-first padding:
       320px viewport -> clamp min = 16px
       768px viewport -> 4vw = ~31px
       1200px viewport -> 4vw = 48px (cap)
       1440px+ -> capped at 48px
     Bumped from space-6 (32px) to space-7 (48px) so tablet + desktop
     get proper breathing room without wider containers. */
  padding-inline: clamp(var(--space-4), 4vw, var(--space-7));
}

.container--narrow {
  --container-width: var(--cq-narrow);
} /* 640 */
.container--prose {
  --container-width: var(--cq-prose);
} /* 720 */
.container--wide {
  --container-width: var(--cq-wide);
} /* 1200 */
.container--full {
  --container-width: var(--container-max);
} /* 1440 */
.container--bleed {
  --container-width: 100%;
  padding-inline: 0;
}

/* iPad / Tablet (768-1023): keep clamp behaviour but make explicit
   that this band uses ~32-40px padding-inline (no special override needed
   — clamp already lands here naturally). Documented here for clarity. */

/* ============================================================
   2. STACK — vertical rhythm via flow
   Items separated by --stack-gap, no margin-collapse surprises.
   ============================================================ */

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

.stack > * + * {
  margin-block-start: var(--stack-gap);
}

.stack--xs {
  --stack-gap: var(--space-2);
}
.stack--sm {
  --stack-gap: var(--space-3);
}
.stack--md {
  --stack-gap: var(--space-5);
}
.stack--lg {
  --stack-gap: var(--space-7);
}
.stack--xl {
  --stack-gap: var(--space-8);
}

/* Recursive variant — applies stack-gap at every descendant level */
.stack--recursive * + * {
  margin-block-start: var(--stack-gap);
}

/* Split — pushes last child to the bottom (e.g. card footer) */
.stack--split > :last-child {
  margin-block-start: auto;
}

/* ============================================================
   3. CLUSTER — horizontal items that wrap, gap-driven
   Replaces ".inline" from spec. Used for nav-items, tag-lists,
   button-rows, trust-pills.
   ============================================================ */

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

.cluster--xs {
  --cluster-gap: var(--space-1);
}
.cluster--sm {
  --cluster-gap: var(--space-2);
}
.cluster--md {
  --cluster-gap: var(--space-4);
}
.cluster--lg {
  --cluster-gap: var(--space-5);
}

.cluster--center {
  --cluster-justify: center;
}
.cluster--end {
  --cluster-justify: flex-end;
}
.cluster--between {
  --cluster-justify: space-between;
}
.cluster--baseline {
  --cluster-align: baseline;
}
.cluster--start {
  --cluster-align: flex-start;
}

/* ============================================================
   4. GRID — auto-fit responsive grid
   Cards wrap automatically based on --grid-min-col.
   ============================================================ */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-col, 16rem), 100%), 1fr));
}

.grid--sm {
  --grid-min-col: 12rem;
} /* 192px — dense tile grid */
.grid--md {
  --grid-min-col: 16rem;
} /* 256px — default cards */
.grid--lg {
  --grid-min-col: 20rem;
} /* 320px — feature cards */
.grid--xl {
  --grid-min-col: 24rem;
} /* 384px — hero bento */

.grid--gap-xs {
  --grid-gap: var(--space-2);
}
.grid--gap-sm {
  --grid-gap: var(--space-3);
}
.grid--gap-md {
  --grid-gap: var(--space-5);
}
.grid--gap-lg {
  --grid-gap: var(--space-7);
}

/* Fixed-columns variants (for known-layout sections) */
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Auto-fall to single column under threshold */
@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   5. SIDEBAR — content + sidebar with intrinsic width
   Sidebar shrinks to content, main fills the rest. Wraps below
   --sidebar-threshold (container-width).
   ============================================================ */

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-6));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 18rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 60%);
}

.sidebar--reverse > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 60%);
}

.sidebar--reverse > :last-child {
  flex-basis: var(--sidebar-width, 18rem);
  flex-grow: 1;
  min-inline-size: auto;
}

/* ============================================================
   6. SWITCHER — switches between row and column based on
   container width. No media-query needed.
   ============================================================ */

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-5));
  align-items: var(--switcher-align, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* ============================================================
   7. SUBGRID — opt-in for grid children to inherit parent grid
   Used by Pricing-Cards / Bento-Cards for header/body/footer
   alignment across columns.
   ============================================================ */

.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.subgrid--rows {
  grid-template-rows: subgrid;
  grid-row: span var(--subgrid-rows, 3);
}

/* ============================================================
   8. CONTAINER QUERIES — opt-in container scope
   Components self-respond to their container width.
   ============================================================ */

.cq {
  container-type: inline-size;
}

.cq--size {
  container-type: size;
} /* Both inline + block */

/* Named container helper — pass --cq-name on the element */
.cq-named {
  container-type: inline-size;
  container-name: attr(data-cq-name);
}

/* Common container-name shorthands (used by Bento, Pricing, etc.) */
.cq--bento {
  container-type: inline-size;
  container-name: bento;
}
.cq--card {
  container-type: inline-size;
  container-name: card;
}
.cq--section {
  container-type: inline-size;
  container-name: section;
}

/* ============================================================
   9. SPACING UTILITIES (minimal, used directly inline by components)
   We do NOT build a Tailwind-style spacing library.
   These exist only where shorthand reads cleaner than inline style.
   ============================================================ */

/* Block-axis padding (top/bottom logical) */
.pad-block-sm {
  padding-block: var(--space-3);
}
.pad-block-md {
  padding-block: var(--space-5);
}
.pad-block-lg {
  padding-block: var(--space-7);
}
.pad-block-xl {
  padding-block: var(--space-9);
}

/* Inline-axis padding (left/right logical) */
.pad-inline-sm {
  padding-inline: var(--space-3);
}
.pad-inline-md {
  padding-inline: var(--space-5);
}

/* Equal padding (all sides) */
.pad-sm {
  padding: var(--space-3);
}
.pad-md {
  padding: var(--space-5);
}
.pad-lg {
  padding: var(--space-7);
}

/* ============================================================
   10. VISIBILITY HELPERS (A11y-aware)
   ============================================================ */

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

/* Responsive show/hide (mobile-first) */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .show-only-on-mobile {
    display: none !important;
  }
}

/* ============================================================
   11. FULL-BLEED — section breaks out of container
   Used for Aurora-BG hero sections.
   ============================================================ */

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ============================================================
   12. CENTER (intrinsic) — centers a single child both axes
   Used for empty-states, modals, loading-spinners.
   ============================================================ */

.center {
  display: grid;
  place-items: center;
  min-height: var(--center-min-h, auto);
}