:root {
  /* Colors */
  --text: #333;
  --bg: #fff;
  --muted: #666;
  --surface: #f3f3f3;
  --border: #e7e7e7;
  --focus: #cfcfcf;

  /* Layout */
  --container: 1188px;
  --container-sm: 980px;
  --container-md: 1430px;

  --pad-x: 20px;
  --gutter: 30px; /* gap between columns */
  --radius: 12px;
  --radius-sm: 8px;

  /* Spacing scale (optional use) */
  --s-1: 0.6rem;
  --s0: 1.2rem;
  --s1: 1.6rem;
  --s2: 2.4rem;
  --s3: 3.2rem;
  --s4: 4.8rem;
}



/* NEW naming */
.container {
  width: min(100% - (var(--pad-x) * 2), var(--container));
  margin-inline: auto;
}
.container--sm {
  width: min(100% - (var(--pad-x) * 2), var(--container-sm));
  margin-inline: auto;
}
.container--md {
  width: min(100% - (var(--pad-x) * 2), var(--container-md));
  margin-inline: auto;
}
.container--full {
  width: calc(100% - (var(--pad-x) * 2));
  margin-inline: auto;
}

/* Legacy aliases */
.contentInside {
  width: min(100% - (var(--pad-x) * 2), var(--container));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.contentInsideSmall {
  width: min(100% - (var(--pad-x) * 2), var(--container-sm));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.contentInsideMedium {
  width: min(100% - (var(--pad-x) * 2), var(--container-md));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.contentInsideLarge {
  width: calc(100% - (var(--pad-x) * 2));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}


/* NEW naming */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  align-items: stretch;
}

/* Legacy alias */
.contentFlex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  align-items: stretch;
}

/* Allow "container" to also be a row with no extra wrapper */
.container.row,
.contentInside.contentFlex,
.contentInside.row,
.container.contentFlex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  align-items: stretch;
}

/* Prevent overflow issues in flex children */
.row > *,
.contentFlex > * {
  min-width: 0;
}

/* Column base (NEW) */
.col {
  flex: 1 1 0;
  min-width: 0;
}

/* Fixed columns (12-col system) - NEW */
.col-1 { flex: 0 0 calc(8.3333% - (var(--gutter) * 0.9167)); }
.col-2 { flex: 0 0 calc(16.6667% - (var(--gutter) * 0.8333)); }
.col-3 { flex: 0 0 calc(25% - (var(--gutter) * 0.75)); }
.col-4 { flex: 0 0 calc(33.3333% - (var(--gutter) * 0.6667)); }
.col-5 { flex: 0 0 calc(41.6667% - (var(--gutter) * 0.5833)); }
.col-6 { flex: 0 0 calc(50% - (var(--gutter) * 0.5)); }
.col-7 { flex: 0 0 calc(58.3333% - (var(--gutter) * 0.4167)); }
.col-8 { flex: 0 0 calc(66.6667% - (var(--gutter) * 0.3333)); }
.col-9 { flex: 0 0 calc(75% - (var(--gutter) * 0.25)); }
.col-10 { flex: 0 0 calc(83.3333% - (var(--gutter) * 0.1667)); }
.col-11 { flex: 0 0 calc(91.6667% - (var(--gutter) * 0.0833)); }
.col-12 { flex: 0 0 100%; }

/* Legacy column mapping (keep ALL your old names) */
.column12-12,
.column3-3,
.column2-2,
.column4-4,
.column6-6 { flex: 0 0 100%; }

.column6-12,
.column1-2,
.column2-4,
.column3-6 { flex: 0 0 calc(50% - (var(--gutter) * 0.5)); }

.column3-12,
.column1-4 { flex: 0 0 calc(25% - (var(--gutter) * 0.75)); }

.column9-12,
.column3-4 { flex: 0 0 calc(75% - (var(--gutter) * 0.25)); }

.column4-12,
.column1-3,
.column2-6 { flex: 0 0 calc(33.3333% - (var(--gutter) * 0.6667)); }

.column8-12,
.column2-3,
.column4-6 { flex: 0 0 calc(66.6667% - (var(--gutter) * 0.3333)); }

.column1-12 { flex: 0 0 calc(8.3333% - (var(--gutter) * 0.9167)); }
.column2-12 { flex: 0 0 calc(16.6667% - (var(--gutter) * 0.8333)); }
.column5-12 { flex: 0 0 calc(41.6667% - (var(--gutter) * 0.5833)); }
.column7-12 { flex: 0 0 calc(58.3333% - (var(--gutter) * 0.4167)); }
.column10-12 { flex: 0 0 calc(83.3333% - (var(--gutter) * 0.1667)); }
.column11-12 { flex: 0 0 calc(91.6667% - (var(--gutter) * 0.0833)); }

/* Legacy “columnFlexX” helpers */
.columnFlex { flex: 1 1 0; min-width: 0; }
.columnFlex2 { flex-grow: 2; }
.columnFlex3 { flex-grow: 3; }
.columnFlex4 { flex-grow: 4; }
.columnFlex5 { flex-grow: 5; }
.columnFlex6 { flex-grow: 6; }
.columnFlex7 { flex-grow: 7; }
.columnFlex8 { flex-grow: 8; }
.columnFlex9 { flex-grow: 9; }
.columnFlex10 { flex-grow: 10; }
.columnFlex11 { flex-grow: 11; }

/* =========================
   8) Layout Utilities (modern “mattoni”)
========================= */

/* Vertical rhythm: applies spacing between children */
.flow > * + * {
  margin-top: var(--s0);
}

/* Column stack with gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s0);
}

/* Horizontal cluster that wraps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s0);
}

/* Center content with max width */
.center {
  margin-inline: auto;
}

/* Simple card */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s2);
}

/* Muted text */
.muted {
  color: var(--muted);
}