/* =====================================================================
   VideoLab — Responsive breakpoints
   Desktop-first source in style.css; overrides below for smaller sizes.
   ===================================================================== */

@font-face { /* Google Fonts loaded via <link> in header.php in production; fallback stack already set in tokens */ }

/* ---- Large desktop is default; Desktop 992–1199 ---- */
@media (max-width: 1199px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet: 576–991 ---- */
@media (max-width: 991px) {
  .main-nav, .header-actions { display: none; }
  .hamburger { display: flex; }

  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 48px 0 40px; text-align: left; }
  .hero p.lead { max-width: none; }

  .steps-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }

  .tool-workspace { grid-template-columns: 1fr; }
  .tool-options { order: -1; }

  .dash-shell { grid-template-columns: 1fr; }
  .dash-sidebar { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { display: flex; overflow-x: auto; gap: 6px; padding: 14px 16px; }
  .admin-sidebar .logo { display: none; }
  .admin-sidebar a { white-space: nowrap; margin-bottom: 0; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile: below 576 ---- */
@media (max-width: 575px) {
  .container, .header-inner, .hero .container { padding: 0 18px; }

  .hero h1 { font-size: 30px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { gap: 14px; }

  .tools-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }

  .section { padding: 48px 0; }

  .price-card { padding: 24px; }

  .form-row { grid-template-columns: 1fr; }

  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card .num { font-size: 22px; }

  .data-table { display: block; overflow-x: auto; white-space: nowrap; }

  .footer-inner { grid-template-columns: 1fr; text-align: left; gap: 26px; padding-bottom: 30px; }

  .dropzone { padding: 30px 16px; }
  .dropzone-icon { font-size: 32px; }

  .tool-page-head h1 { font-size: 24px; }

  /* Reserve space so fixed mobile action bars never cover content */
  body.has-mobile-bar { padding-bottom: 78px; }
  .mobile-action-bar {
    position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: flex; gap: 10px;
  }
}

/* Prevent horizontal scroll from wide embedded content anywhere */
video, .video-preview, table { max-width: 100%; }
.video-preview { border-radius: var(--radius-md); overflow: hidden; background: #000; }
.video-preview video { width: 100%; display: block; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}