/* ============================================================
   BELA65 Design System — Responsive refinements
   Cross-cutting breakpoint tweaks that aren't tied to one
   component. Component-local media queries live with their
   component; this file holds shared/layout-level adjustments.
   Breakpoints: 1100 (toc), 940 (grids), 860 (nav→drawer), 720 (stack), 480 (compact)
   ============================================================ */

/* Tablet: tighten the container gutters */
@media (max-width: 940px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* Small tablet / large phone: collapse dense grids */
@media (max-width: 720px) {
  .principles { grid-template-columns: 1fr; }
  .compare-wrap { border-radius: var(--radius); }
  .hero-mkt h1 { font-size: clamp(30px, 9vw, 44px); }
  .section-head h2 { font-size: clamp(24px, 6.5vw, 32px); }
  .cta-band { padding: 48px 22px; border-radius: 18px; }
}

/* Narrow: the header "Start Building" is redundant (it's in the mobile drawer) */
@media (max-width: 600px) {
  .mkt-header .header-cta > .btn-primary { display: none; }
  /* segmented tab control scrolls horizontally instead of overflowing the page */
  .tabs .tablist { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .tabs .tablist [data-tab] { white-space: nowrap; }
}

/* Phone: compact spacing + full-width buttons */
@media (max-width: 480px) {
  .section { padding: 52px 0; }
  .container { padding-left: 18px; padding-right: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; width: 100%; }
  .btn-lg { padding: 14px 20px; }
  .feature, .step, .product-card, .wf-col, .ba-col { padding: 20px; }
  .search-trigger span { display: none; }
  .search-modal { padding-top: 8vh; }
}

/* Print: clean single column, no chrome (component files also opt in) */
@media print {
  .breadcrumbs, .search-trigger, .search-modal { display: none !important; }
  .container { max-width: none; padding: 0; }
}