/**
 * De toolkit op de site.
 *
 * Elke kleur, radius en letter komt uit een --sptk-token. Die tokens vallen
 * terug op wat het thema publiceert (zie Frontend\Tokens), dus dit bestand
 * bevat bewust geen enkele letterlijke kleur.
 */

.sptk {
	font-family: var(--sptk-font);
	color: var(--sptk-text);
	container-type: inline-size;
}

.sptk *,
.sptk *::before,
.sptk *::after {
	box-sizing: border-box;
}

.sptk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- filters en zoeken ---------- */

.sptk-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--sptk-border);
}

.sptk-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	flex: 1 1 20rem;
}

/* Op een smal scherm schuift de rij horizontaal in plaats van te vouwen: een
   dichtgeklapte accordion verstopt precies wat je zoekt, en drie regels chips
   duwen de materialen van het scherm af. */
@media (max-width: 48rem) {
	.sptk-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.25rem;
		margin-inline: calc(var(--sptk-bleed, 0px) * -1);
		padding-inline: var(--sptk-bleed, 0px);
	}
}

.sptk-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--sptk-border);
	border-radius: 999px;
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sptk-chip:hover {
	border-color: var(--sptk-accent);
	color: var(--sptk-accent);
}

.sptk-chip.is-active {
	background: var(--sptk-primary);
	border-color: var(--sptk-primary);
	color: var(--sptk-on-primary);
}

.sptk-chip:focus-visible,
.sptk-search-input:focus-visible,
.sptk-play:focus-visible,
.sptk-button:focus-visible {
	outline: 2px solid var(--sptk-accent);
	outline-offset: 2px;
}

.sptk-search {
	flex: 1 1 14rem;
	max-width: 22rem;
}

.sptk-search-input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font-family: inherit;
	font-size: 0.9375rem;
}

.sptk-results {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--sptk-muted);
}

/* ---------- tabweergave ---------- */

/* De tabbladrij vervangt de filterchips: geen "All", één categorie tegelijk.
   Naar het voorbeeld van de oude toolkitpagina: een lichte strip waarin het
   actieve tabblad een wit blok is. Dat leest als tabbladen, ook als de rij
   op een smaller scherm over twee regels vouwt. */
.sptk-tabbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	/* Zo breed als de tabbladen zelf: eist de rij de restbreedte op, dan
	   vouwt hij intern terwijl er naast het zoekveld nog ruimte zat. Nu
	   wijkt bij ruimtegebrek eerst het zoekveld naar de volgende regel. */
	flex: 0 1 auto;
	max-width: 100%;
	padding: 0.3rem;
	background: var(--sptk-bg-alt);
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
}

.sptk-tabbar .sptk-tab {
	min-height: 0;
	padding: 0.65rem 1.25rem;
	border: 0;
	border-radius: calc(var(--sptk-radius) * 0.75);
	background: transparent;
	color: var(--sptk-text);
	font-size: 1rem;
	font-weight: 600;
}

.sptk-tabbar .sptk-tab:hover {
	color: var(--sptk-primary);
	border: 0;
}

.sptk-tabbar .sptk-tab.is-active {
	background: var(--sptk-bg);
	border: 0;
	color: var(--sptk-primary);
	box-shadow: 0 1px 3px rgba(15, 19, 31, 0.12);
}

/* Past het zoekveld niet meer naast de strip, dan hoort het op zijn eigen
   regel nog steeds rechts. */
.sptk-layout-tabs .sptk-search {
	margin-left: auto;
}

/* De facetrijen: onderwerp en doelgroep, als schakelbare chips onder de
   bovenste besturingsregel. Meerdere aan = meer zien binnen de groep,
   groepen onderling versmallen juist. */
.sptk-facets {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sptk-facet-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.sptk-facet-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sptk-muted);
	margin-right: 0.35rem;
}

.sptk-facet {
	min-height: 0;
	padding: 0.35rem 0.85rem;
	font-size: 0.875rem;
}

.sptk-facet.is-active {
	background: var(--sptk-primary);
	border-color: var(--sptk-primary);
	color: var(--sptk-on-primary);
}

/* Dezelfde rijen, maar gevuld door FacetWP: zijn vinkjes op één regel naast
   ons label, met de aantallen gedempt. */
.sptk-facets-fwp .facetwp-facet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	margin: 0;
}

.sptk-facets-fwp .facetwp-checkbox {
	background-position: left center;
	font-size: 0.9375rem;
}

.sptk-facets-fwp .facetwp-counter {
	color: var(--sptk-muted);
}

/* De naam staat al in het tabblad of in de accordeonkop; de kop in de sectie
   blijft voor screenreaders en zoekmachines, maar hoeft niet in beeld. */
.sptk-layout-tabs .sptk-collection-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Zonder zichtbare titel hoeft de titelrij geen ruimte in te nemen; alleen
   een zichtbare Select all-knop houdt nog afstand tot de kaarten. */
.sptk-layout-tabs .sptk-collection-head {
	margin-bottom: 0;
}

.sptk-layout-tabs .sptk-selectall:not([hidden]) {
	margin-bottom: 1rem;
}

/* De accordeonkop bestaat alleen op een telefoon. */
.sptk-acc-toggle {
	display: none;
}

@media (max-width: 48rem) {
	.sptk-layout-tabs .sptk-tabbar {
		display: none;
	}

	.sptk-layout-tabs .sptk-collections {
		gap: 0.75rem;
	}

	.sptk-acc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		min-height: 3rem;
		padding: 0.75rem 1rem;
		border: 1px solid var(--sptk-border);
		border-radius: var(--sptk-radius);
		background: var(--sptk-bg-alt);
		color: var(--sptk-heading);
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
		cursor: pointer;
	}

	.sptk-acc-toggle:focus-visible {
		outline: 2px solid var(--sptk-accent);
		outline-offset: 2px;
	}

	.sptk-acc-icon {
		flex: 0 0 auto;
		width: 0.55rem;
		height: 0.55rem;
		margin-top: -0.2rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.sptk-acc-toggle[aria-expanded="true"] .sptk-acc-icon {
		margin-top: 0.2rem;
		transform: rotate(-135deg);
	}

	.sptk-acc-toggle[aria-expanded="true"] {
		border-color: var(--sptk-primary);
	}

	/* Dichtgeklapt: alleen de kop blijft staan. */
	.sptk-collection.is-collapsed > :not(.sptk-acc-toggle) {
		display: none;
	}

	.sptk-acc-toggle + .sptk-collection-head,
	.sptk-acc-toggle + .sptk-collection-head + .sptk-collection-intro,
	.sptk-collection:not(.is-collapsed) .sptk-acc-toggle + * {
		margin-top: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sptk-acc-icon {
		transition: none;
	}
}

/* ---------- zijbalkweergave ---------- */

/* Dezelfde besturingselementen, maar in een kolom links van de kaarten:
   zoekveld bovenaan, dan de categorieën (of de tabbladen), dan onderwerp en
   doelgroep. Staat los van de layout. Op een smal scherm staat de kolom
   gewoon boven de kaarten en gelden de gewone regels; de splitsing is een
   mediaquery en geen containerquery, want een element kan niet zijn eigen
   container bevragen. */
.sptk-main {
	min-width: 0;
}

@media (min-width: 60rem) {
	.sptk-has-sidebar {
		display: grid;
		grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
	}

	/* Het raster meet vanaf hier de kolom, niet de hele toolkit: anders
	   rekent het met de breedte van de zijbalk erbij en worden de kaarten
	   te smal. */
	.sptk-has-sidebar .sptk-main {
		container-type: inline-size;
	}

	/* De kolom scrolt gewoon mee met de pagina; bewust niet vastgeplakt,
	   want dan zijn op een laag scherm de onderste filters onbereikbaar. */
	.sptk-has-sidebar .sptk-controls {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 1.75rem;
		margin: 0;
		padding: 0 1.5rem 0 0;
		border-bottom: 0;
		border-right: 1px solid var(--sptk-border);
	}

	/* De tabbladstrip wordt een verticale lijst; de tabbladen zelf volgen
	   de chipregel hieronder. */
	.sptk-has-sidebar .sptk-tabbar {
		flex: 0 0 auto;
		flex-direction: column;
		flex-wrap: nowrap;
		max-width: none;
	}

	/* De naam staat nu ver links in de zijbalk in plaats van vlak boven de
	   kaarten, dus de kop in de sectie mag weer in beeld. */
	.sptk-has-sidebar.sptk-layout-tabs .sptk-collection-title {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.sptk-has-sidebar.sptk-layout-tabs .sptk-collection-head {
		margin-bottom: 1.25rem;
	}

	.sptk-has-sidebar.sptk-layout-tabs .sptk-collection-icon {
		display: block;
	}

	.sptk-has-sidebar .sptk-search {
		order: -1;
		flex: 0 0 auto;
		max-width: none;
		margin-left: 0;
	}

	.sptk-has-sidebar .sptk-filters,
	.sptk-has-sidebar .sptk-facets,
	.sptk-has-sidebar .sptk-facet-group {
		flex: 0 0 auto;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0.35rem;
	}

	.sptk-has-sidebar .sptk-facets {
		gap: 1.75rem;
	}

	.sptk-has-sidebar .sptk-facet-label {
		margin: 0 0 0.35rem;
	}

	/* De chips worden rijen: over de hele breedte, tekst links, en een
	   lange naam mag afbreken in plaats van uit de kolom te steken. */
	.sptk-has-sidebar .sptk-controls .sptk-chip {
		width: 100%;
		justify-content: flex-start;
		min-height: 2.5rem;
		padding: 0.45rem 0.9rem;
		border-radius: var(--sptk-radius);
		white-space: normal;
		text-align: left;
	}

	.sptk-has-sidebar .sptk-facets-fwp .facetwp-facet {
		flex-direction: column;
		align-items: stretch;
		gap: 0.35rem;
	}

	/* Naast de zijbalk is de kolom vaak te smal voor de rasterdrempel van
	   52rem, en dan zou het kolommenaantal nooit gelden. Hier is het aantal
	   een maximum: zoveel kolommen als gevraagd, maar nooit smaller dan
	   12rem per kaart. Wint van de containerquery door de hogere
	   specificiteit. */
	.sptk-has-sidebar .sptk-grid {
		grid-template-columns: repeat(
			auto-fill,
			minmax(min(100%, max(12rem, calc(100% / var(--sptk-columns, 4) - 1.25rem))), 1fr)
		);
	}
}

/* ---------- categorieën ---------- */

.sptk-collections {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.sptk-collection[hidden] {
	display: none;
}

/* De koppen dragen ".sptk" ervoor: thema's zetten graag hun eigen marges
   op h2 en h3, en die mogen hier niet winnen. De ruimte onder de titel zit
   op de titelrij (.sptk-collection-head), niet op de kop zelf. */
.sptk .sptk-collection-title {
	margin: 0;
	font-family: var(--sptk-heading-font);
	color: var(--sptk-heading);
	scroll-margin-top: 2rem;
}

/* Het icoon van de categorie: titel links, icoon rechts. De titel groeit
   over de restbreedte, zodat het icoon (en een eventuele Select all-knop
   ervoor) tegen de rechterkant staat. Past het icoon niet meer naast de
   titel, dan valt het naar een eigen regel en duwt zijn automarge het ook
   daar naar rechts. De img-attributen (breedte, hoogte) tellen niet; een
   breed beeldmerk wordt begrensd zonder te vervormen. */
.sptk-collection-head > .sptk-collection-title {
	flex: 1 1 0;
}

.sptk-collection-icon {
	flex: none;
	align-self: center;
	width: auto;
	height: 2rem;
	max-width: 10rem;
	object-fit: contain;
	margin: 0 0 0 auto;
}

/* Naast een kleinere kop op een telefoon past een lager icoon. */
@media (max-width: 48rem) {
	.sptk-collection-icon {
		height: 1.5rem;
		max-width: 7rem;
	}
}

/* In de tabweergave is de titel verborgen (het tabblad is de naam), dus
   het icoon blijft dan ook thuis; met de zijbalk staat de titel er wel. */
.sptk-layout-tabs .sptk-collection-icon {
	display: none;
}

/* De beschrijving van de categorie, onder de titelrij. */
.sptk-collection-intro {
	margin: 0 0 1.25rem;
	max-width: 65ch;
	color: var(--sptk-muted);
}

.sptk-group {
	margin-top: 2rem;
}

.sptk .sptk-group-title {
	margin: 0 0 1rem;
	font-family: var(--sptk-heading-font);
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sptk-muted);
}

/* ---------- raster ---------- */

.sptk-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

@container (min-width: 52rem) {
	.sptk-grid {
		grid-template-columns: repeat(var(--sptk-columns, 4), minmax(0, 1fr));
	}
}

/* Zonder container queries valt hij terug op de viewport. */
@supports not (container-type: inline-size) {
	@media (min-width: 60rem) {
		.sptk-grid {
			grid-template-columns: repeat(var(--sptk-columns, 4), minmax(0, 1fr));
		}
	}
}

.sptk-layout-list .sptk-grid {
	grid-template-columns: 1fr;
}

/* Een rij: kleine thumbnail links, tekst ernaast, knop rechts. Wrap staat
   altijd aan, met de tekstkolom op basis 0: de rij breekt pas als thumbnail,
   langste woord en knop echt niet meer naast elkaar passen, en dan valt de
   knop naar een eigen regel in plaats van uit de kaart te steken. De kaart
   is zijn eigen container, zodat de smalle variant hieronder op de breedte
   van de kaart reageert en niet op die van het scherm. */
.sptk-layout-list .sptk-card {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	container-type: inline-size;
}

.sptk-layout-list .sptk-card-media {
	flex: 0 0 5rem;
	aspect-ratio: 1;
}

.sptk-layout-list .sptk-card-body {
	flex: 1 1 0;
}

/* Op een eigen regel schuift de knop naar rechts, onder de tekst. */
.sptk-layout-list .sptk-card-action {
	flex: 0 0 auto;
	margin-left: auto;
}

/* Een smalle kaart (telefoon): de knop over de hele breedte onder de tekst. */
@container (max-width: 30rem) {
	.sptk-layout-list .sptk-card-action {
		flex: 1 1 100%;
		padding-top: 0;
	}
}

/* ---------- kaart ---------- */

.sptk-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sptk-bg);
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sptk-card[hidden] {
	display: none;
}

.sptk-card:hover {
	border-color: var(--sptk-accent);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgb(0 0 0 / 8%);
}

.sptk-card:focus-within {
	border-color: var(--sptk-accent);
}

@media (prefers-reduced-motion: reduce) {
	.sptk-card,
	.sptk-chip {
		transition: none;
	}
	.sptk-card:hover {
		transform: none;
	}
}

.sptk-card-media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--sptk-media-ratio, 3 / 4);
	overflow: hidden;
	background: var(--sptk-bg-alt);
	border-bottom: 1px solid var(--sptk-border);
}

.sptk-card-media img,
.sptk-card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

.sptk-card-video .sptk-card-image {
	object-fit: cover;
	object-position: center;
}

/* De gegenereerde kaart, voor materiaal zonder eigen afbeelding. */
.sptk-card-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 100%;
	height: 100%;
	background: hsl(var(--sptk-card-hue, 220) 40% 95%);
	color: hsl(var(--sptk-card-hue, 220) 42% 30%);
}

.sptk-card-initials {
	font-size: clamp(1.5rem, 6cqw, 2.25rem);
	font-weight: 700;
	line-height: 1;
}

.sptk-card-kind {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

.sptk-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.9rem 1rem 0.5rem;
	flex: 1 1 auto;
}

.sptk .sptk-card-title {
	margin: 0;
	font-family: var(--sptk-heading-font);
	font-size: 1rem;
	line-height: 1.35;
	color: var(--sptk-heading);
	text-wrap: balance;
}

.sptk-card-desc,
.sptk-card-meta {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sptk-muted);
}

.sptk-card-action {
	padding: 0.5rem 1rem 1rem;
}

.sptk-card-action:empty {
	display: none;
}

/* ---------- knop ---------- */

.sptk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.75rem;
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid var(--sptk-primary);
	border-radius: var(--sptk-radius);
	background: var(--sptk-primary);
	color: var(--sptk-on-primary);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.sptk-button:hover,
.sptk-button:focus {
	background: var(--sptk-accent-hover);
	border-color: var(--sptk-accent-hover);
	color: var(--sptk-on-primary);
}

/* Eén tikdoel per kaart: de knop dekt de hele kaart af. */
.sptk-stretched::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------- binnenkort ---------- */

.sptk-card.is-soon {
	border-style: dashed;
}

/* Wel herkenbaar als "nog niet", maar het beeld moet leesbaar blijven: veel
   slides zijn licht van zichzelf en verdwijnen bij een lage dekking helemaal. */
.sptk-card.is-soon .sptk-card-media {
	filter: grayscale(0.45);
	opacity: 0.85;
}

/* Linksonder in plaats van linksboven: een slide heeft zijn eigen titel
   bovenaan staan, en twee teksten over elkaar leest niemand. */
.sptk-badge {
	position: absolute;
	bottom: 0.6rem;
	left: 0.6rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sptk-primary);
	color: var(--sptk-on-primary);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sptk-soon-note {
	display: block;
	font-size: 0.8125rem;
	color: var(--sptk-muted);
	font-style: italic;
}

/* ---------- video ---------- */

.sptk-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.sptk-play-icon {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--sptk-primary);
	box-shadow: 0 2px 12px rgb(0 0 0 / 25%);
	transition: transform 0.15s ease;
}

.sptk-play-icon::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: 1.15rem 0 0 1.3rem;
	border-style: solid;
	border-width: 0.55rem 0 0.55rem 0.9rem;
	border-color: transparent transparent transparent var(--sptk-on-primary);
}

.sptk-play:hover .sptk-play-icon {
	transform: scale(1.08);
}

/* Alleen een teken, geen knop: klikken valt door naar de kaartlink, en de
   kaart als geheel geeft de hover-reactie door aan het icoon. */
.sptk-play.is-static {
	pointer-events: none;
	cursor: default;
}

.sptk-card.has-detail:hover .sptk-play.is-static .sptk-play-icon {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.sptk-play-icon {
		transition: none;
	}
	.sptk-play:hover .sptk-play-icon,
	.sptk-card.has-detail:hover .sptk-play.is-static .sptk-play-icon {
		transform: none;
	}
}

.sptk-card-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- leeg ---------- */

.sptk-empty {
	margin: 2rem 0;
	padding: 2rem;
	text-align: center;
	color: var(--sptk-muted);
	background: var(--sptk-bg-alt);
	border-radius: var(--sptk-radius);
}

.sptk-empty[hidden] {
	display: none;
}


/* ---------- de gate ---------- */

.sptk-dialog {
	width: min(32rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font-family: var(--sptk-font);
	overflow: auto;
}

.sptk-dialog::backdrop {
	background: rgb(0 0 0 / 45%);
}

/* Voor browsers zonder <dialog>: alleen tonen als hij open staat. */
.sptk-dialog:not([open]) {
	display: none;
}

.sptk-gate {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.75rem;
}

.sptk-dialog-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sptk-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.sptk-dialog-close:hover {
	background: var(--sptk-bg-alt);
	color: var(--sptk-text);
}

.sptk-gate-title {
	margin: 0;
	padding-right: 2rem;
	font-family: var(--sptk-heading-font);
	font-size: 1.25rem;
	color: var(--sptk-heading);
}

/* Kopje en toelichting boven het updates-vinkje. */
.sptk-gate-consent-head {
	margin-top: 0.5rem;
}

.sptk-gate-consent-heading {
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sptk-muted);
}

.sptk-gate-consent-note {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sptk-text);
}

.sptk-gate-intro,
.sptk-gate-what,
.sptk-gate-privacy {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sptk-muted);
}

.sptk-gate-what {
	padding: 0.6rem 0.8rem;
	background: var(--sptk-bg-alt);
	border-radius: var(--sptk-radius);
	color: var(--sptk-text);
}

.sptk-gate-what[hidden] {
	display: none;
}

.sptk-gate-fields {
	display: grid;
	gap: 0.85rem;
}

@media (min-width: 30rem) {
	.sptk-gate-fields {
		grid-template-columns: 1fr 1fr;
	}
	.sptk-field-email {
		grid-column: 1 / -1;
	}
}

.sptk-field label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.sptk-field input[type="text"],
.sptk-field input[type="email"],
.sptk-field select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font-family: inherit;
	font-size: 0.9375rem;
}

.sptk-field input:focus-visible,
.sptk-field select:focus-visible {
	outline: 2px solid var(--sptk-accent);
	outline-offset: 1px;
}

.sptk-field.has-error input,
.sptk-field.has-error select {
	border-color: #b3261e;
}

.sptk-field-error {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.75rem;
	color: #b3261e;
}

.sptk-field-error:empty {
	display: none;
}

.sptk-required {
	color: #b3261e;
}

.sptk-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.4;
	cursor: pointer;
}

.sptk-checkbox input {
	margin-top: 0.15rem;
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
}

/* De honeypot: onzichtbaar voor mensen, wel invulbaar voor een bot. */
.sptk-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sptk-gate-error {
	margin: 0;
	padding: 0.6rem 0.8rem;
	border-radius: var(--sptk-radius);
	background: #fcecea;
	color: #8c1d18;
	font-size: 0.875rem;
}

.sptk-gate-error[hidden] {
	display: none;
}

.sptk-gate-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

/* Onder de e-mail-eerst-regel wordt de dialoog na het versturen de
   bevestiging: de intro vertelt waar het materiaal heen is, de rest van het
   formulier heeft niets meer te vragen. Alleen de sluitknop blijft. */
.sptk-gate.is-mailed .sptk-gate-what,
.sptk-gate.is-mailed .sptk-gate-fields,
.sptk-gate.is-mailed .sptk-field-consent,
.sptk-gate.is-mailed .sptk-hp,
.sptk-gate.is-mailed .sptk-gate-privacy,
.sptk-gate.is-mailed .sptk-gate-submit {
	display: none;
}

.sptk-gate-submit {
	width: auto;
	flex: 1 1 auto;
}

.sptk-gate-cancel {
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 0;
	background: transparent;
	color: var(--sptk-muted);
	font-family: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
	text-decoration: underline;
}

.sptk-gate-cancel:hover {
	color: var(--sptk-text);
}


/* ---------- selecteren ---------- */

.sptk-collection-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
}

.sptk-selectall {
	flex: 0 0 auto;
	min-height: 2.25rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--sptk-border);
	border-radius: 999px;
	background: var(--sptk-bg);
	color: var(--sptk-muted);
	font-family: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.sptk-selectall:hover {
	border-color: var(--sptk-accent);
	color: var(--sptk-accent);
}

.sptk-selectall:focus-visible {
	outline: 2px solid var(--sptk-accent);
	outline-offset: 2px;
}

/* Boven de doorgetrokken link, anders vangt die elke klik af. */
.sptk-select {
	position: absolute;
	z-index: 2;
	top: 0.5rem;
	left: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	background: var(--sptk-bg);
	border: 1px solid var(--sptk-border);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* Op een aanraakscherm bestaat hover niet, dus daar staat hij altijd aan. */
@media (hover: none) {
	.sptk-select {
		opacity: 1;
	}
}

.sptk-card:hover .sptk-select,
.sptk-card:focus-within .sptk-select,
.sptk-select:has(input:checked) {
	opacity: 1;
}

.sptk-select-input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	cursor: pointer;
	accent-color: var(--sptk-primary);
}

.sptk-card:has(.sptk-select-input:checked) {
	border-color: var(--sptk-primary);
	box-shadow: 0 0 0 1px var(--sptk-primary);
}

/* Zonder :has blijft alles werken, alleen zonder de accentrand. */
@supports not selector(:has(*)) {
	.sptk-select {
		opacity: 1;
	}
}

/* ---------- de selectiebalk ---------- */

.sptk-tray {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	flex-wrap: wrap;
	margin-top: 2rem;
	padding: 0.9rem 1.1rem;
	background: var(--sptk-bg);
	border: 1px solid var(--sptk-primary);
	border-radius: var(--sptk-radius);
	box-shadow: 0 -4px 16px rgb(0 0 0 / 10%);
}

.sptk-tray[hidden] {
	display: none;
}

.sptk-tray-count {
	margin: 0;
	font-weight: 600;
}

.sptk-tray-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.sptk-tray .sptk-button {
	width: auto;
}

.sptk-tray-mail {
	background: var(--sptk-bg);
	color: var(--sptk-primary);
}

.sptk-tray-mail:hover,
.sptk-tray-mail:focus {
	background: var(--sptk-bg-alt);
	color: var(--sptk-primary);
	border-color: var(--sptk-primary);
}

.sptk-tray-clear {
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--sptk-muted);
	font-family: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
	text-decoration: underline;
}

.sptk-tray-clear:hover {
	color: var(--sptk-text);
}

.sptk-tray-message {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.875rem;
	color: var(--sptk-muted);
}

.sptk-tray-message[hidden] {
	display: none;
}

.sptk-tray-message.is-error {
	color: #8c1d18;
}

@media (max-width: 40rem) {
	.sptk-tray {
		flex-direction: column;
		align-items: stretch;
	}

	.sptk-tray-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.sptk-tray-clear {
		grid-column: 1 / -1;
	}
}


/* ---------- de korte vragenlijst ---------- */

/*
 * Onder de speler, nooit eroverheen. Een vragenlijst die het beeld afdekt
 * wordt weggeklikt en levert dus niets op.
 */
.sptk-survey {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 0.9rem 1rem 1rem;
	border-top: 1px solid var(--sptk-border);
	background: var(--sptk-bg-alt);
	/* Expliciet, want in het videovenster is de tekstkleur wit, en dat zou
	   witte letters op een witte kaart opleveren. */
	color: var(--sptk-text);
	animation: sptk-survey-in 0.25s ease-out;
}

@keyframes sptk-survey-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sptk-survey {
		animation: none;
	}
}

.sptk-survey-title {
	margin: 0;
	font-family: var(--sptk-heading-font);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sptk-heading);
}

.sptk-survey-question {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.sptk-survey-label {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sptk-text);
}

/* ---------- sterren en schaal ---------- */

.sptk-survey-scale {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.sptk-survey-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	border-radius: var(--sptk-radius);
	cursor: pointer;
	line-height: 1;
}

.sptk-survey-step:has(input:focus-visible) {
	outline: 2px solid var(--sptk-accent);
	outline-offset: 1px;
}

.sptk-survey-star {
	font-size: 1.5rem;
	color: var(--sptk-border);
	transition: color 0.12s ease;
}

.sptk-survey-step.is-filled .sptk-survey-star,
.sptk-survey-scale:hover .sptk-survey-step:hover .sptk-survey-star {
	color: var(--sptk-primary);
}

.sptk-survey-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
	background: var(--sptk-bg);
	font-size: 0.8125rem;
}

.sptk-survey-step:has(input:checked) .sptk-survey-number {
	background: var(--sptk-primary);
	border-color: var(--sptk-primary);
	color: var(--sptk-on-primary);
}

/* Zonder :has blijft alles bruikbaar, alleen zonder de gevulde staat. */
@supports not selector(:has(*)) {
	.sptk-survey-step input {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}
	.sptk-survey-star {
		display: none;
	}
}

/* ---------- keuze en tekst ---------- */

.sptk-survey-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
}

.sptk-survey-choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	font-size: 0.8125rem;
	cursor: pointer;
}

.sptk-survey-text {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font-family: inherit;
	font-size: 0.8125rem;
	resize: vertical;
}

.sptk-survey-text:focus-visible {
	outline: 2px solid var(--sptk-accent);
	outline-offset: 1px;
}

/* ---------- knoppen ---------- */

.sptk-survey-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sptk-survey-send {
	width: auto;
	min-height: 2.5rem;
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
}

.sptk-survey-skip {
	min-height: 2.5rem;
	padding: 0.4rem 0.5rem;
	border: 0;
	background: transparent;
	color: var(--sptk-muted);
	font-family: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
	text-decoration: underline;
}

.sptk-survey-skip:hover {
	color: var(--sptk-text);
}

.sptk-survey-thanks {
	margin: 0;
	font-size: 0.875rem;
	color: var(--sptk-text);
}


/* ---------- het grote videovenster ---------- */

.sptk-lightbox {
	width: min(96vw, 1200px);
	max-width: none;
	max-height: 94vh;
	padding: 0;
	border: 0;
	border-radius: var(--sptk-radius);
	background: transparent;
	color: #fff;
	overflow: visible;
}

.sptk-lightbox::backdrop {
	background: rgb(0 0 0 / 82%);
}

.sptk-lightbox:not([open]) {
	display: none;
}

/* Eén donker kader: de kop met titel en knoppen zit aan het beeld vast, in
   plaats van los boven de doorschemerende pagina te zweven. */
.sptk-lightbox-inner {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--sptk-radius);
	background: #0b0f1a;
	box-shadow: 0 24px 80px rgb(0 0 0 / 60%);
}

.sptk-lightbox-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0.6rem 0.6rem 1.25rem;
}

.sptk-lightbox-title {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-family: var(--sptk-heading-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sptk-lightbox-buttons {
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.sptk-lightbox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sptk-lightbox-btn .sptk-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.sptk-lightbox-btn:hover,
.sptk-lightbox-btn:focus-visible {
	background: rgb(255 255 255 / 22%);
}

.sptk-lightbox-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/*
 * Het podium is ook het element dat fullscreen gaat. In een fullscreen iframe
 * van Vimeo of YouTube kunnen we niets tekenen, dus zou de vragenlijst daar
 * onzichtbaar zijn; ons eigen kader fullscreen maken lost dat op.
 */
.sptk-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	max-height: 78vh;
	background: #000;
	overflow: hidden;
}

.sptk-stage:fullscreen {
	aspect-ratio: auto;
	max-height: none;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.sptk-stage iframe,
.sptk-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

@media (max-width: 48rem) {
	.sptk-lightbox {
		width: 100vw;
		max-height: 100vh;
	}

	/* Van rand tot rand; het kader is dan het scherm. */
	.sptk-lightbox-inner {
		border-radius: 0;
	}
}

/* ---------- de vragenlijst over het beeld ---------- */

.sptk-survey-over {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	/* Nooit meer dan de helft van het beeld: de kijker moet blijven zien
	   waar de vraag over gaat. Past het niet, dan scrolt de kaart zelf. */
	max-height: 55%;
	overflow-y: auto;
	gap: 0.55rem;
	border-top: 0;
	border-radius: var(--sptk-radius) var(--sptk-radius) 0 0;
	background: rgb(255 255 255 / 96%);
	backdrop-filter: blur(6px);
	box-shadow: 0 -8px 32px rgb(0 0 0 / 35%);
	padding: 0.85rem 1.1rem 1rem;
	animation: sptk-survey-up 0.28s ease-out;
}

.sptk-survey-over .sptk-survey-question {
	gap: 0.25rem;
}

.sptk-survey-over .sptk-survey-step {
	min-width: 2.25rem;
	min-height: 2.25rem;
}

@keyframes sptk-survey-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sptk-survey-over {
		animation: none;
	}
}

/* In fullscreen mag hij wat royaler, maar nooit het hele beeld. */
.sptk-stage:fullscreen .sptk-survey-over {
	left: 50%;
	right: auto;
	bottom: 2rem;
	transform: translateX(-50%);
	width: min(38rem, calc(100% - 4rem));
	border-radius: var(--sptk-radius);
	max-height: calc(100% - 4rem);
}

@keyframes sptk-survey-up-centred {
	from {
		opacity: 0;
	}
}

.sptk-stage:fullscreen .sptk-survey-over {
	animation-name: sptk-survey-up-centred;
}

/* ---------- linkmateriaal en detailpagina's ---------- */

/*
 * Met detailpagina's dekt de titellink de kaart af en ligt de knop erbovenop.
 * Bewust géén position op de doorgetrokken knop zelf: zijn ::after moet zich
 * blijven richten op de kaart, niet op de knop.
 */
.sptk-card-title .sptk-card-link {
	color: inherit;
	text-decoration: none;
}

.sptk-card-title .sptk-card-link:hover,
.sptk-card-title .sptk-card-link:focus {
	color: var(--sptk-accent);
	text-decoration: underline;
}

.sptk-card-action .sptk-button-raised {
	position: relative;
	z-index: 1;
}

/* De play-knop blijft absoluut óver de thumbnail liggen; alleen boven de kaartlink tillen. */
.sptk-card.has-detail .sptk-play {
	z-index: 1;
}

.sptk-button-icon {
	flex: none;
	width: 1em;
	height: 1em;
}

.sptk .sptk-detail-title {
	margin: 0 0 1.5rem;
	font-family: var(--sptk-heading-font);
	color: var(--sptk-heading);
}

/* De kop van de detailpagina: titel links, de bron(nen) rechts. Zonder
   titel (het thema toont hem al) blijft alleen de bron over, rechts. */
.sptk-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}

/* Basis 0: een lange titel breekt binnen zijn kolom in plaats van het
   icoon naar een volgende regel te duwen. */
.sptk .sptk-detail-head .sptk-detail-title {
	flex: 1 1 0;
	margin: 0;
}

.sptk-detail-sources {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.sptk-source {
	display: flex;
	align-items: center;
}

.sptk-source-icon {
	display: block;
	width: auto;
	height: 2.5rem;
	max-width: 12rem;
	object-fit: contain;
}

/* Een bron zonder icoon: de naam als label. */
.sptk-source-text {
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--sptk-border);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sptk-muted);
}

@media (max-width: 48rem) {
	.sptk-source-icon {
		height: 1.75rem;
		max-width: 8rem;
	}
}

.sptk-detail-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 2rem;
	align-items: start;
	margin-bottom: 2.5rem;
}

@media (max-width: 781px) {
	.sptk-detail-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

.sptk-detail .sptk-detail-media {
	border: 1px solid var(--sptk-border);
	border-radius: var(--sptk-radius);
}

.sptk-detail-desc {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--sptk-text);
}

.sptk-detail-summary .sptk-card-meta {
	margin-bottom: 1.25rem;
}

.sptk-detail-action .sptk-button {
	width: auto;
	min-width: 12rem;
	padding-inline: 1.5rem;
}

.sptk-detail-content {
	margin: 0 0 2.5rem;
}

.sptk-detail-content > :first-child {
	margin-top: 0;
}

/* ---------- detailpagina: terug, experts, tags, delen ---------- */

.sptk-icon {
	flex: none;
	width: 1em;
	height: 1em;
}

.sptk-detail-back {
	margin: 0 0 1.25rem;
}

.sptk-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.25rem;
	padding: 0.35rem 0.9rem 0.35rem 0.7rem;
	border: 1px solid var(--sptk-border);
	border-radius: 999px;
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font-size: 0.9375rem;
	text-decoration: none;
}

.sptk-back:hover,
.sptk-back:focus {
	border-color: var(--sptk-accent);
	color: var(--sptk-accent);
	text-decoration: none;
}

.sptk-detail-experts {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sptk-heading);
}

.sptk-detail-experts .sptk-icon {
	width: 1.15em;
	height: 1.15em;
	color: var(--sptk-muted);
}

.sptk-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.sptk-detail-summary .sptk-card-meta + .sptk-detail-tags {
	margin-top: -0.5rem;
}

.sptk-tag {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--sptk-border);
	border-radius: 999px;
	background: var(--sptk-bg-alt);
	color: var(--sptk-text);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
}

.sptk-tag:hover,
.sptk-tag:focus {
	border-color: var(--sptk-accent);
	color: var(--sptk-accent);
	text-decoration: none;
}

.sptk-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.sptk-share-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sptk-muted);
}

.sptk-share-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sptk-share-list > li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sptk-share-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--sptk-border);
	border-radius: 50%;
	background: var(--sptk-bg);
	color: var(--sptk-text);
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

.sptk-share-item .sptk-icon {
	width: 1.15rem;
	height: 1.15rem;
}

.sptk-share-item:hover,
.sptk-share-item:focus {
	border-color: var(--sptk-accent);
	color: var(--sptk-accent);
}

.sptk-share-copied {
	font-size: 0.8125rem;
	color: var(--sptk-muted);
}

.sptk-share-copied:empty {
	display: none;
}

.sptk-detail-related,
.sptk-detail-more {
	padding-top: 2rem;
	border-top: 1px solid var(--sptk-border);
}

/* Meerdere blokken onder elkaar houden afstand. */
.sptk-detail-related + .sptk-detail-more,
.sptk-detail-more + .sptk-detail-more {
	margin-top: 2.5rem;
}

.sptk .sptk-detail-related-title {
	margin: 0 0 1.25rem;
	font-family: var(--sptk-heading-font);
	font-size: 1.375rem;
	color: var(--sptk-heading);
}

/* Kop van een blok op de detailpagina: titel links, categorie-iconen
   rechts, zoals de titelrij van een categorie in het overzicht. */
.sptk-detail-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
}

.sptk .sptk-detail-section-head .sptk-detail-related-title {
	flex: 1 1 0;
	margin: 0;
}

.sptk-detail-section-icons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.sptk-detail-section-icons .sptk-collection-icon {
	margin: 0;
}

/* Een video vult de breedte; de tekst komt eronder in plaats van ernaast. */
.sptk-detail-video .sptk-detail-hero {
	grid-template-columns: minmax(0, 1fr);
}

.sptk-detail-video .sptk-card-image {
	object-fit: cover;
	object-position: center;
}