/* ============================================================
   GOLDEN ARK SYSTEMS · LAYOUT
   Containers, grids, sections, responsive breakpoints.
   ============================================================ */

.shell { position: relative; z-index: 1; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  position: relative;
}

.section {
  padding: var(--space-7) 0;
  position: relative;
}

.section-tight { padding: var(--space-6) 0; }

/* === GRID SYSTEM === */
.grid { display: grid; gap: var(--space-5); }

.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-auto-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-auto-360 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* === FLEX UTILS === */
.row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--space-3); }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .grid-5,
  .grid-4,
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 var(--space-4); }
}

@media (max-width: 560px) {
  .grid-5,
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }
  .section { padding: var(--space-6) 0; }
}