/* ============================================================================
   CleanSmartLabs — global responsive layer
   ----------------------------------------------------------------------------
   The marketing pages are desktop-only design exports (no media queries of
   their own). build.py links this file just before </head> on every page, so
   it loads AFTER each page's inline <style> and wins ties at equal specificity
   via source order. It only narrows things at small widths — desktop is
   untouched. Selectors are the layout class names used across the exports
   (see web/build.py MARKETING_PAGES + templates/*.html).
   ============================================================================ */

/* Nothing should be able to force a horizontal scrollbar on a phone. */
img, video, svg { max-width: 100%; height: auto; }

/* Grid tracks below default to minmax(auto, 1fr), which lets a track grow to
   its widest child's min-content (e.g. the hero product mockup) and overflow.
   minmax(0, 1fr) lets tracks shrink to fit; min-width:0 lets flex/grid kids
   shrink too. Both are applied to the collapsed layouts in the queries below. */

/* ---------- Tablet / small laptop: <= 960px ---------------------------------
   Stack the "text beside visual" heroes and sidebar layouts; drop 3-up card
   grids to 2-up; collapse the footer; trim the largest section paddings. */
@media (max-width: 960px) {
  .container { padding-left: 28px; padding-right: 28px; }

  /* Two-column "content + visual / form" layouts -> single column */
  .hero-grid, .page-hero-inner, .feature-row, .step-row, .clarity-inner,
  .try-row, .sec-hero-inner, .sec-row, .contact-inner, .feat-hero-grid,
  .hero-inner, .featured-resource {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Article/guide/doc sidebars -> stacked (no fixed side column) */
  .article-layout, .guide-grid, .doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* Let the now-stacked items shrink to the track instead of holding their
     desktop min-content width (the hero mockup, wide tables, etc.). */
  .hero-grid > *, .page-hero-inner > *, .feature-row > *, .step-row > *,
  .clarity-inner > *, .try-row > *, .sec-hero-inner > *, .sec-row > *,
  .contact-inner > *, .feat-hero-grid > *, .hero-inner > *,
  .featured-resource > *, .article-layout > *, .guide-grid > *,
  .doc-layout > * { min-width: 0; }

  /* 3-up card grids -> 2-up */
  .blog-grid, .related-grid, .prod-nav-grid, .chapters-grid,
  .resources-grid, .res-grid, .posture-grid, .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Pricing tiers and the home "steps" rail read better stacked early */
  .pricing-grid, .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steps::before { display: none; } /* connector line only makes sense in a row */

  /* Footer: brand block over the link columns, links 2-up */
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

  /* Pull the biggest vertical section paddings in */
  .features, .hiw, .feature-section, .posture-section, .sec-section,
  .step-section, .try-section, .chapters, .prod-nav, .clarity-callout,
  .contact-section, .connectors-section, .resources-section, .video-section,
  .other-connectors, .related-section, .blog-section, .article-body-wrap,
  .guide-layout, .pricing { padding-top: 64px; padding-bottom: 64px; }
  .cta-band { padding-top: 72px; padding-bottom: 72px; }
}

/* ---------- Phone: <= 600px -------------------------------------------------
   Everything to one column; tighten hero clearance and section rhythm. */
@media (max-width: 600px) {
  .container { padding-left: 18px; padding-right: 18px; }

  /* All remaining multi-column grids -> single column */
  .blog-grid, .related-grid, .prod-nav-grid, .chapters-grid,
  .resources-grid, .res-grid, .posture-grid, .quick-grid,
  .connector-grid, .features-grid, .cs-breakdown, .sec-badges-strip,
  .pipe-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Data tiles inside the hero product mockup */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Wide comparison tables (products before/after, pricing feature matrix)
     can't shrink below their content — let them scroll inside their own box
     instead of widening the page. */
  .ba-table, .comp-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer link columns stay 2-up (compact); bottom row stacks */
  .footer-nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-legal { gap: 18px; }

  /* Hero clearance: the mobile nav is ~72px, so the desktop 108-120px top
     padding is excessive — trim it while still clearing the fixed bar. */
  .hero { padding-top: 104px; padding-bottom: 56px; }
  .page-hero, .article-hero, .sec-hero { padding-top: 96px; }

  /* Section rhythm down one more notch */
  .features, .hiw, .feature-section, .posture-section, .sec-section,
  .step-section, .try-section, .chapters, .prod-nav, .clarity-callout,
  .contact-section, .connectors-section, .resources-section, .video-section,
  .other-connectors, .related-section, .blog-section, .article-body-wrap,
  .guide-layout, .pricing, .cta-band { padding-top: 52px; padding-bottom: 52px; }
}