/* ============================================================
   Quote Automation – Mobile Overflow Fix
   Linked from index.html after styles.css so these rules win.
   Goal: prevent horizontal scroll on screens < 700px caused by
   the route-map-svg (min-width:700px) leaking past the viewport.
   ============================================================ */

/* Make sure the mobile HTML elements for the Quotation Performance card are hidden on desktop */
.mobile-ca-header {
  display: none;
}

@media (max-width: 700px) {

  /* Prevent any element from extending the page width */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Override the grid gap on mobile to keep cards compact */
  .common-grid {
    gap: 16px !important;
  }

  /* Re-enable unified outer card styling for mobile */
  .common-grid > article.hub-shot {
    background: #f8fafc !important;
    border: 1px solid #d2dee8 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* HTML headers inside the unified card */
  .mobile-ca-header {
    padding: 0 !important;
    display: block !important;
    margin-bottom: 16px !important;
  }

  /* All Mobile Card Headings (Sales, Vendor, Quotation Performance) */
  .mobile-ca-header h3 {
    font-size: 21px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    color: #0a1c34 !important;
  }

  /* Descriptions (same size for all) */
  .mobile-ca-header p {
    font-size: 15px !important;
    color: #627082 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* Crop the first two images to hide the baked-in text and borders */
  .hub-shot:not(.commercial-analytics) .mobile-visual-wrapper {
    overflow: hidden;
    border-radius: 6px;
    height: 170px; /* Fixed height to crop out the bottom text */
    width: 100%;
    margin-bottom: 8px; /* Small bottom padding after visual */
  }

  .hub-shot:not(.commercial-analytics) .mobile-visual-wrapper img {
    width: 100% !important;
    height: auto !important;
    transform: scale(1.05); /* Pushes the baked-in borders outside the wrapper */
    transform-origin: top center;
    margin: 0 !important;
    clip-path: none !important;
    object-fit: contain !important;
  }

  /* ============================================================
     MOBILE — QUOTATION PERFORMANCE VISUAL
     MANUAL SIZE & POSITION CONTROLS
     ============================================================ */

  /* ============================================================
     MOBILE — QUOTATION PERFORMANCE VISUAL
     MANUAL SIZE & POSITION CONTROLS
     ============================================================ */
     
  .commercial-analytics .mobile-ca-header {
    position: relative;
  }

  .commercial-analytics .mobile-ca-header::after {
    content: "";
    display: block;
    position: absolute;
    /* Center the divider visually between description and dashboard */
    bottom: -28px;
    left: -8px;
    width: calc(100% + 16px);
    border-bottom: 1px solid #d2dee8;
  }

  .commercial-analytics .mobile-visual-wrapper {
    overflow: hidden;
    border-radius: 6px;
    
    /* MANUAL: wrapper width & horizontal pulling
       Keep a clean gap from the card borders (slightly inset) */
    width: calc(100% + 16px);
    margin-left: -8px;
    
    /* Balance the gap: The description has 16px margin-bottom. 
       Add 20px here to create a 36px total gap. 
       The dashboard remains exactly where it was. */
    margin-top: 20px;
    margin-bottom: -8px;

    /* Keep height auto so the wrapper perfectly hugs the image 
       without chopping the dashboard or revealing bottom borders */
    height: auto;
  }

  .commercial-analytics .mobile-visual-wrapper img {
    /* MANUAL: visual width 
       Scale the image up so the dashboard portion fills the card.
       Decreased by ~3% to finely tune width */
    width: 197% !important;
    max-width: none !important;
    
    /* Allow height to scale naturally with width */
    height: auto !important;

    /* MANUAL: horizontal positioning 
       Shift the scaled image left to hide the left-side text.
       Adjusted to keep all 3 columns perfectly visible while zoomed */
    margin-left: -86% !important;
    
    /* Crop out the image's baked-in top line. The remaining baked-in whitespace
       will act as the natural gap BELOW our new CSS divider.
       Adjusted upward by an additional ~2.5% to bring the dashboard perfectly aligned. */
    margin-top: -12.5% !important;
    
    /* Compensate for the upward shift to keep the wrapper/card height EXACTLY the same.
       Changed from -7% to -2% (a +5% difference matching the -5% top change). */
    margin-bottom: -2% !important;
    
    display: block !important;
    clip-path: none !important;
    object-fit: unset !important;
  }
  /* ============================================================ */

  /* The route map is inside .route-map-viewport which is already
     overflow-x:auto — cap the viewport itself to 100% so the
     scrollable region doesn't push the body wider */
  .route-map-viewport {
    max-width: 100%;
  }

  /* Ensure the .shipment-map wrapper (parent of route-map-viewport)
     doesn't overflow its section */
  .shipment-map {
    overflow: hidden;
    max-width: 100%;
  }

  /* .route-scene is the card that wraps .shipment-map */
  .route-scene {
    overflow: hidden;
  }

  /* General guardrail: any element that bleeds right gets clipped
     if its intended parent is overflow:hidden already */
  .wrap {
    overflow-x: hidden;
  }

  /* Make quote automation metric-grid match the Stronger Quotes style on mobile */
  .outcomes .metric-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .outcomes .metric-grid>div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    border: none !important;

    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding: 30px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .outcomes .metric-grid>div:last-child {
    border-bottom: none !important;
  }

  .outcomes .metric-grid p {
    margin-top: 8px !important;
  }

  /* Fix overlapping text for 'Days -> mins' on mobile when font-size shrinks */
  .outcomes .metric-grid strong {
    letter-spacing: -0.04em !important;
  }
}

/* Mobile Menu Override */
.mobile-menu-btn {
  display: none;
  padding: 0.5rem;
  color: #cbd5e1;
  background: transparent;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn:hover {
  color: #fff;
}

.mobile-menu-content {
  background: #020617;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
}

.mobile-menu-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #94a3b8;
}

.mobile-menu-link {
  font-size: 0.875rem;
  color: #e2e8f0;
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-menu-link:hover {
  color: #fff;
}

.mobile-menu-link.sub-link {
  color: #94a3b8;
  padding-left: 1rem;
}

.mobile-menu-link.sub-link:hover {
  color: #fff;
}

.mobile-contact-btn-wrap {
  margin-top: 1rem;
  width: 100%;
}

.mobile-contact-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid #7DD3FC;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

@media(max-width: 767px) {
  .mobile-menu-btn {
    display: flex !important;
  }
}

/* Mobile Menu Override */ .mobile-menu-btn  {
     display:  none;
     padding:  0.5rem;
     color:  #cbd5e1;
     background:  transparent;
     border:  none;
     cursor:  pointer;
     align-items:  center;
     justify-content:  center;
   
}

 .mobile-menu-btn:hover  {
   color:  #fff;
   
}

  .mobile-menu-content  {
     background:  #020617;
     border-bottom:  1px solid rgba(255, 255, 255, 0.1);
     width:  100%;
     position:  absolute;
     top:  100%;
     left:  0;
     z-index:  40;
   
}

 .mobile-menu-inner  {
     display:  flex;
     flex-direction:  column;
     padding:  1.5rem;
     gap:  1rem;
   
}

 .mobile-menu-label  {
     font-size:  0.875rem;
     font-weight:  600;
     color:  #94a3b8;
   
}

 .mobile-menu-link  {
     font-size:  0.875rem;
     color:  #e2e8f0;
     text-decoration:  none;
     transition:  color 0.2s;
   
}

 .mobile-menu-link:hover  {
   color:  #fff;
   
}

 .mobile-menu-link.sub-link  {
     color:  #94a3b8;
     padding-left:  1rem;
   
}

 .mobile-menu-link.sub-link:hover  {
   color:  #fff;
   
}

  .mobile-contact-btn-wrap  {
     margin-top:  1rem;
     width:  100%;
   
}

 .mobile-contact-btn  {
     display:  flex;
     justify-content:  center;
     align-items:  center;
     width:  100%;
     height:  2.5rem;
     border-radius:  9999px;
     border:  1px solid #7DD3FC;
     background:  transparent;
     color:  #fff;
     font-size:  0.875rem;
     font-weight:  600;
     text-decoration:  none;
   
}

  @media(max-width: 767px)  {
     .mobile-menu-btn  {
     display:  flex  !important;
     
  }

   
}

  

/* Mobile Menu Override */
.mobile-menu-btn {
  display: none;
  padding: 0.5rem;
  color: #cbd5e1;
  background: transparent;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn:hover {
  color: #fff;
}

.mobile-menu-content {
  background: #020617;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
}

.mobile-menu-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #94a3b8;
}

.mobile-menu-link {
  font-size: 0.875rem;
  color: #e2e8f0;
  text-decoration: none;
  transition: color 0.2s;
}

.mobile-menu-link:hover {
  color: #fff;
}

.mobile-menu-link.sub-link {
  color: #94a3b8;
  padding-left: 1rem;
}

.mobile-menu-link.sub-link:hover {
  color: #fff;
}

.mobile-contact-btn-wrap {
  margin-top: 1rem;
  width: 100%;
}

.mobile-contact-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid #7DD3FC;
  background: transparent;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

@media(max-width: 767px) {
  .mobile-menu-btn {
    display: flex !important;
  }
}