/* ─────────────────────────────────────────
   AGENCY OS — GRID & LAYOUT SYSTEM
   ───────────────────────────────────────── */

/* ── CONTAINER ── */
.container {
  width: 100%;
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--container-px, clamp(1.25rem, 5vw, 2.5rem));
}

.container--sm  { max-width: var(--container-sm,  640px);  }
.container--md  { max-width: var(--container-md,  768px);  }
.container--lg  { max-width: var(--container-lg,  1024px); }
.container--xl  { max-width: var(--container-xl,  1280px); }
.container--2xl { max-width: var(--container-2xl, 1440px); }
.container--full { max-width: 100%; }

/* ── SECTION ── */
.section {
  padding-block: var(--section-py);
}

.section--sm { padding-block: var(--section-py-sm); }
.section--lg { padding-block: var(--section-py-lg); }
.section--flush { padding-block: 0; }

/* ── GRID SYSTEM ── */
.grid {
  display: grid;
  gap: var(--gap-md);
}

.grid--2  { grid-template-columns: repeat(2,  1fr); }
.grid--3  { grid-template-columns: repeat(3,  1fr); }
.grid--4  { grid-template-columns: repeat(4,  1fr); }
.grid--5  { grid-template-columns: repeat(5,  1fr); }
.grid--6  { grid-template-columns: repeat(6,  1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }

/* Grids responsivos automáticos */
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ── FLEX HELPERS ── */
.flex         { display: flex; }
.flex--center { display: flex; align-items: center; justify-content: center; }
.flex--between { display: flex; align-items: center; justify-content: space-between; }
.flex--col    { display: flex; flex-direction: column; }
.flex--wrap   { display: flex; flex-wrap: wrap; }

/* ── SPAN HELPERS (para grid--12) ── */
.span-1  { grid-column: span 1;  }
.span-2  { grid-column: span 2;  }
.span-3  { grid-column: span 3;  }
.span-4  { grid-column: span 4;  }
.span-5  { grid-column: span 5;  }
.span-6  { grid-column: span 6;  }
.span-7  { grid-column: span 7;  }
.span-8  { grid-column: span 8;  }
.span-9  { grid-column: span 9;  }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.span-full { grid-column: 1 / -1; }

/* ── RESPONSIVE OVERRIDES ── */
@media (max-width: 1024px) {
  .grid--4, .grid--5, .grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 {
    grid-template-columns: 1fr;
  }
  .span-1, .span-2, .span-3, .span-4,
  .span-5, .span-6, .span-7, .span-8 {
    grid-column: 1 / -1;
  }
}