/* TradesFolks 18.4.117 — Hero Responsive Balance
   Root cause fix:
   the production "mobile" viewport is ~754px wide, so the old <=699px rules
   did not run. This stylesheet treats <=820px as compact/mobile hero mode. */

/* =========================================================
   DESKTOP / LARGE TABLET — stronger content scale
   ========================================================= */
@media(min-width:821px){
  .tf-homepage .tf-home-v3-copy{
    width:min(650px,46%)!important;
    padding-left:54px!important;
    padding-right:0!important;
  }

  .tf-homepage .tf-home-v3-eyebrow{
    min-height:29px!important;
    margin-bottom:10px!important;
    padding-inline:12px!important;
    font-size:6.8px!important;
  }

  .tf-homepage .tf-home-v3-copy h1{
    max-width:610px!important;
    max-height:110px!important;
    font-size:clamp(38px,2.65vw,52px)!important;
    line-height:.99!important;
  }

  .tf-homepage .tf-home-v3-copy>p{
    max-width:590px!important;
    margin-bottom:10px!important;
    font-size:9.2px!important;
    line-height:1.38!important;
  }

  .tf-homepage .tf-home-v3-search{
    width:min(625px,100%)!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
  }

  .tf-homepage .tf-home-v3-search select,
  .tf-homepage .tf-home-v3-search input,
  .tf-homepage .tf-home-v3-search button{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }

  .tf-homepage .tf-home-v3-search select{
    flex-basis:136px!important;
    font-size:7.8px!important;
  }

  .tf-homepage .tf-home-v3-search input,
  .tf-homepage .tf-home-v3-search button{
    font-size:7.9px!important;
  }

  .tf-homepage .tf-home-v3-popular{
    margin-top:6px!important;
    min-height:23px!important;
  }

  .tf-homepage .tf-home-v3-popular a{
    min-height:22px!important;
    font-size:5.7px!important;
  }

  .tf-homepage .tf-home-v3-actions{
    margin-top:7px!important;
    min-height:35px!important;
  }

  .tf-homepage .tf-home-v3-actions a,
  .tf-homepage .tf-home-v3-actions button{
    min-height:35px!important;
    font-size:6.5px!important;
  }

  .tf-homepage .tf-home-v3-stats{
    width:min(510px,100%)!important;
    height:57px!important;
    min-height:57px!important;
    max-height:57px!important;
    margin-top:8px!important;
  }

  .tf-homepage .tf-home-v3-stats strong{
    font-size:14px!important;
  }

  .tf-homepage .tf-home-v3-stats span{
    font-size:5.5px!important;
  }
}

/* =========================================================
   COMPACT / MOBILE MODE — IMPORTANT: <=820px
   Keeps ALL hero content but compresses it properly.
   ========================================================= */
@media(max-width:820px){
  .tf-homepage .tf-home-v3{
    padding-top:8px!important;
  }

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

  /* Keep original artwork ratio — crop only, never stretch */
  .tf-homepage .tf-home-v3-slide{
    background-size:cover!important;
    background-position:center center!important;
    transform:none!important;
  }

  /* Mobile readability without blacking out the artwork */
  .tf-homepage .tf-home-v3-overlay{
    background:
      linear-gradient(180deg,
        rgba(4,20,42,.07) 0%,
        rgba(4,20,42,.13) 30%,
        rgba(4,20,42,.56) 58%,
        rgba(4,20,42,.91) 100%)!important;
  }

  .tf-homepage .tf-home-v3-inner{
    display:flex!important;
    align-items:flex-end!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-home-v3-copy{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    width:100%!important;
    height:auto!important;
    max-height:100%!important;
    padding:0 13px 40px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .tf-homepage .tf-home-v3-eyebrow{
    display:inline-flex!important;
    align-self:flex-start!important;
    min-height:22px!important;
    margin:0 0 5px!important;
    padding:0 9px!important;
    font-size:5.4px!important;
  }

  .tf-homepage .tf-home-v3-copy h1{
    display:-webkit-box!important;
    width:100%!important;
    max-width:92%!important;
    max-height:58px!important;
    margin:0 0 5px!important;
    overflow:hidden!important;
    font-size:26px!important;
    line-height:1.01!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }

  .tf-homepage .tf-home-v3-copy>p{
    display:-webkit-box!important;
    max-width:94%!important;
    max-height:30px!important;
    margin:0 0 7px!important;
    overflow:hidden!important;
    font-size:7.2px!important;
    line-height:1.28!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }

  /* Search: compact full width */
  .tf-homepage .tf-home-v3-search{
    display:flex!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    border-radius:10px!important;
  }

  .tf-homepage .tf-home-v3-search select,
  .tf-homepage .tf-home-v3-search input,
  .tf-homepage .tf-home-v3-search button{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    font-size:6.4px!important;
  }

  .tf-homepage .tf-home-v3-search select{
    flex:0 0 84px!important;
    padding-inline:8px!important;
  }

  .tf-homepage .tf-home-v3-search input{
    min-width:0!important;
    padding-inline:8px!important;
  }

  .tf-homepage .tf-home-v3-search button{
    flex:0 0 68px!important;
    padding:0!important;
  }

  /* Popular chips: single horizontal row, no huge wrapping */
  .tf-homepage .tf-home-v3-popular{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:4px!important;
    width:100%!important;
    min-height:20px!important;
    margin:5px 0 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    font-size:5.3px!important;
  }

  .tf-homepage .tf-home-v3-popular::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-home-v3-popular a{
    flex:0 0 auto!important;
    min-height:19px!important;
    padding:0 6px!important;
    font-size:4.9px!important;
    white-space:nowrap!important;
  }

  /* Buttons stay visible, compact */
  .tf-homepage .tf-home-v3-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    min-height:31px!important;
    margin:5px 0 0!important;
  }

  .tf-homepage .tf-home-v3-actions a,
  .tf-homepage .tf-home-v3-actions button{
    min-height:31px!important;
    padding:0 9px!important;
    border-radius:8px!important;
    font-size:5.8px!important;
    white-space:nowrap!important;
  }

  /* Metrics: readable but much less bulky */
  .tf-homepage .tf-home-v3-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    margin:6px 0 0!important;
    border-radius:10px!important;
  }

  .tf-homepage .tf-home-v3-stats>div{
    min-width:0!important;
    padding:5px 7px!important;
  }

  .tf-homepage .tf-home-v3-stats strong{
    font-size:11px!important;
  }

  .tf-homepage .tf-home-v3-stats span,
  .tf-homepage .tf-home-v3-stats small{
    margin-top:3px!important;
    font-size:4.7px!important;
  }

  /* Controls move out of the content block */
  .tf-homepage .tf-home-v3-slider-ui{
    left:auto!important;
    right:8px!important;
    bottom:8px!important;
    width:auto!important;
    padding:0!important;
    gap:5px!important;
  }

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

  .tf-homepage .tf-home-v3-dots{
    gap:3px!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:17px!important;
  }

  /* Trust strip: no oversized white slab */
  .tf-homepage .tf-home-v3-trust{
    width:calc(100% - 16px)!important;
    min-height:34px!important;
    margin:0 auto 12px!important;
    border-radius:0 0 13px 13px!important;
  }

  .tf-homepage .tf-home-v3-trust>.shell{
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    min-height:34px!important;
    padding:5px 9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }

  .tf-homepage .tf-home-v3-trust>.shell::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-home-v3-trust span{
    flex:0 0 auto!important;
    font-size:5.1px!important;
  }
}

/* Very small phones */
@media(max-width:420px){
  .tf-homepage .tf-home-v3-hero{
    height:410px!important;
    min-height:410px!important;
    max-height:410px!important;
  }

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

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

  .tf-homepage .tf-home-v3-copy>p{
    font-size:6.5px!important;
  }

  .tf-homepage .tf-home-v3-search select{
    flex-basis:74px!important;
  }

  .tf-homepage .tf-home-v3-search button{
    flex-basis:60px!important;
  }

  .tf-homepage .tf-home-v3-actions a,
  .tf-homepage .tf-home-v3-actions button{
    padding-inline:7px!important;
    font-size:5.2px!important;
  }
}