/* ============================================================
   GENE WORLDWIDE GRID SYSTEM
   A modern, clean CSS Grid implementation independent of WPBakery.
   Use this for all custom layouts to ensure perfect consistency.
   ============================================================ */

:root {
  --gene-container-max: 1200px;
  --gene-container-gutter: 5vw;
  --gene-grid-columns: 12;
  --gene-grid-gap: 24px;
  --gene-section-pad-top: 14vh;
  --gene-section-pad-bottom: 10vh;
}

/* Base Container */
.gene-container {
  width: 100%;
  max-width: var(--gene-container-max);
  margin-inline: auto;
  padding-inline: var(--gene-container-gutter);
  box-sizing: border-box;
}

/* Fluid Row */
.gene-row {
  display: grid;
  grid-template-columns: repeat(var(--gene-grid-columns), 1fr);
  gap: var(--gene-grid-gap);
  width: 100%;
}

/* Spacing Sub-grid (for wrapping items automatically without col spans) */
.gene-row--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gene-grid-gap);
}

/* Generic Column */
.gene-col {
  grid-column: span var(--gene-grid-columns);
}

/* Specific Columns (Desktop First) */
.gene-col-1  { grid-column: span 1; }
.gene-col-2  { grid-column: span 2; }
.gene-col-3  { grid-column: span 3; }
.gene-col-4  { grid-column: span 4; }
.gene-col-5  { grid-column: span 5; }
.gene-col-6  { grid-column: span 6; }
.gene-col-7  { grid-column: span 7; }
.gene-col-8  { grid-column: span 8; }
.gene-col-9  { grid-column: span 9; }
.gene-col-10 { grid-column: span 10; }
.gene-col-11 { grid-column: span 11; }
.gene-col-12 { grid-column: span 12; }

/* Desktop Medium / iPads */
@media (max-width: 1024px) {
  .gene-col-md-12 { grid-column: span 12; }
  .gene-col-md-6  { grid-column: span 6; }
  .gene-col-md-4  { grid-column: span 4; }
  .gene-col-md-3  { grid-column: span 3; }
}

/* Mobile Phones */
@media (max-width: 768px) {
  /* On mobile, collapse to single column unless configured otherwise */
  .gene-row:not(.gene-row--keep-mobile) > .gene-col,
  .gene-row:not(.gene-row--keep-mobile) > [class*="gene-col-"] {
    grid-column: span var(--gene-grid-columns) !important;
  }
  
  .gene-col-sm-12 { grid-column: span 12 !important; }
  .gene-col-sm-6  { grid-column: span 6 !important; }
}