/* ═══════════════════════════════════════════════════════════════
   LEETFX — GLOBAL MOBILE RESPONSIVE FIX
   Covers: index.html, mentorship.html, alpha-access.html,
           journal.html, book-slot.html, contact.html
   Target: All screens ≤ 1024px down to 320px
═══════════════════════════════════════════════════════════════ */

/* ── RESET OVERFLOW ── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ════════════════════════════════
   1.  HOMEPAGE — index.html
════════════════════════════════ */

@media (max-width: 1024px) {
  /* Floating menu */
  .topbar.menu-3d {
    top: 8px !important;
    margin: 8px 12px 0 !important;
    max-width: calc(100vw - 24px) !important;
    padding: 8px 16px !important;
  }
  .desktop-nav {
    gap: 4px !important;
  }
  .desktop-nav a {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 768px) {
  /* ── Topbar / Menu ── */
  .topbar.menu-3d {
    border-radius: 16px !important;
    padding: 8px 14px !important;
  }
  .desktop-nav {
    display: none !important;
  }
  .menu-actions {
    gap: 6px !important;
  }
  .menu-actions .button {
    font-size: 10px !important;
    padding: 7px 12px !important;
  }
  /* Hamburger menu */
  .hamburger-btn,
  .mobile-menu-toggle,
  [class*="hamburger"],
  [class*="mobile-menu-btn"] {
    display: flex !important;
  }

  /* ── Hero Section ── */
  .hero-section,
  .hero-block,
  .mentor-hero {
    padding: 80px 18px 40px !important;
    text-align: center !important;
  }
  .hero-section h1,
  .hero-block h1,
  .mentor-hero h1 {
    font-size: clamp(28px, 8vw, 52px) !important;
    letter-spacing: -0.04em !important;
    line-height: 1.1 !important;
  }
  .hero-section p,
  .hero-block p {
    font-size: 14px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    max-width: 340px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── Mentor Identity block ── */
  .mentor-identity,
  .mentor-bio,
  .mentor-tagline {
    padding: 32px 18px !important;
    text-align: center !important;
  }
  .mentor-identity h1,
  .mentor-bio h1,
  .mentor-tagline h1 {
    font-size: clamp(24px, 7vw, 40px) !important;
  }

  /* ── Research / Articles Grid ── */
  .articles-grid,
  .post-grid,
  .market-posts-grid,
  #articles .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 18px !important;
  }
  .article-card,
  .post-card,
  .market-card {
    width: 100% !important;
  }

  /* ── Testimonials ── */
  .testimonials-grid,
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .testimonial-card,
  .review-card {
    width: 100% !important;
  }

  /* ── Footer ── */
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 32px 18px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center !important;
    padding: 16px 18px !important;
  }

  /* ── Social Widget Strip ── */
  .social-widget-strip {
    padding: 20px 14px 28px !important;
  }
  .social-widget-inner {
    border-radius: 20px !important;
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .social-widget-divider {
    display: none !important;
  }
  .social-widget-links {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sw-pill {
    font-size: 12px !important;
    padding: 7px 12px 7px 10px !important;
  }

  /* ── Auth Modal ── */
  .auth-modal {
    width: calc(100vw - 24px) !important;
    max-width: 460px !important;
  }
  .auth-modal .auth-visual {
    display: none !important;
  }
  .auth-panel {
    width: 100% !important;
    padding: 28px 20px !important;
  }
}

@media (max-width: 480px) {
  /* Tighter hero on small phones */
  .hero-section,
  .hero-block,
  .mentor-hero {
    padding: 70px 14px 32px !important;
  }
  .hero-section h1,
  .hero-block h1 {
    font-size: clamp(26px, 9vw, 38px) !important;
  }
  /* Menu */
  .topbar.menu-3d {
    margin: 6px 8px 0 !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ════════════════════════════════
   2.  MENTORSHIP PAGE
════════════════════════════════ */

@media (max-width: 768px) {
  /* Mentorship hero */
  .mentorship-hero,
  .mentor-page-hero {
    padding: 80px 18px 40px !important;
    text-align: center !important;
  }
  .mentorship-hero h1,
  .mentor-page-hero h1 {
    font-size: clamp(26px, 8vw, 48px) !important;
  }

  /* Pricing / Plan cards */
  .pricing-grid,
  .plans-grid,
  .mentorship-plans {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
  .plan-card,
  .pricing-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Payment tabs */
  .payment-tabs,
  .pay-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .pay-tab,
  .payment-tab {
    min-width: 120px !important;
    font-size: 11px !important;
  }

  /* QR code section */
  .qr-section,
  .payment-qr {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .qr-section img,
  .payment-qr img {
    max-width: 200px !important;
    width: 100% !important;
  }

  /* Mentorship benefits list */
  .mentorship-benefits,
  .benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  /* CTA buttons */
  .mentorship-cta,
  .mentor-cta {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }
  .mentorship-cta a,
  .mentor-cta a {
    width: 100% !important;
    max-width: 340px !important;
    text-align: center !important;
  }
}


/* ════════════════════════════════
   3.  ALPHA ACCESS PAGE
════════════════════════════════ */

@media (max-width: 768px) {
  .alpha-hero,
  .alpha-access-hero {
    padding: 80px 18px 40px !important;
    text-align: center !important;
  }
  .alpha-hero h1,
  .alpha-access-hero h1 {
    font-size: clamp(26px, 8vw, 44px) !important;
  }

  /* Access features grid */
  .alpha-features,
  .access-features {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  /* Countdown timer */
  .countdown-wrap,
  .alpha-countdown {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .countdown-unit {
    min-width: 64px !important;
  }
  .countdown-unit span:first-child {
    font-size: 28px !important;
  }

  /* Join form */
  .alpha-form,
  .access-form {
    padding: 24px 18px !important;
    width: calc(100vw - 36px) !important;
  }
  .alpha-form input,
  .access-form input {
    width: 100% !important;
  }
}


/* ════════════════════════════════
   4.  TRADE JOURNAL — journal.html
════════════════════════════════ */

@media (max-width: 1024px) {
  .journal-sidebar {
    width: 220px !important;
  }
  .journal-shell {
    padding: 32px 20px 100px !important;
  }
}

@media (max-width: 850px) {
  /* Journal layout already stacks — enhance it */
  .journal-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(7, 8, 17, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .journal-shell {
    padding: 24px 14px 100px !important;
  }

  /* Hero */
  .journal-hero h1 {
    font-size: clamp(28px, 7vw, 44px) !important;
  }

  /* Metric cards — 2 columns on tablet */
  .metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Account picker */
  .account-picker {
    padding: 14px !important;
    border-radius: 8px !important;
  }

  /* Dashboard panels — single column */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Trade table — horizontal scroll */
  .trade-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
  }
  table {
    min-width: 640px !important;
  }
  th, td {
    padding: 12px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  /* Trade tools */
  .trade-tools {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .trade-tools input {
    flex: 1 !important;
    min-width: 130px !important;
  }

  /* Calendar */
  .calendar-layout {
    grid-template-columns: 1fr !important;
    border-radius: 8px !important;
  }
  .calendar-aside {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  .calendar-day {
    min-height: 52px !important;
    padding: 6px !important;
  }

  /* Review grid */
  .review-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Mobile Nav Bar */
  .mobile-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: rgba(10, 12, 20, 0.97) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 200 !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 0 8px !important;
  }

  /* Trade Modal — full screen on mobile */
  .trade-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }
  .trade-modal form {
    padding: 20px 16px 100px !important;
    overflow-y: auto !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Performance strip */
  .performance-strip {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .performance-strip > div {
    flex: 1 1 calc(50% - 12px) !important;
    min-width: 100px !important;
  }

  /* Pro dashboard */
  .pro-dashboard {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 500px) {
  /* Metric cards — single column on phones */
  .metric-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .metric-card strong {
    font-size: 22px !important;
  }
  .metric-card {
    padding: 14px !important;
    min-height: 110px !important;
  }

  /* Pro dashboard */
  .pro-dashboard {
    grid-template-columns: 1fr !important;
  }

  /* Section blocks */
  .section-block {
    margin-top: 40px !important;
  }

  /* Calendar weekday labels */
  .calendar-weekdays span {
    font-size: 7px !important;
    padding: 8px 4px !important;
  }

  /* Trade tools full width */
  .trade-tools {
    width: 100% !important;
  }
  .trade-tools input,
  .trade-tools select {
    width: 100% !important;
  }

  /* Notes section */
  .notes-editor {
    padding: 16px !important;
  }
  #quickNote {
    min-height: 120px !important;
  }

  /* Account modal */
  .account-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
}


/* ════════════════════════════════
   5.  BOOK A CALL PAGE
════════════════════════════════ */

@media (max-width: 768px) {
  .book-slot-container,
  .call-booking-wrap {
    padding: 80px 18px 40px !important;
    max-width: 100% !important;
  }
  .book-slot-container h1,
  .call-booking-wrap h1 {
    font-size: clamp(24px, 7vw, 40px) !important;
  }
  .time-slots-grid,
  .slots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .time-slot-btn,
  .slot-btn {
    font-size: 11px !important;
    padding: 10px 8px !important;
  }
}

@media (max-width: 480px) {
  .time-slots-grid,
  .slots-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ════════════════════════════════
   6.  CONTACT PAGE
════════════════════════════════ */

@media (max-width: 768px) {
  .contact-wrap,
  .contact-container {
    padding: 80px 18px 40px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .contact-form {
    width: 100% !important;
  }
  .contact-form input,
  .contact-form textarea {
    width: 100% !important;
  }
}


/* ════════════════════════════════
   7.  SHARED NAV — ALL PAGES
════════════════════════════════ */

@media (max-width: 768px) {
  /* Generic topbar used on multiple pages */
  .topbar,
  header.site-header,
  nav.site-nav {
    padding: 10px 16px !important;
  }

  /* Mobile hamburger */
  .mobile-menu-panel,
  .mobile-nav-drawer {
    width: 100vw !important;
    max-width: 320px !important;
  }

  /* Headings scale */
  h1 { font-size: clamp(26px, 8vw, 52px) !important; }
  h2 { font-size: clamp(20px, 6vw, 36px) !important; }
  h3 { font-size: clamp(16px, 5vw, 24px) !important; }

  /* Sections padding */
  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Grids that use CSS grid — fallback to 1 column */
  [class*="-grid"]:not(.metric-grid):not(.pro-dashboard):not(.social-widget-links):not(.calendar-grid):not(.calendar-weekdays):not(.form-grid) {
    grid-template-columns: 1fr !important;
  }

  /* Buttons */
  .button,
  button[class*="cta"],
  a[class*="cta"] {
    min-height: 44px !important; /* touch target */
  }
}


/* ════════════════════════════════
   8.  UTILITY
════════════════════════════════ */

/* Prevent text overflow */
* {
  word-break: break-word;
  -webkit-tap-highlight-color: transparent;
}

/* Scrollable tables on mobile */
.trade-table-wrap,
[class*="table-wrap"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Touch targets */
@media (max-width: 768px) {
  a, button, [role="button"] {
    min-height: 40px;
  }
  select, input, textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    -webkit-appearance: none !important;
  }
}