/* Onderwerp-hubs (keuzelijst r23, sjoerd 11-10-2026): de onderwerppagina /onderwerp/{key} en het overzicht van een groep
   /onderwerpen/{groep}. Themaregel (STIJLGIDS §1): alleen var(--mud-palette-*) en --oh-*-tokens, geen vaste kleuren. De blokken
   gebruiken de klassen van de partijpagina (contacten.css: .oh-pt-*), de offertes de tabel van Kosten (.oh-offers, .oh-sum). */

/* Onderwerppagina: kop, dan de blokken in vaste volgorde. Telefoon: één kolom van rand tot rand (§12a: de kaarten krijgen
   daar zelf 8 px ertussen). Vanaf 768 px (tablet, §12b) twee kolommen: de blokken lopen in volgorde door, eerst links, dan rechts. */
.oh-hub{display:flex;flex-direction:column;gap:16px}
.oh-hub-blocks{display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){
  .oh-hub-blocks{display:block;column-count:2;column-gap:16px}
  .oh-hub-blocks > .oh-hub-block{display:inline-block;width:100%;margin:0 0 16px;break-inside:avoid}
}
@media (max-width:599.98px){.oh-hub,.oh-hub-blocks{gap:0}}
.oh-hub-sub{margin:12px 0 4px;font:500 12px/1.3 "Roboto",sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mud-palette-text-secondary)}
.oh-hub-link{display:flex;align-items:flex-start;gap:8px;overflow-wrap:anywhere}
.oh-hub-link > .mud-icon-root{flex:none;margin-top:2px;color:var(--mud-palette-text-secondary)}
.oh-hub-block .oh-cost-post .mud-typography-subtitle1{font-size:15px}

/* Overzicht van een groep: per onderwerp een kaart (kop als link, telling, pagina's); vanaf 768 px (tablet, §12b) twee kolommen */
.oh-ov-grid{display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){.oh-ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media (max-width:599.98px){.oh-ov-grid{gap:0}}
.oh-ov-card.mud-paper{padding:0;overflow:hidden}
.oh-ov-card .oh-ov-head{border-top:0;align-items:center}
.oh-ov-card .oh-ov-head .oh-ct-icon:first-child{color:var(--mud-palette-primary)}
.oh-ov-pages{padding:0 16px 8px 52px}
.oh-ov-pages .oh-pt-item:first-of-type{border-top:1px solid var(--oh-blad-lijn)}