/**
 * Global Market Reports — Mobile Stylesheet
 * Quiet Intelligence Design System
 *
 * Comprehensive mobile-first overrides.
 * Loaded after all other stylesheets.
 * Breakpoints: 900px (tablet), 640px (large phone), 480px (phone)
 */

/* ════════════════════════════════════════════════════════════════
   GLOBAL BODY & BASE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Prevent horizontal scroll globally */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Tighter container padding on mobile */
  .container,
  .container-narrow,
  .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Section spacing reduction */
  .py-2xl { padding-top: 60px !important; padding-bottom: 60px !important; }
  .py-xl  { padding-top: 44px !important; padding-bottom: 44px !important; }
  .py-lg  { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* Section headers */
  .section-header {
    margin-bottom: 32px;
  }
  .section-header h2 {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }
  .section-header p {
    font-size: 0.9rem;
  }

  /* Body text */
  h1 { font-size: clamp(1.8rem, 7vw, 3rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem); }
  h3 { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   NAVIGATION — Mobile-specific overrides
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Nav inner height tighter on mobile */
  .qi-nav__inner {
    height: 60px;
    padding: 0 16px;
    gap: 12px;
  }

  /* Globe smaller on mobile */
  .qi-nav__globe {
    width: 36px !important;
    height: 36px !important;
  }

  /* Logo text smaller */
  .qi-nav__logo-text {
    font-size: 0.88rem;
  }

  /* Auth buttons hidden on mobile (in drawer) */
  .qi-nav__auth {
    display: none !important;
  }

  /* Mobile drawer — solid opaque overlay below nav */
  .qi-nav__mobile {
    top: 60px; /* Match reduced nav height */
    max-height: calc(100svh - 60px);
    background: #fafaf8;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  }

  /* Mobile drawer links — comfortable touch targets */
  .qi-nav__mobile-link {
    font-size: 0.95rem;
    padding: 14px 8px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .qi-nav__mobile-sublink {
    font-size: 0.88rem;
    padding: 12px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--color-ink-muted);
  }

  .qi-nav__mobile-sublink--accent {
    color: var(--color-accent);
    font-weight: 600;
  }

  /* Mobile drawer actions */
  .qi-nav__mobile-actions {
    padding-top: 16px;
    gap: 10px;
  }

  .qi-nav__mobile-actions .qi-btn {
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    min-height: 48px;
    font-size: 0.9rem;
  }

  /* AI dot in mobile nav */
  .qi-nav__ai-dot {
    width: 7px;
    height: 7px;
    background: var(--color-accent);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    animation: qi-accent-breathe 3s ease-in-out infinite;
  }
}

/* ════════════════════════════════════════════════════════════════
   HERO — Ensure no content bleeds above/outside
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .hero {
    /* Clip animation artifacts — prevent bleed above/below */
    overflow: clip;
    /* Body top offset for fixed nav */
    margin-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    min-height: calc(100svh - 60px);
    justify-content: center;
    /* Clear top padding so nav (60px) + some breathing room */
    padding-top: 80px;
    padding-bottom: 48px;
  }

  .hero::before {
    /* Simpler gradient on mobile for performance */
    background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(200,164,94,0.06), transparent);
  }

  .hero-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    margin-top: 20px;
  }

  .hero h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .hero .hero-sub {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 100%;
  }

  .hero-search {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

  .hero-search input {
    font-size: 0.88rem;
    padding: 14px 16px;
    padding-right: 95px;
    border-radius: 10px;
  }

  .hero-search button {
    padding: 10px 16px;
    font-size: 0.78rem;
    border-radius: 7px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: 52px;
    padding-bottom: 40px;
    min-height: auto;
  }

  .hero h1 {
    font-size: clamp(1.5rem, 8.5vw, 2rem);
  }

  .hero-hint {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   TRUST BAR — 2×2 grid on mobile
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .trust-bar { padding: 32px 0; }
  .trust-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    padding: 0 20px;
    justify-items: center;
  }
  .trust-stat .number { font-size: 1.75rem; }
  .trust-stat .label  { font-size: 0.65rem; }
}

/* ════════════════════════════════════════════════════════════════
   INDUSTRY GRID — Mobile layout
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .industry-cell .ind-icon,
  .industry-cell .ind-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 640px) {
  .industry-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px;
  }

  .industry-cell {
    padding: 20px 12px !important;
  }

  .industry-cell .ind-icon,
  .industry-cell .ind-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .industry-cell h4 {
    font-size: 0.78rem !important;
    line-height: 1.3;
  }

  .industry-cell .ind-count {
    font-size: 0.68rem !important;
    letter-spacing: 0.03em;
  }

  .ind-niches {
    gap: 3px;
  }

  .ind-niche {
    font-size: 0.52rem;
    padding: 1px 5px;
  }
}

/* ════════════════════════════════════════════════════════════════
   DATA CARDS — Single column
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .data-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .data-card {
    padding: 20px;
  }

  .data-card .card-metric {
    font-size: 1.6rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   AI SECTION — Stack on mobile
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .ai-layout {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .ai-content h2 {
    font-size: clamp(1.4rem, 5vw, 2rem);
  }

  .ai-demo {
    order: -1; /* Show demo mockup above text on mobile */
  }
}

/* ════════════════════════════════════════════════════════════════
   CTA SECTION — Mobile
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .final-cta {
    padding: 48px 0;
  }

  .final-cta h2 {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 20px;
  }

  .cta-buttons a,
  .cta-buttons button,
  .cta-buttons .btn {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    padding: 14px 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   REPORT ROWS — Mobile
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .report-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 16px;
  }

  .report-metric { text-align: left; }
  .report-arrow  { display: none; }

  .report-title {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .report-price {
    color: var(--color-accent);
  }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — Mobile
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .qi-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .qi-footer__newsletter {
    flex-direction: column;
    gap: 10px;
  }

  .qi-footer__newsletter input {
    width: 100%;
  }

  .qi-footer__newsletter button {
    width: 100%;
    text-align: center;
  }

  .qi-footer__bottom-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .qi-footer__social {
    justify-content: center;
  }

  .qi-footer__logo {
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   CHATBOT — Mobile positioning
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #gmr-chatbot {
    bottom: 20px;
    right: 16px;
  }

  .chatbot-toggle {
    width: 60px;
    height: 60px;
  }
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — Minimum touch target size (44×44px per WCAG)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  button,
  .btn,
  a.btn,
  [role="button"] {
    min-height: 44px;
  }

  /* Prevent tiny text on mobile */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
  }
}

/* ════════════════════════════════════════════════════════════════
   QI GRID UTILITIES — Mobile collapse
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .qi-grid-3,
  .qi-grid-4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .qi-grid-2,
  .qi-grid-3,
  .qi-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MISCELLANEOUS POLISH
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Remove hover effects on touch devices */
  @media (hover: none) {
    .industry-cell:hover .ind-icon {
      transform: none;
    }

    .data-card:hover {
      border-color: var(--color-border);
      box-shadow: none;
    }
  }

  /* Improve text readability on mobile */
  p, .hero-sub, .ai-feature span {
    -webkit-text-size-adjust: 100%;
  }
}