/*
 * Wheeliebinners Photos. Uses the theme's colours and spacing when available
 * (--wp--preset--*) and falls back to the Visual Guide values, so it also looks
 * right in another theme.
 */
.wbphotos,
.wbphotos-lightbox {
	--wbp-black: var(--wp--preset--color--black, #111111);
	--wbp-warm: var(--wp--preset--color--warm, #fcf4eb);
	--wbp-orange: var(--wp--preset--color--orange, #ea5629);
	--wbp-orange-text: var(--wp--preset--color--orange-text, #c4330a);
	--wbp-white: var(--wp--preset--color--white, #ffffff);
}

.wbphotos { margin: 1.5rem 0; }
.wbphotos__link { display: block; color: inherit; line-height: 0; }
.wbphotos__img { display: block; max-width: 100%; height: auto; }
.wbphotos a:focus-visible,
.wbphotos button:focus-visible,
.wbphotos__track:focus-visible {
	outline: 3px solid var(--wbp-orange-text);
	outline-offset: 3px;
}

/* ---------- Single ---------- */
.wbphotos--single { margin-inline: 0; }
.wbphotos--single .wbphotos__img {
	width: auto;
	max-width: 100%;
	max-height: min(85vh, 56rem);
	border: 2px solid var(--wbp-black);
}
.wbphotos__cap { margin: 0.6rem 0 0; font-size: 0.9375rem; line-height: 1.4; }

/* ---------- Tiles ---------- */
.wbphotos__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 700px) {
	.wbphotos__list { grid-template-columns: repeat(min(3, var(--wbphotos-cols, 4)), minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.wbphotos__list { grid-template-columns: repeat(var(--wbphotos-cols, 4), minmax(0, 1fr)); }
}
.wbphotos__item { margin: 0; }
.wbphotos--tiles .wbphotos__link { position: relative; overflow: hidden; background: var(--wbp-black); }
.wbphotos--tiles .wbphotos__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.wbphotos--tiles .wbphotos__link:hover .wbphotos__img { transform: scale(1.03); opacity: 0.92; }
@media (prefers-reduced-motion: reduce) {
	.wbphotos--tiles .wbphotos__img { transition: none; }
	.wbphotos--tiles .wbphotos__link:hover .wbphotos__img { transform: none; }
}

/* ---------- Carousel ---------- */
.wbphotos--carousel { position: relative; }
.wbphotos__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	background: var(--wbp-black);
	border: 2px solid var(--wbp-black);
}
.wbphotos__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	position: relative;
	background: var(--wbp-black);
}
.wbphotos--carousel .wbphotos__img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	max-height: min(70vh, 40rem);
	object-fit: contain;
	margin-inline: auto;
}
.wbphotos--carousel .wbphotos__cap {
	margin: 0;
	padding: 0.7rem 1rem;
	background: var(--wbp-black);
	color: var(--wbp-warm);
}
.wbphotos__controls {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.75rem;
}
.wbphotos--carousel.is-ready .wbphotos__controls { display: flex; }
.wbphotos__count { font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.wbphotos__btn {
	min-width: 3rem;
	min-height: 3rem;
	padding: 0 1rem;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wbp-white);
	background: var(--wbp-orange-text);
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.wbphotos__btn:hover:not(:disabled) { background: var(--wbp-black); }
.wbphotos__btn:disabled { background: #6b6b6b; cursor: default; }

/* ---------- Notices ---------- */
.wbphotos-notice {
	margin: 1rem 0;
	padding: 0.6rem 0.9rem;
	border-left: 4px solid var(--wbp-orange-text);
	background: #fff;
	font-size: 0.9375rem;
}
.wbphotos-login {
	margin: 1rem 0;
	padding: 1rem 1.25rem;
	border: 2px solid var(--wbp-black);
	background: var(--wbp-white);
	font-weight: 700;
}

/* ---------- Lightbox ---------- */
html.wbphotos-noscroll { overflow: hidden; }
.wbphotos-lightbox {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(17, 17, 17, 0.96);
	color: var(--wbp-warm);
}
.wbphotos-lightbox::backdrop { background: rgba(17, 17, 17, 0.96); }
.wbphotos-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.wbphotos-lightbox__fig {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 4.5rem 1rem 4.5rem;
	box-sizing: border-box;
}
.wbphotos-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - 11rem);
	width: auto;
	height: auto;
	object-fit: contain;
}
.wbphotos-lightbox__cap {
	margin-top: 0.75rem;
	max-width: 60rem;
	font-size: 1.0625rem;
	line-height: 1.5;
	text-align: center;
}
.wbphotos-lightbox__link { margin-left: 0.75em; color: var(--wbp-warm); font-weight: 700; }
.wbphotos-lightbox__link:hover { color: var(--wbp-orange); }
.wbphotos-lightbox__count {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	margin: 0;
	font-weight: 800;
	letter-spacing: 0.08em;
}
.wbphotos-lightbox__btn {
	position: absolute;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font: inherit;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wbp-white);
	background: var(--wbp-orange-text);
	border: 0;
	border-radius: 0;
	cursor: pointer;
}
.wbphotos-lightbox__btn:hover { background: var(--wbp-black); outline: 2px solid var(--wbp-warm); }
.wbphotos-lightbox__btn:focus-visible { outline: 3px solid var(--wbp-warm); outline-offset: 2px; }
.wbphotos-lightbox__close { top: 1rem; right: 1rem; }
.wbphotos-lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.wbphotos-lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.wbphotos-lightbox__btn[hidden] { display: none; }
@media (max-width: 600px) {
	.wbphotos-lightbox__prev,
	.wbphotos-lightbox__next { top: auto; bottom: 1rem; transform: none; }
	.wbphotos-lightbox__prev { left: auto; right: 4.5rem; }
	.wbphotos-lightbox__next { right: 1rem; }
}