/* 81-archive-bakker.css — /thuisbakkers/, against the Main artboard. */

.tb-bakker-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.tb-bakker-hero-tekst{flex:1 1 420px;min-width:0;}
.tb-bakker-hero p a{
  color:var(--tb-ink);text-decoration:underline;
  text-decoration-color:var(--tb-accent-line);text-underline-offset:4px;
}
.tb-bakker-cijfers{
  display:flex;gap:36px;margin:0 0 6px;flex:0 0 auto;
}
.tb-bakker-cijfers div{text-align:center;}
.tb-bakker-cijfers dd{
  margin:0;font-family:var(--tb-serif);font-size:30px;font-weight:600;color:var(--tb-ink);
  line-height:1.1;
}
.tb-bakker-cijfers dt{order:2;font-size:12.5px;color:var(--tb-muted);margin-top:4px;}
.tb-bakker-cijfers div{display:flex;flex-direction:column;}

/* Cards left, map right. The map is sticky within its own column so it stays
   in view through a scroll — the previous map widget grew to 15 593 px because
   nothing constrained it, so height is stated here, not inherited. */
.tb-bakker-layout{
  display:grid;gap:24px;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  padding:0 var(--tb-page-pad,60px);
}
.tb-bakker-layout > .tb-results{padding-left:0;padding-right:0;}
.tb-bakker-kaartkolom{position:sticky;top:16px;}
.tb-bakker-kaartkolom .tb-map{height:calc(100vh - 120px);max-height:760px;}

.tb-bakker-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--tb-gutter,20px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tb-bakker-kaart{
  background:var(--tb-surface);border-radius:var(--tb-r-card);overflow:hidden;
  box-shadow:var(--tb-lift);display:flex;flex-direction:column;
}
/* The ratio goes on the IMAGE, with height:auto — not on the wrapper.
   aspect-ratio on a block whose child has height:100% is a cyclic dependency:
   the percentage resolves against auto, the intrinsic image height wins, and
   the box grows. That is what happened here — a portrait phone screenshot
   rendered a 947 px cover next to a 426 px one and the rows went ragged.
   The baksel card already used the working form; this now matches it. */
.tb-bakker-cover{display:block;line-height:0;background:var(--tb-sand,#F1EBE4);}
.tb-bakker-cover img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
}
.tb-bakker-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto;}

.tb-bakker-kop{display:flex;gap:12px;align-items:center;min-width:0;}
.tb-bakker-avatar{
  width:44px;height:44px;border-radius:var(--tb-r-pill);object-fit:cover;flex:0 0 auto;
  border:2px solid var(--tb-surface);box-shadow:0 0 0 1px var(--tb-line);
}
.tb-bakker-kaart .tb-bakker-naam{
  font-family:var(--tb-serif);font-size:17px;font-weight:600;line-height:1.25;
  margin:0;color:var(--tb-ink);
}
.tb-bakker-naam a{color:inherit;text-decoration:none;}
.tb-bakker-naam a:hover{text-decoration:underline;}
.tb-bakker-kaart .tb-bakker-meta{margin:2px 0 0;font-size:13px;color:var(--tb-muted);}

.tb-bakker-baksels{
  list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--tb-line);
  display:flex;flex-direction:column;gap:7px;
}
.tb-bakker-baksels li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;}
.tb-bakker-baksels a{
  font-size:14px;color:var(--tb-body);text-decoration:none;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tb-bakker-baksels a:hover{color:var(--tb-action);text-decoration:underline;}
.tb-bakker-baksels span{font-size:14px;font-weight:700;color:var(--tb-ink);flex:0 0 auto;}
.tb-bakker-meer{
  font-size:13px;color:var(--tb-body);text-decoration:underline;
  text-decoration-color:rgba(20,26,51,.25);text-underline-offset:3px;
}

.tb-bakker-voet{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--tb-line);
}
.tb-bakker-kaart .tb-bakker-rating{margin:0;font-size:13.5px;color:var(--tb-muted);}
.tb-bakker-rating b{color:var(--tb-ink);font-size:14.5px;}
.tb-ster{color:var(--tb-accent);}
.tb-bakker-voet .tb-btn-soft{height:var(--tb-h-ctrl-sm);padding:0 16px;font-size:14px;}

.tb-pagination-telling{margin:0;font-size:13.5px;color:var(--tb-muted);}

@media (max-width:1199px){
  .tb-bakker-layout{grid-template-columns:minmax(0,1fr);}
  .tb-bakker-kaartkolom{position:static;order:-1;}
  .tb-bakker-kaartkolom .tb-map{height:320px;}
}
@media (max-width:767px){
  .tb-bakker-grid{grid-template-columns:minmax(0,1fr);}
  .tb-bakker-layout{padding:0 20px;}
  .tb-bakker-cijfers{gap:24px;}
}