/* TradesFolks 18.4.49 — Compact Responsive Category Showcase
   Device-aware category hero + subcategory matrix.
   Removes mobile header compression and reduces vertical footprint. */

/* Shared image integrity */
.tf-homepage .home-category-subcard-image{
  background:#fff!important;
}
.tf-homepage .home-category-subcard-image img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#fff!important;
  transform:none!important;
}

/* ---------- LARGE DESKTOP ---------- */
@media(min-width:1440px){
  .tf-homepage .home-category-showcases{
    padding:18px 0 22px!important;
  }
  .tf-homepage .home-category-showcases>.shell{
    width:min(calc(100% - 32px),1780px)!important;
    max-width:1780px!important;
  }
  .tf-homepage .home-category-showcase-list{
    gap:18px!important;
  }
  .tf-homepage .home-category-showcase{
    padding:14px!important;
    border-radius:15px!important;
  }
  .tf-homepage .home-category-showcase-head{
    gap:14px!important;
    margin-bottom:10px!important;
  }
  .tf-homepage .home-category-browse-pill{
    padding:4px 7px!important;
    font-size:7px!important;
  }
  .tf-homepage .home-category-showcase-head h3{
    margin:5px 0 3px!important;
    font-size:24px!important;
  }
  .tf-homepage .home-category-showcase-head p{
    font-size:9.5px!important;
  }
  .tf-homepage .home-category-showcase-head>a{
    min-height:31px!important;
    padding:0 10px!important;
    font-size:8.5px!important;
    border-radius:8px!important;
  }

  .tf-homepage .home-category-showcase-grid{
    grid-template-columns:minmax(280px,28%) minmax(0,72%)!important;
    gap:10px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:390px!important;
    height:390px!important;
    padding:14px!important;
    border-radius:13px!important;
  }
  .tf-homepage .home-category-source-card strong{
    font-size:21px!important;
    line-height:1.04!important;
  }
  .tf-homepage .home-category-source-card strong b{
    font-size:18px!important;
  }
  .tf-homepage .home-category-source-card p{
    max-width:270px!important;
    font-size:8.5px!important;
  }
  .tf-homepage .home-category-source-card ul{
    gap:4px!important;
    margin-top:9px!important;
  }
  .tf-homepage .home-category-source-card li{
    font-size:7.5px!important;
  }

  .tf-homepage .home-category-subgrid{
    gap:8px!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-rows:100px 88px 30px!important;
    min-height:218px!important;
    height:218px!important;
    border-radius:10px!important;
  }
  .tf-homepage .home-category-subcard-image{
    height:100px!important;
  }
  .tf-homepage .home-category-subcard-image img{
    padding:5px!important;
  }
  .tf-homepage .home-category-subcard-body{
    height:88px!important;
    padding:7px 9px 6px!important;
    overflow:hidden!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    margin-bottom:4px!important;
    font-size:10px!important;
  }
  .tf-homepage .home-category-subcard-body ul{
    gap:2px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:7px!important;
    line-height:1.25!important;
  }
  .tf-homepage .home-category-subcard-action{
    min-height:30px!important;
    height:30px!important;
    padding:0 9px!important;
    font-size:7.5px!important;
  }
}

/* ---------- DESKTOP / LAPTOP ---------- */
@media(min-width:900px) and (max-width:1439px){
  .tf-homepage .home-category-showcases{
    padding:16px 0 20px!important;
  }
  .tf-homepage .home-category-showcases>.shell{
    width:calc(100% - 24px)!important;
  }
  .tf-homepage .home-category-showcase{
    padding:12px!important;
    border-radius:14px!important;
  }
  .tf-homepage .home-category-showcase-head{
    margin-bottom:9px!important;
  }
  .tf-homepage .home-category-showcase-head h3{
    font-size:22px!important;
  }
  .tf-homepage .home-category-showcase-head p{
    font-size:9px!important;
  }
  .tf-homepage .home-category-showcase-grid{
    grid-template-columns:minmax(235px,27%) minmax(0,73%)!important;
    gap:9px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:360px!important;
    height:360px!important;
    padding:13px!important;
    border-radius:12px!important;
  }
  .tf-homepage .home-category-source-card strong{
    font-size:19px!important;
  }
  .tf-homepage .home-category-source-card p{
    font-size:8px!important;
  }
  .tf-homepage .home-category-source-card li{
    font-size:7px!important;
  }

  .tf-homepage .home-category-subgrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,1fr)!important;
    gap:7px!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-rows:88px 78px 28px!important;
    min-height:194px!important;
    height:194px!important;
    border-radius:9px!important;
  }
  .tf-homepage .home-category-subcard-image{
    height:88px!important;
  }
  .tf-homepage .home-category-subcard-body{
    height:78px!important;
    padding:6px 7px 5px!important;
    overflow:hidden!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    margin-bottom:3px!important;
    font-size:9px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:6.5px!important;
    line-height:1.22!important;
  }
  .tf-homepage .home-category-subcard-action{
    height:28px!important;
    min-height:28px!important;
    padding-inline:7px!important;
    font-size:7px!important;
  }
}

/* ---------- TABLET ---------- */
@media(min-width:700px) and (max-width:899px){
  .tf-homepage .home-category-showcase{
    padding:11px!important;
  }
  .tf-homepage .home-category-showcase-head{
    margin-bottom:9px!important;
  }
  .tf-homepage .home-category-showcase-head h3{
    font-size:21px!important;
  }
  .tf-homepage .home-category-showcase-grid{
    gap:8px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:210px!important;
    height:210px!important;
    padding:12px!important;
  }
  .tf-homepage .home-category-subgrid{
    gap:7px!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-rows:82px 76px 28px!important;
    min-height:186px!important;
    height:186px!important;
  }
  .tf-homepage .home-category-subcard-image{
    height:82px!important;
  }
  .tf-homepage .home-category-subcard-body{
    height:76px!important;
    padding:6px 7px 5px!important;
    overflow:hidden!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    font-size:9px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:6.5px!important;
  }
  .tf-homepage .home-category-subcard-action{
    height:28px!important;
    min-height:28px!important;
    font-size:7px!important;
  }
}

/* ---------- MOBILE ---------- */
@media(max-width:699px){
  .tf-homepage .home-category-showcases{
    padding:12px 0 16px!important;
  }
  .tf-homepage .home-category-showcases>.shell{
    width:calc(100% - 14px)!important;
  }
  .tf-homepage .home-category-showcase-list{
    gap:12px!important;
  }
  .tf-homepage .home-category-showcase{
    padding:9px!important;
    border-radius:13px!important;
  }

  /* Critical fix: heading copy gets full width; CTA sits below instead of squeezing text. */
  .tf-homepage .home-category-showcase-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:7px!important;
    margin-bottom:8px!important;
  }
  .tf-homepage .home-category-showcase-head>div{
    width:100%!important;
    min-width:0!important;
  }
  .tf-homepage .home-category-browse-pill{
    padding:4px 7px!important;
    font-size:7px!important;
  }
  .tf-homepage .home-category-showcase-head h3{
    margin:6px 0 3px!important;
    font-size:20px!important;
    line-height:1.03!important;
  }
  .tf-homepage .home-category-showcase-head p{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.35!important;
  }
  .tf-homepage .home-category-showcase-head>a{
    width:100%!important;
    min-height:30px!important;
    padding:0 9px!important;
    justify-content:center!important;
    font-size:8px!important;
    border-radius:8px!important;
  }

  .tf-homepage .home-category-showcase-grid{
    gap:8px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:178px!important;
    height:178px!important;
    padding:11px!important;
    border-radius:11px!important;
    background-position:center center!important;
  }
  .tf-homepage .home-category-source-card strong{
    margin:44px 0 4px!important;
    font-size:17px!important;
    line-height:1.04!important;
    max-width:75%!important;
  }
  .tf-homepage .home-category-source-card p{
    max-width:78%!important;
    font-size:7.5px!important;
    line-height:1.35!important;
  }
  .tf-homepage .home-category-source-card ul{
    margin-top:6px!important;
    gap:3px!important;
  }
  .tf-homepage .home-category-source-card li{
    font-size:6.5px!important;
  }

  .tf-homepage .home-category-subgrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-rows:72px 74px 27px!important;
    min-height:173px!important;
    height:173px!important;
    border-radius:9px!important;
  }
  .tf-homepage .home-category-subcard-image{
    height:72px!important;
  }
  .tf-homepage .home-category-subcard-image img{
    padding:3px!important;
  }
  .tf-homepage .home-category-subcard-body{
    height:74px!important;
    padding:5px 6px 4px!important;
    overflow:hidden!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    margin-bottom:3px!important;
    font-size:8.5px!important;
    line-height:1.18!important;
  }
  .tf-homepage .home-category-subcard-body ul{
    gap:1px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:6.3px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .tf-homepage .home-category-subcard-action{
    height:27px!important;
    min-height:27px!important;
    padding:0 6px!important;
    font-size:6.8px!important;
  }
}

/* Small phones */
@media(max-width:390px){
  .tf-homepage .home-category-showcase{
    padding:8px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:164px!important;
    height:164px!important;
  }
  .tf-homepage .home-category-source-card strong{
    margin-top:38px!important;
    font-size:16px!important;
  }
  .tf-homepage .home-category-subgrid{
    gap:5px!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-rows:66px 70px 26px!important;
    min-height:162px!important;
    height:162px!important;
  }
  .tf-homepage .home-category-subcard-image{
    height:66px!important;
  }
  .tf-homepage .home-category-subcard-body{
    height:70px!important;
    padding:5px!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    font-size:8px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:6px!important;
  }
  .tf-homepage .home-category-subcard-action{
    height:26px!important;
    min-height:26px!important;
    font-size:6.5px!important;
  }
}