/**
 * ==============================================================================
 * UNIVERSAL MATHEMATICAL LAYOUT PRIMITIVES
 * ==============================================================================
 * A collection of battle-tested, zero-CLS, pure CSS mathematical layouts.
 * No external JS libraries. High Core Web Vitals performance.
 *
 * Included Modules:
 * 1. .primitive-split-sidebar  (Every Layout Sidebar formula: Intrinsic split)
 * 2. .primitive-bento-grid     (Linear / Apple style: 12-col asymmetric grid)
 * 3. .primitive-ram-grid       (Vercel style: Repeat-Auto-Minmax fluid cards)
 * 4. .primitive-switcher       (Every Layout Switcher: All-or-nothing collapse)
 * 5. .primitive-feature-reel   (Apple style: Scroll-snap horizontal reel with peek)
 * 6. .primitive-sticky-rail    (Stripe style: Pinned context with scrolling stream)
 * ==============================================================================
 */

/* --------------------------------------------------------------------------
   MODULE 1: THE INTRINSIC SIDEBAR / SPLIT (Every Layout Formula)
   Two contrasting content blocks side-by-side (e.g. 60/40 or 70/30).
   Collapses to vertical stack WITHOUT hardcoded media queries using the
   "Fab Four" / calc * 999 container threshold math.
-------------------------------------------------------------------------- */
.primitive-split-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--split-gap, 2.5rem);
  align-items: var(--split-align, center);
  width: 100%;
}

.primitive-split-sidebar > .split-primary {
  /* Takes the primary share (e.g., 60%) when horizontal */
  flex-grow: var(--split-primary-grow, 7);
  flex-basis: calc((var(--split-threshold, 48rem) - 100%) * 999);
  min-width: 0;
}

.primitive-split-sidebar > .split-secondary {
  /* Takes the secondary share (e.g., 40%) when horizontal */
  flex-grow: var(--split-secondary-grow, 5);
  flex-basis: calc((var(--split-threshold, 48rem) - 100%) * 999);
  min-width: 0;
}

/* Modifiers for Split */
.primitive-split-sidebar[data-ratio="50-50"] {
  --split-primary-grow: 1;
  --split-secondary-grow: 1;
}

.primitive-split-sidebar[data-ratio="70-30"] {
  --split-primary-grow: 7;
  --split-secondary-grow: 3;
}

.primitive-split-sidebar[data-reverse="true"] {
  flex-direction: row-reverse;
}


/* --------------------------------------------------------------------------
   MODULE 2: THE 12-COLUMN BENTO GRID (Linear / Apple Pattern)
   Asymmetric spatial distribution. Items declare explicit column and row spans.
   Widescreen (1440px+) presents rich editorial density; collapses organically.
-------------------------------------------------------------------------- */
.primitive-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bento-gap, 1.5rem);
  width: 100%;
}

/* Bento Child Span Utilities */
.primitive-bento-grid > .bento-span-12 { grid-column: span 12; }
.primitive-bento-grid > .bento-span-8  { grid-column: span 8; }
.primitive-bento-grid > .bento-span-7  { grid-column: span 7; }
.primitive-bento-grid > .bento-span-6  { grid-column: span 6; }
.primitive-bento-grid > .bento-span-5  { grid-column: span 5; }
.primitive-bento-grid > .bento-span-4  { grid-column: span 4; }
.primitive-bento-grid > .bento-span-3  { grid-column: span 3; }

.primitive-bento-grid > .bento-row-2   { grid-row: span 2; }
.primitive-bento-grid > .bento-row-3   { grid-row: span 3; }

/* Responsive reflow for Bento */
@media (max-width: 1024px) {
  .primitive-bento-grid > .bento-span-8,
  .primitive-bento-grid > .bento-span-7,
  .primitive-bento-grid > .bento-span-5 {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .primitive-bento-grid {
    grid-template-columns: 1fr;
  }
  .primitive-bento-grid > [class*="bento-span-"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}


/* --------------------------------------------------------------------------
   MODULE 3: THE RAM AUTO-FIT GRID (Repeat-Auto-Minmax Formula)
   Fluid card grid without media queries.
   Computes: 4 columns on 1920px, 3 on 1200px, 2 on 768px, 1 on 400px.
-------------------------------------------------------------------------- */
.primitive-ram-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--ram-min-size, 300px)), 1fr)
  );
  gap: var(--ram-gap, 1.75rem);
  width: 100%;
}

/* Modifiers for RAM density */
.primitive-ram-grid[data-density="compact"] {
  --ram-min-size: 220px;
}
.primitive-ram-grid[data-density="roomy"] {
  --ram-min-size: 380px;
}


/* --------------------------------------------------------------------------
   MODULE 4: THE INTRINSIC SWITCHER (All-or-Nothing Switch)
   Switches a cluster of items between 1 single horizontal row and
   1 vertical stack as soon as container space hits the threshold.
   All items break TOGETHER, avoiding awkward orphans (e.g. 2 items on top, 1 below).
-------------------------------------------------------------------------- */
.primitive-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, 1.5rem);
  width: 100%;
}

.primitive-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 50rem) - 100%) * 999);
  min-width: 0;
}

/* Modifiers to limit maximum items per row before breaking */
.primitive-switcher[data-limit="3"] > * {
  max-width: calc(100% / 3);
}
.primitive-switcher[data-limit="4"] > * {
  max-width: calc(100% / 4);
}


/* --------------------------------------------------------------------------
   MODULE 5: THE FEATURE REEL (CSS Scroll-Snap with Touch Peek)
   Apple & luxury style horizontal track.
   On mobile, reveals partial next item (peek) for natural gesture affordance.
   On widescreen (1280px+), optionally expands into an uncluttered grid.
-------------------------------------------------------------------------- */
.primitive-feature-reel {
  display: flex;
  gap: var(--reel-gap, 1.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #e2e8f0) transparent;
}

.primitive-feature-reel::-webkit-scrollbar {
  height: 6px;
}
.primitive-feature-reel::-webkit-scrollbar-thumb {
  background: var(--border-color, #cbd5e1);
  border-radius: 999px;
}

.primitive-feature-reel > * {
  flex: 0 0 var(--reel-item-width, min(80vw, 360px));
  scroll-snap-align: start;
}

/* Widescreen expand mode: transforms reel into a balanced grid */
@media (min-width: 1280px) {
  .primitive-feature-reel[data-widescreen-grid="true"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    padding-block-end: 0;
  }
  .primitive-feature-reel[data-widescreen-grid="true"] > * {
    flex: auto;
  }
}


/* --------------------------------------------------------------------------
   MODULE 6: THE STYLED STICKY RAIL (Stripe Narrative Flow)
   Two columns: Left side pins contextually (e.g. title, value prop, steps)
   while right side flows through deep cards, features, or interactive media.
-------------------------------------------------------------------------- */
.primitive-sticky-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rail-gap, 3rem);
  width: 100%;
}

@media (min-width: 1024px) {
  .primitive-sticky-rail {
    grid-template-columns: var(--rail-sidebar-width, 360px) 1fr;
    align-items: start;
  }

  .primitive-sticky-rail > .sticky-rail-pinned {
    position: sticky;
    top: var(--sticky-top-offset, 6rem);
    align-self: start;
  }

  .primitive-sticky-rail[data-reverse="true"] {
    grid-template-columns: 1fr var(--rail-sidebar-width, 360px);
  }
}