/* TradesFolks 18.4.155
   Service sections: mobile hero-image containment + reverse discovery order.
   Main order itself is reversed in PHP; this CSS only fixes responsive rendering.
*/

.tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
.tf-homepage .tf-business-growth-services .tf-service-card-media img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:88%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  margin:auto!important;
}

/* Keep both sections independent from old transforms / cropping rules. */
.tf-homepage .tf-sourcing-solutions .tf-service-card-media,
.tf-homepage .tf-business-growth-services .tf-service-card-media{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Mobile app-style rail. */
@media(max-width:820px){
  .tf-homepage .tf-sourcing-solutions,
  .tf-homepage .tf-business-growth-services{
    overflow:hidden!important;
  }

  .tf-homepage .tf-sourcing-solutions>.shell,
  .tf-homepage .tf-business-growth-services>.shell{
    overflow:hidden!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-grid,
  .tf-homepage .tf-business-growth-services .tf-service-card-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 3px!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-grid::-webkit-scrollbar,
  .tf-homepage .tf-business-growth-services .tf-service-card-grid::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card,
  .tf-homepage .tf-business-growth-services .tf-service-card{
    flex:0 0 min(79vw,338px)!important;
    width:min(79vw,338px)!important;
    min-width:min(79vw,338px)!important;
    max-width:min(79vw,338px)!important;
    scroll-snap-align:start!important;
  }

  /* More usable media box: image never touches/crosses the top edge. */
  .tf-homepage .tf-sourcing-solutions .tf-service-card-hero,
  .tf-homepage .tf-business-growth-services .tf-service-card-hero{
    position:relative!important;
    height:186px!important;
    min-height:186px!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-media,
  .tf-homepage .tf-business-growth-services .tf-service-card-media{
    position:absolute!important;
    inset:8px 0 61px 0!important;
    height:auto!important;
    min-height:0!important;
    padding:4px 13px 5px!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
  .tf-homepage .tf-business-growth-services .tf-service-card-media img{
    width:auto!important;
    height:auto!important;
    max-width:82%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    margin:auto!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-directory-copy,
  .tf-homepage .tf-business-growth-services .tf-service-card-directory-copy{
    position:absolute!important;
    left:10px!important;
    right:10px!important;
    bottom:7px!important;
    box-sizing:border-box!important;
    height:55px!important;
    min-height:55px!important;
    max-height:55px!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-directory-copy h3,
  .tf-homepage .tf-business-growth-services .tf-service-card-directory-copy h3{
    font-size:13.5px!important;
    line-height:1.08!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-mini-grid,
  .tf-homepage .tf-business-growth-services .tf-service-mini-grid{
    min-height:74px!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-mini-grid>a,
  .tf-homepage .tf-business-growth-services .tf-service-mini-grid>a{
    min-height:74px!important;
    padding:5px 3px!important;
  }
}

/* Narrow phones: smaller card and extra image breathing room. */
@media(max-width:560px){
  .tf-homepage .tf-sourcing-solutions .tf-service-card,
  .tf-homepage .tf-business-growth-services .tf-service-card{
    flex-basis:min(80vw,318px)!important;
    width:min(80vw,318px)!important;
    min-width:min(80vw,318px)!important;
    max-width:min(80vw,318px)!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-hero,
  .tf-homepage .tf-business-growth-services .tf-service-card-hero{
    height:174px!important;
    min-height:174px!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-media,
  .tf-homepage .tf-business-growth-services .tf-service-card-media{
    inset:8px 0 58px 0!important;
    padding:4px 15px 6px!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
  .tf-homepage .tf-business-growth-services .tf-service-card-media img{
    max-width:78%!important;
    max-height:96%!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-directory-copy,
  .tf-homepage .tf-business-growth-services .tf-service-card-directory-copy{
    left:9px!important;
    right:9px!important;
    bottom:6px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
  }
}

@media(max-width:390px){
  .tf-homepage .tf-sourcing-solutions .tf-service-card,
  .tf-homepage .tf-business-growth-services .tf-service-card{
    flex-basis:82vw!important;
    width:82vw!important;
    min-width:82vw!important;
    max-width:82vw!important;
  }

  .tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
  .tf-homepage .tf-business-growth-services .tf-service-card-media img{
    max-width:75%!important;
  }
}