/* =========================================================
   FLOWSENSE GRID SYSTEM
   12-column CSS Grid layout system
   .container — 1280px max, centered, responsive h-padding
   .grid      — 12-column grid, 24px column gap
   .col-*     — column span helpers (1–12)
   .text-col  — reading width cap (~720px, ~8 of 12 cols)
   .heading-col — heading width cap (~900px, ~10 of 12 cols)

   Responsive horizontal padding:
     ≥1024px  desktop  32px
     768–1023 tablet   24px
     <768px   mobile   16px
   ========================================================= */

/* ── CONTAINER ──────────────────────────────────────────── */
/* Centers content at 1280px with consistent horizontal
   padding. Apply to every section's inner wrapper so all
   content shares the same left and right edges. */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── 12-COLUMN GRID ─────────────────────────────────────── */
/* Use inside .container. column-gap = 24px gutters.
   row-gap = 24px by default; override per context.        */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 24px;
}

/* ── COLUMN SPANS ───────────────────────────────────────── */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ── RESPONSIVE COLUMN OVERRIDES ────────────────────────── */
/* Tablet: 3-col and narrower collapse to 6 (2-up) */
@media (max-width: 1023px) {
  .col-3, .col-4                 { grid-column: span 6; }
  .col-5, .col-6                 { grid-column: span 6; }
  .col-7, .col-8, .col-9        { grid-column: span 12; }
  .col-10, .col-11               { grid-column: span 12; }
  /* 2-col layouts stay 2-col on tablet unless overridden */
}

/* Mobile: all spans collapse to full width */
@media (max-width: 767px) {
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
  }
}

/* ── EXPLICIT BREAKPOINT UTILITIES ──────────────────────── */
/* Force a specific span at a given breakpoint. Use to
   override the automatic collapse rules above when needed.
   Full 1–12 range supplied so every column count is usable. */
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

/* ── TEXT WIDTH LIMITERS ─────────────────────────────────── */
/* Use inside .container or .grid columns to cap reading
   width without creating another layout container.         */

/* Reading width: ~8 of 12 cols at full container = 720px  */
.text-col {
  max-width: 720px;
}

/* Heading width: ~10 of 12 cols at full container = 900px */
.heading-col {
  max-width: 900px;
}

/* Centered variants — auto margins center the block        */
.text-col-center {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.heading-col-center {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ── ALIGNMENT UTILITIES ─────────────────────────────────── */
.grid-center { place-items: center; }
.grid-start  { align-items: start; }
.grid-end    { align-items: end; }