/* ===========================================
   STUDIO SOLEN — Layout
   Visual UI Rules: Whitespace is a Feature
   =========================================== */

/* ===== CONTAINER ===== */

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

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

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

/* Standard section spacing: 96-128px (per Visual UI Rules) */
section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

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

/* Tighter section variant */
.section-tight {
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}

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

.flex {
  display: flex;
}

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

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

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

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

.justify-start {
  justify-content: flex-start;
}

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

.justify-end {
  justify-content: flex-end;
}

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

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

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

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

/* Gap utilities */
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }

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

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

/* Mobile: Single column */
.grid-2,
.grid-3 {
  grid-template-columns: 1fr;
}

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

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

/* ===== SPACING UTILITIES ===== */

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Margin Vertical */
.my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }

/* Padding */
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }

.py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }

.px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px-l { padding-left: var(--space-l); padding-right: var(--space-l); }

/* ===== WIDTH UTILITIES ===== */

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

/* ===== POSITION UTILITIES ===== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ===== OVERFLOW ===== */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }