/* TradesFolks 18.4.36 — Stable Hero Banner Geometry
   Fixed banner geometry independent of copy length.
   Background artwork never stretches: cover + centered crop only. */

.tf-home-v3-hero{
  position:relative!important;
  overflow:hidden!important;
  contain:layout paint!important;
}
.tf-home-v3-media,
.tf-home-v3-slide,
.tf-home-v3-overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.tf-home-v3-media{z-index:0!important;overflow:hidden!important}
.tf-home-v3-slide{
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  transform:none!important;
}
.tf-home-v3-overlay{z-index:1!important}
.tf-home-v3-inner{
  position:relative!important;
  z-index:2!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
}
.tf-home-v3-copy{
  box-sizing:border-box!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}
.tf-home-v3-copy h1,
.tf-home-v3-copy p,
.tf-home-v3-eyebrow{
  max-width:100%!important;
}
.tf-home-v3-copy h1{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.tf-home-v3-copy p{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.tf-home-v3-popular{
  min-width:0!important;
  overflow:hidden!important;
  flex-wrap:nowrap!important;
}
.tf-home-v3-popular a{white-space:nowrap!important}
.tf-home-v3-actions{min-width:0!important}
.tf-home-v3-stats{min-width:0!important}

/* Desktop: one fixed premium geometry for every slide. */
@media(min-width:1024px){
  .tf-home-v3-hero{
    height:458px!important;
    min-height:458px!important;
    max-height:458px!important;
  }
  .tf-home-v3-copy{
    width:min(590px,48%)!important;
    padding:30px 0 24px 48px!important;
  }
  .tf-home-v3-copy h1{
    -webkit-line-clamp:3!important;
    font-size:clamp(38px,3.15vw,52px)!important;
    line-height:1.02!important;
    margin:12px 0 10px!important;
  }
  .tf-home-v3-copy p{
    -webkit-line-clamp:3!important;
    max-width:520px!important;
    margin:0 0 12px!important;
  }
  .tf-home-v3-popular{max-width:530px!important}
  .tf-home-v3-actions{max-width:530px!important}
  .tf-home-v3-stats{max-width:500px!important}
}

/* Mobile/tablet: fixed banner size, content clamped so it cannot resize the slider. */
@media(max-width:1023px){
  .tf-home-v3-hero{
    height:312px!important;
    min-height:312px!important;
    max-height:312px!important;
  }
  .tf-home-v3-slide{
    background-size:cover!important;
    background-position:center center!important;
  }
  .tf-home-v3-inner{
    align-items:flex-start!important;
  }
  .tf-home-v3-copy{
    width:100%!important;
    max-width:100%!important;
    padding:18px 16px 14px!important;
  }
  .tf-home-v3-copy h1{
    -webkit-line-clamp:3!important;
    font-size:25px!important;
    line-height:1.03!important;
    margin:10px 0 8px!important;
    max-width:88%!important;
  }
  .tf-home-v3-copy p{
    -webkit-line-clamp:3!important;
    max-width:86%!important;
    margin:0 0 8px!important;
    font-size:10.5px!important;
    line-height:1.4!important;
  }
  .tf-home-v3-popular{
    max-width:100%!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .tf-home-v3-popular::-webkit-scrollbar{display:none!important}
  .tf-home-v3-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    max-width:100%!important;
  }
  .tf-home-v3-actions a{
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }
  .tf-home-v3-stats{
    width:100%!important;
    max-width:100%!important;
  }
}

/* Small phones retain the same fixed geometry. */
@media(max-width:390px){
  .tf-home-v3-hero{
    height:300px!important;
    min-height:300px!important;
    max-height:300px!important;
  }
  .tf-home-v3-copy{padding:16px 14px 12px!important}
  .tf-home-v3-copy h1{font-size:23px!important}
  .tf-home-v3-copy p{font-size:10px!important}
}

/* Prevent accidental distortion if a future slide swaps to an <img>. */
.tf-home-v3-media img,
.tf-home-v3-slide img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  aspect-ratio:auto!important;
}