/* ============================================
   MOBILE UTILITY CLASSES
   Reusable utility classes for responsive design
   Apply these classes directly in HTML for quick mobile fixes
   ============================================ */

/* Breakpoints:
   - Tablet: max-width: 991px
   - Mobile: max-width: 767px  
   - Small Mobile: max-width: 479px
*/

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Padding - Mobile */
@media screen and (max-width: 767px) {
  .mobile-p-0 { padding: 0 !important; }
  .mobile-p-1 { padding: 8px !important; }
  .mobile-p-2 { padding: 16px !important; }
  .mobile-p-3 { padding: 24px !important; }
  .mobile-p-4 { padding: 32px !important; }
  .mobile-p-5 { padding: 40px !important; }
  
  .mobile-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .mobile-px-1 { padding-left: 8px !important; padding-right: 8px !important; }
  .mobile-px-2 { padding-left: 16px !important; padding-right: 16px !important; }
  .mobile-px-3 { padding-left: 24px !important; padding-right: 24px !important; }
  
  .mobile-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .mobile-py-1 { padding-top: 8px !important; padding-bottom: 8px !important; }
  .mobile-py-2 { padding-top: 16px !important; padding-bottom: 16px !important; }
  .mobile-py-3 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .mobile-py-4 { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* Margin - Mobile */
@media screen and (max-width: 767px) {
  .mobile-m-0 { margin: 0 !important; }
  .mobile-m-1 { margin: 8px !important; }
  .mobile-m-2 { margin: 16px !important; }
  .mobile-m-3 { margin: 24px !important; }
  .mobile-m-4 { margin: 32px !important; }
  
  .mobile-mx-auto { margin-left: auto !important; margin-right: auto !important; }
  .mobile-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mobile-mx-2 { margin-left: 16px !important; margin-right: 16px !important; }
  
  .mobile-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .mobile-my-1 { margin-top: 8px !important; margin-bottom: 8px !important; }
  .mobile-my-2 { margin-top: 16px !important; margin-bottom: 16px !important; }
  .mobile-my-3 { margin-top: 24px !important; margin-bottom: 24px !important; }
  .mobile-my-4 { margin-top: 32px !important; margin-bottom: 32px !important; }
  
  .mobile-mb-0 { margin-bottom: 0 !important; }
  .mobile-mb-1 { margin-bottom: 8px !important; }
  .mobile-mb-2 { margin-bottom: 16px !important; }
  .mobile-mb-3 { margin-bottom: 24px !important; }
  .mobile-mb-4 { margin-bottom: 32px !important; }
  
  .mobile-mt-0 { margin-top: 0 !important; }
  .mobile-mt-1 { margin-top: 8px !important; }
  .mobile-mt-2 { margin-top: 16px !important; }
  .mobile-mt-3 { margin-top: 24px !important; }
  .mobile-mt-4 { margin-top: 32px !important; }
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

@media screen and (max-width: 767px) {
  /* Text Alignment */
  .mobile-text-left { text-align: left !important; }
  .mobile-text-center { text-align: center !important; }
  .mobile-text-right { text-align: right !important; }
  .mobile-text-justify { text-align: justify !important; }
  
  /* Font Sizes */
  .mobile-text-xs { font-size: 12px !important; line-height: 1.4 !important; }
  .mobile-text-sm { font-size: 14px !important; line-height: 1.5 !important; }
  .mobile-text-base { font-size: 16px !important; line-height: 1.5 !important; }
  .mobile-text-lg { font-size: 18px !important; line-height: 1.5 !important; }
  .mobile-text-xl { font-size: 20px !important; line-height: 1.4 !important; }
  .mobile-text-2xl { font-size: 24px !important; line-height: 1.3 !important; }
  .mobile-text-3xl { font-size: 32px !important; line-height: 1.2 !important; }
  .mobile-text-4xl { font-size: 40px !important; line-height: 1.2 !important; }
  
  /* Font Weight */
  .mobile-font-normal { font-weight: 400 !important; }
  .mobile-font-medium { font-weight: 500 !important; }
  .mobile-font-bold { font-weight: 700 !important; }
  
  /* Line Height */
  .mobile-leading-tight { line-height: 1.2 !important; }
  .mobile-leading-normal { line-height: 1.5 !important; }
  .mobile-leading-relaxed { line-height: 1.75 !important; }
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

@media screen and (max-width: 767px) {
  /* Display */
  .mobile-block { display: block !important; }
  .mobile-inline-block { display: inline-block !important; }
  .mobile-flex { display: flex !important; }
  .mobile-grid { display: grid !important; }
  .mobile-none { display: none !important; }
  
  /* Flexbox */
  .mobile-flex-col { flex-direction: column !important; }
  .mobile-flex-row { flex-direction: row !important; }
  .mobile-flex-wrap { flex-wrap: wrap !important; }
  .mobile-flex-nowrap { flex-wrap: nowrap !important; }
  .mobile-items-center { align-items: center !important; }
  .mobile-items-start { align-items: flex-start !important; }
  .mobile-items-end { align-items: flex-end !important; }
  .mobile-justify-center { justify-content: center !important; }
  .mobile-justify-between { justify-content: space-between !important; }
  .mobile-justify-start { justify-content: flex-start !important; }
  .mobile-justify-end { justify-content: flex-end !important; }
  .mobile-gap-1 { gap: 8px !important; }
  .mobile-gap-2 { gap: 16px !important; }
  .mobile-gap-3 { gap: 24px !important; }
  .mobile-gap-4 { gap: 32px !important; }
  
  /* Grid */
  .mobile-grid-cols-1 { grid-template-columns: 1fr !important; }
  .mobile-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Width */
  .mobile-w-full { width: 100% !important; }
  .mobile-w-auto { width: auto !important; }
  .mobile-max-w-full { max-width: 100% !important; }
  .mobile-max-w-sm { max-width: 320px !important; }
  .mobile-max-w-md { max-width: 480px !important; }
  
  /* Container */
  .mobile-container { 
    width: 100% !important; 
    padding-left: 16px !important; 
    padding-right: 16px !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
  }
}

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

/* Hide on mobile, show on desktop */
.mobile-hide { 
  display: block !important; 
}
@media screen and (max-width: 767px) {
  .mobile-hide { 
    display: none !important; 
  }
}

/* Show on mobile, hide on desktop */
.mobile-show { 
  display: none !important; 
}
@media screen and (max-width: 767px) {
  .mobile-show { 
    display: block !important; 
  }
}

/* Hide on tablet and below */
.tablet-hide {
  display: block !important;
}
@media screen and (max-width: 991px) {
  .tablet-hide {
    display: none !important;
  }
}

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

/* Stack items vertically on mobile */
@media screen and (max-width: 767px) {
  .mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  /* Full width on mobile */
  .mobile-full-width {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Center content on mobile */
  .mobile-center {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Remove side padding on mobile */
  .mobile-no-padding-x {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Smaller container padding */
  .mobile-container-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================
   SMALL MOBILE (479px and below)
   ============================================ */

@media screen and (max-width: 479px) {
  .small-mobile-text-xs { font-size: 11px !important; }
  .small-mobile-text-sm { font-size: 13px !important; }
  .small-mobile-text-base { font-size: 14px !important; }
  .small-mobile-text-lg { font-size: 16px !important; }
  .small-mobile-text-xl { font-size: 18px !important; }
  .small-mobile-text-2xl { font-size: 20px !important; }
  .small-mobile-text-3xl { font-size: 24px !important; }
  
  .small-mobile-p-0 { padding: 0 !important; }
  .small-mobile-p-1 { padding: 8px !important; }
  .small-mobile-p-2 { padding: 12px !important; }
  
  .small-mobile-px-1 { padding-left: 8px !important; padding-right: 8px !important; }
  .small-mobile-px-2 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ============================================
   TABLET UTILITIES (991px and below)
   ============================================ */

@media screen and (max-width: 991px) {
  .tablet-text-center { text-align: center !important; }
  .tablet-w-full { width: 100% !important; }
  .tablet-flex-col { flex-direction: column !important; }
  .tablet-grid-cols-1 { grid-template-columns: 1fr !important; }
  .tablet-grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ============================================
   FOOTER MOBILE IMPROVEMENTS
   ============================================ */

@media screen and (max-width: 767px) {
  /* Hide social icons on mobile (removed for now) */
  .site-footer-social-group {
    display: none !important;
  }
  
  /* Reduce footer padding on mobile, ensure bottom padding */
  .site-footer-regular {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 24px !important;
    padding-top: 24px !important;
  }
  
  /* Reduce spacing between footer blocks */
  .site-footer-large-grid {
    grid-row-gap: 24px !important;
  }
  
  /* Ensure content container extends to bottom */
  .site-footer-regular .content-container {
    padding-bottom: 0 !important;
  }
  
  /* Disable max-height on footer content container for mobile */
  .site-footer-regular .content-container.max-height {
    max-height: none !important;
  }
}

/* ============================================
   MOBILE SCROLL EFFECTS
   Lightweight fade-in animations for mobile
   ============================================ */

@media screen and (max-width: 767px) {
  /* Elements with data-mobile-animate will be animated by JavaScript */
  /* Initial state is set by JS, but we ensure smooth transitions */
  [data-mobile-animate] {
    will-change: opacity, transform;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  /* Make sure hero title words are visible (they're split into spans by desktop animation script) */
  .home-title span,
  .home-title span span {
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Reduce padding on section header titles for mobile - more compact and visually balanced */
  .section-header-title {
    padding-top: 80px !important;
    padding-bottom: 32px !important;
  }

  .hero-section-two-column {
    padding: 0 16px 60px !important;
  }
  
  /* Reduce padding on hero section titles */
  .hero-section-two-column .section-header-title {
    padding-top: 100px !important;
    padding-bottom: 32px !important;
  }
  
  /* Reduce padding on main headings */
  .main-h1-heading:not(.home-title) {
    padding-top: 100px !important;
    padding-bottom: 32px !important;
  }
  
  /* Reduce negative margin on section header subtitle for mobile - prevent overlap */
  .section-header-subtitle {
    margin-top: -20px !important;
    text-align: justify !important;
  }
  
  /* Add side padding to in-venue container on mobile */
  .in-venue-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* ============================================
     PRIVACY & TERMS PAGES MOBILE ENHANCEMENTS
     ============================================ */
  
  /* Add side padding to containers on privacy/terms pages */
  .terms .w-container,
  .terms .w-layout-blockcontainer {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  
  /* Reduce top padding on privacy/terms headings for mobile */
  .terms .privacy-heading {
    padding-top: 60px !important;
    padding-bottom: 16px !important;
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
  
  /* First heading (page title) - slightly larger but still reduced */
  .terms .privacy-terms-div > .w-container:first-child .privacy-heading,
  .terms .privacy-terms-div > article:first-child .privacy-heading {
    padding-top: 80px !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  
  /* Improve text readability on mobile - left align, better spacing */
  .terms .content-text {
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }
  
  /* Add spacing between sections */
  .terms .w-container,
  .terms .w-layout-blockcontainer {
    margin-bottom: 32px !important;
  }
  
  /* Improve list styling on mobile */
  .terms .content-text ul,
  .terms .content-text ol {
    padding-left: 20px !important;
    margin-bottom: 20px !important;
  }
  
  .terms .content-text li {
    margin-bottom: 12px !important;
    line-height: 1.7 !important;
  }
  
  /* Reduce bottom padding on terms section for mobile */
  .terms {
    padding-bottom: 40px !important;
  }
}