/* TradesFolks 18.4.115 — Hero Spacing + Desktop Height + Mobile Simplification */

/* =========================
   DESKTOP
   ========================= */
@media(min-width:1024px){
  /* breathing room above hero */
  .tf-homepage .tf-home-v3{
    padding-top:14px!important;
  }

  .tf-homepage .tf-home-v3-hero{
    /* slightly taller than 18.4.114, width unchanged */
    aspect-ratio:28.5 / 9!important;
    width:calc(100% - 56px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* =========================
   TABLET
   ========================= */
@media(min-width:700px) and (max-width:1023px){
  .tf-homepage .tf-home-v3{
    padding-top:10px!important;
  }

  .tf-homepage .tf-home-v3-hero{
    height:405px!important;
    min-height:405px!important;
    max-height:405px!important;
  }
}

/* =========================
   MOBILE
   Keep only badge + heading.
   Hide the rest of the heavy hero UI.
   ========================= */
@media(max-width:699px){
  .tf-homepage .tf-home-v3{
    padding-top:9px!important;
  }

  .tf-homepage .tf-home-v3-hero{
    width:calc(100% - 16px)!important;
    height:290px!important;
    min-height:290px!important;
    max-height:290px!important;
    aspect-ratio:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    border-radius:15px!important;
  }

  /* Banner image remains proportional; no stretching */
  .tf-homepage .tf-home-v3-slide{
    background-size:cover!important;
    background-position:center center!important;
  }

  /* Darker lower overlay for clean heading visibility */
  .tf-homepage .tf-home-v3-overlay{
    background:
      linear-gradient(180deg,
        rgba(4,20,42,.08) 0%,
        rgba(4,20,42,.22) 38%,
        rgba(4,20,42,.72) 100%)!important;
  }

  .tf-homepage .tf-home-v3-inner{
    align-items:flex-end!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-home-v3-copy{
    justify-content:flex-end!important;
    width:100%!important;
    height:auto!important;
    max-height:100%!important;
    padding:0 14px 18px!important;
    overflow:hidden!important;
  }

  /* keep top badge */
  .tf-homepage .tf-home-v3-eyebrow{
    display:inline-flex!important;
    min-height:22px!important;
    margin:0 0 6px!important;
    padding:0 9px!important;
    font-size:5.4px!important;
  }

  /* keep main heading only */
  .tf-homepage .tf-home-v3-copy h1{
    display:-webkit-box!important;
    max-width:92%!important;
    max-height:64px!important;
    margin:0!important;
    overflow:hidden!important;
    color:#fff!important;
    font-size:28px!important;
    font-weight:950!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }

  /* remove all remaining content on mobile */
  .tf-homepage .tf-home-v3-copy>p,
  .tf-homepage .tf-home-v3-search,
  .tf-homepage .tf-home-v3-popular,
  .tf-homepage .tf-home-v3-actions,
  .tf-homepage .tf-home-v3-stats{
    display:none!important;
  }

  /* keep slider controls compact */
  .tf-homepage .tf-home-v3-slider-ui{
    bottom:8px!important;
    padding-inline:8px!important;
  }

  .tf-homepage .tf-home-v3-slider-ui>button{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    font-size:17px!important;
  }

  .tf-homepage .tf-home-v3-dots{
    gap:4px!important;
  }

  .tf-homepage .tf-home-v3-dots button{
    width:5px!important;
    height:5px!important;
    min-width:5px!important;
    min-height:5px!important;
  }

  .tf-homepage .tf-home-v3-dots button.is-active{
    width:18px!important;
  }

  /* trust strip remains separate and compact */
  .tf-homepage .tf-home-v3-trust{
    width:calc(100% - 16px)!important;
    min-height:34px!important;
    margin:0 auto 12px!important;
  }

  .tf-homepage .tf-home-v3-trust>.shell{
    min-height:34px!important;
    padding:5px 8px!important;
  }
}

@media(max-width:380px){
  .tf-homepage .tf-home-v3-hero{
    height:270px!important;
    min-height:270px!important;
    max-height:270px!important;
  }

  .tf-homepage .tf-home-v3-copy{
    padding:0 12px 16px!important;
  }

  .tf-homepage .tf-home-v3-copy h1{
    font-size:25px!important;
    max-height:58px!important;
  }
}