/**
 * Hunebed Media - Portfolio, frontend.
 *
 * Bewust terughoudend: lettertype, tekstkleur en achtergrond komen uit het
 * thema. De kleuren hieronder worden afgeleid van de tekstkleur van het thema,
 * zodat randen, gedempte tekst en vlakken vanzelf meebewegen met een licht of
 * donker ontwerp. Alles is te overschrijven via de variabelen.
 */

.hunebedmedia_portfolio {
	--hunebedmedia_portfolio-gat: clamp(16px, 2.2vw, 28px);
	--hunebedmedia_portfolio-radius: 10px;
	--hunebedmedia_portfolio-radius-klein: 6px;
	--hunebedmedia_portfolio-verhouding: 4 / 3;
	--hunebedmedia_portfolio-duur: 200ms;
	--hunebedmedia_portfolio-easing: cubic-bezier(0.2, 0.7, 0.3, 1);

	/* Terugvalwaarden voor browsers zonder color-mix. */
	--hunebedmedia_portfolio-rand: rgba(128, 128, 128, 0.32);
	--hunebedmedia_portfolio-rand-sterk: rgba(128, 128, 128, 0.55);
	--hunebedmedia_portfolio-gedempt: rgba(128, 128, 128, 1);
	--hunebedmedia_portfolio-vlak: rgba(128, 128, 128, 0.08);
	--hunebedmedia_portfolio-vlak-hover: rgba(128, 128, 128, 0.16);
	--hunebedmedia_portfolio-beeldvlak: rgba(128, 128, 128, 0.16);
	--hunebedmedia_portfolio-accent: currentColor;
	--hunebedmedia_portfolio-focus: currentColor;

	/* Overlaykaarten: los in te stellen, want die staan op een foto en niet
	   op de achtergrond van het thema. */
	--hunebedmedia_portfolio-overlay-vlak: #2c3036;
	--hunebedmedia_portfolio-overlay-tekst: #fff;
	--hunebedmedia_portfolio-overlay-sluier: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0.72) 100%);
	--hunebedmedia_portfolio-knop-vlak: #fff;
	--hunebedmedia_portfolio-knop-tekst: #16181b;

	color: inherit;
	font: inherit;
}

@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.hunebedmedia_portfolio {
		--hunebedmedia_portfolio-rand: color-mix(in srgb, currentColor 16%, transparent);
		--hunebedmedia_portfolio-rand-sterk: color-mix(in srgb, currentColor 38%, transparent);
		--hunebedmedia_portfolio-gedempt: color-mix(in srgb, currentColor 68%, transparent);
		--hunebedmedia_portfolio-vlak: color-mix(in srgb, currentColor 5%, transparent);
		--hunebedmedia_portfolio-vlak-hover: color-mix(in srgb, currentColor 10%, transparent);
		--hunebedmedia_portfolio-beeldvlak: color-mix(in srgb, currentColor 9%, transparent);
	}
}

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

/*
 * Dezelfde reden als hieronder, maar dan voor hover en focus: thema's zetten
 * daar vaak een eigen tekst- en achtergrondkleur (Hello Elementor doet
 * `button:hover { color: #fff }`). Onze knoppen houden hun eigen kleur, die
 * van de tekst om hen heen.
 */
.hunebedmedia_portfolio .hunebedmedia_portfolio__knop:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__knop:focus,
.hunebedmedia_portfolio .hunebedmedia_portfolio__chip:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__chip:focus,
.hunebedmedia_portfolio .hunebedmedia_portfolio__drawer-knop:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__drawer-knop:focus,
.hunebedmedia_portfolio .hunebedmedia_portfolio__sluit:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__sluit:focus,
.hunebedmedia_portfolio .hunebedmedia_portfolio__galerij-knop:hover,
.hunebedmedia_portfolio .hunebedmedia_portfolio__galerij-knop:focus {
	color: inherit;
}

/*
 * Thema's en paginabouwers geven ieder <button> hun eigen opmaak mee: een
 * accentkleur als achtergrond, een rand, hoofdletters, extra padding. Die
 * regels staan op `.thema-klasse button` en winnen het van een losse klasse
 * van ons. Onze knoppen worden hier dus eerst helemaal kaalgemaakt; de
 * opmaak per knop staat verderop en is met de wrapper ervoor specifiek
 * genoeg om hier weer overheen te gaan.
 */
.hunebedmedia_portfolio button,
.hunebedmedia_portfolio__lightbox button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	text-shadow: none;
	min-height: 0;
	width: auto;
	cursor: pointer;
}

/* Alleen voor schermlezers. */
.hunebedmedia_portfolio__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hunebedmedia_portfolio__icoon {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

/* Zichtbare focus, overal hetzelfde. */
.hunebedmedia_portfolio :focus-visible {
	outline: 2px solid var(--hunebedmedia_portfolio-focus);
	outline-offset: 3px;
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
}

/* ------------------------------------------------------------------ *
 * Filterbalk
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 16px;
}

.hunebedmedia_portfolio__velden {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	flex: 1 1 auto;
}

.hunebedmedia_portfolio__veldgroep {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 180px;
	min-width: 0;
	max-width: 280px;
}

.hunebedmedia_portfolio__veldgroep--sorteer {
	margin-inline-start: auto;
}

.hunebedmedia_portfolio__veldlabel {
	font-size: 0.8em;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--hunebedmedia_portfolio-gedempt);
}

.hunebedmedia_portfolio__keuze {
	position: relative;
	display: flex;
	align-items: center;
}

.hunebedmedia_portfolio__keuze select,
.hunebedmedia_portfolio__keuze input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing),
		background-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__keuze select {
	padding-inline-end: 38px;
}

.hunebedmedia_portfolio__keuze input {
	cursor: text;
}

.hunebedmedia_portfolio__keuze select:hover,
.hunebedmedia_portfolio__keuze input:hover {
	border-color: var(--hunebedmedia_portfolio-rand-sterk);
}

.hunebedmedia_portfolio__chevron {
	position: absolute;
	inset-inline-end: 12px;
	width: 16px;
	height: 16px;
	pointer-events: none;
	opacity: 0.6;
}

/* Knop die het filterpaneel opent. Alleen zichtbaar op smalle schermen. */
.hunebedmedia_portfolio .hunebedmedia_portfolio__drawer-knop {
	text-transform: none;
	letter-spacing: normal;
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--hunebedmedia_portfolio-rand-sterk);
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	cursor: pointer;
}

.hunebedmedia_portfolio__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--hunebedmedia_portfolio-vlak-hover);
	font-size: 0.75em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.hunebedmedia_portfolio__paneel-kop,
.hunebedmedia_portfolio__paneel-voet {
	display: none;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__knop {
	text-transform: none;
	letter-spacing: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 20px;
	border: 1px solid var(--hunebedmedia_portfolio-rand-sterk);
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__knop:hover {
	background: var(--hunebedmedia_portfolio-vlak-hover);
}

/* ------------------------------------------------------------------ *
 * Chips en teller
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-bottom: var(--hunebedmedia_portfolio-gat);
}

.hunebedmedia_portfolio__chips-wrap:empty {
	display: none;
}

.hunebedmedia_portfolio__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	text-transform: none;
	letter-spacing: normal;
	padding: 6px 12px;
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: 999px;
	background: var(--hunebedmedia_portfolio-vlak);
	color: inherit;
	font-size: 0.85em;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing),
		border-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__chip:hover {
	background: var(--hunebedmedia_portfolio-vlak-hover);
	border-color: var(--hunebedmedia_portfolio-rand-sterk);
}

.hunebedmedia_portfolio__chip-label {
	color: var(--hunebedmedia_portfolio-gedempt);
}

.hunebedmedia_portfolio__chip-waarde {
	font-weight: 600;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__chip .hunebedmedia_portfolio__icoon {
	width: 13px;
	height: 13px;
	opacity: 0.65;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__chip--wis {
	background: transparent;
	border-style: dashed;
}

.hunebedmedia_portfolio__teller {
	margin: 0;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	color: var(--hunebedmedia_portfolio-gedempt);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Grid en kaarten
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__resultaten {
	position: relative;
	transition: opacity 150ms var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__resultaten[aria-busy="true"] {
	opacity: 0.45;
	pointer-events: none;
}

.hunebedmedia_portfolio__grid {
	display: grid;
	gap: var(--hunebedmedia_portfolio-gat);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 560px) {
	.hunebedmedia_portfolio__grid--kolommen-2,
	.hunebedmedia_portfolio__grid--kolommen-3,
	.hunebedmedia_portfolio__grid--kolommen-4,
	.hunebedmedia_portfolio__grid--kolommen-5,
	.hunebedmedia_portfolio__grid--kolommen-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.hunebedmedia_portfolio__grid--kolommen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__grid--kolommen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__grid--kolommen-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__grid--kolommen-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.hunebedmedia_portfolio__kaart {
	animation: hunebedmedia_portfolio-in 380ms var(--hunebedmedia_portfolio-easing) both;
	animation-delay: calc(var(--hunebedmedia_portfolio-vertraging, 0) * 40ms);
}

@keyframes hunebedmedia_portfolio-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hunebedmedia_portfolio a.hunebedmedia_portfolio__kaart-link,
.hunebedmedia_portfolio a.hunebedmedia_portfolio__chip,
.hunebedmedia_portfolio a.hunebedmedia_portfolio__terug,
.hunebedmedia_portfolio a.hunebedmedia_portfolio__knop,
.hunebedmedia_portfolio .hunebedmedia_portfolio__paginering a {
	color: inherit;
}

.hunebedmedia_portfolio__kaart-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.hunebedmedia_portfolio__kaart-beeld {
	position: relative;
	overflow: hidden;
	border-radius: var(--hunebedmedia_portfolio-radius);
	aspect-ratio: var(--hunebedmedia_portfolio-verhouding);
	background: var(--hunebedmedia_portfolio-beeldvlak);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__kaart-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
	transition: transform 450ms var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__kaart-link:hover .hunebedmedia_portfolio__kaart-beeld img,
.hunebedmedia_portfolio__kaart-link:focus-visible .hunebedmedia_portfolio__kaart-beeld img {
	transform: scale(1.04);
}

.hunebedmedia_portfolio__kaart-geen-beeld {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.28;
}

.hunebedmedia_portfolio__kaart-geen-beeld svg {
	width: 34%;
	max-width: 64px;
	height: auto;
}

.hunebedmedia_portfolio__kaart-badge {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.3;
	backdrop-filter: blur(4px);
}

.hunebedmedia_portfolio__kaart-tekst {
	padding-block-start: 12px;
}

.hunebedmedia_portfolio__kaart-titel {
	margin: 0 0 5px;
	font-size: 1.05em;
	line-height: 1.3;
	text-wrap: balance;
}

.hunebedmedia_portfolio__kaart-link:hover .hunebedmedia_portfolio__kaart-titel {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hunebedmedia_portfolio__kaart-velden {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
	line-height: 1.5;
	color: var(--hunebedmedia_portfolio-gedempt);
}

.hunebedmedia_portfolio__kaart-knop {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-block-start: 8px;
	font-size: 0.9em;
	font-weight: 600;
}

.hunebedmedia_portfolio__kaart-link:hover .hunebedmedia_portfolio__kaart-knop .hunebedmedia_portfolio__icoon {
	transform: translateX(3px);
}

.hunebedmedia_portfolio__kaart-knop .hunebedmedia_portfolio__icoon {
	width: 15px;
	height: 15px;
	transition: transform var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

/* ------------------------------------------------------------------ *
 * Overlaykaarten: foto met de titel en de knop eroverheen
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-link {
	display: grid;
	grid-template-areas: "stapel";
	border-radius: var(--hunebedmedia_portfolio-radius);
	overflow: hidden;
	isolation: isolate;
	color: var(--hunebedmedia_portfolio-overlay-tekst);
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-beeld,
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-tekst {
	grid-area: stapel;
	min-width: 0;
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-beeld {
	border-radius: 0;
	background: var(--hunebedmedia_portfolio-overlay-vlak);
}

/* De sluier zorgt dat witte tekst leesbaar blijft op elke foto. */
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hunebedmedia_portfolio-overlay-sluier);
	transition: opacity var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-link:hover .hunebedmedia_portfolio__kaart-beeld::after,
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-link:focus-visible .hunebedmedia_portfolio__kaart-beeld::after {
	opacity: 0.82;
}

/* Zonder foto is het vlak al een rustige kleur; het icoon zou dan alleen maar
   achter de titel door schemeren. */
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-geen-beeld {
	display: none;
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-tekst {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: clamp(18px, 2.6vw, 32px);
	text-align: center;
	color: var(--hunebedmedia_portfolio-overlay-tekst);
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-titel {
	margin: 0;
	font-size: clamp(1.05em, 1.6vw, 1.35em);
	line-height: 1.25;
}

/* Het hele vlak is al een link; onderstrepen van de titel is dan onrustig. */
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-link:hover .hunebedmedia_portfolio__kaart-titel {
	text-decoration: none;
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-velden {
	color: inherit;
	opacity: 0.88;
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-knop {
	margin-block-start: 2px;
	padding: 11px 22px;
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
	background: var(--hunebedmedia_portfolio-knop-vlak);
	color: var(--hunebedmedia_portfolio-knop-tekst);
	font-size: 0.92em;
	text-shadow: none;
	transition: transform var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing),
		filter var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

/* De pijl hoort bij de tekstlink, niet bij een knop met een eigen vlak. */
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-knop .hunebedmedia_portfolio__icoon {
	display: none;
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-link:hover .hunebedmedia_portfolio__kaart-knop,
.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-link:focus-visible .hunebedmedia_portfolio__kaart-knop {
	transform: translateY(-2px);
	filter: brightness(0.94);
}

.hunebedmedia_portfolio__kaart--overlay .hunebedmedia_portfolio__kaart-badge {
	text-shadow: none;
	z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Lege toestand
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__leeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: clamp(32px, 7vw, 64px) 20px;
	border: 1px dashed var(--hunebedmedia_portfolio-rand);
	border-radius: var(--hunebedmedia_portfolio-radius);
	text-align: center;
}

.hunebedmedia_portfolio__leeg-icoon {
	width: 34px;
	height: 34px;
	opacity: 0.45;
}

.hunebedmedia_portfolio__leeg-titel {
	margin: 0;
	color: var(--hunebedmedia_portfolio-gedempt);
	text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * Skeleton tijdens het laden
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__skelet-beeld {
	border-radius: var(--hunebedmedia_portfolio-radius);
	aspect-ratio: var(--hunebedmedia_portfolio-verhouding);
	background: var(--hunebedmedia_portfolio-beeldvlak);
	animation: hunebedmedia_portfolio-puls 1.4s ease-in-out infinite;
}

.hunebedmedia_portfolio__skelet-regel {
	height: 0.85em;
	margin-block-start: 12px;
	border-radius: 4px;
	background: var(--hunebedmedia_portfolio-vlak);
	animation: hunebedmedia_portfolio-puls 1.4s ease-in-out infinite;
}

.hunebedmedia_portfolio__skelet-regel--kort {
	width: 55%;
	margin-block-start: 8px;
}

@keyframes hunebedmedia_portfolio-puls {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* ------------------------------------------------------------------ *
 * Paginering
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__paginering {
	margin-block-start: var(--hunebedmedia_portfolio-gat);
}

.hunebedmedia_portfolio__paginering ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Alleen de paginanummers zelf krijgen een knopvorm. Eerder stond hier
 * `span`, en dat raakte ook het pijltje en de schermlezertekst bínnen een
 * link: die kregen dan hun eigen omrande vlak, een knop in een knop.
 * WordPress zet op elk paginanummer de klasse .page-numbers, dus daar
 * mikken we op.
 */
.hunebedmedia_portfolio__paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--hunebedmedia_portfolio-rand);
	border-radius: var(--hunebedmedia_portfolio-radius-klein);
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__paginering a.page-numbers:hover {
	background: var(--hunebedmedia_portfolio-vlak-hover);
}

.hunebedmedia_portfolio__paginering .current {
	border-color: var(--hunebedmedia_portfolio-rand-sterk);
	background: var(--hunebedmedia_portfolio-vlak);
	font-weight: 700;
}

.hunebedmedia_portfolio__paginering .dots {
	border-color: transparent;
	min-width: 24px;
}

/* ------------------------------------------------------------------ *
 * Gegevenslijst op een itempagina
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__gegevens-titel {
	margin-block-end: 12px;
}

.hunebedmedia_portfolio__gegevens-lijst {
	display: grid;
	gap: 0 var(--hunebedmedia_portfolio-gat);
	margin: 0;
}

@media (min-width: 720px) {
	.hunebedmedia_portfolio__gegevens-lijst--kolommen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__gegevens-lijst--kolommen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hunebedmedia_portfolio__gegeven {
	display: grid;
	grid-template-columns: minmax(130px, 34%) 1fr;
	gap: 6px 16px;
	padding: 11px 0;
	border-block-end: 1px solid var(--hunebedmedia_portfolio-rand);
}

.hunebedmedia_portfolio__gegevens-lijst dt {
	margin: 0;
	font-weight: 600;
}

.hunebedmedia_portfolio__gegevens-lijst dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: break-word;
}

@media (max-width: 560px) {
	.hunebedmedia_portfolio__gegeven {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* ------------------------------------------------------------------ *
 * Galerij
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__galerij {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 560px) {
	.hunebedmedia_portfolio__galerij--kolommen-2,
	.hunebedmedia_portfolio__galerij--kolommen-3,
	.hunebedmedia_portfolio__galerij--kolommen-4,
	.hunebedmedia_portfolio__galerij--kolommen-5,
	.hunebedmedia_portfolio__galerij--kolommen-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.hunebedmedia_portfolio__galerij--kolommen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__galerij--kolommen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__galerij--kolommen-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.hunebedmedia_portfolio__galerij--kolommen-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.hunebedmedia_portfolio__galerij-item {
	margin: 0;
	min-width: 0;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__galerij-knop {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	color: inherit;
	border-radius: var(--hunebedmedia_portfolio-radius);
	overflow: hidden;
	background: var(--hunebedmedia_portfolio-beeldvlak);
	cursor: zoom-in;
	aspect-ratio: var(--hunebedmedia_portfolio-verhouding);
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__galerij-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
	border-radius: var(--hunebedmedia_portfolio-radius);
	aspect-ratio: var(--hunebedmedia_portfolio-verhouding);
	transition: transform 450ms var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__galerij-knop:hover img {
	transform: scale(1.05);
}

.hunebedmedia_portfolio__vergroot {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing),
		transform var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__vergroot svg {
	width: 18px;
	height: 18px;
}

.hunebedmedia_portfolio__galerij-knop:hover .hunebedmedia_portfolio__vergroot,
.hunebedmedia_portfolio__galerij-knop:focus-visible .hunebedmedia_portfolio__vergroot {
	opacity: 1;
	transform: none;
}

.hunebedmedia_portfolio__galerij-bijschrift {
	margin-block-start: 7px;
	font-size: 0.85em;
	line-height: 1.45;
	color: var(--hunebedmedia_portfolio-gedempt);
}

/* ------------------------------------------------------------------ *
 * Losse onderdelen
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__veld-label {
	font-weight: 600;
}

.hunebedmedia_portfolio__veld-label::after {
	content: ":";
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__hoofdafbeelding img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--hunebedmedia_portfolio-radius);
}

.hunebedmedia_portfolio__terug {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	text-decoration: none;
}

.hunebedmedia_portfolio__terug:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hunebedmedia_portfolio__terug .hunebedmedia_portfolio__icoon {
	transition: transform var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__terug:hover .hunebedmedia_portfolio__icoon {
	transform: translateX(-3px);
}

/* ------------------------------------------------------------------ *
 * Lightbox
 * ------------------------------------------------------------------ */

.hunebedmedia_portfolio__lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	color: #fff;
}

.hunebedmedia_portfolio__lightbox::backdrop {
	background: rgba(0, 0, 0, 0.88);
}

.hunebedmedia_portfolio__lightbox-binnen {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	width: 100%;
	height: 100%;
	padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
	background: rgba(0, 0, 0, 0.88);
}

.hunebedmedia_portfolio__lightbox-beeld {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 8px;
}

.hunebedmedia_portfolio .hunebedmedia_portfolio__lightbox-beeld img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	animation: hunebedmedia_portfolio-zoom 220ms var(--hunebedmedia_portfolio-easing) both;
}

@keyframes hunebedmedia_portfolio-zoom {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hunebedmedia_portfolio__lightbox-voet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 10px 4px 2px;
	font-size: 0.9em;
	text-align: center;
}

.hunebedmedia_portfolio__lightbox-teller {
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
	white-space: nowrap;
}

.hunebedmedia_portfolio__lightbox-bijschrift {
	max-width: 60ch;
	opacity: 0.9;
	overflow-wrap: break-word;
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--hunebedmedia_portfolio-duur) var(--hunebedmedia_portfolio-easing);
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop:hover {
	background: rgba(255, 255, 255, 0.24);
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop svg {
	width: 22px;
	height: 22px;
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop--sluit {
	inset-block-start: max(12px, env(safe-area-inset-top));
	inset-inline-end: 12px;
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop--vorige {
	inset-block-start: 50%;
	inset-inline-start: 12px;
	transform: translateY(-50%);
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop--volgende {
	inset-block-start: 50%;
	inset-inline-end: 12px;
	transform: translateY(-50%);
}

.hunebedmedia_portfolio__lightbox .hunebedmedia_portfolio__lightbox-knop[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Smalle schermen: filters in een paneel van onderaf
 * ------------------------------------------------------------------ */

@media (max-width: 782px) {
	/*
	 * Met de wrapper ervoor, net als de basisregel hierboven. Anders is deze
	 * regel lichter dan die en blijft de knop op mobiel verborgen — en dan
	 * zijn de filters daar helemaal weg, want het paneel zit erachter.
	 */
	.hunebedmedia_portfolio .hunebedmedia_portfolio__drawer-knop {
		display: inline-flex;
	}

	.hunebedmedia_portfolio__balk {
		gap: 8px;
	}

	.hunebedmedia_portfolio__paneel {
		position: fixed;
		inset: 0;
		z-index: 99999;
		display: none;
		grid-template-rows: auto 1fr auto;
		background: #fff;
		color: #111;
	}

	@supports (background: Canvas) {
		.hunebedmedia_portfolio__paneel {
			background: Canvas;
			color: CanvasText;
		}
	}

	.hunebedmedia_portfolio__paneel.is-open {
		display: grid;
		animation: hunebedmedia_portfolio-omhoog 240ms var(--hunebedmedia_portfolio-easing) both;
	}

	@keyframes hunebedmedia_portfolio-omhoog {
		from {
			opacity: 0;
			transform: translateY(16px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	.hunebedmedia_portfolio__paneel-kop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: max(14px, env(safe-area-inset-top)) 16px 14px;
		border-block-end: 1px solid var(--hunebedmedia_portfolio-rand);
	}

	.hunebedmedia_portfolio__paneel-titel {
		margin: 0;
		font-size: 1.05em;
	}

	.hunebedmedia_portfolio .hunebedmedia_portfolio__sluit {
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: var(--hunebedmedia_portfolio-vlak);
		color: inherit;
		cursor: pointer;
	}

	.hunebedmedia_portfolio__velden {
		display: block;
		padding: 16px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.hunebedmedia_portfolio__veldgroep {
		max-width: none;
		margin-block-end: 18px;
	}

	.hunebedmedia_portfolio__veldgroep--sorteer {
		margin-inline-start: 0;
	}

	.hunebedmedia_portfolio__veldlabel {
		font-size: 0.9em;
		font-weight: 600;
		color: inherit;
	}

	.hunebedmedia_portfolio__paneel-voet {
		display: block;
		padding: 14px 16px max(14px, env(safe-area-inset-bottom));
		border-block-start: 1px solid var(--hunebedmedia_portfolio-rand);
	}

	.hunebedmedia_portfolio__paneel-voet .hunebedmedia_portfolio__knop {
		width: 100%;
	}

	.hunebedmedia_portfolio .hunebedmedia_portfolio__knop--primair {
		border-color: currentColor;
		background: var(--hunebedmedia_portfolio-vlak-hover);
		font-weight: 600;
	}

	.hunebedmedia_portfolio__status {
		margin-block-end: 18px;
	}
}

/* Zolang JavaScript het paneel niet heeft overgenomen, blijven de velden
   gewoon zichtbaar en werkt het formulier met de knop eronder. */
@media (max-width: 782px) {
	.hunebedmedia_portfolio__balk:not([data-hm-verbeterd]) .hunebedmedia_portfolio__drawer-knop {
		display: none;
	}

	.hunebedmedia_portfolio__balk:not([data-hm-verbeterd]) .hunebedmedia_portfolio__paneel {
		position: static;
		display: block;
		background: transparent;
	}

	.hunebedmedia_portfolio__balk:not([data-hm-verbeterd]) .hunebedmedia_portfolio__paneel-kop {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Minder beweging
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.hunebedmedia_portfolio *,
	.hunebedmedia_portfolio *::before,
	.hunebedmedia_portfolio *::after,
	.hunebedmedia_portfolio__lightbox * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * Afdrukken
 * ------------------------------------------------------------------ */

@media print {
	.hunebedmedia_portfolio__balk,
	.hunebedmedia_portfolio__chips,
	.hunebedmedia_portfolio__paginering,
	.hunebedmedia_portfolio__vergroot {
		display: none !important;
	}
}