/* Terugblik open trainingsmiddag: huisstijl Herd Awakenings via .page-zelfregulatie (tokens, kop, labels,
   film met playknop). Hier alleen wat dit artikel eigen heeft: beeldbanden, rijen, categorieen. */

/* Kop: de pedestalfoto is 4:3, dus de kop groeit mee met de breedte zodat paard en Eef in beeld blijven */
.page-terugblik .zr-held { height: min(72vw, 960px); }
.page-terugblik .zr-held__foto { object-position: 50% 25%; }

/* Eén gecentreerde kolom */
.page-terugblik .wrap.zr-smal { width: min(46rem, 100% - 2.5rem); margin-left: auto; margin-right: auto; }
.tb-sectie h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); line-height: 1.15; margin: 0 0 1rem; }
.tb-sectie p { margin: 0 0 1rem; }
.tb-sectie .wrap::after { content: ""; display: block; clear: both; }

/* Beeldband: filmpje met de alinea's die erbij horen, op licht papier tussen twee gouden lijnen */
.tb-band {
  clear: both; display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: 1.8rem; align-items: start;
  margin: 2rem 0; padding: 1.6rem; background: #f6f3ea;
  border-top: 1px solid var(--ha-gold); border-bottom: 1px solid var(--ha-gold);
}
.page-terugblik .tb-band__film { margin: 0; }
/* Bordertje: wit passe-partout met een gouden lijn om elk filmpje */
.tb-film__beeld { position: relative; padding: 5px; background: var(--ha-paper); border: 1px solid var(--ha-gold); border-radius: 6px; }
.page-terugblik .tb-band video { border-radius: 3px; }
.tb-film__label {
  display: block; margin: .2rem 0 .6rem; font-family: var(--ha-geo); font-weight: 500; text-transform: uppercase;
  letter-spacing: .22em; font-size: .68rem; color: var(--ha-gold);
}
.tb-band__kop { font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.35; color: var(--ha-ink); margin: 0 0 1rem; }
.tb-band__tekst p:last-child { margin-bottom: 0; }

/* Foto in de tekst */
.page-terugblik .tb-foto { float: right; clear: right; width: 13.5rem; margin: .3rem 0 1.4rem 1.6rem; }
.tb-foto img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* Pull-quote gecentreerd tussen inktlijnen */
.tb-quote {
  clear: both; margin: 2rem 0; padding: 1.1rem 0; border-top: 1px solid var(--ha-ink); border-bottom: 1px solid var(--ha-ink);
  text-align: center; font-family: var(--ha-serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.35; color: var(--ha-ink);
}

/* Vier manieren: rijen met dunne lijnen, label in Futura */
.tb-rijen { margin: .4rem 0 1.4rem; }
.tb-rijen div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--ha-line); }
.tb-rijen dt { font-family: var(--ha-geo); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--ha-ink); padding-top: .3rem; }
.tb-rijen dd { margin: 0; }

/* Vier categorieen: gouden cijfers */
.tb-categorie { list-style: none; counter-reset: cat; padding: 0; margin: .4rem 0 1.6rem; }
.tb-categorie li { counter-increment: cat; position: relative; padding: .9rem 0 .9rem 3.4rem; border-bottom: 1px solid var(--ha-line); }
.tb-categorie li::before {
  content: counter(cat); position: absolute; left: 0; top: .85rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--ha-gold); color: var(--ha-gold); font-family: var(--ha-serif); font-size: 1.2rem; line-height: 1;
}
.tb-categorie b { display: block; font-family: var(--ha-geo); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--ha-ink); margin-bottom: .2rem; }

/* Slot */
.tb-slot { border-top: 2px solid var(--ha-ink); }
.tb-ondertekening { font-family: var(--ha-serif); font-style: italic; font-size: 1.6rem; color: var(--ha-ink); margin-top: 1.4rem; }

/* Telefoon: in de band staat het filmpje links en loopt de tekst eromheen */
@media (max-width: 640px) {
  .page-terugblik .zr-held__foto { object-position: 70% 40%; }
  .tb-band { display: block; padding: 1rem; margin: 1.6rem -.25rem; }
  .tb-band::after { content: ""; display: block; clear: both; }
  .page-terugblik .tb-band__film { float: left; width: 44%; margin: .2rem 1rem .6rem 0; }
  .tb-film__label { font-size: .6rem; letter-spacing: .16em; }
  .tb-band__kop { font-size: 1.1rem; }
  .page-terugblik .tb-foto { width: 44%; margin-left: .9rem; }
  .tb-rijen div { grid-template-columns: 1fr; gap: .2rem; }
  .page-terugblik .zr-play { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; }
  .page-terugblik .zr-play svg { width: 1.4rem; height: 1.4rem; }
}