/* ============================================
   KAYJAH DESIGN STUDIO — Layout System
   ============================================ */

/* Containers */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.full-bleed {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

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

.section-lg {
  padding: var(--space-md) 0 var(--space-2xl);
}

/* Asymmetric grids — the key to breaking template patterns */
.grid-60-40 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.grid-40-60 {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-lg);
  align-items: center;
}

.grid-55-45 {
  display: grid;
  grid-template-columns: 1.22fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.grid-45-55 {
  display: grid;
  grid-template-columns: 1fr 1.22fr;
  gap: var(--space-lg);
  align-items: center;
}

.grid-70-30 {
  display: grid;
  grid-template-columns: 2.33fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.grid-30-70 {
  display: grid;
  grid-template-columns: 1fr 2.33fr;
  gap: var(--space-lg);
  align-items: center;
}

.grid-thirds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Alignment */
.align-start   { align-items: start; }
.align-center  { align-items: center; }
.align-end     { align-items: end; }
.text-center   { text-align: center; }
.text-right    { text-align: right; }

/* Spacing helpers */
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }

/* Image container with aspect ratio */
.img-container {
  overflow: hidden;
  position: relative;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aspect-3-4  { aspect-ratio: 3 / 4; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1  { aspect-ratio: 1 / 1; }