/* Click Point v78 — Meta Ads card label + mobile card background extension only.
   Route remains /services/marketing/facebook/.
   Keep the existing Facebook card/hero geometry and replace only the artwork/content.
   Mobile follows the same card + hero behavior as Google Ads. */
.subservice-card[href*="/services/marketing/facebook"]::before{
  background-image:url("/cp18-v4-meta-ads-wide.jpg")!important;
  background-size:cover!important;
  background-position:center center!important;
  filter:none!important;
}
.subservice-card[href*="/services/marketing/facebook"]:hover::before{
  filter:none!important;
}

/* Preserve the approved desktop detail-page geometry that the old Facebook hero used. */
.detail-hero:has(>img[src="/cp18-v4-meta-ads-wide.jpg"])>img{
  width:70%!important;
  object-fit:contain!important;
  object-position:left center!important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 98%),linear-gradient(180deg,transparent 0%,#000 7%,#000 85%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 98%),linear-gradient(180deg,transparent 0%,#000 7%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.detail-hero:has(>img[src="/cp18-v4-meta-ads-wide.jpg"])>div{
  background:linear-gradient(90deg,transparent 0%,transparent 53%,rgba(8,8,8,.35) 66%,#080808 80%)!important;
}

@media(max-width:800px){
  .subservice-card[href*="/services/marketing/facebook"]::before{
    background-image:url("/cp18-v4-meta-ads-card-mobile-v2.jpg")!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  .detail-hero:has(>img[src="/cp18-v4-meta-ads-wide.jpg"]){
    background-image:url("/cp18-v4-meta-ads-mobile.jpg")!important;
    background-size:cover!important;
    background-position:center center!important;
  }
}