/* Special case: Rotated near-square portraits in square bucket need scaling */
.masonry-item.masonry-square[data-needs-scale="1"][data-rotation="90"] img,
.masonry-item.masonry-square[data-needs-scale="1"][data-rotation="270"] img {
	transform: rotate(var(--img-rotation, 0deg)) scale(1.25);
}
/* ==========================================================================
   Gallery Frontend Styles
   ==========================================================================

   Custom properties (design tokens)
   -------------------------------------------------------------------------- */
:root {
	--gallery-slide-duration: 0.5s;
	--gallery-slide-easing:   cubic-bezier(.77, 0, .18, 1);
	--gallery-float-margin:   1em;
	--gallery-clear-margin:   1em;
	--gallery-nav-dot-size:   12px;
	--gallery-nav-dot-radius: 6px;
	--gallery-nav-dot-border: 2px;
	--gallery-caption-bottom: 10px;
	--gallery-caption-color:  #fff;
	--gallery-caption-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	--gallery-overlay-bg:     rgba(17, 17, 17, 0.6);
	--gallery-strip-bg:       none; /* letterbox area shown when image doesn't fill 16:9 strip */
	--gallery-image-bg:       none;  /* placeholder shown before image loads */

}

/* ==========================================================================
   Modal image content
   ========================================================================== */
.modal-content.image {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ==========================================================================
   Standard gallery (gallery-display)
   ========================================================================== */
.gallery-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.gallery-main {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
}

/* -- Navigation arrows -- */
.gallery-nav {
	background: rgba(255, 255, 255, 0);
	border: 0;
	border-radius: 10px;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #444;
	cursor: pointer;
	transition: color 0.2s;
	opacity: 0.85;
	outline: none;
	flex: 0 0 auto;
	padding: 0;
}
.gallery-nav:hover,
.gallery-nav:focus {
	color: #222;
	opacity: 1;
}
.gallery-nav .chevron {
	pointer-events: none;
	user-select: none;
	line-height: 1;
	font-size: 2.2em;
}

/* -- Image strip -- */
.gallery-images {
	position: relative;
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--gallery-strip-bg);
}

/* -- Individual image frame -- */
.gallery-image {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(100%);
	transition:
		transform var(--gallery-slide-duration) var(--gallery-slide-easing),
		opacity   var(--gallery-slide-duration) var(--gallery-slide-easing);
	z-index: 1;
	box-sizing: border-box;
	background: var(--gallery-image-bg);
}
.gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transform: rotate(var(--img-rotation, 0deg));
}
/* For 90°/270° rotation in a 16:9 frame: pre-size the img as 9:16 so after rotation it fills 16:9 exactly.
   Same principle as the masonry fix — inverse the AR before rotation so object-fit works on matching dimensions. */
.gallery-image[data-rotation="90"] img,
.gallery-image[data-rotation="270"] img {
	position: absolute;
	width: 56.25%;      /* 9/16 */
	height: 177.778%;   /* 16/9 */
	left: 21.875%;      /* (100 - 56.25) / 2 */
	top: -38.889%;      /* (100 - 177.778) / 2 */
	object-fit: contain;
	transform: rotate(var(--img-rotation, 0deg));
}

/* Active slide */
.gallery-image.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0);
	z-index: 2;
}

/* Slide-in: shared state */
.gallery-image.slide-in-right,
.gallery-image.slide-in-left {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 3;
}
.gallery-image.slide-in-right {
	animation: slideInFromRight var(--gallery-slide-duration) var(--gallery-slide-easing) forwards;
}
.gallery-image.slide-in-left {
	animation: slideInFromLeft var(--gallery-slide-duration) var(--gallery-slide-easing) forwards;
}

/* Slide-out: shared state */
.gallery-image.slide-out-left,
.gallery-image.slide-out-right {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	z-index: 2;
}
.gallery-image.slide-out-left {
	animation: slideOutToLeft var(--gallery-slide-duration) var(--gallery-slide-easing) forwards;
}
.gallery-image.slide-out-right {
	animation: slideOutToRight var(--gallery-slide-duration) var(--gallery-slide-easing) forwards;
}

.gallery-image.notransition {
	transition: none !important;
}

/* -- Keyframes -- */
@keyframes slideInFromRight {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
@keyframes slideInFromLeft {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}
@keyframes slideOutToLeft {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@keyframes slideOutToRight {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

/* ==========================================================================
   Shared alignment / clear / width utilities
   (.gallery-display, .gallery-masonry, .gallery-slider)
   ========================================================================== */
.gallery-display,
.gallery-masonry,
.gallery-slider {
	position: relative;
}

.gallery-display.align-left,
.gallery-masonry.align-left,
.gallery-slider.align-left  { text-align: left; }

.gallery-display.align-right,
.gallery-masonry.align-right,
.gallery-slider.align-right  { text-align: right; }

.gallery-display.align-center,
.gallery-display.align-center.clear-none,
.gallery-masonry.align-center,
.gallery-masonry.align-center.clear-none,
.gallery-slider.align-center,
.gallery-slider.align-center.clear-none {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.gallery-display.align-left.clear-none,
.gallery-masonry.align-left.clear-none,
.gallery-slider.align-left.clear-none {
	float: left;
	margin: 0 var(--gallery-float-margin) 0 0;
}

.gallery-display.align-right.clear-none,
.gallery-masonry.align-right.clear-none,
.gallery-slider.align-right.clear-none {
	float: right;
	margin: 0 0 0 var(--gallery-float-margin);
}

.gallery-display.clear-both,
.gallery-masonry.clear-both,
.gallery-slider.clear-both {
	clear: both;
	margin-top: var(--gallery-clear-margin);
	margin-bottom: var(--gallery-clear-margin);
}

.gallery-display.clear-none,
.gallery-slider.clear-none  { clear: none; }

.gallery-masonry.clear-none {
	clear: none;
	margin: 0 var(--gallery-float-margin);
}

/* Width utilities — shared across all three gallery types */
.gallery-display.width-20,
.gallery-masonry.width-20,
.gallery-slider.width-20  { width: 20%; }

.gallery-display.width-25,
.gallery-masonry.width-25,
.gallery-slider.width-25  { width: 25%; }

.gallery-display.width-30,
.gallery-masonry.width-30,
.gallery-slider.width-30  { width: 30%; }

.gallery-display.width-50,
.gallery-masonry.width-50,
.gallery-slider.width-50  { width: 50%; }

.gallery-display.width-75,
.gallery-masonry.width-75,
.gallery-slider.width-75  { width: 75%; }

.gallery-display.width-80,
.gallery-masonry.width-80,
.gallery-slider.width-80  { width: 80%; }

.gallery-display.width-100,
.gallery-masonry.width-100,
.gallery-slider.width-100 { width: 100%; }

/* ==========================================================================
   Navigation dots
   ========================================================================== */
.gallery-nav-dots {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 10;
	pointer-events: none;
}
.gallery-nav-dots.dots-below {
	position: static;
	transform: none;
	left: auto;
	bottom: auto;
	margin-top: 12px;
	width: 100%;
	pointer-events: auto;
}

.gallery-nav-dot {
	width: var(--gallery-nav-dot-size);
	height: var(--gallery-nav-dot-size);
	padding: 0;
	border-radius: var(--gallery-nav-dot-radius);
	border: var(--gallery-nav-dot-border) solid rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	pointer-events: auto;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: inline-block;
	flex-shrink: 0;
}
.gallery-nav-dot:hover {
	border-color: rgba(255, 255, 255, 1);
	background: rgba(255, 255, 255, 0.6);
	transform: scale(1.1);
}
.gallery-nav-dot.active {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Dots-below variant — darker styling on a light background */
.gallery-nav-dots.dots-below .gallery-nav-dot {
	border-color: #666;
	background: rgba(0, 0, 0, 0.1);
}
.gallery-nav-dots.dots-below .gallery-nav-dot:hover {
	border-color: #333;
	transform: scale(1.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.gallery-nav-dots.dots-below .gallery-nav-dot.active {
	background: #666;
	border-color: #333;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Captions
   ========================================================================== */
/* Below-gallery plain-text caption */
.gallery-caption {
	text-align: center;
	padding: 0 1em;
	color: #333;
	line-height: 1.4;
}

/* Inset caption — overlaid at the bottom of each image tile */
.gallery-caption-inset {
	position: absolute;
	bottom: var(--gallery-caption-bottom);
	left: 50%;
	transform: translateX(-50%);
	color: var(--gallery-caption-color);
	text-align: center;
	pointer-events: none;
	text-shadow: var(--gallery-caption-shadow);
	font-size: 14px;
	max-width: 90%;
}
.gallery-caption-inset p {
	margin: 0;
}

/* ==========================================================================
   Slider gallery
   ========================================================================== */
.gallery-slider {
	display: block;
	/* Per-instance CSS custom properties — overridden via inline style from PHP */
	--slider-item-height: clamp(120px, 18vw, 220px);
	--slider-item-padding: 0px;
}
.sliderWrap {
	display: block;
}
/* Slider (legacy behavior adapted to new markup) */
.gallery-slider .sliderWrap {
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: initial;
}
.gallery-slider .sliderOuter {
	overflow: hidden;
	position: relative;
	height: var(--slider-item-height);
}
/* In manual mode the nav arrows sit outside the strip */
.gallery-slider[data-gallery-mode="manual"] .sliderOuter {
	margin: 0 2em;
}
.gallery-slider .sliderInner {
	display: inline-flex;
	align-items: stretch;
	white-space: nowrap;
	width: max-content;
	height: 100%;
	padding: 0;
	margin: 0;
	transition: margin-left 0.2s;
}
.gallery-slider .slider-gallery-item {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0 var(--slider-item-padding);
	vertical-align: top;
	box-sizing: border-box;
}
.gallery-slider .slider-gallery-item picture,
.gallery-slider .slider-gallery-item a {
	display: flex;
	height: 100%;
	align-items: center;
}
.gallery-slider .sliderOuter img {
	margin: 0;
	display: block;
	height: auto;
	max-height: 100%;
	width: auto;
	max-width: none;
	box-sizing: border-box;
	object-fit: contain;
	transform: rotate(var(--img-rotation, 0deg));
}

/* Rotated 90°/270° slider images---
   Item gets explicit layout width = visual post-rotation width 
   Img is absolutely centered in the item, pre-sized H × H/AR, then rotated —
   fills the strip height exactly with no gaps
 */
.gallery-slider .slider-gallery-item[data-rotation="90"],
.gallery-slider .slider-gallery-item[data-rotation="270"] {
	width: calc(var(--slider-item-height) / var(--img-nat-ar, 1));
	padding: 0;
	margin: 0 var(--slider-item-padding);
	overflow: hidden;
}
.gallery-slider .slider-gallery-item[data-rotation="90"] img,
.gallery-slider .slider-gallery-item[data-rotation="270"] img {
	position: absolute;
	width: var(--slider-item-height);
	height: calc(var(--slider-item-height) / var(--img-nat-ar, 1));
	left: 50%;
	top: 50%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	transform: translate(-50%, -50%) rotate(var(--img-rotation, 0deg));
}
.gallery-slider.sliderImageBorder .sliderOuter img {
	border: 1px solid gray;
}
.gallery-slider .sliderPlaceholder {
	visibility: hidden;
	display: none;
}

.gallery-slider .slider-left,
.gallery-slider .slider-right {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2em;
	margin: auto;
	display: none;
}
.gallery-slider .slider-left  { left: 0; }
.gallery-slider .slider-right { right: 0; }

.gallery-slider.sliderImageBorder.sliderActiveBorder .slider-gallery-item.activeLI img {
	border: 1px solid #0f75bc;
}
.gallery-slider.sliderImageBorder .sliderOuter img:hover {
	border: 1px solid #0f75bc;
	cursor: pointer;
}

/* ==========================================================================
   Masonry gallery
   ========================================================================== */
.gallery-masonry {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	row-gap: 0.5%;
	column-gap: 0.5%;
}

.masonry-item {
	width: 100%;
	padding-top: 75%;
	position: relative;
	background: #f4f4f4;
	box-sizing: border-box;
	margin: 0.25% 0;
	overflow: hidden;
	/* Scroll-in animation */
	top: 5rem;
	opacity: 0;
	transition: top 1s ease-in-out, opacity 1s ease-in-out;
}
.masonry-item.scrolled-in {
	top: 0;
	opacity: 1;
}
.masonry-item picture {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: block;
}
.masonry-item img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	user-select: none;
	transform: rotate(var(--img-rotation, 0deg));
}
/* For 90°/270° rotation: mirror the non-rotated rule (width:100%; height:100%) but swap slot dimensions.
   --slot-ar = slot_H/slot_W, computed by PHP per item (accounts for flex-stretch from row neighbours).
   After 90° rotation the box is slot_W × slot_H — fills the slot exactly. */
.masonry-item[data-rotation="90"] img,
.masonry-item[data-rotation="270"] img {
	object-fit: cover;
	overflow:visible;
	transform: rotate(var(--img-rotation, 0deg));
}

/* Images promoted to masonry-tall by php grouping rules  need
   scale compensation after 90°/270° rotation so they fill the 4:3 slot. */
/* Unified: All special scaling cases use data-needs-scale */
.masonry-item[data-needs-scale="1"][data-rotation="90"] img,
.masonry-item[data-needs-scale="1"][data-rotation="270"] img {
	/* Use 1.3334 for tall, 1.25 for square if needed, or just 1.25 for all for simplicity */
	transform: rotate(var(--img-rotation, 0deg)) scale(1.25);
}
/* -- Responsive column breakpoints -- */
@media (min-width: 600px) {
	.gallery-masonry                        { --masonry-cols: 2; }
	.gallery-masonry[data-min-across="1"]   { --masonry-cols: 1; }
	.gallery-masonry[data-min-across="2"]   { --masonry-cols: 2; }
	.gallery-masonry[data-min-across="3"]   { --masonry-cols: 3; }
	.gallery-masonry[data-min-across="4"]   { --masonry-cols: 4; }

	.gallery-masonry .masonry-item {
		flex: 0 0 auto;
		width: calc(100% / var(--masonry-cols) - 0.5%);
		padding-top: calc(75% / var(--masonry-cols) - 0.5%);
	}
	.gallery-masonry .masonry-item.masonry-full {
		width: calc(100% / var(--masonry-cols) - 0.5%);
	}
	.gallery-masonry .masonry-item.masonry-square {
		width: calc(100% / var(--masonry-cols) * 0.5 - 0.5%);
		padding-top: calc(75% / var(--masonry-cols) * 0.5 - 0.5%) !important;
	}
	.gallery-masonry .masonry-item.masonry-tall {
		width: calc(100% / var(--masonry-cols) * 0.333333 - 0.5%);
		padding-top: calc(75% / var(--masonry-cols) * 0.333333 - 0.5%);
	}
	.gallery-masonry .masonry-item.masonry-part {
		width: calc(100% / var(--masonry-cols) * 0.666667 - 0.5%);
		/* padding-top: calc(75% / var(--masonry-cols) * 0.666667 - 0.5%); */
	}
}

/* Tablet portrait — collapse 3-4 col down to 2 */
@media (max-width: 768px) and (min-width: 481px) {
	.gallery-masonry[data-min-across="3"],
	.gallery-masonry[data-min-across="4"] {
		justify-content: space-around;
		--masonry-cols: 2;
	}
	.gallery-masonry[data-min-across="3"] .masonry-item,
	.gallery-masonry[data-min-across="4"] .masonry-item {
		width: calc((100% - 0.5%) / 2);
		padding-top: calc(75% / 2);
	}

	.masonry-item[data-rotation="90"] img,
	.masonry-item[data-rotation="270"] img {
		transform: rotate(var(--img-rotation, 0deg)) scale(1.3334);
	}
}

/* Mobile — single column */
@media (max-width: 480px) {
	.gallery-masonry {
		justify-content: flex-start;
		gap: 1%;
	}
	.gallery-masonry .masonry-item,
	.gallery-masonry .masonry-item.masonry-full,
	.gallery-masonry .masonry-item.masonry-square,
	.gallery-masonry .masonry-item.masonry-tall {
		width: 100%;
		padding-top: 75%;
		margin-bottom: 1%;
	}
}

/* High-DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.masonry-item img {
		image-rendering: auto;
	}
}

/* ==========================================================================
   Modal caption
   ========================================================================== */
.modal-caption {
	position: absolute;
	bottom: 2em;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.6em 1em;
	background: rgba(0, 0, 0, 0.7);
	color: var(--gallery-caption-color);
	font-size: 1em;
	text-align: center;
	line-height: 1.4;
	width: auto;
	justify-self: center;
}
.modal-caption p {
	margin: 0;
	padding: 0;
	color: var(--gallery-caption-color);
}

/* ==========================================================================
   HTML Overlay (hover reveal — masonry and slider items)
   ========================================================================== */
.masonry-item .gallery-html-overlay,
.slider-gallery-item .gallery-html-overlay {
	position: absolute;
	inset: 0;
	background: var(--gallery-overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 5;
	overflow: hidden;
	padding: 0.75em;
	box-sizing: border-box;
	color: var(--gallery-caption-color);
	text-align: center;
}
/* Restore pointer events on child content (links etc.) */
.masonry-item .gallery-html-overlay > *,
.slider-gallery-item .gallery-html-overlay > * {
	pointer-events: auto;
}
.masonry-item:hover .gallery-html-overlay,
.slider-gallery-item:hover .gallery-html-overlay {
	opacity: 1;
}