/* TradesFolks 18.4.00 — Homepage component ownership layer.
   Loaded last on the public layout. It normalizes only structural ownership:
   page gutters, hero canvas, category/service grids and responsive rails.
   No component content, colors, or database behavior is changed. */

body:has(.tf-home-v3){
  --tf-home-gutter:24px;
  --tf-home-section-gap:28px;
}
body:has(.tf-home-v3) :is(
  .tf-home-v3>.shell,
  .tf-home-v3-hero-wrap,
  .home-category-showcases>.shell,
  .tf-sourcing-solutions>.shell,
  .tf-business-growth-services>.shell,
  .tf-rfq-canonical__canvas
){
  width:calc(100% - (var(--tf-home-gutter) * 2));
  max-width:none;
  margin-inline:auto;
}

/* Hero: one canvas owner. Artwork fills the current slider box; overlays remain above it. */
body:has(.tf-home-v3) .tf-home-v3-hero{
  position:relative;
  overflow:hidden;
}
body:has(.tf-home-v3) .tf-home-v3-media,
body:has(.tf-home-v3) .tf-home-v3-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
body:has(.tf-home-v3) .tf-home-v3-slide{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
}

/* Marketplace showcase and sourcing cards: exactly four across on wide desktop. */
@media(min-width:1281px){
  body:has(.tf-home-v3) :is(.tf-service-card-grid,.home-category-showcase-grid){
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Tablet ownership: two columns without changing card internals. */
@media(min-width:761px) and (max-width:1280px){
  body:has(.tf-home-v3) :is(.tf-service-card-grid,.home-category-showcase-grid){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile: compact app-like rail and consistent gutters. */
@media(max-width:760px){
  body:has(.tf-home-v3){--tf-home-gutter:12px}
  body:has(.tf-home-v3) :is(.tf-service-card-grid,.home-category-showcase-grid){
    display:flex;
    overflow-x:auto;
    gap:12px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body:has(.tf-home-v3) :is(.tf-service-card-grid,.home-category-showcase-grid)::-webkit-scrollbar{
    display:none;
  }
  body:has(.tf-home-v3) :is(.tf-service-card,.home-category-showcase-card){
    flex:0 0 min(86vw,360px);
    scroll-snap-align:start;
  }
}