/* ==========================================================================
   Utility Classes
   ========================================================================== */

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

.text-white { color: white; }
.text-campfire { color: var(--color-campfire-600); }
.text-wilderness { color: var(--color-wilderness-600); }

.bg-white { background-color: white; }
.bg-snow { background-color: var(--color-snow-200); }
.bg-night { background-color: var(--color-night-800); }
.bg-wilderness { background-color: var(--color-wilderness-600); }
.bg-campfire { background-color: var(--color-campfire-600); }

.rounded { border-radius: 0.5rem; }
.rounded-lg { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-adventure { box-shadow: var(--shadow-adventure); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.py-section { padding-top: 5rem; padding-bottom: 5rem; }
.px-container { padding-left: 1rem; padding-right: 1rem; }

@media (min-width: 640px) {
  .px-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .px-container { padding-left: 2rem; padding-right: 2rem; }
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}