/* Openbare pagina's: /inkijk, /inkijk/<thema>, /doelen en /voor-scholen (zie app/openbaar.php).
   Bouwt voort op style.css (kleuren, .blad, .knop, .klein). */

.kruimel { margin: 0 0 .8rem; }
.kruimel a { color: var(--inkt); }

/* overzicht van alle thema's */
.inkijklijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.inkijkkaart { display: flex; flex-direction: column; gap: .2rem; background: var(--themakleur, #fff); border: var(--lijn); border-radius: 1rem; box-shadow: var(--plak); color: var(--inkt); text-decoration: none; overflow: hidden; padding-bottom: .9rem; }
.inkijkkaart:hover { transform: translate(-1px, -2px); }
.inkijkkaart img, .inkijkkaart .geenplaatje { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--lijn); background: var(--wit); }
.inkijkkaart .geenplaatje { display: grid; place-items: center; font: 800 1.4rem var(--kop); }
.inkijkkaart .nr, .inkijkkaart strong, .inkijkkaart .klein { padding: 0 1rem; }
.inkijkkaart .nr { font-size: .85rem; margin-top: .6rem; }
.inkijkkaart strong { font: 800 1.2rem var(--kop); }

/* één thema */
.inkijkkop { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.6rem; align-items: center; background: var(--themakleur, #fff); border: var(--lijn); border-radius: 1.2rem; box-shadow: var(--plak); padding: clamp(1.2rem, 4vw, 2rem); margin-bottom: 1.8rem; }
.inkijkkop img { width: 100%; height: auto; border: var(--lijn); border-radius: .8rem; }
.inkijkkop .klein { margin: 0 0 .3rem; }
.watzit { padding-left: 1.2rem; }
.watzit li { margin-bottom: .45rem; }
.voorbeelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.voorbeelden figure { margin: 0; background: var(--wit); border: var(--lijn); border-radius: .8rem; overflow: hidden; }
.voorbeelden img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--lijn); }
.voorbeelden figcaption { padding: .5rem .7rem; font-size: .9rem; }
.doelblokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.doelblok { border: var(--lijn); border-radius: .9rem; padding: 1rem 1.1rem; background: #fffaf0; }
.doelblok h3 { font: 800 1.1rem var(--kop); margin: 0 0 .5rem; }
.doelblok ul { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.doelblok .klein { margin: 0; }
.g12 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.codes { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 0; }
.code { display: inline-block; font: 700 .8rem/1.4 var(--kop); background: var(--geel); border: .1rem solid var(--inkt); border-radius: .4rem; padding: 0 .35rem; }
.kijk { display: inline-block; font-size: .78rem; background: #e3f0ff; border: .1rem solid var(--inkt); border-radius: .4rem; padding: 0 .35rem; }
.kerndoellijst dt { font-weight: 700; margin-top: .8rem; }
.kerndoellijst dd { margin: .25rem 0 0; }
.bladeren { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* doelen per kerndoel */
.tabelrol { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doeltabel { border-collapse: collapse; font-size: .9rem; min-width: 46rem; }
.doeltabel th, .doeltabel td { border-bottom: .06rem solid #d8cbb5; padding: .3rem .4rem; text-align: center; }
.doeltabel th:first-child, .doeltabel td:first-child { text-align: left; white-space: nowrap; }
.doeltabel thead th { vertical-align: bottom; font-size: .8rem; }
.doeltabel td.ja { background: #fff3c4; font-weight: 700; }
.perdoel { border-bottom: .06rem solid #d8cbb5; padding: .45rem 0; }
.perdoel summary { cursor: pointer; }
.perdoel p { margin: .5rem 0 .2rem 1rem; }

/* voor scholen */
.tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.prijstabel { border-collapse: collapse; width: 100%; }
.prijstabel th, .prijstabel td { border-bottom: .06rem solid #d8cbb5; padding: .45rem .5rem; text-align: left; vertical-align: top; }
.prijstabel.smal { max-width: 28rem; }
.prijstabel tr.totaal td { font-weight: 700; border-top: var(--lijn); }

@media (max-width: 760px) {
  .inkijkkop, .tweekolom, .g12 { grid-template-columns: 1fr; }
}

@media print {
  .kop, .voet, .nietprinten, .bladeren, .kruimel { display: none !important; }
  .blad, .inkijkkop, .doelblok { box-shadow: none; }
  main { max-width: none; padding: 0; }
  details.perdoel { break-inside: avoid; }
  details.perdoel > p { display: block; }
  a { color: var(--inkt); text-decoration: none; }
}
.artikel { max-width: 46rem; margin: 0 auto; }
.artikel h2 { margin-top: 1.6rem; }
.artikel li { margin-bottom: .35rem; }