/* 06-hero.css — de koperband, volgens het Kop-bord.
   De regels van dat bord staan in inc/tb-hero.php; hier staat de uitvoering. */

.tb-hero{
  background:linear-gradient(104deg,
    var(--tb-verloop-mint) 0%,
    var(--tb-verloop-room) 52%,
    var(--tb-verloop-blush) 100%);
}
/* Op de verkoopkant draait het verloop om. Nooit een ander verloop erbij. */
.tb-hero-verkoop{
  background:linear-gradient(104deg,
    var(--tb-verloop-blush) 0%,
    var(--tb-verloop-room) 48%,
    var(--tb-verloop-mint) 100%);
}

.tb-hero-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
  align-items:center;gap:32px;
  padding:clamp(40px,6vw,78px) var(--tb-page-pad,60px);
  max-width:var(--tb-max,1440px);margin:0 auto;
}
.tb-hero-categorie .tb-hero-in{padding-top:clamp(28px,3.6vw,46px);padding-bottom:clamp(28px,3.6vw,46px);}
.tb-hero-tekst{min-width:0;}

/* De krul: één keer per pagina, boven de kop. */
.tb-krul{display:block;margin:0 0 14px;}
.tb-krul-terracotta{color:var(--tb-accent-line,#E07B39);}
/* #5B8C74 van het bord haalt 3,65:1 op de ivoren ondergrond; de vloer is 4,5.
   Donkerder gezet zodat de krul ook als teken leesbaar blijft. */
.tb-krul-groen{color:#3D6B54;}

/* De kop: Fraunces, kleine letter, 40–62 px naar hoogte van de band. */
.tb-hero h1{
  font-family:var(--tb-serif);font-weight:600;
  font-size:clamp(34px,4.4vw,62px);line-height:1.04;
  letter-spacing:-.01em;text-transform:lowercase;
  margin:0;color:var(--tb-ink);max-width:15ch;
}
.tb-hero-categorie h1{font-size:clamp(28px,3.2vw,44px);}

/* Eén regel wit eronder, dan het bewijs in kleine letters, dan de actie. */
.tb-hero-sub{
  margin:18px 0 0;font-size:clamp(15px,1.2vw,18px);line-height:1.5;
  color:var(--tb-body);max-width:44ch;
}
.tb-hero-bewijs{
  margin:12px 0 0;font-size:13.5px;color:var(--tb-muted);max-width:52ch;
}
.tb-hero-zoek{margin-top:22px;max-width:640px;}
.tb-hero-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}

.tb-hero-populair{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:14px 0 0;font-size:13.5px;color:var(--tb-muted);
}
.tb-hero-populair a{
  color:var(--tb-body);text-decoration:underline;
  text-underline-offset:4px;text-decoration-color:rgba(20,26,51,.28);
}
.tb-hero-populair a:hover{color:var(--tb-action);}

/* De uitsnede: één product, vrijstaand, zachte slagschaduw eronder. */
.tb-hero-uitsnede{display:flex;justify-content:center;align-items:center;min-width:0;}
.tb-hero-uitsnede img{
  width:100%;max-width:560px;height:auto;display:block;
  filter:drop-shadow(0 26px 30px rgba(80,45,20,.20));
}
/* Zonder beeld krijgt de tekst de hele band, geen leeg gat. Het tegelblok
   telt óók als beeld — zonder deze uitzondering klapte de band terug naar één
   kolom en gingen de tegels onder de tekst staan in plaats van ernaast. */
.tb-hero-in:not(:has(.tb-hero-uitsnede)):not(:has(.tb-hero-tegels)){
  grid-template-columns:minmax(0,1fr);
}

@media (max-width:899px){
  .tb-hero-in{grid-template-columns:minmax(0,1fr);padding-left:20px;padding-right:20px;}
  .tb-hero-uitsnede{order:-1;}
  .tb-hero h1{max-width:none;}
}

/* De zoekbalk in de band.
   `.tb-search-where` draagt ook `.tb-nearby`, en die klasse staat in
   80-archive-baksel.css op `flex:1 1 420px` — die won, waardoor het
   postcodeveld 452 px werd en het zoekwoordveld 189 px overhield. Hier staan
   de verhoudingen van het bord, met genoeg gewicht om te winnen. */
.tb-hero-zoek .tb-search-field{flex:1 1 58%;min-width:0;}
.tb-hero-zoek .tb-search-where.tb-nearby{
  flex:0 1 30%;min-width:0;display:block;gap:0;
  border-left:1px solid var(--tb-line);padding-left:16px;
}
.tb-hero-zoek .tb-search-where .tb-nearby-row{display:block;}
.tb-hero-zoek .tb-nearby-plaats{
  width:100%;border:0;background:none;padding:0;height:var(--tb-h-ctrl);
  font-size:15px;
}
.tb-hero-zoek .tb-btn{flex:0 0 auto;}
.tb-hero .tb-nearby-status{margin:8px 0 0;font-size:12.5px;color:var(--tb-muted);}
.tb-hero .tb-nearby-status:empty{display:none;}

@media (max-width:599px){
  .tb-hero-zoek .tb-search-field,
  .tb-hero-zoek .tb-search-where.tb-nearby{flex:1 1 100%;border-left:0;padding-left:0;}
  .tb-hero-zoek .tb-search-where.tb-nearby{border-top:1px solid var(--tb-line);padding-top:6px;}
}

/* ---- landingsband (Home-bord) -------------------------------------------
   Kop in gewone zin, groter dan de categoriekop, en het tegelblok ernaast. */
.tb-hero-landing h1{
  text-transform:none;font-size:clamp(32px,4.2vw,54px);max-width:16ch;
}
.tb-hero-landing .tb-hero-sub{margin-top:16px;font-size:clamp(15px,1.15vw,17px);max-width:46ch;}
.tb-hero-landing .tb-hero-zoek{margin-top:26px;}

.tb-hero-tegels{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;min-width:0;
}
.tb-hero-tegels li{margin:0;}
.tb-hero-tegels a{
  display:block;border-radius:var(--tb-r-card);overflow:hidden;line-height:0;
  background:#F3EDE7;
}
.tb-hero-tegels img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .3s ease;
}
.tb-hero-tegels a:hover img{transform:scale(1.03);}
/* De tinten van het bord blijven de ondergrond, zodat een baksel zonder foto
   nog steeds een vorm achterlaat in plaats van een gat. */
.tb-hero-tegels li:nth-child(1) a{background:#FBE5DF;}
.tb-hero-tegels li:nth-child(2) a{background:#E4F1EA;}
.tb-hero-tegels li:nth-child(3) a{background:#FBF0E2;}
.tb-hero-tegels li:nth-child(4) a{background:#F5EDE5;}

@media (max-width:899px){
  .tb-hero-tegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
}