/* TradesFolks 18.4.136
   Premium compact treatment for:
   - Sourcing Solutions & Tailored Services
   - Business Growth & Trade Services
   No content/card-count changes.
*/

/* =========================
   DESKTOP / LARGE TABLET
   ========================= */
@media(min-width:821px){

  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .home-service-section{
    width:calc(100% - 56px)!important;
    max-width:none!important;
    margin:18px auto!important;
    padding:0!important;
  }

  .tf-homepage .tf-service-directory-section > .shell,
  .tf-homepage .tf-service-section > .shell,
  .tf-homepage .home-service-section > .shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  /* Section heading */
  .tf-homepage .tf-service-section-head,
  .tf-homepage .tf-service-directory-head,
  .tf-homepage .home-service-head{
    margin:0 0 10px!important;
    align-items:end!important;
  }

  .tf-homepage .tf-service-section-head .eyebrow,
  .tf-homepage .tf-service-directory-head .eyebrow,
  .tf-homepage .home-service-head .eyebrow{
    margin-bottom:3px!important;
    font-size:9px!important;
    letter-spacing:.11em!important;
  }

  .tf-homepage .tf-service-section-head h2,
  .tf-homepage .tf-service-directory-head h2,
  .tf-homepage .home-service-head h2{
    margin:0!important;
    font-size:27px!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
  }

  .tf-homepage .tf-service-section-head p,
  .tf-homepage .tf-service-directory-head p,
  .tf-homepage .home-service-head p{
    margin:4px 0 0!important;
    font-size:11px!important;
    line-height:1.35!important;
  }

  .tf-homepage .tf-service-section-head > a,
  .tf-homepage .tf-service-directory-head > a,
  .tf-homepage .home-service-head > a{
    min-height:34px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  /* Exactly four cards per row */
  .tf-homepage .tf-service-directory-grid,
  .tf-homepage .tf-service-grid,
  .tf-homepage .home-service-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }

  .tf-homepage .tf-service-card{
    min-width:0!important;
    min-height:0!important;
    height:292px!important;
    margin:0!important;
    border-radius:14px!important;
    border:1px solid #dce5ef!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:0 6px 16px rgba(16,43,87,.045)!important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
  }

  .tf-homepage .tf-service-card:hover{
    transform:translateY(-2px)!important;
    border-color:#c9d8e8!important;
    box-shadow:0 12px 26px rgba(16,43,87,.08)!important;
  }

  /* Hero area: reduce excessive whitespace */
  .tf-homepage .tf-service-card-hero{
    position:relative!important;
    display:block!important;
    height:208px!important;
    min-height:208px!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  .tf-homepage .tf-service-card-media{
    position:absolute!important;
    inset:0 0 65px 0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:9px 18px 4px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-service-card-media img{
    width:100%!important;
    height:100%!important;
    max-width:88%!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block!important;
  }

  /* Coloured title strip */
  .tf-homepage .tf-service-card-directory-copy{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:9px!important;
    min-height:57px!important;
    height:57px!important;
    padding:7px 11px!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  .tf-homepage .tf-service-card-directory-copy small{
    display:block!important;
    margin:0 0 1px!important;
    font-size:6.5px!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    font-weight:800!important;
    opacity:.76!important;
  }

  .tf-homepage .tf-service-card-directory-copy h3{
    margin:0!important;
    max-width:100%!important;
    font-size:18px!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .tf-homepage .tf-service-card-directory-cta{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    width:max-content!important;
    max-width:100%!important;
    margin-top:4px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    font-size:7px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:.055em!important;
    white-space:nowrap!important;
  }

  .tf-homepage .tf-service-card-directory-cta svg{
    width:10px!important;
    height:10px!important;
    flex:0 0 10px!important;
  }

  /* Three small categories: one compact footer row */
  .tf-homepage .tf-service-mini-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    height:84px!important;
    min-height:84px!important;
    border-top:1px solid #e5ebf2!important;
    background:#fff!important;
  }

  .tf-homepage .tf-service-mini-grid > a{
    min-width:0!important;
    min-height:0!important;
    height:84px!important;
    padding:7px 6px 6px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:4px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-service-mini-grid > a + a{
    border-left:1px solid #e5ebf2!important;
  }

  .tf-homepage .tf-service-mini-image{
    width:42px!important;
    height:36px!important;
    min-width:42px!important;
    min-height:36px!important;
    padding:0!important;
    border:0!important;
    border-radius:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#fff!important;
  }

  .tf-homepage .tf-service-mini-image img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    display:block!important;
  }

  .tf-homepage .tf-service-mini-grid strong{
    width:100%!important;
    margin:0!important;
    font-size:7px!important;
    line-height:1.1!important;
    font-weight:750!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* =========================
   MID-SIZE DESKTOP / TABLET
   ========================= */
@media(min-width:821px) and (max-width:1180px){
  .tf-homepage .tf-service-directory-grid,
  .tf-homepage .tf-service-grid,
  .tf-homepage .home-service-grid{
    gap:8px!important;
  }

  .tf-homepage .tf-service-card{
    height:272px!important;
  }

  .tf-homepage .tf-service-card-hero{
    height:194px!important;
    min-height:194px!important;
  }

  .tf-homepage .tf-service-card-media{
    inset:0 0 61px 0!important;
    padding:8px 13px 3px!important;
  }

  .tf-homepage .tf-service-card-directory-copy{
    left:10px!important;
    right:10px!important;
    bottom:8px!important;
    min-height:53px!important;
    height:53px!important;
    padding:6px 9px!important;
  }

  .tf-homepage .tf-service-card-directory-copy h3{
    font-size:15px!important;
  }

  .tf-homepage .tf-service-mini-grid,
  .tf-homepage .tf-service-mini-grid > a{
    height:78px!important;
    min-height:78px!important;
  }

  .tf-homepage .tf-service-mini-image{
    width:36px!important;
    min-width:36px!important;
    height:31px!important;
    min-height:31px!important;
  }
}

/* =========================
   MOBILE
   ========================= */
@media(max-width:820px){
  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .home-service-section{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin:14px auto!important;
    padding:0!important;
  }

  .tf-homepage .tf-service-directory-section > .shell,
  .tf-homepage .tf-service-section > .shell,
  .tf-homepage .home-service-section > .shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  .tf-homepage .tf-service-section-head,
  .tf-homepage .tf-service-directory-head,
  .tf-homepage .home-service-head{
    margin-bottom:8px!important;
  }

  .tf-homepage .tf-service-section-head h2,
  .tf-homepage .tf-service-directory-head h2,
  .tf-homepage .home-service-head h2{
    font-size:21px!important;
    line-height:1.05!important;
  }

  .tf-homepage .tf-service-section-head p,
  .tf-homepage .tf-service-directory-head p,
  .tf-homepage .home-service-head p{
    font-size:10px!important;
    line-height:1.3!important;
  }

  /* Horizontal swipe cards instead of giant stacked cards */
  .tf-homepage .tf-service-directory-grid,
  .tf-homepage .tf-service-grid,
  .tf-homepage .home-service-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0 1px 4px!important;
  }

  .tf-homepage .tf-service-directory-grid::-webkit-scrollbar,
  .tf-homepage .tf-service-grid::-webkit-scrollbar,
  .tf-homepage .home-service-grid::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-service-card{
    flex:0 0 78vw!important;
    width:78vw!important;
    min-width:78vw!important;
    max-width:78vw!important;
    height:242px!important;
    min-height:242px!important;
    border-radius:13px!important;
    scroll-snap-align:start!important;
    overflow:hidden!important;
    box-shadow:0 5px 14px rgba(16,43,87,.05)!important;
  }

  .tf-homepage .tf-service-card-hero{
    height:174px!important;
    min-height:174px!important;
  }

  .tf-homepage .tf-service-card-media{
    inset:0 0 57px 0!important;
    padding:8px 12px 3px!important;
  }

  .tf-homepage .tf-service-card-media img{
    max-width:84%!important;
    object-fit:contain!important;
  }

  .tf-homepage .tf-service-card-directory-copy{
    left:9px!important;
    right:9px!important;
    bottom:7px!important;
    height:50px!important;
    min-height:50px!important;
    padding:6px 9px!important;
  }

  .tf-homepage .tf-service-card-directory-copy small{
    font-size:6px!important;
  }

  .tf-homepage .tf-service-card-directory-copy h3{
    font-size:15px!important;
  }

  .tf-homepage .tf-service-card-directory-cta{
    margin-top:3px!important;
    font-size:6.5px!important;
  }

  .tf-homepage .tf-service-mini-grid,
  .tf-homepage .tf-service-mini-grid > a{
    height:68px!important;
    min-height:68px!important;
  }

  .tf-homepage .tf-service-mini-grid > a{
    padding:5px 4px!important;
    gap:3px!important;
  }

  .tf-homepage .tf-service-mini-image{
    width:32px!important;
    min-width:32px!important;
    height:27px!important;
    min-height:27px!important;
  }

  .tf-homepage .tf-service-mini-grid strong{
    font-size:6.5px!important;
  }
}

@media(max-width:430px){
  .tf-homepage .tf-service-card{
    flex-basis:82vw!important;
    width:82vw!important;
    min-width:82vw!important;
    max-width:82vw!important;
    height:228px!important;
    min-height:228px!important;
  }

  .tf-homepage .tf-service-card-hero{
    height:164px!important;
    min-height:164px!important;
  }

  .tf-homepage .tf-service-mini-grid,
  .tf-homepage .tf-service-mini-grid > a{
    height:64px!important;
    min-height:64px!important;
  }
}