/* Homepage: Erkende kwaliteit met Study Connect waardering en ervaringenslider (template-parts/kwaliteit-home.php). */

.bth-kh { background: var(--bth-sand, #F5F9F8); }
.bth-kh .section-header { margin-bottom: 40px; }
.bth-kh__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.bth-kh__raster--enkel { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* Waardering */
.bth-kh__kaart { position: relative; padding: 32px; border-radius: 24px; background: linear-gradient(150deg, #203D45 0%, #1D4A54 60%, #125866 100%); color: #fff; box-shadow: 0 18px 40px -24px rgba(21, 41, 47, .55); }
.bth-kh__naam { margin: 0; font-family: var(--font-heading); font-size: var(--fs-basis); font-weight: 600; color: #fff; }
.bth-kh__cijferblok { position: relative; width: 168px; height: 168px; margin: 18px 0 22px; }
/* Study Connect-logo naast het grote cijfer (15 oktober 2026, op verzoek van Wilmar) */
.bth-kh__cijferrij { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 18px 0 22px; }
.bth-kh__cijferrij .bth-kh__cijferblok { margin: 0; flex: none; }
.bth-kh__sclogo { display: block; width: 180px; max-width: 48%; height: auto; }
.bth-kh__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; }
.bth-kh__cijfer { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.bth-kh__cijfer strong { font-family: var(--font-heading); font-size: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.bth-kh__cijfer span { margin-top: 6px; font-size: var(--fs-klein); color: #fff; }
.bth-kh__delen { display: grid; gap: 14px; margin: 0 0 20px; }
.bth-kh__deel dt { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-klein); color: #fff; }
.bth-kh__deel dt span { color: #D5E9E7; font-size: var(--fs-klein); }
.bth-kh__deel dd { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; }
.bth-kh__deel dd strong { min-width: 2.2em; font-size: var(--fs-groot); color: #fff; font-variant-numeric: tabular-nums; }
.bth-kh__balk { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.bth-kh__balk span { display: block; height: 100%; border-radius: inherit; background: #2E8C9E; }
.bth-kh__feiten { margin: 0 0 16px; font-size: var(--fs-klein); color: var(--tekst-op-donker-zacht); }
.bth-kh__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bth-kh__link:hover, .bth-kh__link:focus-visible { text-decoration-thickness: 2px; }
.bth-kh__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Eén lijn (15 oktober 2026, op verzoek van Wilmar): het blauwe vak loopt even ver door als de kaarten
   met ervaringen ernaast; alleen de bolletjes hangen eronder. De onderrand van het vak ligt daarom 26px
   boven de onderkant van de kolom: 18px ruimte onder de kaarten (schaduw) plus 8px bolletjes. Is het vak
   hoger dan de kaarten, dan rekken de kaarten mee. Op smalle schermen staan ze onder elkaar. */
@media (min-width: 1025px) {
	.bth-kh__raster:not(.bth-kh__raster--enkel) { align-items: stretch; }
	.bth-kh__raster:not(.bth-kh__raster--enkel) .bth-kh__waardering { display: flex; flex-direction: column; }
	.bth-kh__raster:not(.bth-kh__raster--enkel) .bth-kh__kaart { flex: 1 0 auto; margin-bottom: 26px; display: flex; flex-direction: column; }
	/* Balken en feiten onderaan; de ruimte onder cijfer en logo groeit mee met de hoogte van de kaarten. */
	.bth-kh__raster:not(.bth-kh__raster--enkel) .bth-kh__delen { margin-top: auto; }
	.bth-kh__raster:not(.bth-kh__raster--enkel) .bth-kh__link { align-self: flex-start; }
	.bth-kh__kaart > .bth-kh__feiten:last-child { margin-bottom: 0; }
	.bth-kh__ervaringen { display: flex; flex-direction: column; }
	.bth-kh__spoor { flex: 1 1 auto; }
}

/* Ervaringen */
.bth-kh__ervaringen { min-width: 0; }
.bth-kh__ervkop { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.bth-kh__ervkop h3 { margin: 0; }
.bth-kh__knoppen { display: flex; gap: 8px; flex: 0 0 auto; }
.bth-kh__knop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-primary-200, #CDD7DC); background: #fff; color: var(--color-primary-900, #203D45); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.bth-kh__knop svg { width: 20px; height: 20px; }
.bth-kh__knop:hover:not(:disabled) { background: var(--color-brand, #176B80); border-color: var(--color-brand, #176B80); color: #fff; }
.bth-kh__knop:focus-visible { outline: 3px solid var(--color-brand, #176B80); outline-offset: 2px; }
.bth-kh__knop:disabled { opacity: .4; cursor: default; }

.bth-kh__spoor { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; margin: 0; padding: 4px 2px 18px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.bth-kh__spoor::-webkit-scrollbar { display: none; }
.bth-kh__spoor:focus-visible { outline: 3px solid var(--color-brand, #176B80); outline-offset: 4px; border-radius: 20px; }
.bth-kh__erv { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid var(--color-primary-100, #E7EDF0); box-shadow: 0 10px 28px -20px rgba(21, 41, 47, .35); scroll-snap-align: start; }
.bth-kh__ervcijfer { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; color: var(--color-primary-900, #203D45); }
.bth-kh__ervcijfer strong { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-accent-50, #F3F8F7); border: 2px solid #2E8C9E; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.bth-kh__ervcijfer span { font-size: var(--fs-klein); color: var(--bth-grey, #4F6472); }
.bth-kh__erv blockquote { margin: 0; }
.bth-kh__erv blockquote p { margin: 0; font-size: var(--fs-basis); line-height: 1.45; color: var(--tekst); }
.bth-kh__erv blockquote p::before { content: "\201C"; }
.bth-kh__erv blockquote p::after { content: "\201D"; }
.bth-kh__ervmeta { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--color-primary-100, #E7EDF0); font-size: var(--fs-klein); line-height: 1.45; color: var(--bth-grey, #4F6472); }
.bth-kh__reactie { padding: 12px 14px; border-radius: 12px; background: var(--bth-sand, #F5F9F8); border-left: 3px solid var(--color-brand, #176B80); }
.bth-kh__reactie p { margin: 0; font-size: var(--fs-klein); line-height: 1.5; color: var(--tekst); }
.bth-kh__reactie strong { display: block; margin-bottom: 2px; color: var(--color-primary-900, #203D45); }

.bth-kh__stippen { display: flex; justify-content: center; gap: 8px; }
.bth-kh__stippen span { width: 8px; height: 8px; border-radius: 999px; background: var(--color-primary-200, #CDD7DC); transition: width .25s, background-color .25s; }
.bth-kh__stippen span.is-actief { width: 24px; background: var(--color-brand, #176B80); }

/* Geen scroll-behavior: smooth op het spoor (15 oktober 2026): dan schuift de browser bij het laden
   zacht naar het eerste snappunt, Chrome ziet dat als scrollen en Lighthouse/PageSpeed vindt geen LCP
   (NO_LCP). De knoppen geven zelf behavior: smooth mee (ervaringen-slider.js), vegen snapt altijd vloeiend. */
@media (max-width: 1024px) {
	.bth-kh__raster { grid-template-columns: minmax(0, 1fr); }
	.bth-kh__waardering { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 640px) {
	.bth-kh__kaart { padding: 24px; }
	.bth-kh__cijferblok { width: 140px; height: 140px; }
	.bth-kh__cijferrij { gap: 20px; }
	.bth-kh__sclogo { width: 144px; }
	.bth-kh__cijfer strong { font-size: 2.8rem; }
	.bth-kh__spoor { grid-auto-columns: 86%; gap: 14px; }
	.bth-kh__erv { padding: 22px; }
	.bth-kh__knoppen { display: none; }
}