/* =============================================================
   AFCON 360 — Mobile Utilities
   Purpose: Shared responsive helpers for phones/tablets
   ============================================================= */

/* Touch Targets — minimum 44x44px per WCAG */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Stack layout vertically on mobile */
@media (max-width: 768px) {
  .stack-mobile {
    flex-direction: column !important;
  }
  .stack-mobile > * {
    width: 100% !important;
  }
}

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

/* Horizontal scroll for tables/cards on mobile */
.scroll-x-mobile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Safe area insets for notched phones */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-left {
  padding-left: env(safe-area-inset-left, 0px);
}
.safe-right {
  padding-right: env(safe-area-inset-right, 0px);
}

/* Fluid typography helpers */
.text-fluid-sm {
  font-size: clamp(0.8rem, 2.5vw, 0.95rem);
}
.text-fluid-base {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
}
.text-fluid-lg {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}
.text-fluid-xl {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* Fluid spacing helpers */
.px-fluid {
  padding-left: clamp(1rem, 4vw, 2.5rem);
  padding-right: clamp(1rem, 4vw, 2.5rem);
}
.py-fluid {
  padding-top: clamp(0.75rem, 3vw, 2rem);
  padding-bottom: clamp(0.75rem, 3vw, 2rem);
}

/* Image fluid constraints */
.img-fluid-constrained {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Prevent overflow on small screens */
.contain-mobile {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}