/**
 * Outside Ministries Layout & Grid System
 * Desktop: 12 Columns, Max 1440px, 3rem margins, 1.5rem gutters
 * Tablet: 8 Columns, 2rem margins, 1rem gutters
 * Mobile: 4 Columns, 1.25rem margins, 0.75rem gutters
 */

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

@media (min-width: 768px) {
  .om-container {
    padding-left: var(--om-margin-tablet);
    padding-right: var(--om-margin-tablet);
  }
}

@media (min-width: 1024px) {
  .om-container {
    padding-left: var(--om-margin-desktop);
    padding-right: var(--om-margin-desktop);
  }
}

/* 12-Column Responsive Grid */
.om-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--om-gutter-mobile);
  row-gap: var(--om-space-md);
}

@media (min-width: 768px) {
  .om-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--om-gutter-tablet);
    row-gap: var(--om-space-lg);
  }
}

@media (min-width: 1024px) {
  .om-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--om-gutter-desktop);
    row-gap: var(--om-space-xl);
  }
}

/* Standard Single-Product 12-Column Split */
.om-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--om-space-xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .om-product-grid {
    grid-template-columns: 7fr 5fr;
    gap: calc(var(--om-gutter-desktop) * 2);
  }
}

/* Catalog 4-Column Product Grid */
.om-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--om-space-md);
}

@media (min-width: 640px) {
  .om-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--om-space-lg);
  }
}

@media (min-width: 1024px) {
  .om-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--om-gutter-desktop);
  }
}

/* Flex Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }

/* Spacing Helpers */
.gap-xs { gap: var(--om-space-xs); }
.gap-sm { gap: var(--om-space-sm); }
.gap-md { gap: var(--om-space-md); }
.gap-lg { gap: var(--om-space-lg); }
.gap-xl { gap: var(--om-space-xl); }
.gap-2xl { gap: var(--om-space-2xl); }

/* Section Boundaries */
.om-section {
  padding-top: var(--om-space-xl);
  padding-bottom: var(--om-space-xl);
}

@media (min-width: 1024px) {
  .om-section {
    padding-top: var(--om-space-2xl);
    padding-bottom: var(--om-space-2xl);
  }
}