/* ==========================================================================
   utilities.css — Best Treks Nepal Utility Classes
   Version: 1.0 | August 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */
.hidden    { display: none !important; }
.block     { display: block; }
.inline    { display: inline; }
.inline-block { display: inline-block; }

/* Responsive show/hide */
@media (max-width: 767px) {
  .hide-mobile  { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* --------------------------------------------------------------------------
   Spacing — Margin
   -------------------------------------------------------------------------- */
.m-0  { margin: 0; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }

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

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

.ml-auto { margin-left:  auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Spacing — Padding
   -------------------------------------------------------------------------- */
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--space-2); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }

/* --------------------------------------------------------------------------
   Backgrounds
   -------------------------------------------------------------------------- */
.bg-white    { background-color: var(--color-white); }
.bg-light    { background-color: var(--color-background); }
.bg-primary  { background-color: var(--color-primary); }
.bg-accent   { background-color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Border Radius
   -------------------------------------------------------------------------- */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* --------------------------------------------------------------------------
   Width / Height
   -------------------------------------------------------------------------- */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* --------------------------------------------------------------------------
   Position
   -------------------------------------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* --------------------------------------------------------------------------
   Overflow
   -------------------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* --------------------------------------------------------------------------
   Object Fit (for images)
   -------------------------------------------------------------------------- */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }

/* --------------------------------------------------------------------------
   Opacity & Visibility
   -------------------------------------------------------------------------- */
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.invisible  { visibility: hidden; }
.visible    { visibility: visible; }

/* --------------------------------------------------------------------------
   Pointer events
   -------------------------------------------------------------------------- */
.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }

/* --------------------------------------------------------------------------
   Aspect Ratios
   -------------------------------------------------------------------------- */
.aspect-video {
  aspect-ratio: 16 / 9;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-4-3 {
  aspect-ratio: 4 / 3;
}
.aspect-3-2 {
  aspect-ratio: 3 / 2;
}

/* --------------------------------------------------------------------------
   Separator / Divider
   -------------------------------------------------------------------------- */
.divider {
  width:            4rem;
  height:           3px;
  background:       var(--color-accent);
  border-radius:    var(--radius-full);
  margin-bottom:    var(--space-3);
}

.divider--center {
  margin-left:  auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  padding:       0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-family:   var(--font-body);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height:   1;
}

.badge--primary {
  background: var(--color-primary);
  color:      var(--color-white);
}
.badge--accent {
  background: var(--color-accent);
  color:      var(--color-white);
}
.badge--secondary {
  background: var(--color-secondary-light);
  color:      var(--color-primary-dark);
}
.badge--light {
  background: var(--color-background);
  color:      var(--color-primary);
  border:     1px solid var(--color-secondary);
}

/* Difficulty badges */
.badge--easy   { background: #d1fae5; color: #065f46; }
.badge--moderate { background: #fef3c7; color: #92400e; }
.badge--hard   { background: #fee2e2; color: #991b1b; }
.badge--expert { background: #ede9fe; color: #5b21b6; }

/* --------------------------------------------------------------------------
   Price Tag
   -------------------------------------------------------------------------- */
.price {
  font-family:  var(--font-heading);
  font-size:    var(--text-h4);
  font-weight:  var(--weight-bold);
  color:        var(--color-primary);
}

.price__from {
  font-family:  var(--font-body);
  font-size:    var(--text-xs);
  font-weight:  var(--weight-regular);
  color:        var(--color-text-muted);
  display:      block;
  margin-bottom: 2px;
}

.price__amount { color: var(--color-accent-dark); }

/* --------------------------------------------------------------------------
   Rating Stars
   -------------------------------------------------------------------------- */
.stars {
  display:     flex;
  align-items: center;
  gap:         2px;
  color:       var(--color-accent);
  font-size:   var(--text-sm);
}

/* --------------------------------------------------------------------------
   Tag List
   -------------------------------------------------------------------------- */
.tag-list {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-1);
}

.tag {
  display:       inline-block;
  padding:       4px 10px;
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  background:    var(--color-background);
  color:         var(--color-text-light);
  border:        1px solid rgba(127,179,176,0.3);
  transition:    all var(--transition-fast);
}

.tag:hover {
  background: var(--color-secondary-light);
  color:      var(--color-primary-dark);
  border-color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   Icon with text
   -------------------------------------------------------------------------- */
.icon-text {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-1);
  font-size:   var(--text-sm);
  color:       var(--color-text-light);
}

.icon-text svg {
  width:       1.125rem;
  height:      1.125rem;
  flex-shrink: 0;
  color:       var(--color-primary);
}