/*
 * 0515 mobile-specific overrides.
 *
 * Keep base desktop styles in styles.css. Put responsive layout fixes,
 * mobile interaction adjustments, and narrow-screen overrides here.
 */

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

body {
  overflow-wrap: break-word;
}

.table-wrap,
.product-detail-page table,
.comparison-table,
.resource-table {
  max-width: 100%;
}

@media (max-width: 980px) {
  html.nav-drawer-open,
  body.nav-drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    isolation: isolate;
    background: rgba(255,255,255,.98);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header .container.nav {
    position: relative;
    gap: 6px;
  }

  .site-header .brand-logo {
    width: 132px;
    max-height: 40px;
  }

  .site-header .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .site-header .nav-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }

  .site-header .nav-phone {
    display: inline-flex;
    width: 34px;
    height: 42px;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0;
  }

  .site-header .nav-phone .icon {
    width: 19px;
    height: 19px;
  }

  .site-header .nav-agent-entry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: -1;
    width: auto;
    min-height: 42px;
    max-width: 92px;
    padding: 0 2px;
    border: 0;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #ea580c;
    font-size: 12px;
    line-height: 1;
    transform: none;
  }

  .site-header .nav-agent-entry span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header .nav-agent-spark {
    width: 16px;
    height: 16px;
  }

  .site-header .nav-links {
    display: none;
  }

  .nav-links.nav-drawer {
    position: fixed !important;
    top: 62px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1000 !important;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    width: min(82vw, 340px);
    height: calc(100vh - 62px);
    height: calc(100dvh - 62px);
    max-height: none;
    margin: 0;
    padding: 14px 14px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-left: 1px solid rgba(15,43,79,.12);
    border-radius: 0;
    background: #fff;
    box-shadow: -22px 0 58px rgba(12,38,72,.20);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: none !important;
    transition: opacity .16s ease, visibility .16s ease;
  }

  body.nav-drawer-open .nav-links.nav-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none !important;
  }

  body.nav-drawer-open::before {
    content: "";
    position: fixed;
    inset: 62px 0 0;
    z-index: 990;
    background: rgba(7,24,48,.38);
  }

  body.nav-drawer-open .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1200 !important;
    background: rgba(255,255,255,.98);
  }

  body.nav-drawer-open .site-header .menu-button {
    position: relative;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 8px 18px rgba(12,38,72,.14);
  }

  .site-header.open .nav-agent-entry,
  body.nav-drawer-open .site-header .nav-agent-entry {
    display: inline-flex !important;
    align-items: center !important;
    order: -1 !important;
    width: auto !important;
    min-height: 42px !important;
    max-width: 92px !important;
    justify-content: center !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ea580c !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .nav-links.nav-drawer > a,
  .nav-links.nav-drawer .nav-has-dropdown > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    background: #f8fafc;
    color: #10233f;
    font-size: 15px;
    font-weight: 900;
  }

  .nav-links.nav-drawer > a[href$="index.html"] {
    display: none;
  }

  .nav-links.nav-drawer .nav-item {
    display: grid;
    gap: 8px;
  }

  .nav-links.nav-drawer .nav-dropdown {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-links.nav-drawer .nav-dropdown::before {
    display: none;
  }

  .nav-links.nav-drawer .nav-dropdown a {
    justify-content: center;
    min-height: 40px;
    padding: 9px 8px;
    border: 1px solid #e8eef6;
    border-radius: 9px;
    background: #fff;
    color: #475569;
    text-align: center;
    white-space: normal;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
  }

  .grid.cols-4,
  .scenario-grid,
  .benchmark-grid,
  .solution-overview,
  .solution-audience-grid,
  .solution-value-grid,
  .solution-scope-list,
  .partner-grid,
  .product-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-band,
  .content-layout,
  .contact-inner,
  .demo-shell,
  .home-demo-preview,
  .media-card,
  .demo-entry-grid,
  .solution-intro-split,
  .solution-module-card,
  .solution-module-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .solution-module-card:nth-child(even) img {
    order: 0;
  }

  .side-cta {
    position: static;
  }
}

@media (max-width: 760px) {
  .not-found-page,
  .not-found-shell {
    min-height: calc(100vh - 62px);
    min-height: calc(100dvh - 62px);
  }

  .not-found-shell {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .not-found-panel {
    padding: 28px 22px;
    border-radius: 14px;
  }

  .not-found-bg span:nth-child(1) {
    top: 10%;
    right: -42px;
    width: 128px;
  }

  .not-found-bg span:nth-child(2) {
    right: 18px;
    bottom: 18%;
    width: 72px;
  }

  .not-found-bg span:nth-child(3) {
    left: -72px;
    bottom: 10%;
    width: 160px;
    height: 76px;
  }

  .not-found-code {
    font-size: 104px;
  }

  .not-found-panel h1 {
    font-size: 40px;
    white-space: normal;
  }

  .not-found-lead {
    font-size: 16px;
  }

  .not-found-actions {
    display: grid;
    justify-items: start;
    gap: 14px;
  }

  .not-found-actions .btn {
    width: 100%;
    max-width: 260px;
    justify-content: center;
    white-space: nowrap;
  }

  .not-found-note {
    width: 100%;
    align-items: flex-start;
  }

  .not-found-link,
  .not-found-note a {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .container,
  .site-header .container.nav,
  .site-footer .container,
  .contact-band .container {
    width: min(100% - 28px, 1180px);
  }

  .section {
    padding: 48px 0;
  }

  .hero-slide .container {
    min-height: clamp(420px, 72vh, 560px);
    padding: 48px 0 68px;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  .hero-actions,
  .home-demo-actions,
  .demo-output-head,
  .section-head {
    display: grid;
  }

  .hero-actions .btn,
  .home-demo-actions .btn,
  .form .btn,
  .service-chat-form .btn {
    width: 100%;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .scenario-grid,
  .benchmark-grid,
  .solution-overview,
  .solution-audience-grid,
  .solution-value-grid,
  .solution-scope-list,
  .content-layout,
  .contact-inner,
  .footer-grid,
  .sitemap-grid,
  .partner-grid,
  .metric-grid,
  .stats,
  .demo-form,
  .demo-checks,
  .demo-result-grid,
  .demo-stats,
  .agent-plan,
  .tool-chip-grid,
  .preset-grid,
  .preview-grid,
  .comparison-grid,
  .data-check-grid {
    grid-template-columns: 1fr;
  }

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

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

  .trust-stat {
    padding: 16px 8px;
  }

  .trust-value,
  .trust-label {
    font-size: 14px;
  }

  .article-block,
  .industry-detail .article-block,
  .home-demo-copy,
  .home-demo-board,
  .solution-text-panel,
  .solution-result-panel,
  .solution-case-panel {
    padding: 20px;
  }

  .card,
  .scenario-card,
  .solution-module-card {
    padding: 18px;
  }

  .card-content {
    padding: 20px;
  }

  .btn {
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

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

  .table-wrap table {
    min-width: 640px;
  }

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

  .page-guide #steps .procurement-steps-vertical .procurement-step-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  .page-guide #steps .solution-module-list {
    grid-template-columns: 1fr !important;
  }

  .page-guide #steps .solution-module-card,
  .page-guide #steps .solution-module-card:nth-child(even) {
    min-height: 0 !important;
  }

  .floating-contact {
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 12px;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(52px, auto));
    gap: 8px;
    transform: none;
  }

  .floating-contact-btn[data-back-top] {
    display: none !important;
  }

  .floating-contact-btn {
    width: auto;
    min-height: 48px;
    padding: 8px 10px;
    border-right: 1px solid rgba(22,95,163,.18);
    border-radius: 8px;
  }

  .floating-contact-btn span {
    font-size: 12px;
  }

  .floating-phone b {
    right: 0;
    top: auto;
    bottom: calc(100% + 8px);
    transform: none;
  }

  .service-chat {
    padding: 16px;
    place-items: end center;
  }

  .service-chat-panel {
    width: min(100%, 360px);
    margin-bottom: 64px;
  }

  body:has(.floating-contact) .site-footer {
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .site-header .brand-logo {
    width: 122px;
  }

  .site-header .nav-agent-entry {
    max-width: 82px;
    font-size: 11px;
  }

  .site-header .nav-phone {
    width: 30px;
  }

  .nav-links.nav-drawer > a,
  .nav-links.nav-drawer .nav-has-dropdown > a {
    min-height: 42px;
  }
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}