/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — Nashville Big Game Ecosystem
   Aggressive mobile-first overrides for all pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Touch & Base ── */
* { -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, iframe, canvas, svg {
  max-width: 100%;
  height: auto;
}
input, select, textarea, button {
  font-size: 16px; /* prevents iOS zoom on focus */
}

/* ── Mobile Nav ── */
@media (max-width: 768px) {
  .main-nav, .site-nav, nav {
    padding: 12px 16px !important;
    flex-wrap: wrap;
  }
  .nav-logo {
    font-size: 1rem !important;
  }
  .nav-links, .nav-links ul {
    flex-direction: column !important;
    gap: 4px !important;
    width: 100%;
  }
  .nav-links a, .nav-links li a {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    display: block;
  }
  .nav-hamburger {
    display: flex !important;
  }
}

/* ── Hero Sections ── */
@media (max-width: 768px) {
  .hero, .hero-mini, [class*="hero"] {
    padding: 80px 16px 40px !important;
    min-height: auto !important;
  }
  .hero h1, .hero-mini h1, .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  .hero p, .hero-mini p, .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    padding: 0 !important;
  }
}

/* ── Card Grids ── */
@media (max-width: 768px) {
  .card-grid, [class*="card-grid"],
  .grid, [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  .glass-card, .event-preview-card, .tip-card,
  [class*="-card"] {
    padding: 24px 20px !important;
  }
}

/* ── Section Spacing ── */
@media (max-width: 768px) {
  .section, section, .content-section {
    padding: 40px 16px !important;
  }
  .section-inner, .container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .section-title, h2 {
    font-size: clamp(1.3rem, 5vw, 1.7rem) !important;
    line-height: 1.3 !important;
  }
  h3 {
    font-size: 1.1rem !important;
  }
}

/* ── Tables ── */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0.8rem;
  }
  th, td {
    padding: 8px 12px !important;
  }
}

/* ── Forms ── */
@media (max-width: 768px) {
  .email-form, form {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .email-form input, form input[type="email"],
  form input[type="text"], form textarea {
    width: 100% !important;
    min-height: 48px;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  .email-form button, form button[type="submit"] {
    width: 100% !important;
    min-height: 48px;
    font-size: 1rem !important;
    border-radius: 8px !important;
  }
}

/* ── Buttons & CTAs ── */
@media (max-width: 768px) {
  .btn-primary, .btn-primary-lg, .cta-box a,
  [class*="btn-"] {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    box-sizing: border-box;
  }
  .cta-box {
    padding: 24px 16px !important;
  }
}

/* ── Typography Tight ── */
@media (max-width: 768px) {
  p, li {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }
  ul, ol {
    padding-left: 20px !important;
  }
}

/* ── Footer ── */
@media (max-width: 768px) {
  .site-footer, footer {
    padding: 32px 16px !important;
  }
  .footer-domains {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .footer-domains .sep {
    display: none !important;
  }
  .footer-domains a {
    font-size: 0.8rem !important;
  }
}

/* ── Countdown ── */
@media (max-width: 600px) {
  .countdown {
    gap: 8px !important;
  }
  .countdown-number {
    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
  }
  .countdown-text {
    font-size: 0.6rem !important;
  }
  .countdown-separator {
    font-size: 1.2rem !important;
  }
}

/* ── Legal Disclaimer ── */
@media (max-width: 768px) {
  .legal-disclaimer {
    padding: 24px 16px !important;
  }
  .legal-text {
    font-size: 0.65rem !important;
  }
}

/* ── Stats / Metric Cards ── */
@media (max-width: 768px) {
  [class*="stat"], [class*="metric"] {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ── Smooth Scroll Perf ── */
@media (max-width: 768px) {
  .reveal { transition-duration: 0.4s !important; }
  * { animation-duration: 0.5s !important; }
}

/* ── Ultra Small Screens ── */
@media (max-width: 380px) {
  .hero h1, .hero-mini h1 {
    font-size: 1.4rem !important;
  }
  .section-title, h2 {
    font-size: 1.2rem !important;
  }
  .splash-brand {
    font-size: 1.3rem !important;
  }
}

/* ── Safe Areas (Notch) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  footer, .site-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .ai-bubble, #ai-agent-widget {
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── Hamburger Nav Toggle ── */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 8px;
    z-index: 1001;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary, #fff);
    transition: 0.3s ease;
    border-radius: 2px;
  }
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary, rgba(10,10,30,0.98));
    backdrop-filter: blur(20px);
    padding: 16px !important;
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 1000;
  }
  .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
  }
  nav, .site-nav, .main-nav {
    position: relative;
  }
}

/* ── Split Layouts ── */
@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .split-img, .split img {
    max-height: 300px;
    object-fit: cover;
    border-radius: 12px;
    width: 100% !important;
  }
}

/* ── Panels & Tiers Grids ── */
@media (max-width: 768px) {
  .panels, .tiers, .cards-grid, .exp-grid,
  .package-cards, .tier-cards, .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Footer Touch Targets ── */
@media (max-width: 768px) {
  .footer-links a, .footer-links li a,
  footer a {
    display: inline-block;
    padding: 8px 4px !important;
    font-size: 0.85rem !important;
    min-height: 44px;
    line-height: 28px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* ── Ultra-Small Inline Grid Fix ── */
@media (max-width: 380px) {
  [style*="display:grid"], [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Two-Column Text Layouts ── */
@media (max-width: 768px) {
  .two-col, .three-col, [class*="col-2"], [class*="col-3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Orientation Lock Warning ── */
@media (max-height: 400px) and (orientation: landscape) {
  .hero, .hero-mini {
    padding: 60px 16px 30px !important;
    min-height: auto !important;
  }
  .splash-overlay {
    padding: 20px !important;
  }
  .splash-ring {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 12px !important;
  }
}