/* Generic grid container (desktop-first)
   - Default: 12 columns (desktop)
   - <= --bp-md : 8 columns (tablet)
   - <= --bp-sm : 4 columns (mobile)
   Note: this file uses class-based responsive utilities: .col-*, .col-md-*, .col-sm-*
   Example usage: <div class="grid"> <div class="col col-8 col-md-4 col-sm-2">…</div> </div>
*/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
   
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background, linear-gradient(180deg, #071027 0%, #071a2a 60%));
    font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial;
    margin: 0;
    color: var(--font-color, #ffffff);
}

/* Make the main content area grow to push footer to the bottom */
.site-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.grid {
  box-sizing: border-box;
  display: grid;
  gap: var(--gutter);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(12, 1fr);
  max-width: var(--max-width);
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
}

/* Column base */
.col {
  box-sizing: border-box;
  min-width: 0; /* allow flexing/shrinking inside grid cells */
}

/* Desktop (12-column) utilities - use these as the default spans */
.grid > .col-1  { grid-column: span 1;  }
.grid > .col-2  { grid-column: span 2;  }
.grid > .col-3  { grid-column: span 3;  }
.grid > .col-4  { grid-column: span 4;  }
.grid > .col-5  { grid-column: span 5;  }
.grid > .col-6  { grid-column: span 6;  }
.grid > .col-7  { grid-column: span 7;  }
.grid > .col-8  { grid-column: span 8;  }
.grid > .col-9  { grid-column: span 9;  }
.grid > .col-10 { grid-column: span 10; }
.grid > .col-11 { grid-column: span 11; }
.grid > .col-12 { grid-column: span 12; }

/* Full width / auto */
.grid > .col-full { grid-column: 1 / -1; }
.grid > .col-auto { width: 100%; }

/* -------- Responsive overrides -------- */
/* Tablet (<= --bp-md) — 8-column grid. To avoid unintended overflow when desktop-only
   span classes are present, we reset generic column spans and encourage use of
   .col-md-* utilities for medium sizes. If you omit .col-md-*, the element will
   fall back to auto (stackable) behavior at this size. */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
    padding-left: 25px;
    padding-right: 25px;
    max-width: none;
    /* make truly full-bleed regardless of parent padding */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }

  /* reset general span rules so desktop-only .col-* do not create implicit columns */
  .grid > [class*="col-"] { grid-column: auto; }

  /* medium utilities (1..8) */
  .grid > .col-md-1 { grid-column: span 1; }
  .grid > .col-md-2 { grid-column: span 2; }
  .grid > .col-md-3 { grid-column: span 3; }
  .grid > .col-md-4 { grid-column: span 4; }
  .grid > .col-md-5 { grid-column: span 5; }
  .grid > .col-md-6 { grid-column: span 6; }
  .grid > .col-md-7 { grid-column: span 7; }
  .grid > .col-md-8 { grid-column: span 8; }
}

/* Mobile (<= --bp-sm) — 4-column grid. Same reset strategy; use .col-sm-* for mobile spans. */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    padding-left: 25px;
    padding-right: 25px;
    max-width: none;
    /* make truly full-bleed regardless of parent padding */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }

  /* reset any remaining spans to avoid overflow */
  .grid > [class*="col-"] { grid-column: auto; }

  .grid > .col-sm-1 { grid-column: span 1; }
  .grid > .col-sm-2 { grid-column: span 2; }
  .grid > .col-sm-3 { grid-column: span 3; }
  .grid > .col-sm-4 { grid-column: span 4; }
}

/* -------- Offset, Order and Vertical alignment utilities -------- */
/* Offsets: add left offset by spanning empty columns (use with the appropriate grid size)
   e.g. .offset-2 or .offset-md-1 or .offset-sm-1 */
.grid > .offset-1  { margin-left: calc( (100% / 12) * 1 ); }
.grid > .offset-2  { margin-left: calc( (100% / 12) * 2 ); }
.grid > .offset-3  { margin-left: calc( (100% / 12) * 3 ); }
.grid > .offset-4  { margin-left: calc( (100% / 12) * 4 ); }
.grid > .offset-5  { margin-left: calc( (100% / 12) * 5 ); }
.grid > .offset-6  { margin-left: calc( (100% / 12) * 6 ); }
.grid > .offset-7  { margin-left: calc( (100% / 12) * 7 ); }
.grid > .offset-8  { margin-left: calc( (100% / 12) * 8 ); }
.grid > .offset-9  { margin-left: calc( (100% / 12) * 9 ); }
.grid > .offset-10 { margin-left: calc( (100% / 12) * 10); }
.grid > .offset-11 { margin-left: calc( (100% / 12) * 11); }

/* Responsive offsets: md (based on 8 cols) */
@media (max-width: var(--bp-md)) {
  .grid > .offset-md-1 { margin-left: calc( (100% / 8) * 1 ); }
  .grid > .offset-md-2 { margin-left: calc( (100% / 8) * 2 ); }
  .grid > .offset-md-3 { margin-left: calc( (100% / 8) * 3 ); }
  .grid > .offset-md-4 { margin-left: calc( (100% / 8) * 4 ); }
  .grid > .offset-md-5 { margin-left: calc( (100% / 8) * 5 ); }
  .grid > .offset-md-6 { margin-left: calc( (100% / 8) * 6 ); }
  .grid > .offset-md-7 { margin-left: calc( (100% / 8) * 7 ); }
}

/* Responsive offsets: sm (based on 4 cols) */
@media (max-width: var(--bp-sm)) {
  .grid > .offset-sm-1 { margin-left: calc( (100% / 4) * 1 ); }
  .grid > .offset-sm-2 { margin-left: calc( (100% / 4) * 2 ); }
  .grid > .offset-sm-3 { margin-left: calc( (100% / 4) * 3 ); }
}

/* Order helpers */
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }

/* Vertical alignment helpers for grid items (align-self) */
.align-start  { align-self: start; }
.align-center { align-self: center; }
.align-end    { align-self: end; }
.align-stretch{ align-self: stretch; }

/* small convenience container */
.container-centered { padding: 0 1rem; margin: 0 auto; max-width: var(--max-width); }

/* fixed-size spacers */
.spacer-sm  { height: 0.5rem; }
.spacer-md  { height: 1rem; }
.spacer-lg  { height: 2rem; }
.spacer-xl  { height: 4rem; }

/* make sure they don't collapse */
.spacer-sm, .spacer-md, .spacer-lg, .spacer-xl {
  display: block;
  width: 100%;
}

.content-divider {
  height: 4px;
  background: var(--divider-bg, rgba(0,0,0,0.06));
  width: 100%;
  display: block;
  pointer-events: none;
  margin: 1rem 0;
  border-radius: 2px;
}

/* Thin variant */
.content-divider--thin {
  height: 1px;
  margin: 0.75rem 0;
}