/* 93-stad.css — de stadspagina.
 *
 * Eén raster voor de hele pagina: inhoud op 1200px, gecentreerd. Alleen de
 * verloopband loopt van vensterrand tot vensterrand, want dat is achtergrond en
 * geen inhoud. Verticale afstanden zijn 32, 64 of 96 — geen andere waarden.
 */

.tb-stad-in{
  max-width:1200px;margin-inline:auto;
  padding-inline:24px;
}

/* De band. `100vw` met een negatieve marge trekt hem uit het raster naar beide
   vensterranden; de inhoud erbinnen blijft op 1200px staan. */
/* Een smalle band.
 *
 * Er stond een zoekveld in. Met drie tot zestien bakkers per stad zoekt niemand
 * binnen één stad — dat veld gaf de band ruim 400px hoogte en duwde de bakkers
 * onder de vouw, om een functie die niets te doorzoeken heeft. Weg dus, en de
 * band mag daarmee terug naar wat hij is: een kop met een zin eronder. */
.tb-stad-band{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--tb-wash);
  padding:32px 0;
  margin-bottom:64px;
}
.tb-stad-band .tb-kruimels{padding-top:0;}
.tb-stad h1{
  font-family:var(--tb-serif);font-size:clamp(30px,3.6vw,44px);font-weight:600;
  line-height:1.12;color:var(--tb-ink);margin:8px 0 0;
}
.tb-stad-hero-tekst{
  margin:12px 0 0;max-width:62ch;
  font:400 17px/1.6 var(--tb-sans);color:var(--tb-body);
}

/* ------------------------------------------------------------ twee kolommen */

.tb-stad-kolommen{display:grid;gap:40px;align-items:start;}
@media (min-width:1024px){
  .tb-stad-kolommen{grid-template-columns:780px 380px;}
  /* Geen bakkers in de buurt? Dan geen lege zijkolom, en de hoofdkolom pakt
     de volle 1200px. */
  .tb-stad-kolommen.is-enkel{grid-template-columns:minmax(0,1fr);}
}

.tb-stad-hoofd h2,
.tb-stad-zij h2{
  font-family:var(--tb-serif);font-size:22px;font-weight:600;color:var(--tb-ink);
  margin:0 0 16px;
}

/* Twee kaarten naast elkaar in de hoofdkolom; de brede kaart pakt beide sporen.
   `align-items:start` zodat een korte kaart niet wordt uitgerekt tot leegte. */
.tb-bakker-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:24px;align-items:start;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:1024px){
  .tb-stad-kolommen.is-enkel .tb-bakker-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:639px){
  .tb-bakker-grid{grid-template-columns:minmax(0,1fr);}
}

/* De kaart zelf staat in `81-archive-bakker.css` — dat is de vormgeving die op
   het archief al gebruikt werd en die Fatih wil houden. Hier alleen wat de
   stadspagina er extra bij nodig heeft: de brede variant en de regel voor een
   bakker zonder aanbod. Geen enkele eigenschap van de gewone kaart wordt hier
   overschreven; anders krijg je twee vormgevingen die om voorrang vechten. */

.tb-bakker-geenbaksels{
  margin:0;padding:12px 0 0;border-top:1px solid var(--tb-line);
  font-size:14px;color:var(--tb-muted);
}

/* ------------------------------------------------------------- de zijkolom */

@media (min-width:1024px){
  .tb-stad-zij{position:sticky;top:100px;}
}
.tb-buurt-hulp{margin:-8px 0 16px;font-size:14px;color:var(--tb-muted);}
.tb-buurt-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.tb-buurt-rij a{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;
  min-height:88px;padding:12px;
  background:var(--tb-surface);border:1px solid var(--tb-line);border-radius:var(--tb-r-ctrl);
  text-decoration:none;color:var(--tb-body);
}
.tb-buurt-rij a:hover{border-color:var(--tb-accent-line);}
.tb-buurt-rij a:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}
.tb-buurt-foto{width:64px;height:64px;border-radius:var(--tb-r-img);overflow:hidden;background:var(--tb-ground-alt);display:block;}
.tb-buurt-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.tb-buurt-tekst{display:grid;gap:2px;min-width:0;}
.tb-buurt-naam{font-weight:600;color:var(--tb-ink);font-size:15px;}
.tb-buurt-meta{font-size:13px;color:var(--tb-soft);}
.tb-buurt-baksel{font-size:13px;color:var(--tb-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-buurt-meer{display:inline-block;margin-top:12px;font-size:14px;color:var(--tb-action);
  text-decoration:underline;text-underline-offset:3px;}

/* ----------------------------------------------------------------- de kaart */

.tb-stad-kaart{margin-top:64px;}
.tb-stad-kaart .tb-map{
  height:280px;border-radius:var(--tb-r-card);overflow:hidden;
  border:1px solid var(--tb-line);background:var(--tb-ground-alt);
}
.tb-kaart-legenda{
  margin:12px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:var(--tb-muted);
}
.tb-legenda-stad,.tb-legenda-buurt{
  width:12px;height:12px;border-radius:var(--tb-r-pill);display:inline-block;flex:none;
}
.tb-legenda-stad{background:var(--tb-action);}
.tb-legenda-buurt{background:var(--tb-surface);border:2px solid var(--tb-action);}
.tb-legenda-buurt{margin-left:16px;}
/* De open marker voor de 5 km-ring. */
.tb-marker[data-soort="buurt"]{background:var(--tb-surface);border-color:var(--tb-action);}

/* ------------------------------------------------------------------- tekst */

.tb-stad-feiten{margin-top:64px;padding-bottom:96px;}
.tb-stad-feiten h2{
  font-family:var(--tb-serif);font-size:21px;font-weight:600;color:var(--tb-ink);
  margin:32px 0 8px;
}
.tb-stad-feiten h2:first-child{margin-top:0;}
.tb-stad-feiten p{max-width:66ch;font-size:16px;line-height:1.75;color:var(--tb-body);margin:0;}
/* Lopende tekst, geen tabel: geen scheidingslijnen tussen de bakkerregels. */
.tb-stad-regels a,.tb-stad-buren a{color:var(--tb-ink);text-decoration:underline;
  text-decoration-color:var(--tb-accent-line);text-underline-offset:3px;}
.tb-stad-regels a:hover,.tb-stad-buren a:hover{color:var(--tb-action);}

.tb-stad-vragen{max-width:66ch;margin-top:8px;}
.tb-stad-vragen details{border-bottom:1px solid var(--tb-line);}
.tb-stad-vragen summary{
  cursor:pointer;list-style:none;padding:14px 0;min-height:44px;
  display:flex;align-items:center;
  font:600 16px/1.4 var(--tb-sans);color:var(--tb-ink);
}
.tb-stad-vragen summary::-webkit-details-marker{display:none;}
.tb-stad-vragen summary:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}
.tb-stad-vragen p{margin:0 0 16px;}

/* De huidige stad in de voettekst. Niet op kleur alleen. */
.tb-foot-steden a[aria-current="page"]{
  font-weight:600;color:var(--tb-ink);
  text-decoration:underline;text-decoration-color:var(--tb-accent-line);text-underline-offset:4px;
}

@media (max-width:1023px){
  .tb-stad-zij{margin-top:32px;}
  .tb-stad-band{padding:32px 0;margin-bottom:32px;}
  .tb-stad-kaart,.tb-stad-feiten{margin-top:32px;}
  .tb-stad-feiten{padding-bottom:64px;}
}

/* De regel onder de kop van een stad zonder eigen bakkers. */
.tb-stad-regio-hulp{
  margin:-8px 0 20px;max-width:66ch;
  font:400 15px/1.6 var(--tb-sans);color:var(--tb-muted);
}