/* ==========================================================================
   Alternivite Design System — Layout
   Containers, sections, grid, flex, gap, responsive visibility
   ========================================================================== */

/* ==========================================================================
   CONTAINER
   Responsive width wrapper with horizontal padding
   ========================================================================== */

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

@media (min-width: 640px) {
   .container {
      padding-left: var(--space-6);
      padding-right: var(--space-6);
   }
}

@media (min-width: 1024px) {
   .container {
      padding-left: var(--space-8);
      padding-right: var(--space-8);
   }
}

/* Container width variants */
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }
.container-narrow { max-width: var(--container-md); margin-left: auto; margin-right: auto; }

/* ==========================================================================
   SECTION
   Vertical rhythm with responsive padding
   ========================================================================== */

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

@media (min-width: 768px) {
   .section {
      padding-top: var(--space-24);
      padding-bottom: var(--space-24);
   }
}

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

/* Section size variants */
.section-sm {
   padding-top: var(--space-10);
   padding-bottom: var(--space-10);
}

@media (min-width: 768px) {
   .section-sm {
      padding-top: var(--space-16);
      padding-bottom: var(--space-16);
   }
}

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

@media (min-width: 768px) {
   .section-lg {
      padding-top: var(--space-32);
      padding-bottom: var(--space-32);
   }
}

/* Section background variants */
.section-alt {
   background-color: var(--bg-secondary);
}

.section-brand {
   background-color: var(--bg-brand);
   color: var(--text-inverse);
}

.section-dark {
   background-color: var(--bg-inverse);
   color: var(--text-inverse);
}

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

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Alignment — cross axis */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

/* Alignment — main axis */
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* Self alignment */
.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ==========================================================================
   GRID UTILITIES
   ========================================================================== */

.grid {
   display: grid;
}

/* Column counts */
.grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Column spans */
.col-span-2    { grid-column: span 2; }
.col-span-3    { grid-column: span 3; }
.col-span-4    { grid-column: span 4; }
.col-span-6    { grid-column: span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Responsive grid overrides */
@media (min-width: 640px) {
   .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
   .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
   .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
   .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
   .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   GAP UTILITIES
   ========================================================================== */

.gap-0  { gap: 0; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* ==========================================================================
   MARGIN UTILITIES
   ========================================================================== */

.mx-auto  { margin-left: auto; margin-right: auto; }
.ml-auto  { margin-left: auto; }
.mr-auto  { margin-right: auto; }

.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }

/* ==========================================================================
   PADDING UTILITIES
   ========================================================================== */

.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ==========================================================================
   TWO-COLUMN SPLIT LAYOUT
   ========================================================================== */

.layout-split {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-12);
   align-items: center;
}

@media (min-width: 768px) {
   .layout-split {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
   }
}

.layout-split--reverse {
   direction: rtl;
}

.layout-split--reverse > * {
   direction: ltr;
}

@media (min-width: 768px) {
   .layout-split--reverse {
      grid-template-columns: 1fr 1fr;
   }
}