/* ==========================================================================
   Fotoviewer bij projecten en nieuws (zie js/bonhof-fotoviewer.js)
   Huisstijl: bordeaux #67161f (hover #af180c, de themaknopkleur), Noto Sans TC,
   knoppen met 5px afronding.
   ========================================================================== */

/* --- Foto in het bericht: aanklikbaar maken --- */

.bhlb-trigger .image_wrapper {
	position: relative;
	cursor: zoom-in;
}
.bhlb-trigger:focus-visible {
	outline: 3px solid #67161f;
	outline-offset: 3px;
}
.bhlb-hint {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: #67161f;
	color: #fff;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.bhlb-trigger:hover .bhlb-hint,
.bhlb-trigger:focus-visible .bhlb-hint {
	opacity: 1;
	transform: none;
}
/* Op een aanraakscherm is er geen hover: laat het icoon dan altijd zien,
   zodat duidelijk is dat de foto groter kan. */
@media (hover: none) {
	.bhlb-hint {
		right: 8px;
		bottom: 8px;
		width: 34px;
		height: 34px;
		opacity: .9;
		transform: none;
	}
}

/* --- Achtergrond en in-/uitfaden --- */

.bhlb.mfp-bg {
	background: #140c0d;
	opacity: 0;
	transition: opacity .16s ease-out;
}
.bhlb.mfp-bg.mfp-ready {
	opacity: .95;
}
.bhlb.mfp-bg.mfp-removing {
	opacity: 0;
}
.bhlb.mfp-wrap .mfp-content {
	opacity: 0;
	transition: opacity .16s ease-out;
}
.bhlb.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.bhlb.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

/* --- De foto zelf: ruimte vrijhouden voor de knoppen ---
   Magnific rekent de maximale hoogte uit als vensterhoogte min de padding
   van de foto, dus de padding bepaalt hoeveel ruimte de knoppen krijgen. */

.bhlb .mfp-container {
	padding: 0 88px;
}
.bhlb img.mfp-img,
.bhlb.mfp-img-mobile img.mfp-img {
	padding: 80px 0 40px;
}
.bhlb .mfp-figure:after {
	display: none;
}
.bhlb .mfp-bottom-bar {
	position: static;
	margin: 0;
}
.bhlb .mfp-title {
	display: none;
}

/* --- Knoppen --- */

.bhlb-knop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 5px;
	background: #67161f;
	color: #fff;
	transition: background .2s;
	pointer-events: none;
}

.bhlb .mfp-image-holder .mfp-close,
.bhlb .mfp-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 48px;
	height: 48px;
	padding: 0;
	line-height: 0;
	text-align: center;
	opacity: 1;
	cursor: pointer;
}
.bhlb .mfp-close:active {
	top: 16px;
}

.bhlb .mfp-arrow {
	position: fixed;
	top: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0;
	opacity: 1;
}
.bhlb .mfp-arrow:active {
	margin-top: -24px;
}
.bhlb .mfp-arrow-left {
	left: 20px;
}
.bhlb .mfp-arrow-right {
	right: 20px;
}
/* BeTheme tekent de standaardpijlen met !important als driehoekjes. */
.bhlb.mfp-wrap .mfp-arrow::before,
.bhlb.mfp-wrap .mfp-arrow::after {
	display: none !important;
}

.bhlb .mfp-close:hover .bhlb-knop,
.bhlb .mfp-arrow:hover .bhlb-knop {
	background: #af180c;
}
.bhlb .mfp-close:focus-visible,
.bhlb .mfp-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 5px;
}

/* --- Teller "3 / 9" --- */

.bhlb .mfp-counter {
	position: fixed;
	top: 16px;
	left: 16px;
	right: auto;
	color: #fff;
	font: 500 14px/1 "Noto Sans TC", sans-serif;
	letter-spacing: .06em;
}
.bhlb-teller {
	display: inline-block;
	height: 48px;
	padding: 0 18px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .12);
	line-height: 48px;
}

/* --- Laden en foutmelding --- */

.bhlb .mfp-preloader,
.bhlb .mfp-preloader a {
	color: #fff;
	font: 14px/1.5 "Noto Sans TC", sans-serif;
}

/* --- Telefoon: pijlen en teller in een balk onderaan, uit de foto --- */

@media (max-width: 767px) {
	.bhlb .mfp-container {
		padding: 0 8px;
	}
	.bhlb img.mfp-img,
	.bhlb.mfp-img-mobile img.mfp-img {
		padding: 72px 0 88px;
	}
	.bhlb-knop {
		width: 44px;
		height: 44px;
	}
	.bhlb .mfp-image-holder .mfp-close,
	.bhlb .mfp-close,
	.bhlb .mfp-close:active {
		top: 12px;
		right: 12px;
		width: 44px;
		height: 44px;
	}
	.bhlb .mfp-arrow,
	.bhlb .mfp-arrow:active {
		top: auto;
		bottom: 20px;
		width: 44px;
		height: 44px;
		margin: 0;
	}
	.bhlb .mfp-arrow-left {
		left: 16px;
	}
	.bhlb .mfp-arrow-right {
		right: 16px;
	}
	.bhlb .mfp-counter {
		top: auto;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
	}
	.bhlb-teller {
		height: 44px;
		line-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bhlb-hint,
	.bhlb.mfp-bg,
	.bhlb.mfp-wrap .mfp-content,
	.bhlb-knop {
		transition: none;
	}
}