/* ================================================
   Responsive Utilities – Qubic3D site
   Mobile-first responsive helper classes
   ================================================ */

/* Hide/Show Utilities */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
  
  .hide-desktop {
    display: none;
  }
}

/* Show only on mobile */
.show-mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none;
  }
}

/* Spacing Utilities - Mobile-first */
.mobile-p-0 {
  padding: 0;
}

.mobile-p-1 {
  padding: var(--spacing-mobile);
}

.mobile-mt-1 {
  margin-top: var(--spacing-mobile);
}

.mobile-mb-1 {
  margin-bottom: var(--spacing-mobile);
}

@media (min-width: 768px) {
  .mobile-p-0 {
    padding: var(--spacing-desktop);
  }
}

/* Layout Utilities */
.mobile-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-mobile);
}

@media (min-width: 768px) {
  .mobile-stack {
    flex-direction: row;
    gap: var(--spacing-desktop);
  }
}

/* Sticky utilities for mobile */
.mobile-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  backdrop-filter: blur(10px);
}

.mobile-sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: var(--c-bg);
  backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
  .mobile-sticky,
  .mobile-sticky-bottom {
    position: static;
    background: transparent;
    backdrop-filter: none;
  }
}

/* Full-width on mobile */
.mobile-full-width {
  width: 100%;
}

@media (min-width: 768px) {
  .mobile-full-width {
    width: auto;
  }
}

/* Text alignment */
.mobile-text-center {
  text-align: center;
}

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

/* Container adjustments - wider on mobile, approaching edges */
@media (max-width: 767px) {
  .container {
    width: 100%;
    padding-inline: 1rem;
    max-width: 100%;
  }
  
  /* Make all sections wider on mobile */
  section {
    padding-inline: 0;
  }
  
  /* Ensure section content uses full width */
  section .container {
    width: 100%;
    padding-inline: 1rem;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  a, button, input, select, textarea {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  /* Exclude burger button from touch target minimum (it has its own sizing) */
  .burger {
    min-height: auto !important;
    min-width: auto !important;
  }
  
  /* Disable hover effects on touch devices */
  .card:hover,
  .btn:hover {
    transform: none;
  }
  
  /* Use active states instead */
  .card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  .btn:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}