/**
 * Layout System - Grid, Containers, Breakpoints
 * 
 * @package DigiHub
 */

/* Containers */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-sm {
  max-width: 768px;
}

.container-lg {
  max-width: 1440px;
}

.container-xl {
  max-width: 1600px;
}

/* Section spacing */
.section {
  padding: var(--space-section) 0;
  position: relative;
}

.section-alt {
  background-color: var(--bg-alt);
}

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

.section-dark .heading-1,
.section-dark .heading-2,
.section-dark .heading-3,
.section-dark .heading-4 {
  color: var(--text-white);
}

/* Grid system */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Flex utilities */
.flex {
  display: flex;
}

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

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

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

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

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.bento-grid .large {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-grid .wide {
  grid-column: span 2;
}

.bento-grid .tall {
  grid-row: span 2;
}

/* Split layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  min-height: calc(100vh - 72px);
}

.split-content-sidebar {
  grid-template-columns: 2fr 1fr;
  align-items: start;
  min-height: auto;
}

/* Centered content when no sidebar */
body:not(.has-sidebar) .split-content-sidebar {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

.split-content {
  max-width: 600px;
}

.split-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Aspect ratios */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

/* Spacing utilities */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

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

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Max widths */
.max-w-prose { max-width: 65ch; }
.max-w-lg    { max-width: 48rem; }
.max-w-xl    { max-width: 64rem; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Visibility */
.hidden     { display: none; }
.invisible  { visibility: hidden; }
.visible    { visibility: visible; }

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bento-grid .large {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    min-height: auto;
    padding: var(--space-3xl) 0;
  }
  
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  
  .bento-grid {
    grid-template-columns: 1fr;
  }
  
  .bento-grid .large,
  .bento-grid .wide,
  .bento-grid .tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }
}