/* PEK Civil Defence - phone-only stability pass
   Scope: max-width 768px only. Visual language is preserved; rules only keep the existing design usable on phones. */

@media (max-width: 768px) {
  :root {
    --pcd-phone-vh: 100svh;
    --pcd-phone-gutter: clamp(18px, 5.6vw, 26px);
    --pcd-phone-gutter-tight: clamp(14px, 4.4vw, 20px);
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    min-width: 0 !important;
    touch-action: manipulation;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  img,
  picture,
  video,
  iframe,
  canvas,
  svg,
  object,
  embed {
    max-width: 100% !important;
  }

  p,
  li,
  span,
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .section-title,
  .section-desc,
  .hero-h1,
  .hero-h2,
  .deminer-title,
  .deminer-subtitle,
  .s-h,
  .p-h,
  .req-h,
  .scen-h,
  .product-title,
  .domain-card h3,
  .cap h3,
  .media-head h2,
  .story-heading,
  .technology-title,
  .contact-title {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* Header and phone menu: same visual treatment, safer sizing and no hidden off-canvas hit area. */
  #nav,
  nav#nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    gap: 10px !important;
  }

  #nav .logo-switcher,
  nav#nav .logo-switcher,
  #nav .logo-switcher-main,
  nav#nav .logo-switcher-main,
  #nav .nav-logo,
  nav#nav .nav-logo {
    min-width: 0 !important;
    max-width: calc(100vw - 84px) !important;
  }

  #nav .logo-switcher-main,
  nav#nav .logo-switcher-main {
    overflow: hidden !important;
  }

  #nav .logo-switcher-main img,
  nav#nav .logo-switcher-main img,
  #nav .nav-logo img,
  nav#nav .nav-logo img {
    height: clamp(34px, 9.6vw, 42px) !important;
    max-width: min(218px, 58vw) !important;
    object-fit: contain !important;
  }

  #nav .logo-switcher-title,
  #nav .logo-switcher-tagline,
  nav#nav .logo-switcher-title,
  nav#nav .logo-switcher-tagline {
    min-width: 0 !important;
    max-width: 42vw !important;
    overflow-wrap: normal !important;
  }

  #nav > button.pcd-menu-final-toggle,
  nav#nav > button.pcd-menu-final-toggle,
  #nav > button.pcd-mobile-toggle,
  nav#nav > button.pcd-mobile-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin-left: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body .pcd-menu-final,
  body .pcd-mobile-panel {
    width: min(360px, 88vw) !important;
    max-width: calc(100vw - 28px) !important;
    box-sizing: border-box !important;
    overscroll-behavior: contain !important;
  }

  body:not(.pcd-menu-open) .pcd-menu-final,
  body:not(.pcd-menu-open) .pcd-mobile-panel,
  body:not(.pcd-menu-open) .pcd-menu-final-scrim,
  body:not(.pcd-menu-open) .pcd-mobile-scrim {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.pcd-menu-open .pcd-menu-final,
  body.pcd-menu-open .pcd-mobile-panel,
  body.pcd-menu-open .pcd-menu-final-scrim,
  body.pcd-menu-open .pcd-mobile-scrim {
    visibility: visible !important;
  }

  body .pcd-menu-final .pcd-mobile-nav-list,
  body .pcd-menu-final .pcd-mobile-bottom-area,
  body .pcd-mobile-panel .pcd-mobile-nav-list,
  body .pcd-mobile-panel .pcd-mobile-bottom-area {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .pcd-menu-final .pcd-mobile-link,
  body .pcd-menu-final button.pcd-mobile-link,
  body .pcd-mobile-panel .pcd-mobile-link,
  body .pcd-mobile-panel button.pcd-mobile-link {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
  }

  body .pcd-menu-final .pcd-mobile-submenu,
  body .pcd-mobile-panel .pcd-mobile-submenu {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Page wrappers keep their existing look but stay inside phone gutters. */
  section,
  header,
  footer,
  main,
  .container,
  .story-wrap,
  .media-shell,
  .technology-page,
  .tech-page,
  .tech-wrap,
  .contact-shell,
  .contact-layout,
  .privacy-wrap,
  .reqs-inner,
  .scen-inner,
  .comp-inner,
  .eng-inner,
  .cta-content,
  .foot-grid,
  .foot-bottom,
  .video-wrap,
  .ffrs-video-wrap,
  .specs-wrap,
  .mission-inner,
  .action-inner,
  .danger-slider-shell,
  .comparison-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main,
  .container,
  .story-wrap,
  .media-shell,
  .technology-page,
  .tech-page,
  .tech-wrap,
  .contact-shell,
  .privacy-wrap,
  .reqs-inner,
  .scen-inner,
  .comp-inner,
  .eng-inner,
  .cta-content,
  .video-wrap,
  .ffrs-video-wrap,
  .specs-wrap,
  .mission-inner,
  .action-inner,
  .comparison-wrap {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .products-grid,
  .product-grid,
  .domain-grid,
  .cap-grid,
  .story-grid,
  .story-cards,
  .reqs-grid,
  .scen-grid,
  .spec-grid-full,
  .media-video-grid,
  .media-article-grid,
  .branch-grid,
  .ecosystem-grid,
  .ecosystem-branches,
  .contact-info-grid,
  .deminer-feature-grid,
  .lugv-feature-grid,
  .vanquisher-feature-grid,
  .capability-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .product-card,
  .domain-card,
  .cap,
  .cap-card,
  .mission-card,
  .story-card,
  .contact-info-card,
  .contact-form-panel,
  .req-c,
  .scen-c,
  .pillar,
  .comp,
  .ecosystem-card,
  .branch-card,
  .media-video-card,
  .media-article-card,
  .deminer-feature-item,
  .lugv-feature-item,
  .lugv-app-card,
  .lugv-core-card,
  .spec-box,
  .spec-cell {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero sections: prevent title/button clipping on narrow devices without changing desktop. */
  #hero,
  .hero,
  .deminer-clean-hero,
  .story-hero,
  .media-hero,
  .technology-hero,
  .contact-hero {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  #hero .hero-content,
  .hero-content,
  .deminer-hero-content,
  .story-hero-inner,
  .media-hero-inner,
  .technology-hero-inner,
  .contact-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-h1,
  .deminer-title,
  .media-hero h1,
  .story-hero h1,
  .technology-hero h1,
  .contact-hero h1 {
    font-size: clamp(44px, 17vw, 72px) !important;
    line-height: .94 !important;
    letter-spacing: -0.06em !important;
  }

  .hero-h2,
  .deminer-subtitle,
  .media-hero p,
  .story-hero p,
  .technology-hero p,
  .contact-hero p {
    max-width: 100% !important;
  }

  .hero-actions,
  .deminer-hero-cta,
  .cta-actions,
  .action-buttons,
  .video-actions,
  .ffrs-video-actions,
  .contact-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hero-actions a,
  .hero-actions button,
  .deminer-hero-cta a,
  .deminer-hero-cta button,
  .cta-actions a,
  .cta-actions button,
  .action-buttons a,
  .action-buttons button,
  .video-actions a,
  .ffrs-video-actions a,
  .contact-actions a,
  .btn,
  .btn-fire,
  .deminer-btn,
  .btn-cta-white,
  .request-demo,
  .demo-submit {
    max-width: 100% !important;
    min-height: 46px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Embedded media and slides. */
  .video-frame,
  .ffrs-video-frame,
  .media-video-frame,
  .video-aspect,
  .ffrs-video-aspect,
  .media-video-aspect,
  .video-embed,
  .danger-slider-frame,
  .pdf-slider,
  .pdf-slide,
  .deminer-mobile-pdf-card,
  .ffrs-mobile-pdf-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .video-aspect,
  .ffrs-video-aspect,
  .media-video-aspect,
  .video-embed {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .video-aspect iframe,
  .ffrs-video-aspect iframe,
  .media-video-aspect iframe,
  .video-embed iframe {
    width: 100% !important;
    height: 100% !important;
  }

  .danger-track,
  .comparison-track,
  .mobile-products-track,
  .ffrs-pillars-track,
  .pillars-track,
  .pdf-track {
    max-width: 100% !important;
    will-change: transform;
  }

  /* Tables/spec sheets: keep the same table but make it swipeable instead of breaking the viewport. */
  table,
  .spec-table,
  .comparison-table,
  .tech-table {
    width: 100% !important;
    max-width: 100% !important;
  }

  .table-wrap,
  .spec-table-wrap,
  .comparison-table-wrap,
  .tech-table-wrap,
  .spec-grid-full {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Forms and modals: no iOS zoom, no cropped fields, same styling kept. */
  form,
  .demo-form,
  .request-demo-form,
  .full-contact-form,
  .contact-form,
  .contact-form-panel form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .demo-form,
  .request-demo-grid,
  .request-demo-form,
  .full-contact-form,
  .contact-form,
  .form-grid,
  .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  label,
  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 124px !important;
    resize: vertical !important;
  }

  .demo-modal.is-open,
  .request-demo-modal.is-open,
  .spec-modal.is-open {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }

  .demo-modal-box,
  .request-demo-box,
  .spec-modal-panel {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100svh - 28px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Footer/contact data wraps instead of pushing the page sideways. */
  .foot-grid,
  .foot-bottom,
  .contact-layout,
  .contact-info-grid,
  .cta-contacts {
    min-width: 0 !important;
  }

  .foot-col,
  .foot-brand,
  .contact-info-card,
  .cta-contacts a,
  .contact-info-card a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Fixed widgets should never cover the menu or sit outside safe area. */
  .pcd-back-to-top-mobile {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 380px) {
  #nav,
  nav#nav {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  #nav .logo-switcher-main img,
  nav#nav .logo-switcher-main img,
  #nav .nav-logo img,
  nav#nav .nav-logo img {
    max-width: min(198px, 56vw) !important;
  }

  #nav .logo-switcher-title,
  #nav .logo-switcher-tagline,
  nav#nav .logo-switcher-title,
  nav#nav .logo-switcher-tagline {
    max-width: 40vw !important;
  }

  .hero-h1,
  .deminer-title,
  .media-hero h1,
  .story-hero h1,
  .technology-hero h1,
  .contact-hero h1 {
    font-size: clamp(38px, 16vw, 62px) !important;
  }

  body .pcd-menu-final,
  body .pcd-mobile-panel {
    width: min(332px, 90vw) !important;
    max-width: calc(100vw - 20px) !important;
  }
}