/* ================================================
   RESPONSIVE.CSS — Xtreme Fitness Studio
   Global / cross-section responsive overrides
   
   NOTE: Section-specific responsive rules are
   colocated in each component CSS file.
   This file handles global overrides, body-level
   issues, and edge-case fixes only.

   Breakpoints:
   ├── 1280px  Desktop XL (baseline)
   ├── 1024px  Laptop
   ├── 900px   Tablet landscape
   ├── 768px   Tablet portrait / Large phone
   ├── 640px   Large phone landscape
   ├── 480px   Mobile standard (iPhone Plus, Pixel)
   ├── 390px   iPhone 14 Pro / 15
   ├── 375px   iPhone SE / 12 mini
   └── 360px   Galaxy S series / small Android
================================================ */

/* ================================================
   GLOBAL IMAGE SAFETY
================================================ */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent horizontal scroll globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ================================================
   TOUCH DEVICE IMPROVEMENTS
================================================ */
@media (hover: none) {
  /* Disable hover transforms on touch devices to avoid sticky states */
  .equipment-card:hover,
  .plan-card:hover,
  .review-card:hover,
  .gallery-item:hover,
  .feature-item:hover {
    transform: none;
  }

  .gallery-item::after {
    display: none;
  }

  /* Keep button feedback on touch */
  .btn:active,
  .plan-btn:active,
  .nav-link:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* ================================================
   LAPTOP (max 1024px)
================================================ */
@media (max-width: 1024px) {
  .section-header {
    margin-bottom: 2.5rem;
  }
}

/* ================================================
   TABLET PORTRAIT (max 768px)
================================================ */
@media (max-width: 768px) {
  .section-header {
    margin-bottom: 2rem;
  }
}

/* ================================================
   MOBILE (max 480px) — general section spacing
================================================ */
@media (max-width: 480px) {
  .section-header {
    margin-bottom: 1.75rem;
  }

  /* Ensure all container paddings are consistent on mobile */
  .equipment-container,
  .plans-container,
  .about-container,
  .gallery-container,
  .reviews-container,
  .policies-container,
  .contact-container,
  .footer-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ================================================
   iPHONE SE / GALAXY S5 (max 375px)
================================================ */
@media (max-width: 375px) {
  .section-title {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
  }

  .section-subtitle {
    font-size: 0.85rem;
  }

  .btn {
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
  }

  /* Prevent text overflow on very small screens */
  .plan-name,
  .equipment-name,
  .contact-info-title,
  .feature-title {
    word-break: break-word;
  }
}

/* ================================================
   VERY SMALL ANDROID (max 360px)
================================================ */
@media (max-width: 360px) {
  body {
    font-size: 14px;
  }

  .section-title {
    font-size: 1.35rem;
  }

  .btn {
    font-size: 0.825rem;
  }
}

/* ================================================
   PRINT STYLES
================================================ */
@media print {
  .navbar,
  .whatsapp-float,
  .mobile-menu-btn,
  .mobile-menu,
  .hero-badge,
  .footer-social {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .hero-section,
  .equipment-section,
  .plans-section,
  .about-section,
  .gallery-section,
  .reviews-section,
  .policies-section,
  .contact-section {
    background: white !important;
    color: black !important;
    padding: 1rem 0 !important;
  }

  .section-title,
  .plan-name,
  .equipment-name,
  .reviewer-name,
  h1, h2, h3, h4 {
    color: black !important;
    text-shadow: none !important;
  }
}