/* =====================================================================
   MOBILE VIEW FIXES  (phones only: max-width 767px)
   Source: "Mobile View – Changes required" document.
   Loaded AFTER app.min.css and the per-page <style> blocks, so desktop
   and tablet layouts are not affected.
   ===================================================================== */
@media (max-width: 767px) {

  /* ------------------------------------------------------------------
     1. LOGO + HEADER  — target header height ≈ 76px
     ------------------------------------------------------------------ */
  .main-menu__logo { padding: 10px 0 !important; }
  .main-menu__logo img {
    height: 56px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------
     2. HERO BANNER — dedicated mobile layout (~390px high)
        heading on top  ->  "Get a Quote"  ->  product image below
        arrows smaller, dots in their own strip under the image
     ------------------------------------------------------------------ */
  .hero-carousel { background: #fff !important; }

  .carousel-container {
    aspect-ratio: auto !important;
    height: 430px !important;
    min-height: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .slide {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 18px 16px 0 !important;
  }

  .slide .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .slide-content {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
  }

  .slide-content h1,
  .slide-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin: 0 0 12px 0 !important;
  }
  .slide-content { min-height: 112px !important; }

  /* subtitle stays hidden on phones (as before) */

  .slide-content .btn-quote,
  .slide-content .btn-primary,
  a.btn-quote,
  a.btn-primary {
    font-size: 12px !important;
    padding: 0px 20px !important;
    gap: 8px !important;
    border: 1px solid rgba(16, 52, 116, .18) !important;
    box-shadow: 0 3px 10px rgba(16, 52, 116, .15) !important;
  }

  /* product image: bottom part of the slide, larger products */
  .slide-bg {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 34px !important;
    height: 260px !important;
    opacity: 1 !important;
  }
  .slide-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 100% center !important;  /* show the right 60% = all products, large */
  }

  .carousel-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: .6rem !important;
    top: 266px !important;
  }
  .carousel-dots { bottom: 12px !important; }

  /* ------------------------------------------------------------------
     3. INDUSTRIES WE SERVE — smaller heading, tighter spacing,
        compact + consistent cards (200–240px), titles ≤ 2 lines
     ------------------------------------------------------------------ */
  .industries { padding: 6px 0 10px !important; margin-top: 0px;}

  .industries .section-title { margin-bottom: 14px !important; }
  .industries .section-title h2 {
    font-size: 20px !important;
    margin: 6px 0 !important;
    
  }

  .industry-grid { gap: 16px !important; }

  .industry-card {
    height: 210px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08) !important;
  }

  .industry-card .overlay {
    left: 16px !important;
    right: 16px !important;
    bottom: 14px !important;
  }

  .industry-card .overlay h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .industry-card .overlay h3 br { display: none !important; }

  /* ------------------------------------------------------------------
     4. EXPLORE OUR PRODUCTS — compact cards, full product visible,
        identical title style, equal 18px spacing
     ------------------------------------------------------------------ */
  .products-section { padding: 12px 16px !important; }

  .product-grid { gap: 18px !important; }

  .product-card { border-radius: 14px !important; }

  .product-thumb {
    height: 170px !important;
    background: #fff !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* whole product visible, no crop / stretch */
    object-position: center !important;
  }

  .product-name {
    padding: 14px 12px 16px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #12303d !important;
  }
  /* kill "sticky hover" on touch screens so every title looks the same */
  .product-card:hover { transform: none !important; border-color: #e4eef3 !important; box-shadow: 0 10px 26px rgba(18, 48, 61, .06) !important; }
  .product-card:hover .product-name { color: #12303d !important; }
  .product-card:hover .product-name::after { width: 0 !important; }
  .product-card:hover .product-thumb img { transform: none !important; }
  .product-name::after { display: none !important; }

  /* ------------------------------------------------------------------
     5. SEGMENT PAGES (Power / Medical / Transportation …)
        bigger label heading, regular-weight description text
     ------------------------------------------------------------------ */
  .rvsec__eyebrow {
    font-size: 15px !important;
    padding: 9px 20px !important;
  }
  .rvsec__lead strong,
  .rvsec__lead b { font-weight: inherit !important; color: inherit !important; }

  /* ------------------------------------------------------------------
     6. SOLUTIONS / CONTACT BANNER — show the full banner image
        (1920×516) instead of a cropped / oversized strip
     ------------------------------------------------------------------ */
  .page-header.page-header--fit {
    aspect-ratio: 1920 / 516;
    padding: 0 !important;
  }
  .page-header.page-header--fit .page-header__bg {
    background-size: 100% 100% !important;
    background-position: center !important;
  }
  .page-header.page-header--fit .page-header__inner {
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ------------------------------------------------------------------
     7. CONTACT CARDS — regular weight 16–17px, e-mails fit, softer card
     ------------------------------------------------------------------ */
  .contact-info-new .card {
    box-shadow: 0 4px 14px rgba(28, 64, 121, .08) !important;
    border-radius: 12px !important;
  }
  .contact-info-new .card h3,
  .contact-info-new .card h5,
  .contact-info-new .card h3 a,
  .contact-info-new .card h5 a {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}