/* ==================================================================
   HWRT Flex Grid (utilities.css replacement)
   - Modern flexbox grid with 12 columns
   - Keeps .row, .col-1..12 and .sm-col-* class names for compatibility
   - Includes common utility helpers used by the site
   ================================================================== */

:root {
  /* Horizontal gutter (padding inside columns) */
  --gutter-x: 6px;
}

/* -------- Grid Row -------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter-x) * -1);
  margin-right: calc(var(--gutter-x) * -1);
  /* Optional vertical rhythm: uncomment if you want consistent spacing
  margin-bottom: 5px; 
  */
}

/* -------- Columns (desktop / default) -------- */
/* Base column padding */
[class*="col-"] {
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
  box-sizing: border-box;
}

/* Fixed 12-column widths */
.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%;      }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%;      }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%;      }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%;     }

/* Allow a column to auto-grow (rarely needed, but handy) */
.col-auto { flex: 1 1 auto; min-width: 0; }

/* -------- Small screens (stack / responsive overrides) --------
   Adjust breakpoint as needed (720px matches your site.css)
-----------------------------------------------------------------*/
@media (max-width: 720px) {
  .sm-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
  .sm-col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .sm-col-3  { flex: 0 0 25%;      max-width: 25%;      }
  .sm-col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .sm-col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .sm-col-6  { flex: 0 0 50%;      max-width: 50%;      }
  .sm-col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .sm-col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .sm-col-9  { flex: 0 0 75%;      max-width: 75%;      }
  .sm-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .sm-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .sm-col-12 { flex: 0 0 100%;     max-width: 100%;     }

  /* If you want all columns to stack by default on small screens,
     you can set this, then override with sm-col-* where needed:
     [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  */
}

/* -------- Visibility helpers -------- */
.sm-hide { display: block; }
@media (max-width: 720px) { .sm-hide { display: none !important; } }

.sm-show { display: none; }
@media (max-width: 720px) { .sm-show { display: block !important; } }

/* -------- Text alignment -------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* -------- Common tiny helpers -------- */
.bold    { font-weight: 700; }
.muted   { color: #555; }
.rounded { border-radius: 4px; }

/* -------- Legacy clearfix (not needed with flex, kept as no-op) -------- */
.clearfix::after { content: ""; display: block; clear: both; }