/* ==========================================================================
   Grid — Grou B2B Design System
   CSS Grid replacement for Foundation 6 grid, preserving class names.
   Scoped under .app-layout to avoid affecting existing Foundation grid.
   ========================================================================== */

/* Grid container */
.app-layout .grid-x {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.app-layout .grid-margin-x {
  gap: var(--space-4);
}

/* Default: all cells span full width (mobile-first) */
.app-layout .cell {
  grid-column: span 12;
  min-width: 0;
}

/* Small (all sizes) */
.app-layout .small-1  { grid-column: span 1; }
.app-layout .small-2  { grid-column: span 2; }
.app-layout .small-3  { grid-column: span 3; }
.app-layout .small-4  { grid-column: span 4; }
.app-layout .small-5  { grid-column: span 5; }
.app-layout .small-6  { grid-column: span 6; }
.app-layout .small-7  { grid-column: span 7; }
.app-layout .small-8  { grid-column: span 8; }
.app-layout .small-9  { grid-column: span 9; }
.app-layout .small-10 { grid-column: span 10; }
.app-layout .small-11 { grid-column: span 11; }
.app-layout .small-12 { grid-column: span 12; }

/* Medium breakpoint (>=768px) — matches Foundation */
@media (min-width: 768px) {
  .app-layout .medium-1  { grid-column: span 1; }
  .app-layout .medium-2  { grid-column: span 2; }
  .app-layout .medium-3  { grid-column: span 3; }
  .app-layout .medium-4  { grid-column: span 4; }
  .app-layout .medium-5  { grid-column: span 5; }
  .app-layout .medium-6  { grid-column: span 6; }
  .app-layout .medium-7  { grid-column: span 7; }
  .app-layout .medium-8  { grid-column: span 8; }
  .app-layout .medium-9  { grid-column: span 9; }
  .app-layout .medium-10 { grid-column: span 10; }
  .app-layout .medium-11 { grid-column: span 11; }
  .app-layout .medium-12 { grid-column: span 12; }
}

/* Large breakpoint (>=1024px) */
@media (min-width: 1024px) {
  .app-layout .large-1  { grid-column: span 1; }
  .app-layout .large-2  { grid-column: span 2; }
  .app-layout .large-3  { grid-column: span 3; }
  .app-layout .large-4  { grid-column: span 4; }
  .app-layout .large-5  { grid-column: span 5; }
  .app-layout .large-6  { grid-column: span 6; }
  .app-layout .large-7  { grid-column: span 7; }
  .app-layout .large-8  { grid-column: span 8; }
  .app-layout .large-9  { grid-column: span 9; }
  .app-layout .large-10 { grid-column: span 10; }
  .app-layout .large-11 { grid-column: span 11; }
  .app-layout .large-12 { grid-column: span 12; }
}