/* ════════════════════════════════════════════════════════════════
   SEOBLOGY — hub.css
   Shared mobile-optimisation stylesheet for AI-systems showcase pages
   (home, london-seo, pakistan-seo, + future hub pages).

   HOW IT WORKS:
   These pages use inline style="grid-template-columns:..." everywhere.
   This file targets those inline patterns via [style*=...] attribute
   selectors so ONE file fixes every page. Link it AFTER styles.css
   and after each page's inline <style> block so it wins the cascade.

   USAGE:  <link rel="stylesheet" href="/css/hub.css">
           (place it as the LAST stylesheet in <head>)
══════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. TABLET — max 1024px
   Collapse the big 2-col system cards + fraud grids early so they
   don't squash on iPads.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* AI system cards (1fr 1.1fr split) */
  [style*="grid-template-columns:1fr 1.1fr"]:not([style*="80px"]) {
    grid-template-columns: 1fr !important;
  }

  /* London fraud grid + WordPress featured card (1fr 1fr) — keep 2col
     only where it still reads; large content blocks go single */
  .lseo-fraud-grid { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* System card inner divider: vertical border → horizontal */
  [style*="border-right:1px solid rgba(13,118,118,0.15)"],
  [style*="border-right:1px solid rgba(249,171,0,0.1)"],
  [style*="border-right:1px solid rgba(29,191,115,0.12)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(13,118,118,0.15) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   2. MOBILE — max 768px  (the main fix)
   Every multi-column inline grid → single or 2-col.
   Plus readability: bump small font-sizes up.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 2a. GRIDS ─────────────────────────────────────────────── */

  /* Hero 1fr 430px → stack */
  [style*="grid-template-columns:1fr 430px"] { grid-template-columns: 1fr !important; }

  /* System cards 1fr 1.1fr → stack (exclude comparison table) */
  [style*="grid-template-columns:1fr 1.1fr"]:not([style*="80px"]) {
    grid-template-columns: 1fr !important;
  }

  /* Comparison table 4-col → stack to single (label + both sides flow) */
  [style*="grid-template-columns:1fr 1.1fr 80px 1.1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(13,118,118,0.12) !important;
  }
  /* Hide the empty spacer column + center "feature" chip on its own row */
  [style*="grid-template-columns:1fr 1.1fr 80px 1.1fr"] > div:nth-child(2):empty {
    display: none !important;
  }
  /* WP column right-align fix on mobile (becomes left) */
  [style*="grid-template-columns:1fr 1.1fr 80px 1.1fr"] > div:last-child {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* 3-col grids → single (mode cards, area cards, service cards) */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* 4-col grids → 2-col (stats, fraud stats) */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* 6-col pills → 3-col (bottom feature pills, lang pills) */
  [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }

  /* Generic 2-col → stays 2 (metrics blocks), inner content readable */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

  /* ── 2b. BORDERS: right → bottom on stacked cards ──────────── */
  [style*="border-right:1px solid rgba(13,118,118,0.15)"],
  [style*="border-right:1px solid rgba(249,171,0,0.1)"],
  [style*="border-right:1px solid rgba(29,191,115,0.12)"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(13,118,118,0.15) !important;
  }

  /* ── 2c. READABILITY: bump small fonts ─────────────────────── */

  /* Body / paragraph text inside system cards (was 13px) */
  [style*="font-size:13px"]  { font-size: 14.5px !important; }
  /* Problem/solution labels + tiny meta (was 11px / 12px) */
  [style*="font-size:11px"]  { font-size: 12px !important; }
  [style*="font-size:12px"]  { font-size: 13px !important; }
  /* Feature tag chips (was 11px) — keep tappable */
  [style*="font-size:11px"][style*="padding:3px 10px"],
  [style*="font-size:11px"][style*="padding:4px 10px"] {
    font-size: 12px !important; padding: 5px 12px !important;
  }
  /* Stat numbers stay punchy, don't shrink them */

  /* London mode cards: pills + body text */
  .lseo-mode-p   { font-size: 15px !important; line-height: 1.7 !important; }
  .lseo-mode-h   { font-size: 18px !important; }
  .lseo-tag, .lseo-tag-gold { font-size: 12.5px !important; padding: 5px 13px !important; }
  .lseo-fraud-feat p { font-size: 13.5px !important; }
  .lseo-fraud-feat h4 { font-size: 14.5px !important; }

  /* Comparison table cell text up to 14px */
  [style*="grid-template-columns:1fr 1.1fr 80px 1.1fr"] span { font-size: 14px !important; }

  /* ── 2d. SPACING: tighten section padding on small screens ── */
  .lseo-section { padding: 50px 0 !important; }
}


/* ════════════════════════════════════════════════════════════════
   3. LONDON-SPECIFIC — these only exist on london-seo
   (.ab-mode-card 3-col grid, WordPress featured 1fr 1fr)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Mode-card 3-up grid → single */
  [style*="grid-template-columns:repeat(3,1fr)"].ab-mode-grid,
  div[style*="display:grid"][style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  /* WordPress featured card 1fr 1fr → stack */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:36px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* London mode cards (100px 1fr) → single col, icon row horizontal */
  .lseo-mode-card { grid-template-columns: 1fr !important; }
  .lseo-mode-num-col { display: flex !important; align-items: center !important; gap: 16px !important; }

  /* Click-fraud flow steps: allow horizontal scroll instead of squash */
  [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
}


/* ════════════════════════════════════════════════════════════════
   4. PAKISTAN-SPECIFIC — 28-area cards (3-col → 1-col)
   Already caught by repeat(3,1fr) rule above, but the area pills
   inside need to wrap cleanly + stay tappable.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lseo-city-pill { font-size: 13px !important; padding: 7px 14px !important; }
}


/* ════════════════════════════════════════════════════════════════
   5. SMALL MOBILE — max 480px
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* 6-col pills → 2-col */
  [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

  /* Generic 2-col metrics → single on tiny screens */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* 4-col fraud stats → 2-col (already) but ensure numbers fit */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Comparison table: hide the centre "feature" chip column entirely
     on tiniest screens to avoid clutter; keep Our System vs WP rows  */
  [style*="grid-template-columns:1fr 1.1fr 80px 1.1fr"] > div:nth-child(3) {
    display: none !important;
  }

  /* Chips/pills full-width readable */
  .lseo-chip { white-space: normal !important; }
}


/* ════════════════════════════════════════════════════════════════
   6. OVERFLOW GUARD + SYSTEM-CARD FLOW DIAGRAM FIX
   The #1 cause of "card pushed to the right" on mobile is an inner
   flex row that does NOT wrap (e.g. System 6's 6-step fraud flow:
   Click → Fingerprint → AI → Block → Real Click). On a narrow
   screen those 6 boxes refuse to shrink and overflow the card,
   dragging the whole card sideways. These rules force every inner
   row to wrap or scroll, and clamp the page so nothing escapes.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hard stop: nothing may exceed the viewport width */
  .lseo-section,
  .lseo-container { overflow-x: hidden !important; max-width: 100% !important; }

  /* Every system card + its two inner panels must respect the screen */
  .lseo-section [style*="border-radius:20px"][style*="overflow:hidden"] {
    max-width: 100% !important;
  }
  .lseo-section [style*="display:grid"][style*="1fr 1.1fr"] > div {
    min-width: 0 !important;   /* lets grid children actually shrink */
    max-width: 100% !important;
  }

  /* ── Fraud-flow diagram: boxes in a flex row that won't shrink ──
     Covers BOTH variants:
       home     → display:flex; align-items:center; gap:0
       london   → display:flex; align-items:center; gap:0; overflow-x:auto
     Stack them vertically with downward arrows instead of sideways. */
  .lseo-section [style*="display:flex"][style*="align-items:center"][style*="gap:0"] {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    overflow-x: visible !important;   /* kill the london scroll variant */
  }
  /* The arrow separators (→) rotate to point down when stacked.
     Home uses padding:0 6px; London uses padding:0 6px too. */
  .lseo-section [style*="display:flex"][style*="align-items:center"][style*="gap:0"] > div[style*="padding:0 6px"] {
    transform: rotate(90deg) !important;
    padding: 2px 0 !important;
    text-align: center !important;
  }
  /* Each flow box goes full width — neutralise flex:1 AND min-width:110px
     (london boxes have min-width that blocks shrinking) */
  .lseo-section [style*="display:flex"][style*="align-items:center"][style*="gap:0"] > div[style*="flex:1"],
  .lseo-section [style*="display:flex"][style*="align-items:center"][style*="gap:0"] > div[style*="min-width:110px"],
  .lseo-section [style*="display:flex"][style*="align-items:center"][style*="gap:0"] > div[style*="flex-shrink:0"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* ── Any inner FLEX row that could overflow → allow wrapping ── */
  .lseo-section [style*="display:flex"]:not([style*="flex-direction:column"]) {
    flex-wrap: wrap !important;
  }

  /* ── Tag/pill rows: never let a long pill force horizontal scroll ── */
  .lseo-section span[style*="border-radius:4px"],
  .lseo-section span[style*="border-radius:50px"] {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Inner mini-grids inside the right panel (stats 1fr 1fr, etc.) keep
     2-col but never overflow */
  .lseo-section [style*="display:grid"] { max-width: 100% !important; }
  .lseo-section [style*="display:grid"] > * { min-width: 0 !important; }
}

/* Small phones: even the 2-col inner stat grids go single so the big
   numbers (32px) never collide */
@media (max-width: 480px) {
  .lseo-section [style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
