/* BltGallery – Frontend styles */

/* ── CSS custom properties ──────────────────────────────────────────── */

:root {
	--blt-gap: 12px;
	--blt-radius: 6px;
	--blt-thumb-min: 200px;   /* drives responsive auto-fill grids */
	--blt-transition: 0.25s ease;
	--blt-overlay: rgba(0, 0, 0, 0.6);
	--blt-lb-bg: #111;
	--blt-lb-ctrl: #fff;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Base container ─────────────────────────────────────────────────── */

.bltgallery {
	box-sizing: border-box;
	width: 100%;
}

.bltgallery *,
.bltgallery *::before,
.bltgallery *::after {
	box-sizing: inherit;
}

.bltgallery__empty {
	text-align: center;
	padding: 2rem;
	color: #64748b;
}

/* ── Shared link + caption ──────────────────────────────────────────── */

.bltgallery__link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--blt-radius);
	color: inherit;
	text-decoration: none;
}

.bltgallery__link img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--blt-transition);
}

.bltgallery__link:hover img,
.bltgallery__link:focus-visible img {
	transform: scale(1.03);
}

.bltgallery__link:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

.bltgallery__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.5rem 0.75rem;
	background: var(--blt-overlay);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.3;
	transform: translateY(100%);
	transition: transform var(--blt-transition);
}

.bltgallery__link:hover .bltgallery__caption,
.bltgallery__link:focus-visible .bltgallery__caption {
	transform: translateY(0);
}

/* ── Masonry ────────────────────────────────────────────────────────── */

/*
 * Columns-driven responsive grids.
 *
 * `--blt-cols` sets the *target* column count at desktop width. The RAM
 * (repeat / auto-fill / minmax) pattern then ensures columns reflow
 * gracefully on narrower screens — each tile never drops below
 * `--blt-thumb-min` (default 160px).
 *
 *   max( min-cell-px, 100% / cols )  → the larger of "min size" and "1/N of width"
 *   minmax( ↑, 1fr )                 → tracks grow with available space
 *   repeat(auto-fill, …)             → as many tracks as fit
 */
.bltgallery-masonry__grid {
	column-count: var(--blt-cols, 4);
	column-gap: var(--blt-gutter, 12px);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 900px) {
	.bltgallery-masonry__grid { column-count: max(2, calc(var(--blt-cols, 4) - 1)); }
}
@media (max-width: 600px) {
	.bltgallery-masonry__grid { column-count: max(1, calc(var(--blt-cols, 4) - 2)); }
}
@media (max-width: 380px) {
	.bltgallery-masonry__grid { column-count: 1; }
}

.bltgallery-masonry__item {
	break-inside: avoid;
	margin-bottom: var(--blt-gutter, 12px);
}

/* ── Tile Grid ──────────────────────────────────────────────────────── */

.bltgallery-tile__grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax( max( var(--blt-thumb-min, 160px), calc( ( 100% - ( var(--blt-cols, 4) - 1 ) * var(--blt-gutter, 8px) ) / var(--blt-cols, 4) ) ), 1fr )
	);
	gap: var(--blt-gutter, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bltgallery-tile__item .bltgallery__link img {
	aspect-ratio: 1;
	object-fit: cover;
}

.bltgallery-tile__caption {
	display: block;
	padding: 0.3rem 0.5rem;
	font-size: 0.8rem;
	color: #475569;
	text-align: center;
}

/* ── Slideshow ──────────────────────────────────────────────────────── */

.bltgallery-slideshow {
	position: relative;
	overflow: hidden;
	border-radius: var(--blt-radius);
	background: #000;
	user-select: none;
}

.bltgallery-slideshow__track {
	display: flex;
	transition: transform 0.4s ease;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bltgallery-slideshow__slide {
	flex: 0 0 100%;
	position: relative;
}

.bltgallery-slideshow__slide:not(.is-active) {
	visibility: hidden;
}

.bltgallery-slideshow__slide img {
	display: block;
	width: 100%;
	max-height: 80vh;
	object-fit: contain;
}

.bltgallery-slideshow__caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.75rem 1rem;
	background: var(--blt-overlay);
	color: #fff;
	text-align: center;
	font-size: 0.9rem;
}

/* Navigation buttons */
.bltgallery-slideshow__prev,
.bltgallery-slideshow__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 2rem;
	width: 2.5rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--blt-transition);
	z-index: 2;
}

.bltgallery-slideshow__prev:hover,
.bltgallery-slideshow__next:hover {
	background: rgba(0,0,0,0.75);
}

.bltgallery-slideshow__prev { left: 0; border-radius: 0 var(--blt-radius) var(--blt-radius) 0; }
.bltgallery-slideshow__next { right: 0; border-radius: var(--blt-radius) 0 0 var(--blt-radius); }

/* Dots */
.bltgallery-slideshow__dots {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.bltgallery-slideshow__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #cbd5e1;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--blt-transition);
}

.bltgallery-slideshow__dot.is-active { background: #2563eb; }

/* ── Image Slider ───────────────────────────────────────────────────── */

.bltgallery-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--blt-radius);
	background: #000;
	user-select: none;
}

.bltgallery-slider__track {
	display: flex;
	transition: transform 0.45s ease;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bltgallery-slider__slide {
	flex: 0 0 100%;
	position: relative;
}

.bltgallery-slider__slide:not(.is-active) {
	visibility: hidden;
}

.bltgallery-slider__slide img {
	display: block;
	width: 100%;
	max-height: var(--blt-slider-height, 80vh);
	object-fit: contain;
}

/* Bottom overlay shared by the caption + dot counter. A soft gradient keeps
   both legible over any image without a heavy bar. */
.bltgallery-slider__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.25rem 1rem 0.85rem;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0 ) );
	pointer-events: none;
}

/* Subtle caption — image description or photo credit. */
.bltgallery-slider__caption {
	margin: 0;
	max-width: 90%;
	color: rgba( 255, 255, 255, 0.92 );
	text-align: center;
	font-size: 0.85rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.6 );
}

.bltgallery-slider__caption[hidden] { display: none; }

/* Dot counter. */
.bltgallery-slider__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: auto;
}

.bltgallery-slider__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: 1.5px solid rgba( 255, 255, 255, 0.7 );
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background var(--blt-transition), border-color var(--blt-transition), transform var(--blt-transition);
}

.bltgallery-slider__dot:hover { border-color: #fff; }

.bltgallery-slider__dot.is-active {
	background: #fff;
	border-color: #fff;
}

/* Hover-only navigation arrows. */
.bltgallery-slider__prev,
.bltgallery-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.35 );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	z-index: 3;
	transition: opacity var(--blt-transition), background var(--blt-transition);
}

.bltgallery-slider__prev { left: 0.75rem; }
.bltgallery-slider__next { right: 0.75rem; }

.bltgallery-slider:hover .bltgallery-slider__prev,
.bltgallery-slider:hover .bltgallery-slider__next,
.bltgallery-slider:focus-within .bltgallery-slider__prev,
.bltgallery-slider:focus-within .bltgallery-slider__next {
	opacity: 0.85;
}

.bltgallery-slider__prev:hover,
.bltgallery-slider__next:hover {
	background: rgba( 0, 0, 0, 0.6 );
	opacity: 1;
}

.bltgallery-slider__prev:focus-visible,
.bltgallery-slider__next:focus-visible {
	opacity: 1;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bltgallery-slider__prev:disabled,
.bltgallery-slider__next:disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* Touch / coarse-pointer devices have no hover — keep arrows gently visible. */
@media (hover: none) {
	.bltgallery-slider__prev,
	.bltgallery-slider__next { opacity: 0.6; }
}

/* ── Lightbox thumbnail grid ────────────────────────────────────────── */

.bltgallery-lightbox__grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax( max( var(--blt-thumb-min, 160px), calc( ( 100% - ( var(--blt-cols, 4) - 1 ) * var(--blt-gutter, 8px) ) / var(--blt-cols, 4) ) ), 1fr )
	);
	gap: var(--blt-gutter, 8px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bltgallery-lightbox__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--blt-radius);
	transition: opacity var(--blt-transition), transform var(--blt-transition);
}

.bltgallery-lightbox__trigger {
	display: block;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	border-radius: var(--blt-radius);
	overflow: hidden;
}

.bltgallery-lightbox__trigger:hover img,
.bltgallery-lightbox__trigger:focus-visible img {
	opacity: 0.85;
	transform: scale(1.04);
}

.bltgallery-lightbox__trigger:focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}


/* ── Lightbox Modal ─────────────────────────────────────────────────── */

.bltgallery-lightbox__modal {
	position: fixed;
	inset: 0;
	background: var(--blt-lb-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	animation: blt-fade-in 0.2s ease;
}

.bltgallery-lightbox__modal[hidden] {
	display: none;
}

@keyframes blt-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Prevent body scroll when lightbox is open */
body.blt-lightbox-open { overflow: hidden; }

.bltgallery-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 90vw;
	max-height: 90vh;
}

.bltgallery-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 4px;
}

.bltgallery-lightbox__caption {
	color: #e2e8f0;
	text-align: center;
	font-size: 0.9rem;
	margin-top: 0.75rem;
	max-width: 80vw;
}

/* Control buttons */
.bltgallery-lightbox__close,
.bltgallery-lightbox__prev,
.bltgallery-lightbox__next {
	position: fixed;
	background: rgba(255,255,255,0.15);
	color: var(--blt-lb-ctrl);
	border: none;
	cursor: pointer;
	transition: background var(--blt-transition);
	font-size: 1.5rem;
	line-height: 1;
}

.bltgallery-lightbox__close,
.bltgallery-lightbox__prev,
.bltgallery-lightbox__next {
	padding: 0.5rem 0.8rem;
	border-radius: var(--blt-radius);
}

.bltgallery-lightbox__close:hover,
.bltgallery-lightbox__prev:hover,
.bltgallery-lightbox__next:hover {
	background: rgba(255,255,255,0.3);
}

.bltgallery-lightbox__close:focus-visible,
.bltgallery-lightbox__prev:focus-visible,
.bltgallery-lightbox__next:focus-visible {
	outline: 2px solid #93c5fd;
}

.bltgallery-lightbox__close { top: 1rem; right: 1rem; font-size: 1.75rem; }
.bltgallery-lightbox__prev  { top: 50%; left: 1rem;  transform: translateY(-50%); font-size: 2rem; }
.bltgallery-lightbox__next  { top: 50%; right: 1rem; transform: translateY(-50%); font-size: 2rem; }

/* ── Caption modes (set via shortcode `captions=`) ──────────────────── */

.bltgallery--captions-off .bltgallery__caption,
.bltgallery--captions-off .bltgallery-tile__caption {
	display: none;
}

.bltgallery--captions-below .bltgallery__caption {
	position: static;
	transform: none;
	background: transparent;
	color: inherit;
	padding: 0.5rem 0;
}

.bltgallery--captions-hover .bltgallery__caption {
	transform: translateY(100%);
}
.bltgallery--captions-hover .bltgallery__link:hover .bltgallery__caption,
.bltgallery--captions-hover .bltgallery__link:focus-visible .bltgallery__caption {
	transform: translateY(0);
}

/* ── Album layouts ──────────────────────────────────────────────────── */

.bltgallery-album {
	box-sizing: border-box;
	width: 100%;
	--blt-cols: 3;
	--blt-gap: 20px;
	--blt-radius: 8px;
}

.bltgallery-album *,
.bltgallery-album *::before,
.bltgallery-album *::after {
	box-sizing: inherit;
}

/* grid layout */
.bltgallery-album__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--blt-cols), 1fr);
	gap: var(--blt-gap);
}

/* masonry layout (CSS columns) */
.bltgallery-album__masonry {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: var(--blt-cols);
	column-gap: var(--blt-gap);
}
.bltgallery-album__masonry > .bltgallery-album__item {
	break-inside: avoid;
	margin-bottom: var(--blt-gap);
}

/* carousel layout */
.bltgallery-album__carousel {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.bltgallery-album__carousel-track {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	display: flex;
	gap: var(--blt-gap);
}
.bltgallery-album__carousel-track > .bltgallery-album__item {
	flex: 0 0 calc((100% - (var(--blt-cols) - 1) * var(--blt-gap)) / var(--blt-cols));
	min-width: 220px;
	scroll-snap-align: start;
}

/* accordion layout */
.bltgallery-album__accordion {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--blt-gap);
}
.bltgallery-album__row > details {
	border: 1px solid #e5e7eb;
	border-radius: var(--blt-radius);
	overflow: hidden;
}
.bltgallery-album__summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	cursor: pointer;
	background: #f9fafb;
	list-style: none;
}
.bltgallery-album__summary::-webkit-details-marker { display: none; }
.bltgallery-album__summary .bltgallery-album__cover img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: calc(var(--blt-radius) / 2);
}
.bltgallery-album__expanded { padding: 1rem; }

/* card */
.bltgallery-album__item {
	margin: 0;
	padding: 0;
}
.bltgallery-album__card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--blt-radius);
	background: #f3f4f6;
	color: inherit;
	text-decoration: none;
	transition: transform var(--blt-transition), box-shadow var(--blt-transition);
}
.bltgallery-album__card--linked:hover,
.bltgallery-album__card--linked:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.bltgallery-album__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.bltgallery-album__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.bltgallery-album__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	font-size: 2rem;
	color: #94a3b8;
	background: #e5e7eb;
}
.bltgallery-album__caption {
	padding: 0.6rem 0.8rem;
	font-size: 0.95rem;
	line-height: 1.3;
}
.bltgallery-album__caption--hover {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 0.75rem 1rem;
	background: var(--blt-overlay);
	color: #fff;
	transform: translateY(100%);
	transition: transform var(--blt-transition);
}
.bltgallery-album__card:hover .bltgallery-album__caption--hover,
.bltgallery-album__card:focus-visible .bltgallery-album__caption--hover {
	transform: translateY(0);
}
/* A card rendered as a <button> (opens the gallery modal) must shed the UA
   button chrome and stretch like the anchor/div variants. */
button.bltgallery-album__card {
	width: 100%;
	padding: 0;
	border: 0;
	background: #f3f4f6;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}
.bltgallery-album__title {
	display: block;
	font-weight: 600;
	/* Use Automatic.css text sizes when present so titles scale with the
	   host theme; fall back to sensible fixed sizes otherwise. */
	font-size: var(--text-m, 1.0625rem);
	line-height: var(--text-m--line-height, 1.3);
}
.bltgallery-album__count {
	display: block;
	font-size: var(--text-s, 0.8rem);
	opacity: 0.7;
}

/* ── Album → gallery modal (AJAX) ──────────────────────────────────── */

.bltgallery-gallery-modal {
	position: fixed;
	inset: 0;
	/* Below the image lightbox (99999) so a gallery's own lightbox layers on top. */
	z-index: 99990;
	display: flex;
	padding: 2.5rem 1rem 1rem;
	overflow-y: auto;
	background: rgba(15, 23, 42, 0.85);
}
.bltgallery-gallery-modal[hidden] { display: none; }
.bltgallery-gallery-modal__dialog {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 1200px;
	padding: 1.5rem;
	background: #fff;
	border-radius: var(--blt-radius, 8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.bltgallery-gallery-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.06);
	color: #1d2327;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.bltgallery-gallery-modal__close:hover { background: rgba(15, 23, 42, 0.12); }
.bltgallery-gallery-modal__title {
	margin: 0 2.5rem 1rem 0;
	font-size: var(--text-l, 1.5rem);
}
.bltgallery-gallery-modal__title:empty { display: none; }
.bltgallery-gallery-modal__status {
	padding: 2rem 0;
	text-align: center;
	color: #64748b;
}

/* ── Optional gallery date header ──────────────────────────────────── */

.bltgallery__header {
	margin: 0 0 0.75rem;
}

.bltgallery__date {
	display: inline-block;
	font-size: 0.85rem;
	color: #475569;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ── Pagination controls ───────────────────────────────────────────── */

.bltgallery-pagination {
	margin-top: 1.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.bltgallery-pagination__load-more {
	font: inherit;
	padding: 0.6rem 1.25rem;
	background: #1d2327;
	color: #fff;
	border: 0;
	border-radius: var(--blt-radius);
	cursor: pointer;
	transition: background var(--blt-transition), transform var(--blt-transition);
}

.bltgallery-pagination__load-more:hover:not(:disabled),
.bltgallery-pagination__load-more:focus-visible {
	background: #2c3338;
	transform: translateY(-1px);
}

.bltgallery-pagination__load-more:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bltgallery-pagination__status {
	font-size: 0.85rem;
	color: #475569;
}

.bltgallery-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.3rem;
}

.bltgallery-pagination__page {
	font: inherit;
	min-width: 2.2rem;
	padding: 0.4rem 0.6rem;
	background: transparent;
	color: #1d2327;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	cursor: pointer;
	transition: background var(--blt-transition), border-color var(--blt-transition);
}

.bltgallery-pagination__page:hover {
	background: #f6f7f7;
	border-color: #8c8f94;
}

.bltgallery-pagination__page.is-active {
	background: #1d2327;
	color: #fff;
	border-color: #1d2327;
}

.bltgallery-pagination__page:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}