/* 98-prikbord.css — het prikbord (inc/tb-prikbord.php, templates/tb-prikbord.php).
 *
 * Naar het bord op buurtgebak.nl: kaartjes met een reepje plakband, licht
 * scheef, en een briefje met een punaise voor wie iets zoekt. In onze tokens:
 *
 *   het bord        --tb-sand, het ene getinte paneel dat een scherm mag hebben
 *   de hartslag     --tb-ink, het ene donkere ankervlak
 *   gezocht         géén geel (dat is geen token) maar wit met een dikke rand in
 *                   --tb-accent-line en een punaise in --tb-accent ("heart, star,
 *                   badge") — zo telt het niet als een tweede tint.
 *
 * Het raster is repeat(auto-fill, minmax(280px, 1fr)), zoals overal. */

.tb-pb{max-width:1200px;margin:0 auto;padding:40px 24px 72px;}
.tb-pb-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-pb-kopblok p{margin:0 0 24px;max-width:62ch;color:var(--tb-muted);font-size:17px;}

/* De hartslag: één regel op inkt. */
.tb-pb-hartslag{margin:0 0 24px;padding:14px 20px;border-radius:var(--tb-r-card);
  background:var(--tb-ink);color:var(--tb-on-ink-soft);font-size:15px;line-height:1.5;}
.tb-pb-hartslag-kop{color:var(--tb-on-ink-accent);font-weight:700;margin-right:6px;}

/* Zelf iets plaatsen. */
.tb-pb-plaatsen{margin:0 0 32px;padding:20px 22px;border:1px solid var(--tb-line);border-radius:var(--tb-r-card);background:var(--tb-surface);}
.tb-pb-plaatsen h2{margin:0 0 12px;font-size:19px;color:var(--tb-ink);}
.tb-pb-plaatsen > p{margin:0;color:var(--tb-body);}
.tb-pb-plaatsen a{color:var(--tb-accent-text);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.tb-pb-formulier{display:flex;flex-direction:column;gap:12px;}
.tb-pb-onderwerpen{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.tb-pb-onderwerpen label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--tb-border);
  border-radius:var(--tb-r-pill);font-size:14px;cursor:pointer;background:var(--tb-surface);color:var(--tb-body);}
.tb-pb-onderwerpen label:has(input:checked){border-color:var(--tb-action);color:var(--tb-ink);font-weight:600;}
.tb-pb-formulier textarea{width:100%;padding:12px 14px;border:1px solid var(--tb-border);border-radius:var(--tb-r-ctrl);
  font:inherit;color:var(--tb-body);background:var(--tb-surface);resize:vertical;}
.tb-pb-formulier-rij{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;}
.tb-pb-bestand,.tb-pb-plaatskeuze{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:var(--tb-ink);}
.tb-pb-bestand span{font-weight:400;color:var(--tb-soft);}
.tb-pb-plaatskeuze select{min-width:200px;}
.tb-pb-formulier-voet{margin:0;font-size:13px;color:var(--tb-soft);}
.tb-pb-plaatsen .tb-pb-formulier-voet{margin-top:8px;}

/* Gezocht: geen bericht maar een open verzoek. Gekozen → uitleg in beeld, en
   de knop "Op het bord" wordt "Verder als open verzoek". Zonder :has() staan
   beide knoppen er; de server kijkt toch naar het gekozen onderwerp. De rand
   is gestippeld: dit keuzeknopje stuurt je ergens anders heen. */
.tb-pb-onderwerpen label.tb-pb-onderwerp-gezocht{border-style:dashed;}
.tb-pb-gezocht-uitleg{display:none;margin:0;padding:10px 14px;border-radius:var(--tb-r-ctrl);background:var(--tb-surface);
  border:1px solid var(--tb-accent-line);font-size:14px;color:var(--tb-body);}
.tb-pb-knop-verzoek{display:none;}
.tb-pb-formulier:has(input[value="gezocht"]:checked) .tb-pb-gezocht-uitleg{display:block;}
.tb-pb-formulier:has(input[value="gezocht"]:checked) .tb-pb-knop-verzoek{display:inline-flex;}
.tb-pb-formulier:has(input[value="gezocht"]:checked) .tb-pb-knop-bord,
.tb-pb-formulier:has(input[value="gezocht"]:checked) .tb-pb-bestand{display:none;}

/* Filters. */
.tb-pb-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;}
.tb-pb-filter{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--tb-r-pill);
  border:1px solid var(--tb-border);background:var(--tb-surface);color:var(--tb-body);text-decoration:none;font-size:14.5px;}
.tb-pb-filter:hover{border-color:var(--tb-accent-line);}
.tb-pb-filter.is-actief{background:var(--tb-ink);border-color:var(--tb-ink);color:#fff;font-weight:600;}
.tb-pb-plaatsfilter{margin-left:auto;}
.tb-pb-plaatsfilter select{min-height:40px;min-width:180px;}

/* ------------------------------------------------------------------ het bord */

.tb-pb-bord{padding:36px 28px 28px;border-radius:24px;background:var(--tb-sand);
  /* Een fijne stippel, als kurk. Lijnkleur, niet een eigen tint. */
  background-image:radial-gradient(var(--tb-line) 1px, transparent 1.2px);background-size:14px 14px;}
.tb-pb-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:36px 28px;align-items:start;}

.tb-pb-item article{position:relative;background:var(--tb-surface);padding:12px 12px 16px;border-radius:4px;
  box-shadow:0 1px 2px rgba(20,26,51,.08),0 14px 28px -16px rgba(20,26,51,.35);
  transition:transform .18s ease;}
.tb-pb-kant-l article{transform:rotate(-1.2deg);}
.tb-pb-kant-r article{transform:rotate(1deg);}
.tb-pb-kant-n article{transform:rotate(-.3deg);}
.tb-pb-item article:hover,.tb-pb-item article:focus-within{transform:rotate(0) translateY(-2px);}

/* Het plakband: een doorschijnend reepje over de bovenrand. */
.tb-pb-tape{position:absolute;top:-11px;left:50%;width:92px;height:24px;margin-left:-46px;
  background:rgba(251,240,228,.82);border:1px solid rgba(224,123,57,.18);transform:rotate(-3deg);border-radius:2px;}
.tb-pb-kant-r .tb-pb-tape{transform:rotate(2.5deg);margin-left:-30px;}

.tb-pb-foto{display:block;margin:0 0 12px;border-radius:2px;overflow:hidden;background:var(--tb-ground-alt);}
.tb-pb-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}

.tb-pb-lijf{display:flex;flex-direction:column;gap:10px;padding:0 4px;}
.tb-pb-kop{margin:0;font-family:var(--tb-serif);font-weight:600;font-size:19px;line-height:1.25;color:var(--tb-ink);}
.tb-pb-wie{display:flex;align-items:center;gap:10px;}
.tb-pb-wie strong{display:block;font-size:14.5px;color:var(--tb-ink);}
.tb-pb-wie strong a{color:inherit;text-decoration:none;}
.tb-pb-wie strong a:hover{text-decoration:underline;text-underline-offset:3px;}
.tb-pb-wie span{display:block;font-size:12.5px;color:var(--tb-soft);}
.tb-pb-avatar{width:36px;height:36px;border-radius:999px;object-fit:cover;flex:0 0 36px;background:var(--tb-ground-alt);}
.tb-pb-avatar--letter{display:inline-flex;align-items:center;justify-content:center;background:var(--tb-action);color:#fff;font-weight:700;font-size:15px;}
.tb-pb-meta{margin:0;font-size:12.5px;color:var(--tb-soft);}
.tb-pb-tekst{margin:0;font-size:15px;line-height:1.55;color:var(--tb-body);overflow-wrap:anywhere;}

.tb-pb-voet{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;}
.tb-pb-tag{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--tb-muted);}
.tb-pb-link{font-size:14px;font-weight:600;color:var(--tb-accent-text);text-decoration:none;white-space:nowrap;}
.tb-pb-link:hover{text-decoration:underline;text-underline-offset:3px;}

/* Gezocht: een briefje met een punaise. */
.tb-pb-item.is-notitie article{border-top:6px solid var(--tb-accent-line);padding-top:18px;border-radius:2px;}
.tb-pb-item.is-notitie .tb-pb-kop{font-style:italic;font-size:21px;}
.tb-pb-item.is-notitie .tb-pb-tekst{font-size:15.5px;color:var(--tb-ink);}
.tb-pb-punaise{position:absolute;top:-9px;right:22px;width:18px;height:18px;border-radius:999px;background:var(--tb-accent);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.14),0 3px 5px rgba(20,26,51,.3);}
.tb-pb-knop{height:auto;min-height:40px;padding:0 16px;font-size:14px;}

/* Melden en weghalen: klein, onderaan, niet in de weg. */
.tb-pb-beheer{display:flex;align-items:center;gap:10px;margin-top:4px;padding-top:8px;border-top:1px solid var(--tb-line);}
.tb-pb-klein{margin:0;}
.tb-pb-klein button{height:auto;min-height:28px;padding:0;border:0;background:none;font-size:12.5px;color:var(--tb-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.tb-pb-klein button:hover{color:var(--tb-bad-ink);}
.tb-pb-gemeld{font-size:12.5px;font-weight:600;color:var(--tb-bad-ink);}

.tb-pb-leeg{margin:0;padding:24px;text-align:center;color:var(--tb-body);}
.tb-pb-meer{margin:32px 0 0;text-align:center;}

/* Het voorproefje op de voorpagina: hetzelfde bord, drie kaartjes.
   Zónder zandvlak. De voorpagina heeft al getinte vlakken (83-home.css:
   soorttegels, en het zandvlak op regel 119), en de tokens staan per scherm
   één getint paneel toe — voor het onderwerp van dat scherm, en dat is hier
   niet het prikbord. De kurkstippel blijft; plakband en scheve kaartjes
   dragen het beeld. */
.tb-pb-voorproef .tb-pb-bord{background-color:transparent;padding-left:0;padding-right:0;}
.tb-pb-voorproef .tb-pb-bordkop{margin:0 0 28px;}
/* De kaartjes staan scheef en werpen schaduw; de knop eronder kleefde eraan. */
.tb-pb-voorproef .tb-pb-meer{margin-top:48px;}
.tb-pb-voorproef .tb-pb-bordkop h2{margin:0 0 6px;}
.tb-pb-voorproef .tb-pb-bordkop p{margin:0;color:var(--tb-muted);}

@media (max-width:700px){
  .tb-pb{padding:24px 16px 56px;}
  .tb-pb-bord{padding:28px 14px 20px;border-radius:18px;}
  .tb-pb-plaatsfilter{margin-left:0;width:100%;}
  .tb-pb-plaatsfilter select{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .tb-pb-item article{transition:none;}
}