/* Global mobile overrides applied on top of per-page inline styles. */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  -webkit-tap-highlight-color: rgba(11, 103, 255, 0.16);
}

img,
video,
canvas,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .page,
  .container,
  .landing,
  .asset-layout,
  .nav-shell,
  .site-header,
  .nav-bar {
    width: min(1120px, 96vw) !important;
  }

  .site-header,
  .nav-bar {
    margin-top: 10px !important;
    border-radius: 16px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .container,
  .asset-layout,
  .landing.assets-page {
    padding-top: 28px !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  }

  .card,
  .asset-card,
  .archive-item,
  .archive-details,
  .modal,
  .who-card,
  .step,
  .asset-preview,
  .asset-card-preview,
  .legal-card,
  .auth-card,
  .export-card {
    padding: 16px !important;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
  }

  .btn,
  button,
  .asset-action,
  .back-btn {
    min-height: 46px;
  }
}

@media (max-width: 900px) {
  .hero-inner,
  .split,
  .assets-grid,
  .grid-3,
  .dashboard-grid,
  .steps,
  .who,
  .form-grid,
  .lead-grid,
  .founders-grid,
  .users-grid,
  .locations-grid,
  .staff-grid,
  .kpi-grid,
  .asset-entry-grid,
  .org-perspective-columns,
  .roi-grid,
  .roi-ledgers {
    grid-template-columns: 1fr !important;
  }

  .stats-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .stats-row .value {
    text-align: left !important;
    justify-self: start !important;
  }

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

  .top-actions,
  .cta,
  .export-actions,
  .card-actions,
  .asset-actions,
  .view-controls,
  .view-left,
  .view-right,
  .asset-picker-toolbar,
  .org-overview-controls {
    align-items: stretch !important;
  }

  .org-overview-search,
  .control-input,
  .control-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .table,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .contact-hero .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .contact-topic-grid {
    grid-template-columns: 1fr !important;
  }

  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .news-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 760px) {
  .nav-bar .nav {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .modal-backdrop {
    padding: max(10px, env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    align-items: flex-end;
  }

  .modal {
    width: 100%;
    max-height: 86dvh;
    overflow: auto;
  }
}

@media (max-width: 640px) {
  .top-actions,
  .export-actions,
  .asset-actions,
  .actions-row,
  .modal-actions,
  .cta-row,
  .cta,
  .lead-form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .top-actions .btn,
  .export-actions .btn,
  .asset-actions .btn,
  .actions-row .btn,
  .modal-actions .btn,
  .cta-row .btn,
  .cta .btn,
  .lead-form-actions .btn {
    width: 100% !important;
    justify-content: center;
  }

  .stepper {
    grid-template-columns: 1fr !important;
  }

  .hero,
  .section {
    padding-top: 38px !important;
    padding-bottom: 32px !important;
  }

  .news-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .news-links .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .contact-form-shell {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .contact-pill-row {
    grid-template-columns: 1fr !important;
  }

  .contact-pill {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  h1,
  .hero-heading-alt {
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(1.12rem, 6vw, 1.45rem) !important;
    line-height: 1.25 !important;
  }

  .brand,
  .logo {
    font-size: 16px !important;
  }

  .nav-shell .nav-right > .btn.secondary {
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}