/* 98-bakspullen.css — bakspullen van hobbybakkers.nl (inc/tb-bakspullen.php, templates/tb-bakspullen.php).
 *
 * Twee delen:
 *   .tb-hb-band   het advertentieblok boven de footer, op elke pagina. Wit vlak met een haarlijn: de footer heeft
 *                 al zijn eigen verloop en de foot-cta het ene getinte vlak, dus dit blok kleurt niet mee.
 *   .tb-hb        de pagina /bakspullen/. Wit op ivoor; raster repeat(auto-fill, minmax(280px, 1fr)) zoals overal.
 *
 * "Advertentie" staat er klein boven, in --tb-soft: herkenbaar als reclame, zonder te schreeuwen. */

/* ---- het blok boven de footer ---- */
.tb-hb-band{
  margin-top:40px;
  background:var(--tb-surface);
  border-top:1px solid var(--tb-line);
  border-bottom:1px solid var(--tb-line);
}
.tb-hb-band + .tb-footer{margin-top:0;}
.tb-hb-band-in{
  max-width:var(--tb-container);margin-inline:auto;padding:32px 24px;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center;
}
.tb-hb-label{
  margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tb-soft);
}
.tb-hb-band h2{margin:0 0 10px;font-family:var(--tb-serif);font-size:24px;line-height:1.2;font-weight:600;color:var(--tb-ink);}
.tb-hb-band-tekst p{margin:0 0 10px;color:var(--tb-body);font-size:15px;line-height:1.6;}
.tb-hb-band-tekst .tb-hb-label{font-size:12px;color:var(--tb-soft);}
.tb-hb-band-tekst .tb-hb-band-lid{color:var(--tb-ink);font-weight:700;}
.tb-hb-band-tekst .tb-hb-band-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;}
.tb-hb-band-fotos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.tb-hb-band-fotos a{display:block;text-decoration:none;color:var(--tb-body);}
.tb-hb-band-fotos img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:8px;box-sizing:border-box;
  border-radius:var(--tb-r-img);background:var(--tb-surface);border:1px solid var(--tb-line);
}
.tb-hb-band-fotos span{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--tb-muted);}
.tb-hb-band-fotos a:hover span{color:var(--tb-accent-text);}

@media (max-width:860px){
  .tb-hb-band-in{grid-template-columns:1fr;gap:20px;padding:28px 16px;}
  .tb-hb-band-fotos{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---- de pagina /bakspullen/ ---- */
.tb-hb{max-width:var(--tb-container);margin:0 auto;padding:40px 24px 24px;}
.tb-hb-kopblok{margin-bottom:12px;}
.tb-hb-kopblok h1{margin:0 0 8px;font-family:var(--tb-serif);font-size:clamp(32px,4vw,44px);line-height:1.1;color:var(--tb-ink);}
.tb-hb-kopblok p{margin:0 0 12px;max-width:66ch;color:var(--tb-body);font-size:17px;line-height:1.6;}
.tb-hb-kopblok .tb-hb-label{font-size:12px;color:var(--tb-soft);margin-bottom:8px;}
.tb-hb-kopblok .tb-hb-uitleg{font-size:15px;color:var(--tb-muted);}
.tb-hb-kopblok a{color:var(--tb-accent-text);}

.tb-hb-groep{margin-top:36px;}
.tb-hb-groep h2{margin:0 0 16px;font-family:var(--tb-serif);font-size:24px;font-weight:600;color:var(--tb-ink);}
.tb-hb-groep h2 span{font-family:var(--tb-sans);font-size:15px;font-weight:400;color:var(--tb-soft);margin-left:6px;}

.tb-hb-raster{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;
}
.tb-hb-product a{
  display:flex;flex-direction:column;height:100%;padding:12px;box-sizing:border-box;
  background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-card);
  text-decoration:none;color:var(--tb-body);
}
.tb-hb-product a:hover{border-color:var(--tb-border);}
.tb-hb-product img,
.tb-hb-geenfoto{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border-radius:var(--tb-r-img);background:var(--tb-surface);margin-bottom:12px;
}
.tb-hb-geenfoto{
  display:flex;align-items:center;justify-content:center;
  background:var(--tb-ground);font-family:var(--tb-serif);font-size:20px;color:var(--tb-soft);
}
.tb-hb-naam{font-size:16px;line-height:1.35;font-weight:700;color:var(--tb-ink);}
.tb-hb-prijs{margin-top:auto;padding-top:10px;font-size:18px;font-weight:700;color:var(--tb-ink);}
.tb-hb-gewoon{font-size:13px;color:var(--tb-soft);}
.tb-hb-product a:hover .tb-hb-naam{color:var(--tb-accent-text);}

.tb-hb-bron{margin:32px 0 0;font-size:13px;color:var(--tb-soft);}
.tb-hb-leeg{margin:24px 0;color:var(--tb-muted);}

/* Telefoon: twee kolommen. Bewust anders dan minmax(280px) elders: met 44 producten werd één kolom een lijst van
   ± 20.000 px; een productfoto met naam en prijs blijft op 165 px leesbaar. */
@media (max-width:600px){
  .tb-hb{padding:28px 16px 16px;}
  .tb-hb-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .tb-hb-product a{padding:8px;}
  .tb-hb-naam{font-size:14px;}
  .tb-hb-prijs{font-size:16px;}
  .tb-hb-gewoon{font-size:12px;}
}