/* ==========================================================================
   LAYOUT.CSS — Container, Section, Grid, and Flex Systems
   Primordial Stone — Cave-Themed Stone Craftsmanship
   ========================================================================== */

/* ==========================================================================
   Containers
   ========================================================================== */

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

.container--narrow {
  max-width: var(--container-md);
}

.container--wide {
  max-width: var(--container-2xl);
}

@media (max-width: 480px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  padding: var(--space-24) 0;
  position: relative;
}

.section--cave {
  background: var(--cave);
}

.section--bedrock {
  background: var(--bedrock);
}

.section--stone {
  position: relative;
}

.section--stone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-radial-gradient(
      circle at 17% 32%,
      rgba(255, 255, 255, 0.01) 0px,
      transparent 1px
    ),
    repeating-radial-gradient(
      circle at 62% 78%,
      rgba(255, 255, 255, 0.008) 0px,
      transparent 2px
    ),
    repeating-radial-gradient(
      circle at 84% 14%,
      rgba(0, 0, 0, 0.15) 0px,
      transparent 1px
    );
  background-size: 120px 100px, 80px 90px, 150px 130px;
  pointer-events: none;
  z-index: 0;
}

.section--stone > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }
}

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

/* ==========================================================================
   Grid System
   ========================================================================== */

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

/* 2-column grid */
.grid--2 {
  grid-template-columns: 1fr;
}

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

/* 3-column grid */
.grid--3 {
  grid-template-columns: 1fr;
}

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

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

/* 4-column grid */
.grid--4 {
  grid-template-columns: 1fr;
}

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

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

/* ==========================================================================
   Flex Utilities
   ========================================================================== */

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

.flex--center {
  align-items: center;
  justify-content: center;
}

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

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

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

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

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

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

/* ==========================================================================
   Two-column content layout (text + image)
   ========================================================================== */

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

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

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

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

/* ==========================================================================
   Aspect Ratio Containers
   ========================================================================== */

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

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

.aspect-1-1 {
  aspect-ratio: 1 / 1;
}