/* ============================================
   HOCS - Responsive Styles — Round 2 Premium
   ============================================ */

/* Large Desktop */
@media (max-width: 1400px) {
  .hero-content h1 { font-size: 2.8rem; }
  .tier-grid { gap: 20px; }
}

/* Laptop */
@media (max-width: 1200px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .screens-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid-3 { grid-template-columns: 1fr 1fr; }
  .brochure-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-intro,
  .deployment-grid,
  .presentation-bar .presentation-bar-inner { grid-template-columns: 1fr; }
  .tour-grid,
  .module-strip,
  .comparison-highlights { grid-template-columns: repeat(2, 1fr); }
  .report-meta-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 992px) {
  /* Nav */
  .nav-links {
    display: none !important;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    gap: 4px;
    z-index: 999;
  }
  .nav-links.mobile-open {
    display: flex !important;
    animation: slideDown 0.25s ease;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .nav-links a {
    width: 100%;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm);
  }
  .nav-links a:hover {
    background: var(--gray-50);
  }
  .nav-links .nav-cta {
    text-align: center;
    margin-left: 0 !important;
    margin-top: 8px;
  }
  .nav-toggle {
    display: flex;
  }

  /* Hero */
  .hero .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-content p { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual .floating-card.fc-1 { right: 0; }
  .hero-visual .floating-card.fc-2 { left: 0; }

  /* Homepage Sections */
  .tier-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .pain-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .roles-grid { grid-template-columns: 1fr !important; max-width: 520px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hero-proof-grid,
  .presentation-points,
  .comparison-highlights,
  .tour-grid,
  .module-strip { grid-template-columns: 1fr; }
  .comparison-table th,
  .comparison-table td { padding: 12px 14px; }

  /* App Layout */
  .app-sidebar {
    left: -280px;
    z-index: 101;
  }
  .app-sidebar.mobile-open {
    left: 0;
    box-shadow: 8px 0 40px rgba(0,0,0,0.25);
  }
  .app-main {
    margin-left: 0;
  }
  .app-header .ah-left .sidebar-toggle {
    display: flex;
  }
  .app-header .ah-search {
    display: none;
  }
  .app-header { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .app-header .ah-right { flex-wrap: wrap; justify-content: flex-end; }
  .ah-meta { width: 100%; justify-content: flex-end; order: -1; }
  .role-switch-wrap { max-width: 100%; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid-3 { grid-template-columns: 1fr; }
  .dash-grid-equal { grid-template-columns: 1fr; }
  .room-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .floor-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  /* Tables become scrollable */
  .widget-body .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .widget-body .data-table thead,
  .widget-body .data-table tbody,
  .widget-body .data-table tr,
  .widget-body .data-table th,
  .widget-body .data-table td { white-space: nowrap; }

  /* Chart containers */
  .chart-container { height: 240px; }
}

/* Mobile */
@media (max-width: 768px) {
  .hero { padding: 120px 16px 60px; }
  .hero-content h1 { font-size: 2.2rem; }
  .hero-content p { font-size: 1rem; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 360px; margin: 0 auto; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-visual .floating-card { display: none; }

  .section { padding: 50px 16px; }
  .section-header h2 { font-size: 1.6rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }

  .value-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .screens-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* App */
  .app-content { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .brochure-grid,
  .summary-panel-grid,
  .report-meta-strip { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header h2 { font-size: 1.25rem; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; font-size: 0.8rem; padding: 8px 12px; }

  .quick-actions { flex-direction: column; }
  .qa-btn { width: 100%; }
  .presentation-bar { padding: 22px 16px; }
  .presentation-copy h3 { font-size: 1.25rem; }
  .summary-panel,
  .role-lens-card { padding: 20px; }

  .filter-bar { flex-direction: column; align-items: stretch; padding: 12px; }
  .filter-bar .filter-item { width: 100%; }
  .filter-bar .filter-item select,
  .filter-bar .filter-item input { flex: 1; }

  .room-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .room-cell { padding: 10px; }
  .room-cell .rc-number { font-size: 0.95rem; }

  .tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .tab-btn { padding: 8px 14px; font-size: 0.8rem; flex-shrink: 0; }

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

  .modal { width: 95%; max-height: 90vh; overflow-y: auto; }
  .drawer { width: 100%; max-width: 100vw; }

  .room-legend { gap: 8px; flex-wrap: wrap; }
  .room-legend .rl-item { font-size: 0.7rem; }

  /* Card spacing */
  .stat-card { padding: 18px; }
  .widget-header { padding: 14px 16px; }
  .widget-body { padding: 16px; }

  /* Touch targets */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .sidebar-nav .nav-item { padding: 12px 20px; }

  /* Chart containers */
  .chart-container { height: 220px; }

  /* Notification panel full width */
  .notif-panel { width: calc(100vw - 32px) !important; right: 16px !important; }

  /* Pagination */
  .pagination { flex-wrap: wrap; }
  .pagination .page-btn { min-width: 32px; height: 32px; font-size: 0.78rem; }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero-content h1 { font-size: 1.8rem; }
  .site-nav .nav-inner { padding: 0 16px; height: 64px; }
  .site-nav .nav-logo img { height: 34px; }
  .site-nav .nav-logo { font-size: 1.1rem; }

  .stat-card .sc-value { font-size: 1.4rem; }
  .stat-card { padding: 14px; }
  .stat-card .sc-icon { width: 38px; height: 38px; font-size: 1rem; }

  .widget-header { padding: 12px 14px; }
  .widget-header h4 { font-size: 0.88rem; }
  .widget-body { padding: 14px; }

  .data-table thead th { padding: 8px 10px; font-size: 0.68rem; }
  .data-table tbody td { padding: 8px 10px; font-size: 0.78rem; }

  .app-header { padding: 0 12px; height: 52px; }
  .app-header .ah-profile .profile-info { display: none; }
  .demo-mode-pill { display: none; }
  .role-switch-wrap { padding: 5px 8px; }
  .role-switch-label { display: none; }
  .app-header .ah-breadcrumb { font-size: 0.78rem; }
  .app-header .ah-breadcrumb span:first-child { display: none; }
  .app-header .ah-breadcrumb span:nth-child(2) { display: none; }

  .badge { font-size: 0.65rem; padding: 2px 8px; }
  .card { padding: 14px; }

  /* Command palette mobile */
  .cmd-palette { width: 96%; border-radius: 12px; }
  .cmd-search-wrap { padding: 12px 16px; }
  .cmd-item { padding: 10px 12px; }
}