/* 80-archive-baksel.css — /baksel/ rendered without Elementor.

   Markup comes from inc/tb-archive-baksel.php, so every class here is one we
   own. No id hooks, no !important, no fighting generated per-template CSS. */

.tb-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.tb-archive{background:var(--tb-ground);}

/* ---- hero --------------------------------------------------------------- */
.tb-archive-hero{
  padding:56px var(--tb-page-pad,60px) 40px;
  background:var(--tb-wash);
}
.tb-archive-hero h1{
  font-family:var(--tb-serif);
  font-size:clamp(31px,4.2vw,50px);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--tb-ink);
  margin:0 0 14px;
  max-width:16ch;
}
.tb-archive-hero > p{
  font-size:16.5px;line-height:1.6;color:var(--tb-muted);
  max-width:58ch;margin:0 0 28px;
}

/* The one element on this site allowed a shadow beyond --tb-lift. */
.tb-search{
  display:flex;align-items:center;gap:6px;
  max-width:780px;padding:8px 8px 8px 20px;
  background:var(--tb-surface);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(20,26,51,.05), 0 22px 48px -32px rgba(20,26,51,.5);
}
.tb-search-field{flex:1 1 auto;min-width:0;display:block;}
.tb-search-where{flex:0 1 220px;border-left:1px solid var(--tb-line);padding-left:16px;}
.tb-search input{
  width:100%;height:var(--tb-h-ctrl);border:0;background:none;outline:none;
  font-family:var(--tb-sans);font-size:15px;color:var(--tb-body);
  padding:0;min-width:0;border-radius:0;
}
.tb-search input::placeholder{color:var(--tb-soft);}
.tb-search input:focus-visible{outline:2px solid var(--tb-action);outline-offset:4px;border-radius:4px;}

.tb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--tb-h-ctrl);padding:0 24px;border:0;border-radius:var(--tb-r-ctrl);
  background:var(--tb-action);color:#fff;
  font-family:var(--tb-sans);font-size:14.5px;font-weight:700;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.tb-btn:hover{background:var(--tb-action-hover);color:#fff;}
.tb-btn-soft{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--tb-h-ctrl);padding:0 20px;border:1px solid var(--tb-border-strong);
  border-radius:var(--tb-r-ctrl);background:var(--tb-surface);color:var(--tb-body);
  font-size:14.5px;font-weight:500;text-decoration:none;
}
.tb-btn-soft:hover{border-color:var(--tb-ink);color:var(--tb-ink);}

/* ---- soort row ----------------------------------------------------------
   Replaces the board's occasion grid. The occasions exist as a taxonomy but
   almost nothing is tagged (12 / 3 / 2 / 9 / 2), so those tiles would advertise
   empty shelves. soort-gebak has real volume today: Gebak 95, Taarten 45. */
.tb-soort-row{padding:32px var(--tb-page-pad,60px) 8px;}
.tb-soort-heading{
  font-family:var(--tb-sans);font-size:14.5px;font-weight:500;
  color:var(--tb-muted);margin:0 0 14px;
}
.tb-soort-row ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
.tb-soort-row a{
  display:block;text-decoration:none;
  padding:18px 18px 16px;
  background:var(--tb-blush);
  border-radius:var(--tb-r-card);
  transition:transform .15s ease;
}
.tb-soort-row li:nth-child(6n+2) a{background:var(--tb-mint);}
.tb-soort-row li:nth-child(6n+3) a{background:var(--tb-cream);}
.tb-soort-row li:nth-child(6n+4) a{background:var(--tb-sand);}
.tb-soort-row li:nth-child(6n+5) a{background:var(--tb-mint);}
.tb-soort-row li:nth-child(6n) a{background:var(--tb-cream);}
.tb-soort-row a:hover{transform:translateY(-2px);}
.tb-soort-row a[aria-current="true"]{outline:2px solid var(--tb-action);outline-offset:2px;}
.tb-soort-name{
  display:block;font-family:var(--tb-serif);font-size:17px;font-weight:600;
  color:var(--tb-ink);
}
.tb-soort-count{display:block;font-size:12.5px;color:var(--tb-muted);margin-top:3px;}

/* ---- results ------------------------------------------------------------ */
.tb-results{padding:34px var(--tb-page-pad,60px) 72px;}
.tb-results-head h2{
  font-family:var(--tb-serif);font-size:24px;font-weight:600;
  letter-spacing:-.015em;color:var(--tb-ink);margin:0 0 22px;
}

/* Explicit breakpoints, not auto-fill. auto-fill drifted to 3 columns at
   1280px and 3 at 640px, and the count has silently changed three times now.
   Written down in docs/plan.md as well: do not raise it to fit more results.
   127 items is not a scanning problem; small photos are. */
.tb-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--tb-gutter);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1199px){ .tb-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:899px){  .tb-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:599px){  .tb-grid{grid-template-columns:minmax(0,1fr);} }

.tb-card{
  background:var(--tb-surface);
  border-radius:var(--tb-r-card);
  overflow:hidden;
  box-shadow:var(--tb-lift);
  display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tb-card:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 3px rgba(20,26,51,.06), 0 26px 50px -32px rgba(20,26,51,.5);
}
/* Fixed ratio so every row lines up regardless of the photo's own shape —
   the single biggest thing wrong with the old card. */
.tb-card-media{display:block;line-height:0;}
/* 4:5, niet 4:3.
   Taarten worden staand gefotografeerd; 4:3 sneed daar de meeste beeldinhoud
   uit weg. Geen `contain` (grijze balken) en geen masonry (prijzen op wisselende
   hoogtes maakt scannen slechter) — één vaste staande verhouding.
   Het brandpunt staat per post in het style-attribuut; deze regel is de
   terugval als er geen is ingesteld. Zie inc/tb-uitsnede.php. */
.tb-card-media img{
  width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:center 40%;display:block;
}
.tb-card-noimg{display:block;aspect-ratio:4/5;background:var(--tb-sand);}
.tb-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:2px;flex:1 1 auto;}
.tb-card .tb-card-soort{
  font-family:var(--tb-serif);font-style:italic;font-size:13.5px;
  color:var(--tb-accent-text);margin:0;
}
/* .tb-card .tb-card-title, not .tb-card-title alone: the Elementor kit ships
   `.elementor-kit-6065 h3 { font-size: … }` at specificity 0,1,1, which beat a
   single class even on markup we own — the title rendered at 36px and 19 of 24
   names truncated. Two classes settles it. */
.tb-card .tb-card-title{
  font-family:var(--tb-serif);font-size:16px;font-weight:600;line-height:1.3;
  letter-spacing:-.01em;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tb-card-title a{color:var(--tb-ink);text-decoration:none;}
.tb-card-title a:hover{text-decoration:underline;text-underline-offset:3px;}
.tb-card .tb-card-meta{
  font-size:13px;color:var(--tb-muted);margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* Pinned to the bottom so short-title cards do not leave dead space. */
/* .tb-card .tb-card-price, not .tb-card-price alone — the same specificity
   trap as the title above, from two directions at once:
     p:last-child          { margin: 0 }        (0,1,1) killed the margin-top:auto,
     .elementor-kit-6065 p { margin-block-end }  (0,1,1) added 18px underneath.
   The price therefore sat wherever the meta line ended, so a card whose baker
   and place wrapped to two lines pushed it 21px lower than its neighbour. Two
   classes pin it to the bottom of every card in the row. */
.tb-card .tb-card-price{
  font-size:15px;font-weight:700;color:var(--tb-ink);
  margin:auto 0 0;padding-top:8px;
}

.tb-empty{
  max-width:560px;margin:40px auto;padding:40px 36px;text-align:center;
  background:var(--tb-surface);border-radius:var(--tb-r-card);box-shadow:var(--tb-lift);
}
.tb-empty h3{font-family:var(--tb-serif);font-size:22px;font-weight:600;color:var(--tb-ink);margin:0 0 8px;}
.tb-empty p{font-size:14.5px;line-height:1.6;color:var(--tb-muted);margin:0 0 20px;}

.tb-pagination{display:flex;gap:10px;justify-content:center;margin-top:32px;}

@media (max-width:767px){
  .tb-archive{--tb-page-pad:20px;}
  .tb-archive-hero{padding:32px 20px 26px;}
  .tb-search{flex-wrap:wrap;padding:10px;gap:8px;}
  .tb-search-where{border-left:0;padding-left:0;flex:1 1 100%;border-top:1px solid var(--tb-line);}
  .tb-search .tb-btn{flex:1 1 100%;}
  .tb-soort-row ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .tb-grid{gap:14px;}   /* kolomaantal komt uit de breakpoints hierboven */
}
@media (prefers-reduced-motion:reduce){
  .tb-card,.tb-soort-row a{transition:none;}
  .tb-card:hover,.tb-soort-row a:hover{transform:none;}
}


/* ---- filter row ---------------------------------------------------------
   Restored after the first PHP pass shipped without them, which removed the
   ability to narrow by dieet or gemeente — a lost function, not a lost visual.

   Not yet here: "In mijn buurt". Voxel's location filter takes
   `address;lat,lng,radius`. The browser produces the coordinates — geolocation
   API or Mapbox geocoding in tb-map.js — and posts them in the hidden `punt`
   field, so no address leaves the page on an ordinary load. */
.tb-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
  padding:8px var(--tb-page-pad) 4px;
}
.tb-filter{display:flex;flex-direction:column;gap:6px;min-width:0;flex:0 1 210px;}
.tb-filter-label{font-size:12.5px;font-weight:500;color:var(--tb-muted);}
.tb-filters select{
  height:var(--tb-h-ctrl);padding:0 34px 0 14px;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  background:var(--tb-surface);
  font-family:var(--tb-sans);font-size:14px;color:var(--tb-body);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5F73' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
  max-width:100%;
}
.tb-filters select:focus-visible{outline:2px solid var(--tb-action);outline-offset:2px;}
.tb-filters .tb-btn{flex:0 0 auto;}
.tb-filter-reset{
  align-self:center;font-size:14px;color:var(--tb-body);
  text-decoration:underline;text-decoration-color:rgba(20,26,51,.25);
  text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;
}
.tb-filter-reset:hover{color:var(--tb-accent-text);}

/* ---- soort tiles, stronger ----------------------------------------------
   They read as disabled: pale tint, small label, no edge. Given a real border,
   darker label and full-width span. */
.tb-soort-row ul{grid-template-columns:repeat(6,minmax(0,1fr));}
.tb-soort-row a{
  border:1px solid rgba(20,26,51,.10);
  padding:20px 18px 18px;
}
.tb-soort-row a:hover{border-color:var(--tb-accent-line);}
.tb-soort-name{font-size:18px;}
.tb-soort-count{color:var(--tb-body);font-weight:500;}
@media (max-width:1199px){ .tb-soort-row ul{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:599px){  .tb-soort-row ul{grid-template-columns:repeat(2,minmax(0,1fr));} }

@media (max-width:767px){
  .tb-filters{padding:8px 20px 4px;}
  .tb-filter{flex:1 1 100%;}
}


/* ---- in mijn buurt ------------------------------------------------------
   The proximity control is a block, not a single field: a place, a radius and
   a "use my location" button that only appears when the browser can answer. */
.tb-nearby{display:flex;flex-direction:column;gap:6px;flex:1 1 420px;min-width:0;}
.tb-nearby-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tb-nearby-plaats{
  flex:1 1 160px;min-width:0;height:var(--tb-h-ctrl);
  padding:0 14px;border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  background:var(--tb-surface);
  font-family:var(--tb-sans);font-size:14px;color:var(--tb-body);
}
.tb-nearby-plaats::placeholder{color:var(--tb-soft);}
.tb-nearby-straal{flex:0 0 auto;}
.tb-nearby-hier{flex:0 0 auto;}
.tb-nearby-status{
  margin:0;font-size:12.5px;color:var(--tb-muted);min-height:1em;
}
.tb-nearby-status:empty{display:none;}

/* ---- kaart --------------------------------------------------------------
   Sized in vh so it stays a band rather than a second page. The 15 593 px map
   that once ate this template was an unsized container. */
.tb-map-wrap{padding:8px var(--tb-page-pad) 0;}
.tb-map{
  height:clamp(260px,38vh,420px);
  border-radius:var(--tb-r-card);
  overflow:hidden;
  background:#EDE7E0;
  border:1px solid var(--tb-line);
}
.tb-map-fallback{padding:20px;color:var(--tb-muted);font-size:14px;}

/* De kern in het gebied. Het gebied zelf is een polygoon van ~800 m, getekend
   door tb-map.js.

   De halo eromheen is er voor uitgezoomde kaarten: op een kaart van heel
   Nederland is 800 m kleiner dan een pixel, dus daar was er alleen nog een kale
   stip te zien. De ring houdt dezelfde betekenis overeind — een gebied, geen
   adres — op elk zoomniveau, en gaat naadloos over in de echte cirkel zodra je
   inzoomt. */
.tb-marker{
  width:13px;height:13px;min-height:0;padding:0;
  border-radius:var(--tb-r-pill);
  border:2px solid #fff;background:var(--tb-action);
  color:#fff;font:700 11px/1 var(--tb-sans);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:
    0 1px 3px rgba(20,26,51,.4),
    0 0 0 5px color-mix(in srgb, var(--tb-action) 16%, transparent),
    0 0 0 6px color-mix(in srgb, var(--tb-action) 38%, transparent);
}
/* Meerdere baksels op één adres: dan draagt de kern het aantal. */
.tb-marker-groep{
  width:24px;height:24px;
  box-shadow:
    0 1px 3px rgba(20,26,51,.4),
    0 0 0 7px color-mix(in srgb, var(--tb-action) 14%, transparent),
    0 0 0 8px color-mix(in srgb, var(--tb-action) 34%, transparent);
}
/* Terugval waar color-mix ontbreekt. */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .tb-marker{box-shadow:0 1px 3px rgba(20,26,51,.4),0 0 0 5px rgba(188,84,16,.16),0 0 0 6px rgba(188,84,16,.38);}
  .tb-marker-groep{box-shadow:0 1px 3px rgba(20,26,51,.4),0 0 0 7px rgba(188,84,16,.14),0 0 0 8px rgba(188,84,16,.34);}
}

/* Mapbox laat een lege bedieningsgroep staan als er geen knoppen in zitten;
   die las als een tweede ⓘ naast de verplichte bronvermelding. */
.tb-map .mapboxgl-ctrl-group:empty{display:none;}
.tb-marker:hover{background:var(--tb-action-hover);}
.tb-marker-mij{
  width:16px;height:16px;border-radius:var(--tb-r-pill);
  background:#1D4ED8;border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(29,78,216,.25);
}
.tb-pop{font-family:var(--tb-sans);}
.tb-pop-km{margin:0 0 6px;font-size:12px;color:var(--tb-muted);}
.tb-pop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.tb-pop li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;}
.tb-pop img{border-radius:6px;object-fit:cover;grid-row:span 2;}
.tb-pop a{
  font-size:13.5px;font-weight:600;color:var(--tb-ink);text-decoration:none;
  line-height:1.25;
}
.tb-pop a:hover{text-decoration:underline;}
.tb-pop-prijs{font-size:12.5px;color:var(--tb-muted);grid-column:2;}

@media (max-width:599px){
  .tb-map{height:240px;}
  .tb-nearby-row > *{flex:1 1 100%;}
}


/* ---- lijstkop -----------------------------------------------------------
   Vervangt de heroband op /baksel/: de resultaatzin als h1, één gedempte
   regel eronder, en dan meteen de tegels en de filters. */
.tb-lijstkop{padding:26px var(--tb-page-pad,60px) 4px;}
.tb-archive .tb-lijstkop h1{
  font-family:var(--tb-serif);font-size:26px;font-weight:600;line-height:1.2;
  margin:0;color:var(--tb-ink);
}
.tb-lijstkop p{
  margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--tb-muted);max-width:62ch;
}
@media (max-width:599px){
  .tb-lijstkop{padding-left:20px;padding-right:20px;}
  .tb-archive .tb-lijstkop h1{font-size:22px;}
}