/* 
  VULCAN DESIGN SYSTEM - LAYOUT
  12-Column Grid & Container System
*/

.v-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--p-space-6);
  padding-right: var(--p-space-6);
}

.v-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--p-space-6);
}

/* Column Utilities */
.v-col-span-1 { grid-column: span 1 / span 1; }
.v-col-span-2 { grid-column: span 2 / span 2; }
.v-col-span-3 { grid-column: span 3 / span 3; }
.v-col-span-4 { grid-column: span 4 / span 4; }
.v-col-span-5 { grid-column: span 5 / span 5; }
.v-col-span-6 { grid-column: span 6 / span 6; }
.v-col-span-7 { grid-column: span 7 / span 7; }
.v-col-span-8 { grid-column: span 8 / span 8; }
.v-col-span-9 { grid-column: span 9 / span 9; }
.v-col-span-10 { grid-column: span 10 / span 10; }
.v-col-span-11 { grid-column: span 11 / span 11; }
.v-col-span-12 { grid-column: span 12 / span 12; }

/* Responsive Grid Utilities */
@media (max-width: 1024px) {
  .v-grid-tablet {
    grid-template-columns: repeat(8, 1fr);
  }
  .v-col-lg-12 { grid-column: span 12 / span 12; }
}

@media (max-width: 768px) {
  .v-col-md-12 { grid-column: span 12 / span 12; }
  .v-col-md-6 { grid-column: span 6 / span 6; }
}

@media (max-width: 640px) {
  .v-grid-mobile {
    grid-template-columns: repeat(4, 1fr);
  }
  .v-container {
    padding-left: var(--p-space-4);
    padding-right: var(--p-space-4);
  }
  .v-col-sm-12 { grid-column: span 12 / span 12; }
  .v-flex-col-mobile { flex-direction: column !important; }
}

/* Site Specific Layouts */
.v-grid--pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .v-grid--pillars {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for better readability */
  }
}

@media (max-width: 640px) {
  .v-grid--pillars {
    grid-template-columns: repeat(1, 1fr);
  }
}

.v-grid--form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .v-grid--form {
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
  }
}

/* Flexbox Helpers */
.v-flex { display: flex; }
.v-flex-center { display: flex; align-items: center; justify-content: center; }
.v-flex-col { flex-direction: column; }
.v-flex-1 { flex: 1; }
.v-gap-1 { gap: var(--p-space-1); }
.v-gap-2 { gap: var(--p-space-2); }
.v-gap-4 { gap: var(--p-space-4); }
.v-gap-6 { gap: var(--p-space-6); }
.v-gap-8 { gap: var(--p-space-8); }

/* Spacing Helpers */
.v-mb-1 { margin-bottom: var(--p-space-1); }
.v-mb-2 { margin-bottom: var(--p-space-2); }
.v-mb-4 { margin-bottom: var(--p-space-4); }
.v-mb-8 { margin-bottom: var(--p-space-8); }
.v-mb-12 { margin-bottom: var(--p-space-12); }
.v-mb-16 { margin-bottom: var(--p-space-16); }

.v-py-12 { padding-top: var(--p-space-12); padding-bottom: var(--p-space-12); }
.v-py-20 { padding-top: var(--p-space-20); padding-bottom: var(--p-space-20); }
.v-py-24 { padding-top: var(--p-space-24); padding-bottom: var(--p-space-24); }