/* dropceilingteam.com — mobile fixes
   Paste into: WP Admin → Appearance → Customize → Additional CSS
   (or append to /wp-content/themes/tzceiling/css/custom.css)
   All values verified in a real 390px-wide viewport. */

@media (max-width: 767px){

  /* ---- 1. HERO: show the SAME hero as desktop -------------------------
     custom.css:874-875 hides the desktop slider (.dex-banner) on phones and
     swaps in a single static image (.mobile-banner = mobile-banner-4.webp).
     That image has no H1 and no CTA, so mobile loses the headline
     "Installing Drop Ceiling in Residential And Commercial Spaces"
     and the Contact Now button entirely. This restores the real slider. */
  .mobile-banner { display: none; }
  .dex-banner    { display: block; }
  .banner-slider .slider-img { width: 100%; height: 340px; object-fit: cover; }
  .banner-info   { top: 50%; transform: translateY(-50%); }
  .banner-text   { padding: 18px; max-width: 100%; }
  .bannertitle   { font-size: 21px; line-height: 1.3; margin: 0 0 12px 0; }

  /* ---- 2. GALLERY collapsing to one column ---------------------------
     .maing uses column-width:300px (custom.css:506, stepped to 300px at
     1440px and never overridden below). 300px > half a phone screen, so it
     falls to ONE column and ~30 photos stack full-width. */
  .maing { column-count: 2; column-width: auto; column-gap: 8px; }

  /* ---- 3. 5px horizontal overflow -------------------------------------
     "Our Services" .row.mt-5 sits outside a .container, so Bootstrap's
     -15px row margins have nothing to cancel them. Currently hidden by
     the body,html{overflow-x:hidden} band-aid at custom.css:936. */
  .services-main-b .row.mt-5 { margin-left: 0; margin-right: 0; }

  /* ---- 4. Header overlap ----------------------------------------------
     The fixed header measures 104px; the .header-mobile-h spacer is 100px. */
  .header-mobile-h { height: 105px; }

/* ---- 5. SERVICE CARDS: flip-on-hover is unreachable on touch ---------
   .flip-card:hover rotates the card to reveal the service description.
   Phones have no hover, so that copy was invisible to mobile visitors.
   Below 767px, stop flipping and stack the description under the image. */
  .flip-card { height: auto !important; }
  .flip-card-inner { transform: none !important; transform-style: flat !important; height: auto !important; }
  .flip-card-front,
  .flip-card-back {
    position: relative !important;
    width: 100%;
    height: auto !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }
  .flip-card-back { padding: 20px !important; padding-top: 20px !important; }
  /* ---- 7. COLOUR: service panel lime green -> brand navy ---------------
     #4cad49 matched nothing in the identity. #032572 is the header and
     logo navy, and the gold #d4972a READ MORE button pops against it. */
  .flip-card-back { background-color: #032572 !important; }
  .services-box.position-relative { margin-bottom: 26px; }

/* ---- 6. STICKY CALL BAR ---------------------------------------------
   Promotes the footer phone number to a persistent tap-to-call bar.
   Every tap is tracked by CallRail, same as any other tel: link. */
  .footer-section ul li a.footer-bold[href^="tel:"] {
    position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 999;
    display: block !important; text-align: center !important;
    background: #d4972a !important; color: #fff !important;
    padding: 16px 10px !important; margin: 0 !important;
    font-size: 19px !important; line-height: 1.2 !important; font-weight: 600 !important;
    text-decoration: none !important; letter-spacing: .3px;
    box-shadow: 0 -2px 12px rgba(0,0,0,.3);
  }
  .footer-section ul li a.footer-bold[href^="tel:"]::before { content: "Call  "; }
  /* hide the now-orphaned "Phone No.:" label the link was sitting next to */
  .footer-section ul li:has(> a.footer-bold[href^="tel:"]) { font-size: 0 !important; }
  /* keep page content clear of the fixed bar */
  body { padding-bottom: 64px !important; }
}