/* 82-profiel.css — thuisbakkerij-profiel, tegen het BakkerProfiel-bord. */

/* ---- galerij: één 1+4 raster ------------------------------------------
   Groot beeld links op 4/3, vier cellen rechts in een 2x2 op 1/1. Geen
   volle-breedte hero: die sneed een staande bakkersfoto uit tot 940x355 en
   blies hem op. */
.tb-profiel-galerij{padding:0 var(--tb-page-pad,60px);}
.tb-galerij-raster{
  list-style:none;margin:0;padding:0;
  display:grid;gap:8px;
}

/* Drie varianten, want het 1+4 raster valt om bij weinig foto's.
   Bij één foto werd het een vak van 826x574 uit een bron van 768 breed —
   uitgerekt en zacht. */
.tb-galerij-vier .tb-galerij-raster{
  grid-template-columns:58% repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,1fr);
}
.tb-galerij-rij .tb-galerij-raster{
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  max-width:900px;
}
.tb-galerij-rij .tb-galerij-groot{grid-row:auto;}
.tb-galerij-rij .tb-galerij-raster a{aspect-ratio:4/3;}
/* Eén foto: nooit over de volle breedte. De maat komt uit de bron. */
.tb-galerij-een .tb-galerij-raster{grid-template-columns:minmax(0,1fr);}
.tb-galerij-een .tb-galerij-groot{grid-row:auto;}
.tb-galerij-een .tb-galerij-raster a{aspect-ratio:4/3;}
.tb-galerij-raster li{margin:0;min-width:0;}
.tb-galerij-groot{grid-row:span 2;}
.tb-galerij-raster a{
  position:relative;display:block;height:100%;
  border-radius:var(--tb-r-img);overflow:hidden;background:var(--tb-sand);line-height:0;
}
.tb-galerij-raster img{width:100%;height:100%;object-fit:cover;display:block;}
.tb-galerij-vier .tb-galerij-groot a{aspect-ratio:4/3;}
.tb-galerij-vier .tb-galerij-raster li:not(.tb-galerij-groot) a{aspect-ratio:1/1;}
.tb-galerij-rest{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,26,51,.55);color:#fff;
  font:600 15px/1 var(--tb-sans);letter-spacing:.01em;
}
.tb-galerij-raster a:hover .tb-galerij-rest{background:rgba(20,26,51,.66);}

@media (max-width:899px){
  /* Onder 900 px: één beeld met een strip eronder. */
  .tb-galerij-vier .tb-galerij-raster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;}
  .tb-galerij-vier .tb-galerij-groot{grid-column:1 / -1;grid-row:auto;}
  .tb-galerij-vier .tb-galerij-groot a{aspect-ratio:4/3;}
  .tb-galerij-een .tb-galerij-raster{max-width:none;}
}
/* Identiteitsblok: naam en tagline krijgen lucht, het gat tussen naam en
   knoppen wordt gevuld met feiten in plaats van leeg te blijven. */
.tb-profiel-kop{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:26px var(--tb-page-pad,60px) 0;
}
.tb-profiel-avatar{
  width:88px;height:88px;border-radius:var(--tb-r-pill);object-fit:cover;
  border:4px solid var(--tb-surface);background:var(--tb-surface);flex:0 0 auto;
  box-shadow:0 8px 22px -14px rgba(20,26,51,.6);
}
.tb-profiel-identiteit{flex:1 1 300px;min-width:0;}
.tb-profiel .tb-profiel-identiteit h1{
  font-family:var(--tb-serif);font-size:clamp(25px,3vw,33px);font-weight:600;
  margin:0;color:var(--tb-ink);line-height:1.15;
}
.tb-profiel-meta{margin:6px 0 0;font-size:14px;color:var(--tb-muted);}
.tb-profiel-acties{display:flex;gap:10px;flex:0 0 auto;padding-bottom:4px;}

.tb-profiel-pillen{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:18px 0 0;padding:0 var(--tb-page-pad,60px);
}

/* Twee kolommen: links het verhaal, rechts één vaste feitenkaart.
   Naam, contactknop en kaart stonden op drie plekken met honderden pixels
   leegte ertussen; dat leest als losse informatie, niet als een profiel. */
.tb-profiel-body{
  display:grid;gap:40px;align-items:start;
  grid-template-columns:minmax(0,62fr) minmax(0,34fr);
  padding:26px var(--tb-page-pad,60px) 0;
}
.tb-profiel .tb-detail-blok h2{
  font-family:var(--tb-serif);font-size:22px;font-weight:600;color:var(--tb-ink);margin:0 0 14px;
}
.tb-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.tb-profiel-leeg{color:var(--tb-muted);font-size:15px;}

.tb-praktisch{
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);padding:20px;position:sticky;top:16px;
}
.tb-profiel .tb-praktisch h2{
  font-family:var(--tb-sans);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tb-muted);margin:0 0 14px;
}
.tb-praktisch dl{margin:0 0 18px;}
.tb-praktisch dl > div{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--tb-line);
}
.tb-praktisch dl > div:last-child{border-bottom:0;}
.tb-praktisch dt{font-size:13.5px;color:var(--tb-muted);flex:0 0 auto;}
.tb-praktisch dd{margin:0;font-size:14px;color:var(--tb-body);text-align:right;}
.tb-praktisch .tb-btn{width:100%;}
.tb-profiel-adresnoot{
  margin:12px 0 0;font-size:13px;color:var(--tb-muted);
  padding:12px 14px;background:var(--tb-surface);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-img);
}

@media (max-width:1023px){
  .tb-profiel-body{grid-template-columns:minmax(0,1fr);}
  .tb-praktisch{position:static;}
  .tb-grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:599px){
  .tb-profiel-kop,.tb-profiel-body,.tb-profiel-pillen{padding-left:20px;padding-right:20px;}
  .tb-grid-3{grid-template-columns:minmax(0,1fr);}
}


/* ---- profielinhoud die eerder ontbrak ---------------------------------- */
.tb-profiel-herkomst{margin:6px 0 0;font-size:14.5px;color:var(--tb-body);}
.tb-profiel-herkomst b{color:var(--tb-ink);font-weight:600;}
.tb-profiel-slogan{
  margin:10px 0 0;font-family:var(--tb-serif);font-style:italic;
  font-size:16px;color:var(--tb-accent-text);
}

.tb-profiel-raster{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
.tb-profiel-raster a{display:block;border-radius:var(--tb-r-img);overflow:hidden;line-height:0;background:var(--tb-sand);}
.tb-profiel-raster img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s ease;}
.tb-profiel-raster a:hover img{transform:scale(1.04);}

.tb-profiel-video iframe,.tb-profiel-video video{
  width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--tb-r-card);display:block;
}

.tb-profiel-pillen a.tb-pill{text-decoration:none;}
.tb-profiel-pillen a.tb-pill:hover{background:var(--tb-tint);color:var(--tb-ink);}

.tb-profiel-kaart{margin-top:14px;}
.tb-profiel-kaart .tb-map{height:220px;border-radius:var(--tb-r-card);}
.tb-profiel-adres{
  margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--tb-muted);
}

@media (max-width:899px){
  .tb-profiel-strip{grid-template-columns:repeat(4,minmax(0,1fr));}
  .tb-profiel-raster{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tb-profiel-galerij{padding-left:20px;padding-right:20px;}
}


/* ---- feiten naast de naam --------------------------------------------- */
.tb-profiel-feiten{display:flex;gap:30px;margin:0;flex:0 0 auto;flex-wrap:wrap;}
.tb-profiel-feiten div{display:flex;flex-direction:column;}
.tb-profiel-feiten dd{
  margin:0;font-family:var(--tb-serif);font-size:20px;font-weight:600;
  color:var(--tb-ink);line-height:1.1;white-space:nowrap;
}
.tb-profiel-feiten dt{order:2;margin-top:3px;font-size:12px;color:var(--tb-muted);white-space:nowrap;}

.tb-profiel-pillen-kop{margin-top:12px;}
.tb-profiel-pillen-kop .tb-pill{font-size:12px;}

/* ---- sectiekoppen: hiërarchie -----------------------------------------
   Meer wit erboven dan eronder, zodat een kop bij zijn eigen tekst hoort en
   niet in het midden van twee blokken zweeft. */
.tb-profiel .tb-detail-blok{padding-top:0;}
.tb-profiel .tb-detail-blok + .tb-detail-blok{margin-top:6px;}
.tb-profiel .tb-detail-blok h2{
  font-family:var(--tb-serif);font-size:20px;font-weight:600;color:var(--tb-ink);
  margin:38px 0 14px;line-height:1.2;
}
.tb-profiel .tb-detail-blok:first-child h2{margin-top:26px;}

.tb-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1199px){ .tb-grid-4{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:899px){  .tb-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:599px){  .tb-grid-4{grid-template-columns:minmax(0,1fr);} }

@media (max-width:899px){
  .tb-profiel-feiten{gap:22px;}
  .tb-profiel-galerij{padding-left:20px;padding-right:20px;}
}


/* ---- de feitenkaart ----------------------------------------------------- */
.tb-feitenkaart{
  position:sticky;top:16px;
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-card);padding:18px;
  box-shadow:var(--tb-lift);
}
.tb-feitenkaart-kop{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.tb-feitenkaart-kop .tb-profiel-avatar{width:56px;height:56px;border-width:3px;box-shadow:none;}
.tb-feitenkaart-naam{
  margin:0;font-family:var(--tb-serif);font-size:16.5px;font-weight:600;color:var(--tb-ink);line-height:1.2;
}
.tb-feitenkaart-plaats{margin:3px 0 0;font-size:13.5px;}
.tb-feitenkaart-plaats a{
  color:var(--tb-body);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--tb-accent-line);
}
.tb-feitenkaart-plaats a:hover{color:var(--tb-action);}

.tb-feitenkaart-acties{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.tb-feitenkaart-acties .tb-btn,
.tb-feitenkaart-acties .tb-btn-soft{width:100%;}

/* Wettelijke status: geen grijze regel tussen de rest, maar een eigen blok met
   een icoon en een zin die zegt wat het betekent. */
.tb-status{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 13px;margin-bottom:14px;
  background:var(--tb-tint);border-radius:var(--tb-r-img);
}
.tb-status-icoon{flex:0 0 auto;color:var(--tb-accent-line);margin-top:1px;}
.tb-status-keurmerk{color:var(--tb-ok,#097C56);}
.tb-status b{display:block;font-size:14px;font-weight:600;color:var(--tb-ink);}
.tb-status span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--tb-body);}

.tb-feitenkaart-lijst{margin:0 0 14px;}
.tb-feitenkaart-lijst > div{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--tb-line);
}
.tb-feitenkaart-lijst > div:last-child{border-bottom:0;}
.tb-feitenkaart-lijst dt{font-size:13px;color:var(--tb-muted);flex:0 0 auto;}
.tb-feitenkaart-lijst dd{margin:0;font-size:13.5px;color:var(--tb-body);text-align:right;}

.tb-feitenkaart-kaart .tb-map{height:170px;border-radius:var(--tb-r-img);}
.tb-profiel-adres{margin:9px 0 0;font-size:13px;line-height:1.45;color:var(--tb-body);}
.tb-profiel-belofte{margin:4px 0 0;font-size:12px;line-height:1.45;color:var(--tb-muted);}

.tb-feitenkaart-voet{
  display:flex;gap:16px;margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--tb-line);font-size:12.5px;
}
.tb-feitenkaart-voet a,
.tb-deel{
  color:var(--tb-muted);text-decoration:underline;text-underline-offset:3px;
  background:none;border:0;padding:0;height:auto;min-height:0;
  font:inherit;cursor:pointer;
}
.tb-feitenkaart-voet a:hover,.tb-deel:hover{color:var(--tb-ink);}

/* ---- recensies ---------------------------------------------------------- */
.tb-recensies{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.tb-recensies li{
  background:var(--tb-surface);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-img);padding:14px 16px;
}
.tb-recensie-kop{display:flex;align-items:baseline;gap:8px;margin:0;font-size:13px;color:var(--tb-muted);}
.tb-recensie-kop b{color:var(--tb-ink);font-size:14px;}
.tb-recensie-tekst{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:var(--tb-body);}

@media (max-width:1023px){
  .tb-profiel-body{grid-template-columns:minmax(0,1fr);gap:28px;}
  .tb-feitenkaart{position:static;}
}


/* De kop staat nu in de linkerkolom, niet meer als eigen balk over de volle
   breedte. Zonder deze reset bleef hij een flexrij en stonden naam en herkomst
   naast elkaar met een gat ertussen. */
.tb-profiel-hoofd .tb-profiel-kop{
  display:block;padding:0;margin:0 0 26px;
}
.tb-profiel-hoofd .tb-profiel-kop h1{
  font-family:var(--tb-serif);font-size:clamp(26px,3vw,34px);font-weight:600;
  line-height:1.14;margin:0;color:var(--tb-ink);
}
.tb-profiel-hoofd .tb-profiel-herkomst{margin:8px 0 0;}
.tb-profiel-hoofd .tb-profiel-herkomst a{
  color:var(--tb-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--tb-accent-line);
}
.tb-profiel-hoofd .tb-profiel-herkomst a:hover{color:var(--tb-action);}
.tb-profiel-hoofd .tb-profiel-slogan{margin:10px 0 0;}
.tb-profiel-hoofd .tb-profiel-pillen-kop{margin-top:14px;}


/* Eén breedte voor de hele pagina.
   De voettekstkolommen zaten op 1120 px terwijl de inhoud 1320 px kreeg; dat
   leest als twee verschillende pagina's onder elkaar. */
.tb-profiel-galerij,
.tb-profiel-body{max-width:var(--tb-max);margin-left:auto;margin-right:auto;}