/* Mobile-specific utility classes for Gogolo
 * These utility classes help make the UI more mobile-friendly across the site
 */

/* ====== Responsive spacings ====== */

/* Responsive margins - different values on mobile vs. desktop */
.my-responsive {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mx-responsive {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mt-responsive {
  margin-top: 0.5rem;
}

.mb-responsive {
  margin-bottom: 0.5rem;
}

.ms-responsive {
  margin-left: 0.5rem;
}

.me-responsive {
  margin-right: 0.5rem;
}

/* Responsive paddings - different values on mobile vs. desktop */
.py-responsive {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-responsive {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.pt-responsive {
  padding-top: 0.5rem;
}

.pb-responsive {
  padding-bottom: 0.5rem;
}

.ps-responsive {
  padding-left: 0.5rem;
}

.pe-responsive {
  padding-right: 0.5rem;
}

@media (min-width: 768px) {
  .my-responsive {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .mx-responsive {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .mt-responsive {
    margin-top: 1rem;
  }
  
  .mb-responsive {
    margin-bottom: 1rem;
  }
  
  .ms-responsive {
    margin-left: 1rem;
  }
  
  .me-responsive {
    margin-right: 1rem;
  }
  
  .py-responsive {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .px-responsive {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .pt-responsive {
    padding-top: 1rem;
  }
  
  .pb-responsive {
    padding-bottom: 1rem;
  }
  
  .ps-responsive {
    padding-left: 1rem;
  }
  
  .pe-responsive {
    padding-right: 1rem;
  }
}

@media (min-width: 992px) {
  .my-responsive {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .mx-responsive {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  
  .mt-responsive {
    margin-top: 1.5rem;
  }
  
  .mb-responsive {
    margin-bottom: 1.5rem;
  }
  
  .ms-responsive {
    margin-left: 1.5rem;
  }
  
  .me-responsive {
    margin-right: 1.5rem;
  }
  
  .py-responsive {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .px-responsive {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .pt-responsive {
    padding-top: 1.5rem;
  }
  
  .pb-responsive {
    padding-bottom: 1.5rem;
  }
  
  .ps-responsive {
    padding-left: 1.5rem;
  }
  
  .pe-responsive {
    padding-right: 1.5rem;
  }
}

/* ====== Font sizes for mobile ====== */

/* Responsive font sizes - smaller on mobile, larger on desktop */
.fs-responsive-1 {
  font-size: 1.75rem; /* Smaller on mobile */
}

.fs-responsive-2 {
  font-size: 1.5rem;
}

.fs-responsive-3 {
  font-size: 1.25rem;
}

.fs-responsive-4 {
  font-size: 1.125rem;
}

.fs-responsive-5 {
  font-size: 1rem;
}

.fs-responsive-6 {
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .fs-responsive-1 {
    font-size: 2.25rem; /* Larger on desktop */
  }
  
  .fs-responsive-2 {
    font-size: 1.75rem;
  }
  
  .fs-responsive-3 {
    font-size: 1.5rem;
  }
  
  .fs-responsive-4 {
    font-size: 1.25rem;
  }
  
  .fs-responsive-5 {
    font-size: 1.125rem;
  }
  
  .fs-responsive-6 {
    font-size: 1rem;
  }
}

/* ====== Touch-friendly utilities ====== */

/* Touch-friendly targets (min 44px height according to WCAG 2.5.5) */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
}

/* Make links more touchable on mobile */
.mobile-link {
  display: block;
  padding: 8px 0;
}

/* Ensure buttons have good touch targets */
@media (max-width: 767px) {
  .btn {
    padding: 0.5rem 1rem;
    min-height: 44px;
  }
  
  .btn-sm {
    padding: 0.375rem 0.75rem;
    min-height: 38px;
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    min-height: 50px;
  }
}

/* ====== Visibility utilities ====== */

/* Show only on mobile devices */
.mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
  
  span.mobile-only, a.mobile-only, i.mobile-only {
    display: inline;
  }
  
  div.mobile-only, nav.mobile-only {
    display: block;
  }
  
  .flex.mobile-only {
    display: flex;
  }
}

/* Show only on tablets and larger */
.tablet-up {
  display: none;
}

@media (min-width: 768px) {
  .tablet-up {
    display: block;
  }
  
  span.tablet-up, a.tablet-up, i.tablet-up {
    display: inline;
  }
  
  div.tablet-up, nav.tablet-up {
    display: block;
  }
  
  .flex.tablet-up {
    display: flex;
  }
}

/* Show only on desktop and larger */
.desktop-up {
  display: none;
}

@media (min-width: 992px) {
  .desktop-up {
    display: block;
  }
  
  span.desktop-up, a.desktop-up, i.desktop-up {
    display: inline;
  }
  
  div.desktop-up, nav.desktop-up {
    display: block;
  }
  
  .flex.desktop-up {
    display: flex;
  }
}

/* ====== Mobile text alignment ====== */

/* Text alignment that changes based on screen size */
.text-mobile-center {
  text-align: center;
}

.text-mobile-left {
  text-align: left;
}

.text-mobile-right {
  text-align: right;
}

@media (min-width: 768px) {
  .text-mobile-center {
    text-align: inherit;
  }
  
  .text-mobile-left {
    text-align: inherit;
  }
  
  .text-mobile-right {
    text-align: inherit;
  }
}

/* ====== Mobile-friendly containers ====== */

/* Smaller container padding on mobile */
@media (max-width: 767px) {
  .container, .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Full-width container on mobile */
.container-mobile-fluid {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container-mobile-fluid {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container-mobile-fluid {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container-mobile-fluid {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container-mobile-fluid {
    max-width: 1320px;
  }
}

/* ====== Stack columns on mobile ====== */

/* Forces a flexible display to stack on mobile */
@media (max-width: 767px) {
  .stack-on-mobile {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .stack-on-mobile > * {
    width: 100% !important;
  }
}

/* ====== Order columns differently on mobile ====== */
@media (max-width: 767px) {
  .mobile-order-1 {
    order: 1 !important;
  }
  
  .mobile-order-2 {
    order: 2 !important;
  }
  
  .mobile-order-3 {
    order: 3 !important;
  }
  
  .mobile-order-4 {
    order: 4 !important;
  }
  
  .mobile-order-5 {
    order: 5 !important;
  }
}

/* ====== Mobile-friendly cards ====== */

/* Card that expands to full width on mobile */
@media (max-width: 767px) {
  .card-mobile-fluid {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-radius: 0 !important;
    border-left: none;
    border-right: none;
  }
}

/* ====== Mobile-specific gaps ====== */

/* Gap for flex containers - smaller on mobile, larger on desktop */
.gap-responsive {
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .gap-responsive {
    gap: 1rem;
  }
}

@media (min-width: 992px) {
  .gap-responsive {
    gap: 1.5rem;
  }
}

/* ====== Mobile scrolling helpers ====== */

/* Horizontal scrolling container for mobile */
.scroll-container-x {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  padding-bottom: 10px; /* Space for scrollbar */
  margin-bottom: -10px; /* Compensate for padding */
}

/* Hide scrollbar in Webkit browsers */
.scroll-container-x::-webkit-scrollbar {
  display: none;
}

.scroll-container-x > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .scroll-container-x {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}