/* ==========================================================================
   CITY CAPITAL TRADERS (CCT) — 16-COLUMN RESPONSIVE GRID SYSTEM
   Directly derived from Jeton's architectural fluid grid.
   ========================================================================== */

.cct-container {
  width: 100%;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

.g-row {
  display: flex;
  flex-flow: row wrap;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  padding-left: var(--grid-padding) !important;
  padding-right: var(--grid-padding) !important;
  width: 100%;
  box-sizing: border-box;
}

.g-row-full {
  margin: 0 auto;
  width: var(--grid-width);
  max-width: 1680px;
}

.g-col {
  flex: 1 1 0px;
  min-width: 0;
  padding-left: var(--grid-half-gap);
  padding-right: var(--grid-half-gap);
  box-sizing: border-box;
}

/* 16-Column System (Default / XXL) */
.xxl-1  { flex: 0 0 6.25%;   max-width: 6.25%; }
.xxl-2  { flex: 0 0 12.5%;   max-width: 12.5%; }
.xxl-3  { flex: 0 0 18.75%;  max-width: 18.75%; }
.xxl-4  { flex: 0 0 25%;     max-width: 25%; }
.xxl-5  { flex: 0 0 31.25%;  max-width: 31.25%; }
.xxl-6  { flex: 0 0 37.5%;   max-width: 37.5%; }
.xxl-7  { flex: 0 0 43.75%;  max-width: 43.75%; }
.xxl-8  { flex: 0 0 50%;     max-width: 50%; }
.xxl-9  { flex: 0 0 56.25%;  max-width: 56.25%; }
.xxl-10 { flex: 0 0 62.5%;   max-width: 62.5%; }
.xxl-11 { flex: 0 0 68.75%;  max-width: 68.75%; }
.xxl-12 { flex: 0 0 75%;     max-width: 75%; }
.xxl-13 { flex: 0 0 81.25%;  max-width: 81.25%; }
.xxl-14 { flex: 0 0 87.5%;   max-width: 87.5%; }
.xxl-15 { flex: 0 0 93.75%;  max-width: 93.75%; }
.xxl-16 { flex: 0 0 100%;    max-width: 100%; }

.xxl-offset-0  { margin-left: 0; }
.xxl-offset-1  { margin-left: 6.25%; }
.xxl-offset-2  { margin-left: 12.5%; }
.xxl-offset-3  { margin-left: 18.75%; }
.xxl-offset-4  { margin-left: 25%; }
.xxl-offset-5  { margin-left: 31.25%; }
.xxl-offset-6  { margin-left: 37.5%; }
.xxl-offset-7  { margin-left: 43.75%; }
.xxl-offset-8  { margin-left: 50%; }

/* XL: max-width 1700px */
@media screen and (max-width: 1700px) {
  .xl-1  { flex: 0 0 6.25%;   max-width: 6.25%; }
  .xl-2  { flex: 0 0 12.5%;   max-width: 12.5%; }
  .xl-3  { flex: 0 0 18.75%;  max-width: 18.75%; }
  .xl-4  { flex: 0 0 25%;     max-width: 25%; }
  .xl-5  { flex: 0 0 31.25%;  max-width: 31.25%; }
  .xl-6  { flex: 0 0 37.5%;   max-width: 37.5%; }
  .xl-7  { flex: 0 0 43.75%;  max-width: 43.75%; }
  .xl-8  { flex: 0 0 50%;     max-width: 50%; }
  .xl-9  { flex: 0 0 56.25%;  max-width: 56.25%; }
  .xl-10 { flex: 0 0 62.5%;   max-width: 62.5%; }
  .xl-11 { flex: 0 0 68.75%;  max-width: 68.75%; }
  .xl-12 { flex: 0 0 75%;     max-width: 75%; }
  .xl-13 { flex: 0 0 81.25%;  max-width: 81.25%; }
  .xl-14 { flex: 0 0 87.5%;   max-width: 87.5%; }
  .xl-15 { flex: 0 0 93.75%;  max-width: 93.75%; }
  .xl-16 { flex: 0 0 100%;    max-width: 100%; }
}

/* LG: max-width 1440px */
@media screen and (max-width: 1440px) {
  .lg-1  { flex: 0 0 6.25%;   max-width: 6.25%; }
  .lg-2  { flex: 0 0 12.5%;   max-width: 12.5%; }
  .lg-3  { flex: 0 0 18.75%;  max-width: 18.75%; }
  .lg-4  { flex: 0 0 25%;     max-width: 25%; }
  .lg-5  { flex: 0 0 31.25%;  max-width: 31.25%; }
  .lg-6  { flex: 0 0 37.5%;   max-width: 37.5%; }
  .lg-7  { flex: 0 0 43.75%;  max-width: 43.75%; }
  .lg-8  { flex: 0 0 50%;     max-width: 50%; }
  .lg-9  { flex: 0 0 56.25%;  max-width: 56.25%; }
  .lg-10 { flex: 0 0 62.5%;   max-width: 62.5%; }
  .lg-11 { flex: 0 0 68.75%;  max-width: 68.75%; }
  .lg-12 { flex: 0 0 75%;     max-width: 75%; }
  .lg-13 { flex: 0 0 81.25%;  max-width: 81.25%; }
  .lg-14 { flex: 0 0 87.5%;   max-width: 87.5%; }
  .lg-15 { flex: 0 0 93.75%;  max-width: 93.75%; }
  .lg-16 { flex: 0 0 100%;    max-width: 100%; }
}

/* MD: max-width 1290px */
@media screen and (max-width: 1290px) {
  .md-1  { flex: 0 0 6.25%;   max-width: 6.25%; }
  .md-2  { flex: 0 0 12.5%;   max-width: 12.5%; }
  .md-3  { flex: 0 0 18.75%;  max-width: 18.75%; }
  .md-4  { flex: 0 0 25%;     max-width: 25%; }
  .md-5  { flex: 0 0 31.25%;  max-width: 31.25%; }
  .md-6  { flex: 0 0 37.5%;   max-width: 37.5%; }
  .md-7  { flex: 0 0 43.75%;  max-width: 43.75%; }
  .md-8  { flex: 0 0 50%;     max-width: 50%; }
  .md-9  { flex: 0 0 56.25%;  max-width: 56.25%; }
  .md-10 { flex: 0 0 62.5%;   max-width: 62.5%; }
  .md-11 { flex: 0 0 68.75%;  max-width: 68.75%; }
  .md-12 { flex: 0 0 75%;     max-width: 75%; }
  .md-13 { flex: 0 0 81.25%;  max-width: 81.25%; }
  .md-14 { flex: 0 0 87.5%;   max-width: 87.5%; }
  .md-15 { flex: 0 0 93.75%;  max-width: 93.75%; }
  .md-16 { flex: 0 0 100%;    max-width: 100%; }
  .md-offset-0 { margin-left: 0; }
  .md-offset-1 { margin-left: 6.25%; }
}

/* SM: max-width 1023px */
@media screen and (max-width: 1023px) {
  .sm-1  { flex: 0 0 6.25%;   max-width: 6.25%; }
  .sm-2  { flex: 0 0 12.5%;   max-width: 12.5%; }
  .sm-3  { flex: 0 0 18.75%;  max-width: 18.75%; }
  .sm-4  { flex: 0 0 25%;     max-width: 25%; }
  .sm-5  { flex: 0 0 31.25%;  max-width: 31.25%; }
  .sm-6  { flex: 0 0 37.5%;   max-width: 37.5%; }
  .sm-7  { flex: 0 0 43.75%;  max-width: 43.75%; }
  .sm-8  { flex: 0 0 50%;     max-width: 50%; }
  .sm-9  { flex: 0 0 56.25%;  max-width: 56.25%; }
  .sm-10 { flex: 0 0 62.5%;   max-width: 62.5%; }
  .sm-11 { flex: 0 0 68.75%;  max-width: 68.75%; }
  .sm-12 { flex: 0 0 75%;     max-width: 75%; }
  .sm-13 { flex: 0 0 81.25%;  max-width: 81.25%; }
  .sm-14 { flex: 0 0 87.5%;   max-width: 87.5%; }
  .sm-15 { flex: 0 0 93.75%;  max-width: 93.75%; }
  .sm-16 { flex: 0 0 100%;    max-width: 100%; }
  .sm-offset-0 { margin-left: 0; }
}

/* XS: max-width 743px */
@media screen and (max-width: 743px) {
  .xs-1  { flex: 0 0 6.25%;   max-width: 6.25%; }
  .xs-2  { flex: 0 0 12.5%;   max-width: 12.5%; }
  .xs-3  { flex: 0 0 18.75%;  max-width: 18.75%; }
  .xs-4  { flex: 0 0 25%;     max-width: 25%; }
  .xs-5  { flex: 0 0 31.25%;  max-width: 31.25%; }
  .xs-6  { flex: 0 0 37.5%;   max-width: 37.5%; }
  .xs-7  { flex: 0 0 43.75%;  max-width: 43.75%; }
  .xs-8  { flex: 0 0 50%;     max-width: 50%; }
  .xs-9  { flex: 0 0 56.25%;  max-width: 56.25%; }
  .xs-10 { flex: 0 0 62.5%;   max-width: 62.5%; }
  .xs-11 { flex: 0 0 68.75%;  max-width: 68.75%; }
  .xs-12 { flex: 0 0 75%;     max-width: 75%; }
  .xs-13 { flex: 0 0 81.25%;  max-width: 81.25%; }
  .xs-14 { flex: 0 0 87.5%;   max-width: 87.5%; }
  .xs-15 { flex: 0 0 93.75%;  max-width: 93.75%; }
  .xs-16 { flex: 0 0 100%;    max-width: 100%; }
  .xs-offset-0 { margin-left: 0; }
}

/* Column Width Variables */
:root {
  --cols-1:  calc((var(--grid-width)) / 16 - var(--grid-gap));
  --cols-2:  calc((var(--grid-width)) / 8 - var(--grid-gap));
  --cols-3:  calc((var(--grid-width)) / 5.3333 - var(--grid-gap));
  --cols-4:  calc((var(--grid-width)) / 4 - var(--grid-gap));
  --cols-5:  calc((var(--grid-width)) / 3.2 - var(--grid-gap));
  --cols-6:  calc((var(--grid-width)) / 2.6667 - var(--grid-gap));
  --cols-7:  calc((var(--grid-width)) / 2.2857 - var(--grid-gap));
  --cols-8:  calc((var(--grid-width)) / 2 - var(--grid-gap));
  --cols-9:  calc((var(--grid-width)) / 1.7778 - var(--grid-gap));
  --cols-10: calc((var(--grid-width)) / 1.6 - var(--grid-gap));
  --cols-11: calc((var(--grid-width)) / 1.4545 - var(--grid-gap));
  --cols-12: calc((var(--grid-width)) / 1.3333 - var(--grid-gap));
  --cols-13: calc((var(--grid-width)) / 1.2308 - var(--grid-gap));
  --cols-14: calc((var(--grid-width)) / 1.1429 - var(--grid-gap));
  --cols-15: calc((var(--grid-width)) / 1.0667 - var(--grid-gap));
  --cols-16: var(--grid-width);
}

.w-cols-4  { width: var(--cols-4); }
.w-cols-6  { width: var(--cols-6); }
.w-cols-8  { width: var(--cols-8); }
.w-cols-10 { width: var(--cols-10); }
.w-cols-12 { width: var(--cols-12); }
.w-cols-14 { width: var(--cols-14); }
.w-cols-16 { width: var(--cols-16); }

@media screen and (max-width: 1023px) {
  .sm-w-cols-12 { width: var(--cols-12); }
  .sm-w-cols-14 { width: var(--cols-14); }
  .sm-w-cols-16 { width: 100%; }
}

@media screen and (max-width: 743px) {
  .xs-w-cols-14 { width: 100%; }
  .xs-w-cols-16 { width: 100%; }
}