/* TradesFolks 18.4.120 — Explore Industries Gutter + Compact Mobile */

/* =========================================================
   DESKTOP / TABLET: blue section gets same left-right gutter
   as hero / other homepage sections.
   ========================================================= */
@media(min-width:821px){
  .tf-homepage .tf-home-v3-industries{
    width:calc(100% - 56px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-home-v3-industries > .shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px 18px 16px!important;
    box-sizing:border-box!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
    margin-bottom:12px!important;
  }
}

/* =========================================================
   MOBILE / COMPACT: smaller, tighter, still horizontal swipe
   ========================================================= */
@media(max-width:820px){
  .tf-homepage .tf-home-v3-industries{
    width:calc(100% - 16px)!important;
    margin:0 auto!important;
    padding:0!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-home-v3-industries > .shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px 10px 11px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  /* header */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:4px 7px!important;
    margin:0 0 9px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div{
    min-width:0!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div > span{
    display:block!important;
    margin:0 0 3px!important;
    font-size:5.2px!important;
    font-weight:900!important;
    letter-spacing:.085em!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
    max-width:100%!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head p{
    margin:3px 0 0!important;
    font-size:5.8px!important;
    line-height:1.28!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
    align-self:center!important;
    min-height:29px!important;
    height:29px!important;
    max-width:132px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:5.1px!important;
    white-space:nowrap!important;
  }

  /* horizontal category carousel — more compact */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    padding:0 1px 4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

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

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
    flex:0 0 36vw!important;
    width:36vw!important;
    min-width:36vw!important;
    max-width:36vw!important;
    height:122px!important;
    min-height:122px!important;
    max-height:122px!important;
    margin:0!important;
    border-radius:11px!important;
    scroll-snap-align:start!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
    flex:0 0 90px!important;
    width:100%!important;
    height:90px!important;
    min-height:90px!important;
    max-height:90px!important;
    padding:5px!important;
    box-sizing:border-box!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-media img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
    flex:0 0 32px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    padding:3px 5px!important;
    box-sizing:border-box!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > span{
    display:none!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > strong{
    width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:6.4px!important;
    line-height:1.1!important;
    text-align:center!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  /* popular subcategories: compact horizontal pills */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories{
    width:100%!important;
    margin:8px 0 0!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > strong{
    display:block!important;
    margin:0 0 5px!important;
    font-size:5.6px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories a{
    flex:0 0 auto!important;
    min-height:24px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:5.3px!important;
    white-space:nowrap!important;
  }
}

@media(max-width:420px){
  .tf-homepage .tf-home-v3-industries{
    width:calc(100% - 12px)!important;
  }

  .tf-homepage .tf-home-v3-industries > .shell{
    padding:10px 8px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
    font-size:17px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
    max-width:118px!important;
    min-height:27px!important;
    height:27px!important;
    padding-inline:7px!important;
    font-size:4.7px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
    flex-basis:38vw!important;
    width:38vw!important;
    min-width:38vw!important;
    max-width:38vw!important;
    height:116px!important;
    min-height:116px!important;
    max-height:116px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
    flex-basis:86px!important;
    height:86px!important;
    min-height:86px!important;
    max-height:86px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
    flex-basis:30px!important;
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
  }
}