/* ============================================
   RESPONSIVE BASE - Common Responsive Utilities
   ============================================

   This file contains common responsive utilities and patterns
   used across all pages and components.
   ============================================ */

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide on mobile */
@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media (max-width: 992px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile-only {
  display: none !important;
}

@media (max-width: 640px) {
  .show-mobile-only {
    display: block !important;
  }
}

/* Show only on tablet */
.show-tablet-only {
  display: none !important;
}

@media (min-width: 641px) and (max-width: 992px) {
  .show-tablet-only {
    display: block !important;
  }
}

/* ============================================
   COMMON RESPONSIVE PATTERNS
   ============================================ */

/* Stack on mobile */
@media (max-width: 640px) {
  .stack-mobile {
    flex-direction: column !important;
  }

  .stack-mobile > * {
    width: 100% !important;
  }
}

/* Full width on mobile */
@media (max-width: 640px) {
  .full-width-mobile {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Reduced padding on mobile */
@media (max-width: 640px) {
  .reduce-padding-mobile {
    padding: clamp(1rem, 4vw, 1.5rem) !important;
  }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY SCALING
   ============================================ */

@media (max-width: 992px) {
  /* Reduce heading sizes on tablet */
  h1 { font-size: clamp(2rem, 5vw, 3rem) !important; }
  h2 { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; }
  h3 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; }
}

@media (max-width: 640px) {
  /* Further reduce on mobile */
  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem) !important; }
  h2 { font-size: clamp(2.2rem, 5vw, 2rem) !important; }
  h3 { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; }
}

/* ============================================
   RESPONSIVE CONTAINER ADJUSTMENTS
   ============================================ */

@media (max-width: 992px) {
  .container {
    padding-inline: clamp(1rem, 4vw, 2rem) !important;
  }
}

@media (max-width: 640px) {
  .container {
    padding-inline: clamp(0.75rem, 4vw, 1.5rem) !important;
  }
}

/* ============================================
   RESPONSIVE GRID PATTERNS
   ============================================ */

/* 2-column grid → 1 column on mobile */
@media (max-width: 640px) {
  .grid-2-mobile-1 {
    grid-template-columns: 1fr !important;
  }
}

/* 3-column grid → 2 columns on tablet, 1 on mobile */
@media (max-width: 992px) {
  .grid-3-tablet-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .grid-3-tablet-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   TOUCH-FRIENDLY TARGETS
   ============================================ */

@media (max-width: 640px) {
  /* Ensure buttons and links are touch-friendly */
  button,
  a[role="button"],
  .btn {
    min-height: 4px !important;
    min-width: 4px !important;
    /*padding: 0.75rem 1.5rem !important;*/
  }
}

/* ============================================
   RESPONSIVE SPACING
   ============================================ */

@media (max-width: 992px) {
  /* Reduce section padding on tablet */
  .section {
    padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) !important;
  }
}

@media (max-width: 640px) {
  /* Further reduce on mobile */
  .section {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(0.75rem, 3vw, 1.5rem) !important;
  }
}