/* Bi-Line v20.6.6 - Global mobile responsiveness patch
   Scope: public website only. Desktop >= 992px is intentionally unchanged. */

/* Safe baseline for replaced/uploaded media on all CMS pages. */
img, video, canvas, svg { max-width: 100%; }
iframe { max-width: 100%; }

@media (max-width: 991px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Header: the inherited Porto template uses 33.5px mobile padding; reduce it. */
  #header { height: auto !important; }
  #header .custom-header-main,
  #header.sticky-header .custom-header-main,
  #header .custom-header-main.sticky {
    padding: 20px 18px !important;
  }
  #header .logo,
  #header.sticky-header .logo { max-width: 150px !important; }
  #header .logo img,
  #header.sticky-header .logo img {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 72px !important;
    object-fit: contain;
  }

  /* Prevent common visual-editor content from forcing horizontal scrolling. */
  .page-wrapper,
  #main,
  .main-content,
  .wpb_wrapper,
  .vc_column-inner,
  .vc_column_container,
  .porto-wrap-container { min-width: 0; }

  .wpb_single_image img,
  .vc_single_image-img,
  .img-responsive,
  .wpb_wrapper img:not(.bili-header-avatar) {
    max-width: 100% !important;
    height: auto;
  }

  iframe, video {
    width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  .table-responsive,
  .wpb_text_column table,
  .wpb_raw_code table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  h1, h2, h3,
  .page-title,
  .custom-page-header .page-title {
    overflow-wrap: anywhere;
  }

  /* Detail-page hero spacing. */
  body.biline-v2041-detail .porto-block-html-content-top>.porto-block>.vc_row {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.biline-v2041-detail .porto-block-html-content-top .custom-page-header .page-title {
    font-size: clamp(31px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
  }

  /* Vendor catalog and strategic vendor pages. */
  .biline-vendor-page .bv-shell { width: calc(100% - 30px) !important; }
  .biline-vendor-page .bv-hero { min-height: 390px !important; }
  .biline-vendor-page .bv-hero-copy { padding: 54px 0 !important; }
  .biline-vendor-page .bv-hero h1,
  .biline-vendor-page .bv-detail-hero h1 {
    font-size: clamp(34px, 9.5vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .biline-vendor-page .bv-hero p,
  .biline-vendor-page .bv-detail-hero p { font-size: 16px !important; }
  .biline-vendor-page .bv-category,
  .biline-vendor-page .bv-detail-section { padding: 48px 0 !important; }
  .biline-vendor-page .bv-card { min-width: 0; }
  .biline-vendor-page .bv-logo img { max-width: 130px !important; }
  .biline-vendor-page .bv-capabilities { font-size: 10px !important; }
  .biline-vendor-page .bv-partnership-grid { grid-template-columns: 1fr !important; }
  .biline-vendor-page .bv-partnership-facts { grid-template-columns: 1fr !important; }
  .biline-vendor-page .bv-cta>.bv-shell { display: block !important; }
  .biline-vendor-page .bv-cta a { margin-top: 22px; }

  /* Bili mobile mode: override the desktop 180px launcher safely. */
  .bili-chatbot {
    --bili-launcher-size: 76px !important;
    --bili-offset-side: 12px !important;
    --bili-offset-bottom: 12px !important;
  }
  .bili-chatbot .bili-launcher {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
  .bili-chatbot .bili-launcher img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  .bili-chatbot .bili-badge {
    transform: scale(.88);
    transform-origin: top right;
  }

  /* Keep the open Bili panel fully inside a phone viewport. */
  .bili-chatbot .bili-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px) !important;
    height: min(72dvh, 620px) !important;
    border-radius: 16px !important;
  }
  .bili-chatbot-left .bili-panel,
  .bili-chatbot-right .bili-panel {
    left: 12px !important;
    right: 12px !important;
  }
  .bili-chatbot .bili-header { min-height: 58px; }
  .bili-chatbot .bili-header-avatar {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
  }
  .bili-chatbot .bili-messages,
  .bili-chatbot .bili-lead-body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .bili-chatbot .bili-message,
  .bili-chatbot .bili-suggestions button,
  .bili-chatbot input,
  .bili-chatbot textarea,
  .bili-chatbot button {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  /* More breathing room on narrow pages without changing desktop layout. */
  #header .custom-header-main,
  #header.sticky-header .custom-header-main,
  #header .custom-header-main.sticky {
    padding: 16px 14px !important;
  }

  .container,
  .porto-wrap-container {
    max-width: 100%;
  }

  /* Footer columns should never sit side by side when content is too wide. */
  #footer.footer-builder .vc_column_container {
    min-width: 0;
  }

  .biline-vendor-page .bv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .biline-vendor-page .bv-solution-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .biline-vendor-page .bv-grid { grid-template-columns: 1fr !important; }
  .biline-vendor-page .bv-shell { width: calc(100% - 24px) !important; }
}

@media (max-width: 380px) {
  .bili-chatbot {
    --bili-launcher-size: 68px !important;
    --bili-offset-side: 10px !important;
    --bili-offset-bottom: 10px !important;
  }
  .bili-chatbot .bili-launcher {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }
  .bili-chatbot .bili-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-height: calc(100dvh - 16px) !important;
  }
}

/* Respect notches/safe areas on modern phones. */
@supports (padding: max(0px)) {
  @media (max-width: 991px) {
    .bili-chatbot .bili-panel {
      left: max(12px, env(safe-area-inset-left)) !important;
      right: max(12px, env(safe-area-inset-right)) !important;
      bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* BILINE_HOME_HERO_EDITABLE_FONT_BEGIN
   Desktop font size is editable from the Admin visual editor.
   Mobile stays responsive automatically. */
@media (max-width: 767px) {
  body.biline-page-home .v18-hero h1 {
    font-size: clamp(34px, 9.5vw, 40px) !important;
    line-height: 1.06 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}
/* BILINE_HOME_HERO_EDITABLE_FONT_END */

/* BILINE_HERO_TITLE_54_V1_BEGIN
   Desktop hero H1 is stored as 54px in CMS/Admin.
   Responsive safeguards prevent oversized titles on smaller screens. */
@media (max-width: 991px) {
  .biline-standard-hero-title { font-size: 46px !important; }
}
@media (max-width: 767px) {
  .biline-standard-hero-title { font-size: 38px !important; line-height: 1.05 !important; }
}
@media (max-width: 400px) {
  .biline-standard-hero-title { font-size: 34px !important; }
}
/* BILINE_HERO_TITLE_54_V1_END */