/*
 * Manta Solutions & Integration — Mobile & Tablet Stylesheet
 * All rules are wrapped in @media queries.
 * Desktop layout is completely unaffected above each breakpoint.
 */

/* ─────────────────────────────────────────
   TABLET  (max-width: 860px)
   Covers: iPads in portrait, most tablets
───────────────────────────────────────── */
@media screen and (max-width: 860px) {

  /* Nav — hide text menu, keep logo + CTA */
  .nav-menu { display: none; }
  nav { padding: 0 24px; }
  .nav-actions { gap: 8px; }
  .btn-nav-ghost { padding: 7px 12px; font-size: 13px; }
  .btn-nav-cta   { padding: 7px 14px; font-size: 13px; }
  .util-bar { padding: 0 24px; }

  /* Services — collapse sticky layout */
  .hs-services-inner { grid-template-columns: 1fr; gap: 0; padding: 0 24px; }
  .hs-services-left  { position: static; padding: 48px 0 16px; }
  .hs-services-right { grid-template-columns: 1fr 1fr; padding: 0 0 48px; gap: 14px; }

  /* Feature rows */
  .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row.reverse { direction: ltr; }

  /* Stats */
  .stats-inner { grid-template-columns: repeat(2, 1fr); }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Platform slider */
  .pslide { grid-template-columns: 1fr; padding: 0 24px; gap: 28px; }
  .pslide-visual { display: none; }

  /* Spotlight */
  .spotlight-top { grid-template-columns: 1fr; gap: 20px; }

  /* Trends */
  .trends-header { grid-template-columns: 1fr; padding: 0 24px; gap: 16px; }

  /* Contact page */
  .contact-main { grid-template-columns: 1fr; padding: 48px 24px 64px; gap: 32px; }

  /* About page */
  .about-content { grid-template-columns: 1fr; padding: 48px 24px 72px; gap: 40px; }

  /* Footer */
  .footer-top   { grid-template-columns: 1fr 1fr !important; padding: 40px 24px 32px !important; gap: 32px !important; }
  .footer-inner { grid-template-columns: 1fr 1fr !important; padding: 40px 24px 32px !important; gap: 32px !important; }

  /* Section padding */
  section        { padding: 64px 24px; }
  .logo-bar      { padding: 32px 24px 48px; }
  .stats-strip   { padding: 56px 24px; }
  .cta-section   { padding: 72px 24px; }
  .contact-strip { padding: 48px 24px; }
  .mission-strip { padding: 48px 24px; }
  .policy-content { padding: 48px 24px 72px; }
  .policy-hero   { padding: 56px 24px 48px; }
}

/* ─────────────────────────────────────────
   MOBILE  (max-width: 560px)
   Covers: iPhones, Android phones
───────────────────────────────────────── */
@media screen and (max-width: 560px) {

  /* Nav */
  nav { padding: 0 16px; height: 60px; }
  .nav-logo { font-size: 1.25rem; margin-right: 16px; }
  .util-bar { padding: 0 16px; }

  /* Hero */
  .hero { padding: 40px 16px 0; }
  .hero h1 { white-space: normal; font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .hero p  { font-size: 0.95rem; margin-top: 28px; }
  .hero-btns { flex-direction: column; align-items: center; gap: 10px; }
  .hero-btns a { width: 100%; max-width: 300px; text-align: center; }
  .hero-img-wrap { margin: 0 -16px; }
  .dash-sidebar { display: none; }
  .hero-dashboard { grid-template-columns: 1fr; }
  .dash-cards { grid-template-columns: repeat(2, 1fr); }

  /* Sections */
  section        { padding: 48px 16px; }
  .logo-bar      { padding: 28px 16px 40px; }
  .stats-strip   { padding: 40px 16px; }
  .cta-section   { padding: 56px 16px; }
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns a { width: 100%; max-width: 300px; text-align: center; }

  /* Services — single column on phones */
  .hs-services-inner { padding: 0 16px; }
  .hs-services-right { grid-template-columns: 1fr; gap: 12px; }

  /* Stats */
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: 2.2rem; }
  .stat-block  { padding: 16px 8px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Spotlight */
  .spotlight-card-wrap { padding: 0 8px; }
  .sp-card { min-width: 240px; flex: 0 0 240px; }

  /* Trends */
  .trends-stage  { padding: 0 8px; }
  .trends-header { padding: 0 16px; }

  /* Contact page */
  .contact-hero { padding: 40px 16px 36px; }
  .contact-hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .contact-main { padding: 28px 16px 48px; }
  .contact-form-wrap { padding: 24px 16px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-strip { padding: 36px 16px; }
  .strip-actions { flex-direction: column; align-items: center; }
  .strip-actions a { width: 100%; max-width: 300px; text-align: center; }

  /* About page */
  .about-hero { padding: 40px 16px 36px; }
  .about-hero h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .mission-strip { padding: 32px 16px; }
  .about-content { padding: 32px 16px 48px; }

  /* Policy page */
  .policy-hero { padding: 40px 16px 36px; }
  .policy-hero h1 { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .policy-content { padding: 32px 16px 48px; }

  /* Footer — single column */
  .footer-top   { grid-template-columns: 1fr !important; padding: 32px 16px 24px !important; gap: 28px !important; }
  .footer-inner { grid-template-columns: 1fr !important; padding: 32px 16px 24px !important; gap: 28px !important; }
  .footer-bottom { padding: 14px 16px !important; flex-direction: column; align-items: flex-start; gap: 8px; }
  /* ── Trends carousel — full-width swipeable on mobile ── */
  .trends-section { padding: 48px 0 36px; }
  .trends-stage { display: block; padding: 0; }
  .tr-arrow { display: none; }
  .trends-viewport {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
  }
  .trends-viewport::-webkit-scrollbar { display: none; }
  .trends-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    padding: 16px 16px 20px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
    width: max-content !important;
    will-change: auto !important;
  }
  .tr-card {
    flex: 0 0 calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    scroll-snap-align: start;
    cursor: default;
    box-sizing: border-box;
  }
  .tr-card.active {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 8px 24px rgba(44,24,16,0.12);
  }
  .tr-card-inner { padding: 20px; }
  .tr-dots { margin-top: 16px; }

  /* Hide reCAPTCHA badge */
  .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }


}