/* Sprint 25 D7 — BallnX layout primitives (UX overhaul).
 *
 * Opt-in grid + split primitives prefixed with .bnx-* to avoid global
 * collisions. Loaded after mobile_premium_tokens.css and the inline
 * <style> block in base.html.
 *
 * Identity GARDÉE intacte : no palette change, no font change, no
 * type hierarchy change. These are LAYOUT primitives only.
 */

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  --bnx-space-section: 4rem;
  --bnx-space-block: 2rem;
  --bnx-space-item: 1rem;
}

/* ---------- gap modifiers (orthogonal to grid) ---------- */
.bnx-gap-sm  { gap: 1rem; }
.bnx-gap-md  { gap: 1.5rem; }
.bnx-gap-lg  { gap: 2rem; }
.bnx-gap-xl  { gap: 3rem; }

/* ---------- 2-column grid ---------- */
.bnx-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .bnx-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- 3-column grid ---------- */
.bnx-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .bnx-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .bnx-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- 4-column grid ---------- */
.bnx-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .bnx-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .bnx-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Asymmetric 66 / 33 ---------- */
.bnx-split-66-33 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .bnx-split-66-33 { grid-template-columns: 2fr 1fr; }
}

/* ---------- Asymmetric 33 / 66 (sidebar-left + content-right) ---------- */
.bnx-split-33-66 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .bnx-split-33-66 { grid-template-columns: 1fr 2fr; }
}

/* ---------- Symmetric 50 / 50 ---------- */
.bnx-split-50-50 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .bnx-split-50-50 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Side stack (column on mobile, row from md+) ---------- */
.bnx-side-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .bnx-side-stack { flex-direction: row; }
}

/* ---------- Section spacing helpers ---------- */
.bnx-section { margin: var(--bnx-space-section) 0; }
.bnx-block   { margin: var(--bnx-space-block) 0; }

/* ---------- Generic container with full-width breakout
 * (kept conservative — no max-width override of .page) ---------- */
.bnx-fluid {
  width: 100%;
  display: block;
}