/* ================================================
   REDCROWN MMA — MOBILE.CSS
   Comprehensive mobile fix layer
   Link AFTER style.css and glass.css on every page
   ================================================ */

/* ══════════════════════════════════════════════
   FIX 24 — iOS parallax background-attachment:fixed
   background-attachment:fixed is broken on iOS Safari.
   Switch parallax breaks to a static overlay instead.
   ══════════════════════════════════════════════ */
@supports (-webkit-overflow-scrolling: touch) {
  .parallax-break-bg {
    background-attachment: scroll !important;
  }
}

/* Also fix for all modern mobile — use media query as fallback */
@media (max-width: 1024px) {
  .parallax-break-bg {
    background-attachment: scroll !important;
    inset: 0 !important;
  }
}

/* ══════════════════════════════════════════════
   FIX 23 — Reduce glass blur on mobile for performance
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .glass-card {
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
  }
}

/* ══════════════════════════════════════════════
   TABLET BREAKPOINT — 900px and below
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* FIX 1 — Navbar logo size */
  .nav-logo img {
    width: 48px !important;
    height: 48px !important;
  }

  .nav-logo span {
    font-size: 22px !important;
  }

  /* FIX 19 — Nav open menu must sit above tape parallax */
  .nav-links {
    z-index: 1001 !important;
  }

  /* FIX 17 — Footer 3-col → proper single column */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .footer-brand {
    grid-column: auto !important;
  }

  /* Container horizontal padding */
  .container {
    padding: 0 16px !important;
  }
}

/* ══════════════════════════════════════════════
   MAIN MOBILE BREAKPOINT — 768px and below
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── HERO ─────────────────────────────────── */

  /* FIX 2 + 3 — Hero logo size and top margin */
  .hero-logo-wrap {
    margin-top: 40px !important;
    margin-bottom: 12px !important;
  }

  .hero-logo-mark {
    width: 160px !important;
    height: 160px !important;
  }

  /* FIX 21 — Reduce hero logo animation on mobile */
  @keyframes hero-logo-breathe {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(251,54,64,0.4)); }
    50%       { filter: drop-shadow(0 0 20px rgba(251,54,64,0.65)); }
  }

  /* FIX 4 — Hero title sizing */
  .hero-title {
    font-size: clamp(52px, 16vw, 80px) !important;
    margin-bottom: 16px !important;
  }

  /* FIX 5 — Hero sub text */
  .hero-sub {
    font-size: 15px !important;
    margin-bottom: 32px !important;
    padding: 0 8px !important;
  }

  /* FIX 22 — Hero prelaunch badge letter spacing overflow */
  .hero-prelaunch-badge {
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
    padding: 5px 12px !important;
  }

  /* Hero section vertical padding */
  .hero {
    padding: 80px 16px 60px !important;
    min-height: 100svh !important;
  }

  .hero-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 12px !important;
  }

  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
  }

  .hero-trust-bar {
    font-size: 11px !important;
    gap: 6px !important;
    line-height: 1.8 !important;
  }

  /* ── SECTION TITLES ───────────────────────── */
  .section-title {
    font-size: clamp(26px, 7vw, 42px) !important;
  }

  .section-sub {
    font-size: 14px !important;
    margin-bottom: 32px !important;
  }

  /* ── WHY SECTION ──────────────────────────── */
  .why-section {
    padding: 64px 0 !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
  }

  .why-card {
    padding: 24px 20px !important;
  }

  /* ── PROGRAMS GRID ────────────────────────── */

  /* FIX 7 — Programs grid 320px min causes overflow */
  .programs-preview {
    padding: 64px 0 !important;
  }

  .programs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 32px !important;
  }

  .prog-card {
    padding: 20px 20px 36px !important;
  }

  .prog-num {
    font-size: 36px !important;
  }

  /* ── PARALLAX BREAKS ──────────────────────── */
  .parallax-break {
    min-height: 260px !important;
  }

  .parallax-break-content {
    padding: 40px 16px !important;
  }

  .break-title {
    font-size: clamp(26px, 8vw, 48px) !important;
  }

  /* FIX 12 — Break stats overflow */
  .break-stats {
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .break-stat {
    padding: 10px 14px !important;
    flex: 0 0 calc(33% - 8px) !important;
    min-width: 80px !important;
  }

  .break-stat span {
    font-size: 28px !important;
  }

  /* ── COACH SECTION ────────────────────────── */

  /* FIX 10 — Coach section padding and layout */
  .coach-spotlight {
    padding: 64px 0 !important;
  }

  .coach-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 28px 20px !important;
  }

  .coach-text h2 {
    font-size: clamp(32px, 8vw, 48px) !important;
    margin-bottom: 16px !important;
  }

  .coach-stats {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .stat-num {
    font-size: 22px !important;
  }

  .coach-visual {
    display: flex !important;
    justify-content: center !important;
  }

  .coach-placeholder {
    width: 160px !important;
    height: 200px !important;
  }

  .coach-bio {
    font-size: 14px !important;
  }

  /* ── TESTIMONIALS ─────────────────────────── */

  /* FIX 11 — Testimonial card padding */
  .testimonials-section {
    padding: 64px 0 !important;
  }

  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
  }

  .testimonial-card {
    padding: 24px 20px !important;
  }

  .testi-text {
    font-size: 14px !important;
  }

  /* ── REFERRAL SECTION ─────────────────────── */

  /* FIX 14 — Referral inner padding and layout */
  .referral-section {
    padding: 56px 0 !important;
  }

  .referral-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 28px 20px !important;
    gap: 24px !important;
  }

  .referral-text h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .referral-text p {
    font-size: 14px !important;
  }

  .referral-cta {
    width: 100% !important;
  }

  .referral-cta .btn-primary {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── PRICING SECTION ──────────────────────── */

  /* FIX 8 + 9 — Pricing grid and featured card */
  .pricing-section {
    padding: 64px 0 !important;
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 32px !important;
  }

  .pricing-featured {
    transform: translateY(0) !important;
  }

  .pricing-featured:hover {
    transform: translateY(-4px) !important;
  }

  /* Pricing badge — move inside flow, prevent clipping */
  .pricing-popular-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-block !important;
    margin: 0 auto 10px !important;
    font-size: 8px !important;
    letter-spacing: 0.2em !important;
    padding: 3px 10px !important;
  }

  .pricing-card {
    padding: 20px 14px !important;
    overflow: hidden !important;
  }

  .pricing-amount {
    font-size: 32px !important;
  }

  .pricing-duration {
    font-size: 10px !important;
  }

  .pricing-per {
    font-size: 10px !important;
  }

  /* ── WAITLIST FORM ────────────────────────── */

  /* FIX 13 — Form layout on mobile */
  .waitlist-section {
    padding: 64px 0 !important;
  }

  .waitlist-form {
    padding: 24px 16px !important;
    margin: 0 !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  /* FIX 13 — half row must be full width on mobile */
  .form-row.half {
    max-width: 100% !important;
  }

  .form-group input,
  .form-group select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
    padding: 14px 14px !important;
  }

  .form-submit {
    padding: 16px !important;
    font-size: 15px !important;
    min-height: 52px !important;
  }

  /* ── FAQ SECTION ──────────────────────────── */

  /* FIX 15 + 16 — FAQ header stacks on mobile, touch targets */
  .faq-section {
    padding: 64px 0 !important;
  }

  .faq-section-header {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }

  .faq-toggle-btn {
    width: 100% !important;
    justify-content: space-between !important;
    min-height: 48px !important; /* min touch target */
    font-size: 13px !important;
  }

  .faq-question {
    min-height: 48px !important; /* min touch target */
    padding: 16px 2px !important;
  }

  .faq-answer > p {
    font-size: 13px !important;
  }

  /* ── FOOTER ───────────────────────────────── */
  .site-footer {
    padding: 56px 0 24px !important;
  }

  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 32px !important;
  }

  .footer-brand {
    grid-column: auto !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .footer-legal {
    justify-content: center !important;
  }

  /* ── INNER PAGES ──────────────────────────── */
  .page-header {
    padding: 120px 0 48px !important;
  }

  .page-header h1 {
    font-size: clamp(36px, 10vw, 64px) !important;
  }

  /* Programs inner page */
  .prog-detail-card {
    padding: 24px 18px !important;
  }

  .prog-detail-num {
    font-size: 36px !important;
  }

  .prog-detail-header h2 {
    font-size: 22px !important;
  }

  /* About page grid */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Contact page grid */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .contact-form-wrap.glass-card {
    padding: 24px 18px !important;
  }

  /* Coaches inner grid */
  .coaches-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blog grid */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ══════════════════════════════════════════════
   SMALL PHONE BREAKPOINT — 480px and below
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── HERO ─────────────────────────────────── */
  .hero-logo-mark {
    width: 120px !important;
    height: 120px !important;
  }

  .hero-logo-pulse {
    width: 180px !important;
    height: 180px !important;
  }

  .hero-title {
    font-size: clamp(48px, 17vw, 70px) !important;
  }

  /* ── POLICE TAPE ──────────────────────────── */

  /* FIX 6 — Tape position on small screens */
  .tape-1 {
    top: 18% !important;
  }

  .tape-2 {
    top: 72% !important;
  }

  /* ── PRICING ──────────────────────────────── */

  /* Single column on very small phones */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pricing-card {
    padding: 24px 18px !important;
  }

  .pricing-amount {
    font-size: 40px !important;
  }

  /* ── REEL GRID ────────────────────────────── */
  .reel-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .reel-placeholder {
    max-height: 200px !important;
  }

  /* ── BREAK STATS ──────────────────────────── */
  .break-stat {
    flex: 0 0 calc(33% - 8px) !important;
  }

  /* ── BUTTONS ──────────────────────────────── */
  .btn-primary,
  .btn-ghost {
    font-size: 13px !important;
    padding: 12px 20px !important;
    letter-spacing: 0.1em !important;
  }

  /* ── GLASS CARD DEFAULTS ──────────────────── */
  .glass-card {
    padding: 20px 16px !important;
  }

  /* ── SECTION SPACING ──────────────────────── */
  .why-section,
  .programs-preview,
  .coach-spotlight,
  .testimonials-section,
  .pricing-section,
  .waitlist-section,
  .content-section-reel,
  .faq-section {
    padding: 52px 0 !important;
  }
}

/* ══════════════════════════════════════════════
   FIX 18 — Floating buttons — safe positioning
   Ensure they don't overlap form CTAs
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .floating-buttons {
    bottom: 16px !important;
    right: 12px !important;
    gap: 8px !important;
  }

  .float-btn {
    padding: 10px 14px !important;
    font-size: 12px !important;
    min-height: 44px !important; /* touch target */
  }

  .float-label {
    display: none !important; /* icon only on mobile — saves space */
  }

  .float-icon {
    font-size: 18px !important;
  }
}

/* ══════════════════════════════════════════════
   GLOBAL — iOS input zoom prevention
   font-size < 16px on inputs triggers auto-zoom on iOS
   Already set in 768px block but apply globally
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════
   GLOBAL — Prevent horizontal scroll
   Belt-and-braces on top of overflow-x:hidden on body
   ══════════════════════════════════════════════ */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   FIX 6 — Police tape — prevent iOS scroll jank
   ══════════════════════════════════════════════ */
.tape-parallax-layer {
  -webkit-overflow-scrolling: auto !important;
}

/* ══════════════════════════════════════════════
   TOUCH DEVICE — disable hover transforms
   Hover states can get "stuck" on touch devices
   ══════════════════════════════════════════════ */
@media (hover: none) {
  .glass-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(251, 54, 64, 0.18) !important;
  }

  .prog-card:hover .prog-arrow {
    opacity: 0 !important;
  }

  .pricing-featured:hover {
    transform: translateY(0) !important;
  }

  .nav-logo:hover #nav-logo-img {
    filter: drop-shadow(0 0 8px rgba(251,54,64,0.3)) !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════
   UTILITY — Smooth scroll on mobile
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}