/* Mobile Overrides for A Lo Cubano Boulder Fest
 * Desktop-First Protection: All styles here are mobile-only
 * Breakpoint: 768px and below
 * This file can be removed entirely without affecting desktop design
 */

/* ==========================================================================
   DESKTOP PROTECTION - Ensure desktop navigation always works
   ========================================================================== */

/* Desktop navigation is handled by navigation.css - removed conflicting overrides */

/* ==========================================================================
   MOBILE-ONLY NAVIGATION ENHANCEMENTS
   ========================================================================== */

@media (max-width: 768px) {
  /* Enhanced Mobile Header */
  .header {
    padding: var(--space-md) 0;
    background: var(--color-surface-overlay);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
  }

  /* Logo responsiveness */
  .header-left img {
    height: 60px !important; /* Smaller logo for mobile */
  }

  .logo-text {
    font-size: var(--font-size-xl) !important;
    gap: var(--space-xs) !important;
  }

  /* Mobile menu toggle enhancements */
  .menu-toggle {
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  .menu-icon span {
    width: 20px;
    height: 2px;
    border-radius: 1px;
  }

  /* Mobile navigation is now handled by navigation.css */
}

/* ==========================================================================
   MOBILE-ONLY TYPOGRAPHY OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Hero title mobile optimization */
  .hero-title-massive {
    font-size: clamp(
      var(--font-size-4xl),
      12vw,
      var(--font-size-6xl)
    ) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-title-word {
    display: block;
    margin-bottom: var(--space-xs);
  }

  /* Large display text mobile scaling */
  .text-display {
    font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-3xl)) !important;
    line-height: 1.1 !important;
  }

  /* Gallery typography mobile optimization */
  .gallery-item-type {
    padding: var(--space-lg) !important;
  }

  .gallery-type-title {
    font-size: var(--font-size-xl) !important;
    line-height: 1.2 !important;
  }

  .gallery-type-meta {
    font-size: var(--font-size-sm) !important;
    margin: var(--space-sm) 0 !important;
  }

  .gallery-type-description {
    font-size: var(--font-size-base) !important;
    line-height: 1.5 !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY LAYOUT OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Section spacing mobile optimization */
  .section-typographic {
    padding: var(--space-md) 0;
  }

  .hero-typographic {
    padding: var(--space-4xl) 0 var(--space-3xl);
    min-height: auto;
  }

  /* Grid layouts mobile stacking */
  .text-composition,
  .gallery-typographic {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Pricing tables mobile optimization */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .day-passes {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  .individual-items {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY FORM OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Ticket form mobile enhancements */
  .purchase-section {
    padding: var(--space-xl) !important;
    margin: 0 var(--space-md) var(--space-3xl) !important;
  }

  .ticket-group {
    margin-bottom: var(--space-xl) !important;
  }

  /* Form inputs mobile optimization */
  .purchase-section input[type="text"],
  .purchase-section input[type="email"],
  .purchase-section input[type="tel"],
  .purchase-section input[type="number"] {
    padding: var(--space-md);
    font-size: var(--font-size-base);
    border-radius: 4px;
    touch-action: manipulation;
    min-height: 44px;
  }

  /* Mobile form grid layouts */
  .purchase-section [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  .purchase-section [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
    align-items: stretch !important;
  }

  /* Button mobile optimization */
  .form-button-type {
    width: 100% !important;
    padding: var(--space-lg) !important;
    font-size: var(--font-size-base) !important;
    min-height: 48px;
    touch-action: manipulation;
    border-radius: 4px;
  }
}

/* ==========================================================================
   MOBILE-ONLY PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Reduce animations for performance */
  .text-glitch,
  .typewriter,
  .letter-dance {
    animation: none !important;
  }

  /* Simplified hover states for touch */
  .gallery-item-type:hover {
    transform: none !important;
  }

  .nav-link:hover::after {
    animation: none !important;
  }

  /* Optimize background attachments */
  * {
    background-attachment: scroll !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

@media (max-width: 768px) {
  /* Touch target sizes */
  .nav-link,
  .social-link-type,
  .menu-toggle,
  .form-button-type {
    min-height: 44px;
    min-width: 44px;
  }

  /* Focus indicators for touch */
  .nav-link:focus,
  .form-button-type:focus,
  input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Readable text sizes */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Prevent zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"] {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY MICRO-INTERACTIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Touch feedback */
  .menu-toggle:active,
  .form-button-type:active,
  .nav-link:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  /* Mobile-friendly card interactions */
  .gallery-item-type:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ==========================================================================
   MOBILE-ONLY RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 480px) {
  /* Extra small screens */
  .container {
    padding: 0 var(--space-md);
  }

  .hero-title-massive {
    font-size: clamp(
      var(--font-size-3xl),
      10vw,
      var(--font-size-5xl)
    ) !important;
  }

  .text-display {
    font-size: clamp(var(--font-size-lg), 5vw, var(--font-size-2xl)) !important;
  }

  .purchase-section {
    padding: var(--space-lg) !important;
    margin: 0 0 var(--space-3xl) !important;
  }
}

/* ==========================================================================
   MOBILE-ONLY DARK MODE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Enhanced header contrast for mobile dark mode */
  [data-theme="dark"] .header {
    background: var(--color-surface-overlay);
    backdrop-filter: blur(20px);
    border-bottom-color: var(--color-border);
  }

  /* Mobile navigation dark mode improvements */
  [data-theme="dark"] .nav-list {
    background: var(--color-surface);
    opacity: 0.98; /* Better readability than 0.85 */
  }

  /* Form inputs dark mode mobile optimization */
  [data-theme="dark"] .purchase-section input[type="text"],
  [data-theme="dark"] .purchase-section input[type="email"],
  [data-theme="dark"] .purchase-section input[type="tel"],
  [data-theme="dark"] .purchase-section input[type="number"] {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }

  [data-theme="dark"] .purchase-section input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px var(--color-info-light);
  }

  /* Mobile button dark mode optimization */
  [data-theme="dark"] .form-button-type {
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-text-primary);
  }

  [data-theme="dark"] .form-button-type:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
  }

  /* Mobile card components dark mode */
  [data-theme="dark"] .purchase-section {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  /* Gallery mobile dark mode optimizations */
  [data-theme="dark"] .gallery-item-type {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  [data-theme="dark"] .gallery-item-type:hover {
    box-shadow: var(--shadow-lg);
  }

  /* Mobile hero dark mode improvements */
  [data-theme="dark"] .hero-typographic {
    background: var(--color-background);
  }

  /* Touch feedback dark mode adjustments */
  [data-theme="dark"] .menu-toggle:active,
  [data-theme="dark"] .form-button-type:active,
  [data-theme="dark"] .nav-link:active {
    background: var(--color-surface-elevated);
  }

  [data-theme="dark"] .gallery-item-type:active {
    background: var(--color-surface-elevated);
  }

  /* Mobile accessibility - better contrast for focus states */
  [data-theme="dark"] .nav-link:focus,
  [data-theme="dark"] .form-button-type:focus,
  [data-theme="dark"] input:focus {
    outline-color: var(--color-blue);
    box-shadow: 0 0 0 4px var(--color-info-light);
  }

  /* Mobile pricing dark mode */
  [data-theme="dark"] .pricing-grid {
    background: var(--color-background);
  }

  [data-theme="dark"] .day-passes,
  [data-theme="dark"] .individual-items {
    background: var(--color-surface);
  }
}

/* Extra small screens dark mode */
@media (max-width: 480px) {
  [data-theme="dark"] .container {
    background: var(--color-background);
  }

  [data-theme="dark"] .purchase-section {
    background: var(--color-surface);
    box-shadow: 0 2px 10px var(--shadow-color-light);
  }

  /* Mobile typography dark mode refinements */
  [data-theme="dark"] .hero-title-massive {
    color: var(--color-text-primary);
    text-shadow: none; /* Remove any light mode text shadows */
  }

  [data-theme="dark"] .text-display {
    color: var(--color-text-primary);
  }
}

/* ==========================================================================
   MOBILE-ONLY DEBUG HELPERS (Remove in production)
   ========================================================================== */

@media (max-width: 768px) {
  /* Uncomment for mobile debugging */
  /*
  .container {
    outline: 1px solid red;
  }
  
  .section-typographic {
    outline: 1px solid blue;
  }
  */
}