/**
 * Layout CSS - Responsive Grid & Flexbox Systems
 * halluciphile.com Modern Template
 *
 * Contents:
 * 1. Container System
 * 2. Grid Layouts
 * 3. Flexbox Layouts
 * 4. Responsive Utilities
 * 5. Common Layout Patterns
 */

/* ==================== 1. CONTAINER SYSTEM ==================== */

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

.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-fluid {
  max-width: 100%;
}

/* Wider padding on larger screens */
@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);
  }
}

/* ==================== 2. GRID LAYOUTS ==================== */

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

/* Auto-fit grids (responsive without media queries) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}

/* Fixed column grids */
.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);
}

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

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

  .sm\\:grid-cols-4 {
    grid-template-columns: repeat(4, 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-3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .lg\\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Grid gaps */
.grid-gap-2 {
  gap: var(--space-2);
}

.grid-gap-4 {
  gap: var(--space-4);
}

.grid-gap-6 {
  gap: var(--space-6);
}

.grid-gap-8 {
  gap: var(--space-8);
}

/* Column span utilities */
.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-full {
  grid-column: 1 / -1;
}

/* ==================== 3. FLEXBOX LAYOUTS ==================== */

/* Basic flex container */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* Flex direction */
.flex-row {
  flex-direction: row;
}

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

.flex-row-reverse {
  flex-direction: row-reverse;
}

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

/* Flex wrap */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Justify content */
.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;
}

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

/* Align items */
.items-start {
  align-items: flex-start;
}

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

.items-end {
  align-items: flex-end;
}

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

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

/* Align self */
.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

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

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

/* Flex grow/shrink */
.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* ==================== 4. RESPONSIVE UTILITIES ==================== */

/* Show/hide at breakpoints */
@media (max-width: 639px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hidden-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media (max-width: 639px) {
  .mobile-only {
    display: block;
  }
}

@media (min-width: 640px) {
  .mobile-only {
    display: none;
  }
}

@media (min-width: 1024px) {
  .desktop-only {
    display: block;
  }
}

@media (max-width: 1023px) {
  .desktop-only {
    display: none;
  }
}

/* Responsive flex direction */
@media (max-width: 767px) {
  .mobile\\:flex-col {
    flex-direction: column;
  }
}

/* ==================== 5. COMMON LAYOUT PATTERNS ==================== */

/* Two-column layout (sidebar + main) */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: 250px 1fr; /* Sidebar left */
  }

  .layout-sidebar-right {
    grid-template-columns: 1fr 250px; /* Sidebar right */
  }
}

/* Hero section */
.hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

@media (min-width: 768px) {
  .hero {
    min-height: 70vh;
    padding: var(--space-20) var(--space-6);
  }
}

/* Section spacing */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

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

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

/* Card grid (product/blog listings) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Feature grid (3-column on desktop) */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Split layout (50/50) */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

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

/* Centered content column (for reading) */
.prose {
  max-width: 65ch; /* Optimal reading width */
  margin-left: auto;
  margin-right: auto;
}

.prose-sm {
  max-width: 40ch;
}

.prose-lg {
  max-width: 75ch;
}

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

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

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

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

/* Object fit utilities */
.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.object-fill {
  object-fit: fill;
}

.object-none {
  object-fit: none;
}

/* Position utilities */
.object-top {
  object-position: top;
}

.object-center {
  object-position: center;
}

.object-bottom {
  object-position: bottom;
}

/* Sticky header/footer */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
}

/* Full bleed (break out of container) */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Masonry-style grid (fallback for older browsers) */
.masonry {
  column-count: 1;
  column-gap: var(--space-4);
}

.masonry > * {
  break-inside: avoid;
  margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
}

/* ==================== SPACING SECTIONS ==================== */

/* Vertical spacing between sections */
.space-y-4 > * + * {
  margin-top: var(--space-4);
}

.space-y-6 > * + * {
  margin-top: var(--space-6);
}

.space-y-8 > * + * {
  margin-top: var(--space-8);
}

.space-y-12 > * + * {
  margin-top: var(--space-12);
}

/* Horizontal spacing between items */
.space-x-2 > * + * {
  margin-left: var(--space-2);
}

.space-x-4 > * + * {
  margin-left: var(--space-4);
}

.space-x-6 > * + * {
  margin-left: var(--space-6);
}

/* ==================== MAX WIDTH CONSTRAINTS ==================== */

.max-w-xs {
  max-width: 320px;
}

.max-w-sm {
  max-width: 384px;
}

.max-w-md {
  max-width: 448px;
}

.max-w-lg {
  max-width: 512px;
}

.max-w-xl {
  max-width: 576px;
}

.max-w-2xl {
  max-width: 672px;
}

.max-w-3xl {
  max-width: 768px;
}

.max-w-4xl {
  max-width: 896px;
}

.max-w-5xl {
  max-width: 1024px;
}

.max-w-6xl {
  max-width: 1152px;
}

.max-w-7xl {
  max-width: 1280px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-screen {
  max-width: 100vw;
}