/* ═══════════════════════════════════════════════════════════
   MANYU LOGICS — Mobile Hardening
   /var/www/manyulogics/css/mobile.css
   Loaded LAST so it wins the cascade. Fixes horizontal overflow
   and ensures every layout collapses cleanly on small screens.
═══════════════════════════════════════════════════════════ */

/* ── Hard guard against horizontal scroll ─────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* Any decorative glow / floating element must never create scroll */
.hero-bg, .pin-hero-bg, .cta-bg, .dpdp-bg,
.hero-glow, .pin-glow, .cta-glow {
  max-width: 100vw;
  overflow: hidden;
  pointer-events: none;
}

/* Media elements never exceed their container */
img, svg, iframe, video, table, pre {
  max-width: 100%;
}

/* ── Tablet and below (≤ 980px) ───────────────────────────── */
@media (max-width: 980px) {

  /* Diagram packets can wrap instead of forcing width */
  .dg-pkt { white-space: normal !important; word-break: break-word; }

  /* Trust band: 6 cols → 2 cols (was 3, too tight on phones) */
  .tb-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Glows constrained so they don't push the viewport */
  .hero-glow.saffron { width: 360px; height: 360px; right: -80px; top: -60px; }
  .hero-glow.green   { width: 320px; height: 320px; left: -60px; }
  .pin-glow.saf      { width: 360px; height: 360px; right: -70px; }
  .pin-glow.grn      { width: 320px; height: 320px; left: -60px; }
  .cta-glow.saf      { width: 300px; height: 300px; right: -50px; }
  .cta-glow.grn      { width: 280px; height: 280px; left: -50px; }
  .dpdp-bg::before   { width: 300px; height: 300px; right: -40px; }
  .dpdp-bg::after    { width: 280px; height: 280px; left: -40px; }
}

/* ── Phone (≤ 640px) ──────────────────────────────────────── */
@media (max-width: 640px) {

  /* Headings: make sure nothing forces a wide line */
  .hero-h1, .pin-h1, .blog-h1,
  .section-head h2, .page-header h1, .dpdp-head h2 {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }


  /* Paragraph text never exceeds viewport */
  .hero-sub, .pin-sub, .section-head p, .page-header-sub,
  .embed-left p, .cta-left p, .blog-deck {
    max-width: 100% !important;
  }


  /* ── Hero chat mockup (hv) — constrain to viewport ── */
  .hv { max-width: 100% !important; width: 100% !important; }
  .hv-window { max-width: 100% !important; overflow: hidden !important; }
  .hv-chrome { flex-wrap: nowrap; overflow: hidden; }
  .hv-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
  .hv-shield { flex-shrink: 0; }
  .hv-intercept { 
    white-space: normal !important; 
    word-break: break-word;
    text-align: center;
    font-size: 9px !important;
    padding: 7px 10px !important;
    max-width: 100%;
  }
  .hv-bubble { max-width: 100% !important; word-break: break-word; }
  .hv-txt { word-break: break-word; overflow-wrap: anywhere; }
  .hv-body { padding: 12px !important; gap: 10px !important; }

  /* ── Pinaakini hero chat (pin) — same treatment ── */
  .pin-chat-wrap { max-width: 100% !important; overflow: hidden; }
  .pin-chat { max-width: 100% !important; overflow: hidden !important; }
  .chat-url-bar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
  .chat-shield-badge { flex-shrink: 0; }
  .pm-intercept {
    white-space: normal !important;
    word-break: break-word;
    text-align: center;
    font-size: 9px !important;
    padding: 7px 10px !important;
    max-width: 100%;
  }
  .pm-txt { word-break: break-word; overflow-wrap: anywhere; }
  .pm-pii { word-break: break-all; }

  /* ── hero-right: don't let the visual escape the column ── */
  .hero-right, .pin-right { 
    max-width: 100% !important; 
    overflow: hidden !important;
    width: 100%;
  }

  /* Hero spacing tightens */
  .hero, .pin-hero { padding-left: 18px; padding-right: 18px; }
  .hero-inner, .pin-hero-inner { gap: 36px; }

  /* Hero trust row: stack the 3 metrics, drop the dividers */
  .hero-trust { gap: 16px; }
  .ht-sep { display: none; }
  .ht-item { flex: 1 1 40%; }

  /* Chat mockups: shrink chrome text so the URL bar fits */
  .hv-chrome, .pin-chrome { font-size: 10px; padding: 10px 12px; }
  .hv-url, .chat-url-bar { font-size: 10px; }
  .hv-body, .pin-body { padding: 14px; gap: 10px; }

  /* Trust band → single column */
  .tb-grid { grid-template-columns: 1fr !important; }
  .tb-inner { gap: 18px; }

  /* All multi-column product/sector/pillar grids → single column */
  .product-teaser-grid,
  .sector-teaser-grid,
  .ptier-cards, .ptier-cards.three,
  .pricing-grid,
  .pillar-grid,
  .protect-grid,
  .pin-steps,
  .how-steps,
  .case-grid,
  .tier-grid,
  .res-grid,
  .founder-grid,
  .dpdp-grid {
    grid-template-columns: 1fr !important;
  }

  /* Diagram: vertical stack, hide the dashed connectors */
  .diagram { grid-template-columns: 1fr !important; gap: 14px; padding: 22px 18px; }
  .dg-flow { padding: 6px 0; transform: rotate(90deg); height: 24px; }
  .dg-flow::before, .dg-flow::after { display: none; }

  /* Comparison: stack the two columns, fix the VS divider */
  .cmp-grid { grid-template-columns: 1fr !important; }
  .cmp-col.bad  { border-radius: 18px 18px 0 0; }
  .cmp-col.good { border-radius: 0 0 18px 18px; border-left: 1.5px solid rgba(19,136,8,.22); border-top: none; }
  .cmp-vs { writing-mode: horizontal-tb; padding: 8px; min-width: 0; width: 100%; }

  /* DPDP solution box + CTA strip stack */
  .dpdp-sol { grid-template-columns: 1fr !important; gap: 20px; }
  .dpdp-strip-inner { grid-template-columns: 1fr !important; gap: 24px; }
  .dpdp-amt { font-size: 28px; }

  /* Contact form + CTA stack */
  .cta-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .cf-row { grid-template-columns: 1fr !important; }

  /* Embed widget iframe: full width, shorter */
  .embed-inner { grid-template-columns: 1fr !important; gap: 28px; }
  .embed-frame-wrap { height: 460px; }

  /* Pinaakini trust strip: stack the 3 claims */
  .pin-strip-inner { flex-direction: column; gap: 12px; align-items: flex-start; }
  .psi-sep { display: none; }

  /* Blog: single column, sidebar drops below */
  .blog-body-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .blog-sidebar { position: static !important; }
  .bfs-grid { grid-template-columns: 1fr !important; }
  .blog-hero { padding: 100px 18px 44px; }
  .blog-body { padding: 36px 18px 64px; }
  .prose p, .prose li { font-size: 16px; }
  .penalty-table { font-size: 13px; }
  .penalty-table th, .penalty-table td { padding: 10px 12px; }

  /* Footer → single column */
  .footer-top { grid-template-columns: 1fr !important; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Sectors: image on top, body below (kill the RTL flip) */
  .sector, .sector:nth-child(even) { grid-template-columns: 1fr !important; direction: ltr !important; }
  .sector-art { min-height: 180px; }
  .sector-body { padding: 24px 20px; }
  .sector-stats { flex-wrap: wrap; gap: 14px; }

  /* Buttons: full width so they don't overflow in tight rows */
  .hero-cta, .pin-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary, .hero-cta .btn-outline,
  .pin-cta .btn-primary, .pin-cta .btn-outline {
    width: 100%; justify-content: center;
  }

  /* Nav: make sure logo + CTA fit; shrink wordmark */
  .nav { padding: 0 14px; gap: 10px; }
  .nav-wordmark { font-size: 15px; }
  .nav-wordmark .sub { font-size: 7.5px; }
  .nav-product-name { font-size: 13px; padding-left: 10px; }
  .btn-cta { padding: 8px 12px; font-size: 12px; }

  /* Floating decorative tags stay hidden (already hidden ≤980, reinforce) */
  .hv-tag, .ftp { display: none !important; }
}

/* ── Very small phones (≤ 380px) ──────────────────────────── */
@media (max-width: 380px) {
  .hero-h1 { font-size: 30px; }
  .pin-h1  { font-size: 30px; }
  .section { padding: 48px 16px; }
  .nav-wordmark .sub { display: none; }       /* save vertical room */
  .embed-frame-wrap { height: 420px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAVIGATION (hamburger menu)
═══════════════════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none;
  cursor: pointer; padding: 10px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block; height: 2px; width: 100%;
  background: var(--navy); border-radius: 2px;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(255,253,249,.99);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(26,46,82,.16);
  padding: 16px;
  z-index: 1090;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.mobile-menu.active { display: flex; }

.mm-link {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 500;
  color: var(--navy);
  border-radius: 12px;
  min-height: 44px;
  display: flex; align-items: center;
}
.mm-link:active, .mm-link:hover { background: rgba(26,46,82,.06); }
.mm-sub {
  font-size: 14px;
  color: var(--muted);
  padding-left: 32px;
  min-height: 40px;
}
.mm-cta {
  background: var(--saffron);
  color: #fff !important;
  justify-content: center;
  margin-top: 8px;
  font-weight: 600;
}
.mm-cta:active, .mm-cta:hover { background: var(--saffron-d); }
.mm-cta:first-of-type { margin-top: 12px; }

.mobile-menu-backdrop {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: rgba(15,26,46,.4);
  z-index: 1080;
}
.mobile-menu-backdrop.active { display: block; }

@media (max-width: 980px) {
  .nav-hamburger { display: flex; }
  .nav-links { display: none !important; }
  .nav-right { display: none !important; }
}
@media (min-width: 981px) {
  .nav-hamburger, .mobile-menu, .mobile-menu-backdrop { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   iOS INPUT ZOOM FIX — inputs must be ≥16px to prevent
   Safari auto-zooming on focus
═══════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="tel"],
textarea, select {
  font-size: 16px !important;
}

/* ═══════════════════════════════════════════════════════════
   TOUCH TARGETS — 44px minimum (Apple HIG / Material)
═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .btn-primary, .btn-cta, .btn-ghost, .btn-outline, .btn-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE TABLES — horizontal scroll within the table only,
   never the page
═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .penalty-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── All viewports ≤ 980px: constrain the HV visual container ── */
@media (max-width: 980px) {
  .hero-right, .pin-right { 
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .hv { 
    max-width: 100% !important; 
    width: 100% !important;
  }
  .hv-window { overflow: hidden !important; }
  .pin-chat-wrap { 
    max-width: 100% !important;
    overflow: hidden;
  }
  .pin-chat { overflow: hidden !important; }
}

/* ═══════════════════════════════════════════════════════════
   SURGICAL OVERFLOW FIXES (measured at 390px)
   1. hero-glow.saffron overflows +80px (right=-120px on 390px viewport)
   2. .hv-int text overflows +10px within chrome URL bar
═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* Shrink and reposition the saffron glow so it stays inside overflow:hidden */
  .hero-glow.saffron {
    width: 280px !important;
    height: 280px !important;
    right: -40px !important;
    top: -40px !important;
  }
  .hero-glow.green {
    width: 240px !important;
    height: 240px !important;
    left: -40px !important;
  }
  /* Same for pinaakini hero glows */
  .pin-glow.saf {
    width: 280px !important;
    height: 280px !important;
    right: -40px !important;
  }
  .pin-glow.grn {
    width: 240px !important;
    height: 240px !important;
    left: -40px !important;
  }
  /* Clip the "intercepted by Pinaakini" text within the chrome URL bar */
  .hv-url {
    overflow: hidden !important;
    max-width: 140px !important;
    min-width: 0 !important;
  }
  .hv-int {
    display: none !important;
  }
  /* Also hide the intercepted text in the pinaakini chrome bar */
  .chat-url-bar .hv-int,
  .pin-chrome .hv-int {
    display: none !important;
  }
  /* Ensure hero section clips ALL decorative overflow — contain:paint
     is the strongest cross-browser (incl Safari iOS) clip guarantee */
  .hero {
    overflow: hidden !important;
    contain: paint;
    position: relative;
  }
  .pin-hero {
    overflow: hidden !important;
    contain: paint;
    position: relative;
  }
  /* Belt-and-braces: zero out glow dimensions so they can't push layout */
  .hero-bg, .pin-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    contain: strict !important;
  }
}