/* ==========================================================================
   NortysLink — Responsive Breakpoints (Desktop 1440px, Tablet 768px, Mobile 375px)
   File: css/responsive.css
   ========================================================================== */

@media (max-width: 1120px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .features-bento-grid .feature-card,
  .features-bento-grid .feature-card.span-6 {
    grid-column: span 6;
  }

  .steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-dual-grid {
    grid-template-columns: 1fr;
  }

  .preview-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .public-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

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

  /* App Workspace Drawer on Tablet/Mobile */
  .app-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0);
  }

  .app-main-wrapper,
  body.sidebar-collapsed .app-main-wrapper {
    margin-left: 0;
  }

  .mobile-drawer-btn {
    display: inline-flex;
  }

  .sidebar-collapse-btn {
    display: none;
  }

  .app-content {
    padding: 20px 16px 48px;
  }
}

@media (max-width: 600px) {
  .public-container {
    padding: 0 16px;
  }

  .hero-section {
    padding: 40px 0 48px;
  }

  .features-bento-grid .feature-card,
  .features-bento-grid .feature-card.span-6 {
    grid-column: span 12;
  }

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

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

  .stats-grid,
  .preview-summary-grid,
  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .platform-url-top,
  .platform-url-bottom {
    grid-template-columns: 1fr;
  }

  .app-header {
    padding: 0 14px;
  }

  .input-search-wrapper {
    min-width: 100%;
  }

  .filter-group .form-select {
    width: 100%;
  }
}