/* TapScan responsive overrides — global mobile + tablet breakpoints.
 * Pages load this once; rules apply by class and by attribute-selector
 * fallbacks so we don't have to touch every inline-styled component. */

/* Hover vs tap hint text — shown based on primary pointer capability */
@media (hover: hover) { .ts-hint-tap  { display: none; } }
@media (hover: none)  { .ts-hint-hover { display: none; } }

svg { max-width: 100%; }

/* Mobile overflow guard — kill any stray horizontal scroll (long words,
 * text-shadows, oversized tooltips/visuals) WITHOUT establishing a scroll
 * container, so `position: sticky` (case-studies tabs) keeps working.
 * `clip` does not create a scroll port the way `hidden` does. */
@media (max-width: 960px) {
  html, body { overflow-x: clip; }
  /* Let long unbreakable strings (URLs, IDs) wrap instead of pushing width */
  p, h1, h2, h3, h4, li, a, span { overflow-wrap: break-word; }
}

/* ────────────────────────────────────────────────────────────
 * TABLET (≤ 960px)
 * Collapse multi-column grids, tighten section padding.
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Named grids inside the home + about sections */
  .ts-feature-grid,
  .ts-tier-grid,
  .ts-steps-grid,
  .ts-values-grid,
  .ts-footer-grid     { grid-template-columns: 1fr !important; }

  .ts-steps-grid .ts-step {
    border-left: none !important;
    border-top: 1px solid #DDDFEE;
    padding: 32px 0 0 !important;
  }
  .ts-steps-grid .ts-step:first-child {
    border-top: none;
    padding-top: 0 !important;
  }

  /* Case-studies grid: drop from 2 → 1 col here, full-width */
  .ts-case-grid { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Nav padding shrinks a notch before the hamburger kicks in */
  nav.ts-nav { padding: 18px 28px !important; }

  /* Footer columns stack */
  .ts-footer-links { gap: 32px !important; flex-direction: row !important; flex-wrap: wrap !important; }

  /* Section padding catch-all: any inline 56px/96px/64px vertical
     padding pair tightens horizontally. */
  section[style*="padding: 56px 64px"],
  section[style*="padding: 96px 64px"],
  section[style*="padding: 48px 64px"],
  div[style*="padding: 56px 64px"],
  div[style*="padding: 96px 64px"],
  div[style*="padding: 48px 64px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Case-study detail hero – pull title gradient closer to the edge */
  div[style*="padding: 32px 64px 0"],
  div[style*="padding: 32px 64px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Footer CTA buttons – stop them from over-stretching at tablet width */
  .ts-cta-btn { min-width: 220px !important; }

  /* HOMEPAGE HERO — the 3-col (text | divider | visual) grid is too
     cramped once the tablet loses ~400px of width; stack it like mobile
     but skip the aggressive mobile-only font shrink below. */
  section.ts-hero { min-height: auto !important; overflow: visible !important; }
  .ts-hero-row {
    gap: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 32px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .ts-hero-left { display: contents !important; }
  .ts-hero-text { order: 1; }
  .ts-hero-right { order: 2; min-height: 320px !important; margin-top: 28px !important; }
  .ts-hero-ctas { order: 3; margin-top: 24px !important; }
  .ts-hero-divider { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
 * MOBILE (≤ 720px)
 * Hide desktop nav, swap grids to 1 column, full-width buttons,
 * smaller hero padding.
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* Hamburger swap — 880px covers portrait tablets (768–834px), where the
     full row (logo + 3 links + Client Login + 2 CTA buttons) is too tight. */
  .ts-nav-desktop    { display: none !important; }
  .ts-nav-mobile-btn { display: block !important; }
}
@media (max-width: 720px) {
  nav.ts-nav         { padding: 14px 20px !important; }

  /* Two-up flips to one */
  .ts-tier-grid { grid-template-columns: 1fr !important; }
  .ts-footer-links { gap: 20px !important; }

  /* Hero headlines allowed to wrap */
  .ts-hero-h1                                    { white-space: normal !important; }
  .ts-nav h1, [class*="ts-hero"] h1              { white-space: normal !important; }

  /* Section padding catch-all */
  section[style*="padding: 56px 64px"],
  section[style*="padding: 96px 64px"],
  section[style*="padding: 48px 64px"],
  div[style*="padding: 56px 64px"],
  div[style*="padding: 96px 64px"],
  div[style*="padding: 48px 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* FAQ section uses 96px 64px – body still readable at 18px gutter */
  section[id="faq"] { padding: 64px 20px !important; }
  /* Footer CTA + lower bar */
  footer section[style*="padding: 96px 32px 72px"] {
    padding: 64px 20px 48px !important;
  }
  footer section[style*="padding: 56px 64px 32px"] {
    padding: 40px 20px 28px !important;
  }
  /* Case-study back button area */
  div[style*="padding: 32px 64px 0"] { padding: 20px 18px 0 !important; }
  div[style*="padding: 32px 64px"]   { padding: 20px 18px !important; }

  /* Tabs row – allow horizontal scroll if needed */
  section[style*="position: sticky"] > div[style*="padding: 0 64px"] {
    padding: 0 12px !important;
    overflow-x: auto;
  }

  /* Case-studies detail page: collapse all 3-up grids to 1 col */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* And 2-up grids (charts) → 1 col */
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer CTA buttons: full-width pair */
  .ts-cta-btn { min-width: 0 !important; width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; }
  /* Container of the CTAs is already flex-wrap; ensure it stretches */
  footer section > div[style*="flex-wrap: wrap"] { width: 100%; }

  /* Legal-page body padding tighter */
  section[style*="padding: 80px 32px 96px"] { padding: 48px 18px 64px !important; }

  /* Legal-page hero – the 200/160 padding pair is huge on mobile */
  .lp-hero {
    padding-top: 120px !important;
    padding-bottom: 80px !important;
  }

  /* Case-studies hero */
  section.ts-cs-hero {
    padding-top: 120px !important;
    padding-bottom: 100px !important;
  }
  section.ts-cs-hero h1 { font-size: clamp(28px, 8vw, 38px) !important; }
  section.ts-cs-hero p  { font-size: 16px !important; }

  /* Modal width caps at viewport */
  div[style*="min(92vw"] { width: 92vw !important; }

  /* Case-studies tabs — equally spaced row that fits 375px:
     tighten margins, shrink label, allow wrap onto 2 lines if needed. */
  .ts-cs-tabs {
    padding: 0 12px !important;
    gap: 0 !important;
    justify-content: space-between !important;
  }
  .ts-cs-tab {
    margin: 0 !important;
    padding: 16px 4px 14px !important;
    font-size: 13px !important;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .ts-cs-tab > span:first-of-type { /* count pill */
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  /* Sticky offset shrinks too — desktop nav is taller than mobile */
  .ts-cs-tabs-section { top: 56px !important; }

  /* HOMEPAGE HERO — stop content from overlapping the nav and give
     the scroll cue + visual placeholder breathing room. */
  section.ts-hero {
    min-height: auto !important;
    overflow: visible !important;
  }
  .ts-hero-row {
    /* Explicit margins per child below — no flex gap so the heading
       and paragraph can sit tight while the visual + CTAs stay spaced. */
    gap: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 32px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Let .ts-hero-left's children flow into the .ts-hero-row flex line
     so we can reorder the CTAs to sit after the visual placeholder. */
  .ts-hero-left { display: contents !important; }
  .ts-hero-text { order: 1; }
  .ts-hero-right { order: 2; min-height: 220px !important; margin-top: 28px !important; }
  .ts-hero-ctas { order: 3; margin-top: 20px !important; }

  /* Headline sized to read as a clear, bold hero on mobile.
     The paragraph sits tight under the heading inside .ts-hero-text. */
  .ts-hero-h1 { font-size: 40px !important; line-height: 1.08 !important; margin: 0 !important; }
  .ts-hero-p  { font-size: 17px !important; margin-top: 6px !important; margin-bottom: 0 !important; }

  /* Give the scroll cue room above and below */
  .ts-scroll-cue { margin-top: 8px; }
  section[data-screen-label^="Case Study"] {
    height: auto !important;
    min-height: 460px;
  }
  section[data-screen-label^="Case Study"] h1 { font-size: 26px !important; }

  /* Home page hero CTA pair — single column buttons */
  .ts-hero-row > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Home page right-column "interactive visual" placeholder — shorter */
  .ts-hero-row > div[style*="minHeight: 380"],
  .ts-hero-row > div[style*="min-height: 380"] {
    min-height: 220px !important;
  }
}

/* ────────────────────────────────────────────────────────────
 * SMALL MOBILE (≤ 420px)
 * Final tightening for tiny screens.
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  nav.ts-nav { padding: 12px 16px !important; }
  section[style*="padding: 96px 32px 72px"] { padding: 56px 16px 40px !important; }

  /* Case-studies tabs: shrink so the long "Accountability" label fits on
     one line in the equally-split 3-tab row. */
  .ts-cs-tab { font-size: 12px !important; padding: 14px 2px 12px !important; gap: 5px !important; }
  .ts-cs-tab > span:first-of-type { font-size: 9px !important; padding: 2px 5px !important; }
}

/* ────────────────────────────────────────────────────────────
 * Headline wrap helpers (any width)
 * ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  section h1[style*="nowrap"] { white-space: normal !important; }
}