/* =========================================================
   LAYOUT
   ========================================================= */

/* ----- CONTAINERS ----- */

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding-inline: var(--container-gutter);
}

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

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

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

/* ----- SECTIONS ----- */

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

.section-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-10) var(--space-9);
  overflow: hidden;
}

.section-tight {
  padding-block: var(--space-8);
}

.section-divider {
  position: relative;
  height: 1px;
  background: var(--gradient-line-cyan);
  margin-block: var(--space-8);
  opacity: 0.5;
}

/* ----- GRID HELPERS ----- */

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

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

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

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

.grid-asymmetric {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.grid-asymmetric-reverse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-asymmetric,
  .grid-asymmetric-reverse {
    grid-template-columns: 1fr;
  }
}

/* ----- FLEX HELPERS ----- */

.flex {
  display: flex;
}

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

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

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

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

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

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

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }

/* ----- MARGIN HELPERS ----- */

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }

/* ----- POSITIONING ----- */

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

.inset-0 {
  inset: 0;
}

/* ----- DISPLAY ----- */

.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* ----- TEXT ALIGNMENT ----- */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ----- WIDTH ----- */

.w-full { width: 100%; }
.max-w-prose { max-width: 65ch; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

/* ----- MISC ----- */

.text-balance {
  text-wrap: balance;
}

.overflow-hidden {
  overflow: hidden;
}