/* ==========================================================================
   LAYOUT.CSS — Digilent Design System
   Container, Grid & Layout Utilities
   ========================================================================== */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.dig-container {
  width: 100%;
  max-width: var(--dig-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dig-container-padding);
  padding-right: var(--dig-container-padding);
}

/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */

.dig-grid {
  display: grid;
  grid-template-columns: repeat(var(--dig-grid-columns), 1fr);
  gap: var(--dig-grid-gap);
}

/* Column spans — Desktop (default) */
.dig-col-1 { grid-column: span 1; }
.dig-col-2 { grid-column: span 2; }
.dig-col-3 { grid-column: span 3; }
.dig-col-4 { grid-column: span 4; }
.dig-col-5 { grid-column: span 5; }
.dig-col-6 { grid-column: span 6; }
.dig-col-7 { grid-column: span 7; }
.dig-col-8 { grid-column: span 8; }
.dig-col-9 { grid-column: span 9; }
.dig-col-10 { grid-column: span 10; }
.dig-col-11 { grid-column: span 11; }
.dig-col-12 { grid-column: span 12; }

/* Column spans — Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .dig-col-tablet-1 { grid-column: span 1; }
  .dig-col-tablet-2 { grid-column: span 2; }
  .dig-col-tablet-3 { grid-column: span 3; }
  .dig-col-tablet-4 { grid-column: span 4; }
  .dig-col-tablet-5 { grid-column: span 5; }
  .dig-col-tablet-6 { grid-column: span 6; }
  .dig-col-tablet-7 { grid-column: span 7; }
  .dig-col-tablet-8 { grid-column: span 8; }
  .dig-col-tablet-9 { grid-column: span 9; }
  .dig-col-tablet-10 { grid-column: span 10; }
  .dig-col-tablet-11 { grid-column: span 11; }
  .dig-col-tablet-12 { grid-column: span 12; }
}

/* Column spans — Mobile (< 768px) */
@media (max-width: 767px) {
  .dig-grid {
    grid-template-columns: 1fr;
    gap: var(--dig-space-16);
  }
  
  .dig-col-1,
  .dig-col-2,
  .dig-col-3,
  .dig-col-4,
  .dig-col-5,
  .dig-col-6,
  .dig-col-7,
  .dig-col-8,
  .dig-col-9,
  .dig-col-10,
  .dig-col-11,
  .dig-col-12 {
    grid-column: span 1;
  }
}

/* ==========================================================================
   SECTION SPACING
   ========================================================================== */

.dig-section {
  padding-top: var(--dig-space-80);
  padding-bottom: var(--dig-space-80);
}

.dig-section--sm {
  padding-top: var(--dig-space-48);
  padding-bottom: var(--dig-space-48);
}

.dig-section--lg {
  padding-top: var(--dig-space-128);
  padding-bottom: var(--dig-space-128);
}

@media (max-width: 767px) {
  .dig-section {
    padding-top: var(--dig-space-48);
    padding-bottom: var(--dig-space-48);
  }
  
  .dig-section--sm {
    padding-top: var(--dig-space-32);
    padding-bottom: var(--dig-space-32);
  }
  
  .dig-section--lg {
    padding-top: var(--dig-space-64);
    padding-bottom: var(--dig-space-64);
  }
}

/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

.dig-flex {
  display: flex;
}

.dig-flex-col {
  flex-direction: column;
}

.dig-items-center {
  align-items: center;
}

.dig-items-start {
  align-items: flex-start;
}

.dig-justify-center {
  justify-content: center;
}

.dig-justify-between {
  justify-content: space-between;
}

.dig-gap-8 { gap: var(--dig-space-8); }
.dig-gap-12 { gap: var(--dig-space-12); }
.dig-gap-16 { gap: var(--dig-space-16); }
.dig-gap-24 { gap: var(--dig-space-24); }
.dig-gap-32 { gap: var(--dig-space-32); }
.dig-gap-48 { gap: var(--dig-space-48); }

/* ==========================================================================
   SPACING UTILITIES
   ========================================================================== */

/* Margin bottom */
.dig-mb-0 { margin-bottom: var(--dig-space-0); }
.dig-mb-8 { margin-bottom: var(--dig-space-8); }
.dig-mb-12 { margin-bottom: var(--dig-space-12); }
.dig-mb-16 { margin-bottom: var(--dig-space-16); }
.dig-mb-24 { margin-bottom: var(--dig-space-24); }
.dig-mb-32 { margin-bottom: var(--dig-space-32); }
.dig-mb-48 { margin-bottom: var(--dig-space-48); }
.dig-mb-64 { margin-bottom: var(--dig-space-64); }

/* Margin top */
.dig-mt-0 { margin-top: var(--dig-space-0); }
.dig-mt-8 { margin-top: var(--dig-space-8); }
.dig-mt-12 { margin-top: var(--dig-space-12); }
.dig-mt-16 { margin-top: var(--dig-space-16); }
.dig-mt-24 { margin-top: var(--dig-space-24); }
.dig-mt-32 { margin-top: var(--dig-space-32); }
.dig-mt-48 { margin-top: var(--dig-space-48); }
.dig-mt-64 { margin-top: var(--dig-space-64); }

/* Padding */
.dig-p-16 { padding: var(--dig-space-16); }
.dig-p-24 { padding: var(--dig-space-24); }
.dig-p-32 { padding: var(--dig-space-32); }
.dig-p-48 { padding: var(--dig-space-48); }

.dig-py-16 { padding-top: var(--dig-space-16); padding-bottom: var(--dig-space-16); }
.dig-py-24 { padding-top: var(--dig-space-24); padding-bottom: var(--dig-space-24); }
.dig-py-32 { padding-top: var(--dig-space-32); padding-bottom: var(--dig-space-32); }
.dig-py-48 { padding-top: var(--dig-space-48); padding-bottom: var(--dig-space-48); }

.dig-px-16 { padding-left: var(--dig-space-16); padding-right: var(--dig-space-16); }
.dig-px-24 { padding-left: var(--dig-space-24); padding-right: var(--dig-space-24); }
.dig-px-32 { padding-left: var(--dig-space-32); padding-right: var(--dig-space-32); }