/* The block wrapper fills its parent. Without this, the block editor's auto
   side margins shrink it to the gallery's zero intrinsic width inside flex
   containers that are not core flex layouts, such as a UiCore Container. */
.wp-block-my-gallery-pro-gallery {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.my-gallery-pro-shell {
	container-type: inline-size;
	width: 100%;
	margin: 1.5em 0;
}

.my-gallery-pro-grid {
	--mgp-columns: 3;
	--mgp-tablet-columns: var(--mgp-columns);
	--mgp-mobile-columns: 1;
	--mgp-active-columns: var(--mgp-columns);
	--mgp-gap: 16px;
	--mgp-radius: 8px;
	--mgp-border-width: 0px;
	--mgp-border-color: #dcdcde;
	width: 100%;
	margin: 0;
	/* Core's html :where([style*=border-color]) rule matches the custom properties
	   in the inline style and would frame the whole gallery. Borders belong on tiles. */
	border: 0;
}

.my-gallery-pro-grid.is-grid-layout {
	display: grid;
	grid-template-columns: repeat(var(--mgp-columns), minmax(0, 1fr));
	gap: var(--mgp-gap);
}

.my-gallery-pro-grid.is-masonry-layout {
	columns: var(--mgp-columns);
	column-gap: var(--mgp-gap);
}

.my-gallery-pro-grid.has-1-columns {
	--mgp-columns: 1;
}

.my-gallery-pro-grid.has-2-columns {
	--mgp-columns: 2;
}

.my-gallery-pro-grid.has-3-columns {
	--mgp-columns: 3;
}

.my-gallery-pro-grid.has-4-columns {
	--mgp-columns: 4;
}

.my-gallery-pro-grid.has-5-columns {
	--mgp-columns: 5;
}

.my-gallery-pro-grid.has-6-columns {
	--mgp-columns: 6;
}

.my-gallery-pro-grid.has-1-tablet-columns {
	--mgp-tablet-columns: 1;
}

.my-gallery-pro-grid.has-2-tablet-columns {
	--mgp-tablet-columns: 2;
}

.my-gallery-pro-grid.has-3-tablet-columns {
	--mgp-tablet-columns: 3;
}

.my-gallery-pro-grid.has-4-tablet-columns {
	--mgp-tablet-columns: 4;
}

.my-gallery-pro-grid.has-5-tablet-columns {
	--mgp-tablet-columns: 5;
}

.my-gallery-pro-grid.has-6-tablet-columns {
	--mgp-tablet-columns: 6;
}

.my-gallery-pro-grid.has-1-mobile-columns {
	--mgp-mobile-columns: 1;
}

.my-gallery-pro-grid.has-2-mobile-columns {
	--mgp-mobile-columns: 2;
}

.my-gallery-pro-grid.has-3-mobile-columns {
	--mgp-mobile-columns: 3;
}

.my-gallery-pro-grid.has-0-gap {
	/* A length, not a bare 0, so calc() can use it for tiled row heights. */
	--mgp-gap: 0px;
}

.my-gallery-pro-grid.has-8-gap {
	--mgp-gap: 8px;
}

.my-gallery-pro-grid.has-16-gap {
	--mgp-gap: 16px;
}

.my-gallery-pro-grid.has-24-gap {
	--mgp-gap: 24px;
}

.my-gallery-pro-grid.has-32-gap {
	--mgp-gap: 32px;
}

.my-gallery-pro-grid *,
.my-gallery-pro-grid *::before,
.my-gallery-pro-grid *::after {
	box-sizing: border-box;
}

.my-gallery-pro-item {
	min-width: 0;
	margin: 0;
}

.my-gallery-pro-grid.is-masonry-layout .my-gallery-pro-item {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--mgp-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.my-gallery-pro-grid.is-masonry-layout.is-masonry-enhanced {
	display: grid;
	grid-template-columns: repeat(var(--mgp-active-columns), minmax(0, 1fr));
	gap: 0 var(--mgp-gap);
	columns: initial;
}

.my-gallery-pro-grid.is-masonry-layout.is-masonry-enhanced .my-gallery-pro-item {
	display: block;
	grid-row: 1;
	grid-column: 1;
	align-self: start;
	width: auto;
	margin-bottom: 0;
	break-inside: auto;
	-webkit-column-break-inside: auto;
}

.my-gallery-pro-link {
	display: block;
	overflow: hidden;
	border-radius: var(--mgp-radius);
	background: #eef0f4;
	color: inherit;
	line-height: 0;
	text-decoration: none;
}

.my-gallery-pro-grid.has-border .my-gallery-pro-link {
	border: var(--mgp-border-width) solid var(--mgp-border-color);
}

.my-gallery-pro-grid.has-subtle-shadow .my-gallery-pro-link {
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14);
}

.my-gallery-pro-grid.has-medium-shadow .my-gallery-pro-link {
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.18);
}

.my-gallery-pro-grid.has-strong-shadow .my-gallery-pro-link {
	box-shadow: 0 10px 28px rgba(16, 24, 40, 0.26);
}

.my-gallery-pro-link:focus-visible {
	outline: 3px solid #3157d5;
	outline-offset: 3px;
}

.my-gallery-pro-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/*
 * Every rule that sizes a gallery image is scoped under the gallery's own
 * shell and grid. Page builders style images in their content: UiCore has
 * [class*='wp-block-uicore-'] img:not(...) {height:auto;object-fit:contain}
 * (specificity 0,2,1) and .uicore-bl-content img {width:auto} (0,1,1). The
 * lowest rule here is 0,3,0, so a cropped tile always fills its shape, and
 * the order between these rules is the same as before.
 */
.my-gallery-pro-shell .my-gallery-pro-grid .my-gallery-pro-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	/* Keeps a builder's inline-block image from sitting on the text baseline. */
	vertical-align: top;
	transition: transform 180ms ease;
}

a.my-gallery-pro-link:hover .my-gallery-pro-image {
	transform: scale(1.025);
}

.my-gallery-pro-shell .my-gallery-pro-grid.is-square .my-gallery-pro-image,
.my-gallery-pro-shell .my-gallery-pro-grid.is-landscape .my-gallery-pro-image,
.my-gallery-pro-shell .my-gallery-pro-grid.is-portrait .my-gallery-pro-image,
.my-gallery-pro-shell .my-gallery-pro-grid.is-wide .my-gallery-pro-image {
	height: 100%;
	object-fit: cover;
}

.my-gallery-pro-grid.is-square .my-gallery-pro-link {
	aspect-ratio: 1 / 1;
}

.my-gallery-pro-grid.is-landscape .my-gallery-pro-link {
	aspect-ratio: 4 / 3;
}

.my-gallery-pro-grid.is-portrait .my-gallery-pro-link {
	aspect-ratio: 3 / 4;
}

.my-gallery-pro-grid.is-wide .my-gallery-pro-link {
	aspect-ratio: 16 / 9;
}

/* Controls the script hides keep their display rules otherwise. */
.my-gallery-pro-grid [hidden],
.my-gallery-pro-dialog [hidden] {
	display: none !important;
}

.my-gallery-pro-item figcaption {
	margin-top: 8px;
	font-size: 0.875em;
	line-height: 1.45;
	text-align: center;
	overflow-wrap: anywhere;
}

.my-gallery-pro-grid.has-overlay-captions .my-gallery-pro-item {
	position: relative;
}

/* Overlay captions stay visible, so they need no hover and work on touch. */
.my-gallery-pro-grid.has-overlay-captions .my-gallery-pro-item figcaption {
	position: absolute;
	right: var(--mgp-border-width);
	bottom: var(--mgp-border-width);
	left: var(--mgp-border-width);
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	padding: 2.25em 0.85em 0;
	/* A transparent border, not padding, so clamped lines cannot show below the last one. */
	border-bottom: 0.7em solid transparent;
	border-radius: 0 0 var(--mgp-radius) var(--mgp-radius);
	background: linear-gradient(to bottom, rgba(10, 14, 22, 0), rgba(10, 14, 22, 0.82));
	color: #fff;
	text-align: left;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	pointer-events: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*
 * Shown to the people who can edit an unpublished post only: its photo or
 * video appears to visitors once that post is published.
 */
.my-gallery-pro-item.is-not-public {
	position: relative;
}

.my-gallery-pro-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 3px;
	background: #1d2327;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	pointer-events: none;
}

/*
 * Image fit: show the whole image inside a shaped tile, on the tile background.
 * Never distorted; a focal point is not used because nothing is cropped.
 */
.my-gallery-pro-shell .my-gallery-pro-grid.is-fit-contain .my-gallery-pro-image {
	object-fit: contain;
}

/*
 * Creative Mosaic, Custom Grid and Featured: tiles span whole cells of one
 * grid. Every cell has the same shape. A row is as tall as a column is wide
 * times the cell ratio, measured from the gallery container (cqi), so a
 * composition keeps its proportions at every width within a range.
 */
.my-gallery-pro-grid.is-tiled-layout {
	--mgp-cell-ratio: 1;
}

.my-gallery-pro-grid.has-landscape-cells {
	--mgp-cell-ratio: 0.75;
}

.my-gallery-pro-grid.has-portrait-cells {
	--mgp-cell-ratio: 1.3333;
}

.my-gallery-pro-tiles {
	display: grid;
	grid-template-columns: repeat(var(--mgp-active-columns), minmax(0, 1fr));
	/* Without container query units, rows keep a fixed height. */
	grid-auto-rows: 12em;
	gap: var(--mgp-gap);
}

@supports (width: 1cqi) {
	.my-gallery-pro-tiles {
		grid-auto-rows: calc((100cqi - (var(--mgp-active-columns) - 1) * var(--mgp-gap)) / var(--mgp-active-columns) * var(--mgp-cell-ratio));
	}
}

.my-gallery-pro-tiles > .my-gallery-pro-item {
	display: flex;
	flex-direction: column;
	min-height: 0;
	grid-column: span var(--mgp-w, 1);
	grid-row: span var(--mgp-h, 1);
}

.my-gallery-pro-tiles > .my-gallery-pro-item > .my-gallery-pro-link {
	position: relative;
	flex: 1 1 auto;
	/* A caption below may shrink, but never below this share of the tile. */
	min-height: 60%;
}

.my-gallery-pro-shell .my-gallery-pro-grid .my-gallery-pro-tiles .my-gallery-pro-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.my-gallery-pro-shell .my-gallery-pro-grid.is-tiled-layout.is-fit-contain .my-gallery-pro-image {
	object-fit: contain;
}

/*
 * Captions below a tile share its cells, so long ones are clamped to two
 * lines, and in small tiles they shrink and clip rather than squeeze the photo.
 */
.my-gallery-pro-grid.is-tiled-layout:not(.has-overlay-captions) .my-gallery-pro-tiles figcaption {
	display: -webkit-box;
	flex: 0 1 auto;
	min-height: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/*
 * Featured: photos beyond the composition sit in a native disclosure, so every
 * photo is reachable with or without JavaScript. Closed, its button sits over
 * a corner of the composition; open, it sits above the revealed photos.
 */
.my-gallery-pro-grid.is-featured-layout {
	position: relative;
}

.my-gallery-pro-more > .my-gallery-pro-more-toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid rgba(16, 24, 40, 0.24);
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

/* Captions sit at the bottom of tiles, so the button moves to the top corner. */
.my-gallery-pro-grid.has-captions .my-gallery-pro-more > .my-gallery-pro-more-toggle {
	top: 12px;
	bottom: auto;
}

.my-gallery-pro-more > .my-gallery-pro-more-toggle::-webkit-details-marker {
	display: none;
}

.my-gallery-pro-more > .my-gallery-pro-more-toggle::marker {
	content: "";
}

.my-gallery-pro-more > .my-gallery-pro-more-toggle:hover {
	background: #f0f0f1;
}

.my-gallery-pro-more > .my-gallery-pro-more-toggle:focus-visible {
	outline: 3px solid #3157d5;
	outline-offset: 2px;
}

.my-gallery-pro-more-hide,
.my-gallery-pro-more[open] .my-gallery-pro-more-show {
	display: none;
}

.my-gallery-pro-more[open] .my-gallery-pro-more-hide {
	display: inline;
}

.my-gallery-pro-grid .my-gallery-pro-more[open] > .my-gallery-pro-more-toggle {
	position: static;
	margin: max(var(--mgp-gap), 12px) 0;
	box-shadow: none;
}

/*
 * Videos: a poster (or a neutral placeholder with the provider name) and a
 * play badge. The player replaces them only after a visitor chooses Play.
 */
.my-gallery-pro-link.is-video-link {
	position: relative;
}

.my-gallery-pro-video-placeholder {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--mgp-ratio, 16 / 9);
	background: linear-gradient(135deg, #1d2327, #3c434a);
	color: #fff;
}

.my-gallery-pro-video-placeholder > span {
	position: absolute;
	bottom: 10px;
	left: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.my-gallery-pro-grid.is-square .my-gallery-pro-video-placeholder,
.my-gallery-pro-grid.is-landscape .my-gallery-pro-video-placeholder,
.my-gallery-pro-grid.is-portrait .my-gallery-pro-video-placeholder,
.my-gallery-pro-grid.is-wide .my-gallery-pro-video-placeholder,
.my-gallery-pro-slide .my-gallery-pro-video-placeholder {
	height: 100%;
	aspect-ratio: auto;
}

.my-gallery-pro-video-placeholder.is-dialog {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	aspect-ratio: auto;
}

.my-gallery-pro-video-placeholder.is-dialog > span {
	bottom: 16px;
	left: 20px;
	font-size: 18px;
}

.my-gallery-pro-tiles .my-gallery-pro-video-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	aspect-ratio: auto;
}

.my-gallery-pro-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	background: rgba(10, 14, 22, 0.72);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	transition: background-color 180ms ease, transform 180ms ease;
}

.my-gallery-pro-play::before,
.my-gallery-pro-dialog-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-width: 10px 0 10px 17px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
}

a.my-gallery-pro-link:hover .my-gallery-pro-play,
a.my-gallery-pro-link:focus-visible .my-gallery-pro-play {
	background: #3157d5;
	transform: scale(1.06);
}

.my-gallery-pro-video-status {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(10, 14, 22, 0.82);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.my-gallery-pro-player {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--mgp-player-ratio, 16 / 9);
	border-radius: var(--mgp-radius);
	background: #000;
	line-height: normal;
}

.my-gallery-pro-tiles > .my-gallery-pro-item > .my-gallery-pro-player {
	flex: 1 1 auto;
	min-height: 60%;
	aspect-ratio: auto;
}

.my-gallery-pro-player > iframe,
.my-gallery-pro-player > video,
.my-gallery-pro-dialog-video > iframe,
.my-gallery-pro-dialog-video > video,
.my-gallery-pro-dialog-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background: #000;
	object-fit: contain;
}

.my-gallery-pro-video-notice {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 16px;
	background: #1d2327;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.my-gallery-pro-video-notice p {
	margin: 0;
}

.my-gallery-pro-video-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	justify-content: center;
}

.my-gallery-pro-video-button {
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.my-gallery-pro-video-notice a {
	color: #fff;
	text-decoration: underline;
}

.my-gallery-pro-video-button:focus-visible,
.my-gallery-pro-video-notice a:focus-visible {
	outline: 3px solid #8fb0ff;
	outline-offset: 2px;
}

.my-gallery-pro-watch {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.875em;
	line-height: 1.45;
}

/*
 * Slider: a native scroll-snap row. Without the script it scrolls by touch,
 * trackpad or keyboard; the script hides the scroll bar and adds controls.
 */
.my-gallery-pro-grid.is-slider-layout {
	--mgp-slides: 3;
	--mgp-tablet-slides: var(--mgp-slides);
	--mgp-mobile-slides: 1;
	--mgp-active-slides: var(--mgp-slides);
	position: relative;
}

.my-gallery-pro-slider-frame {
	position: relative;
}

.my-gallery-pro-slider-track {
	position: relative;
	display: flex;
	gap: var(--mgp-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

/* The track clips anything outside it, so slide focus rings sit inside. */
.my-gallery-pro-slide .my-gallery-pro-link:focus-visible {
	outline-offset: -3px;
}

.my-gallery-pro-slider-track:focus-visible {
	outline: 3px solid #3157d5;
	outline-offset: 3px;
}

.my-gallery-pro-grid.is-slider-enhanced .my-gallery-pro-slider-track {
	scrollbar-width: none;
}

.my-gallery-pro-grid.is-slider-enhanced .my-gallery-pro-slider-track::-webkit-scrollbar {
	display: none;
}

.my-gallery-pro-slide {
	flex: 0 0 calc((100% - (var(--mgp-active-slides) - 1) * var(--mgp-gap)) / var(--mgp-active-slides));
	min-width: 0;
	scroll-snap-align: start;
}

.my-gallery-pro-slide .my-gallery-pro-link,
.my-gallery-pro-slide .my-gallery-pro-player {
	aspect-ratio: 16 / 9;
}

.my-gallery-pro-grid.has-landscape-slides .my-gallery-pro-slide .my-gallery-pro-link,
.my-gallery-pro-grid.has-landscape-slides .my-gallery-pro-slide .my-gallery-pro-player {
	aspect-ratio: 4 / 3;
}

.my-gallery-pro-grid.has-square-slides .my-gallery-pro-slide .my-gallery-pro-link,
.my-gallery-pro-grid.has-square-slides .my-gallery-pro-slide .my-gallery-pro-player {
	aspect-ratio: 1 / 1;
}

.my-gallery-pro-grid.has-portrait-slides .my-gallery-pro-slide .my-gallery-pro-link,
.my-gallery-pro-grid.has-portrait-slides .my-gallery-pro-slide .my-gallery-pro-player {
	aspect-ratio: 3 / 4;
}

.my-gallery-pro-shell .my-gallery-pro-grid .my-gallery-pro-slide .my-gallery-pro-image {
	height: 100%;
	object-fit: cover;
}

.my-gallery-pro-shell .my-gallery-pro-grid.is-slider-layout.is-fit-contain .my-gallery-pro-image {
	object-fit: contain;
}

.my-gallery-pro-slider-arrow,
.my-gallery-pro-slider-rotation {
	position: absolute;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(16, 24, 40, 0.24);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: #1d2327;
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.22);
	cursor: pointer;
}

.my-gallery-pro-slider-arrow {
	top: 50%;
	margin-top: -22px;
}

.my-gallery-pro-slider-arrow.is-previous {
	left: 8px;
}

.my-gallery-pro-slider-arrow.is-next {
	right: 8px;
}

.my-gallery-pro-slider-arrow::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.my-gallery-pro-slider-arrow.is-previous::before {
	margin-left: 4px;
	transform: rotate(-135deg);
}

.my-gallery-pro-slider-arrow.is-next::before {
	margin-right: 4px;
	transform: rotate(45deg);
}

.my-gallery-pro-slider-arrow[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.my-gallery-pro-slider-rotation {
	top: 8px;
	right: 8px;
	z-index: 3;
	width: 40px;
	height: 40px;
}

/* Pause bars while rotating; a play triangle while stopped. */
.my-gallery-pro-slider-rotation::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 3px;
	border-width: 7px 0 7px 12px;
	border-style: solid;
	border-color: transparent transparent transparent currentColor;
}

.my-gallery-pro-grid.is-rotating .my-gallery-pro-slider-rotation::before {
	width: 12px;
	height: 14px;
	margin-left: 0;
	border-width: 0 4px;
	border-color: currentColor;
}

.my-gallery-pro-slider-arrow:hover,
.my-gallery-pro-slider-rotation:hover {
	background: #fff;
}

.my-gallery-pro-slider-arrow:focus-visible,
.my-gallery-pro-slider-rotation:focus-visible,
.my-gallery-pro-slider-dot:focus-visible,
.my-gallery-pro-slider-thumb:focus-visible {
	outline: 3px solid #3157d5;
	outline-offset: 2px;
}

.my-gallery-pro-slider-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	justify-content: center;
	margin-top: 10px;
}

/* 24 px targets with a smaller visible dot. */
.my-gallery-pro-slider-dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.my-gallery-pro-slider-dot::before {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	bottom: 7px;
	left: 7px;
	border: 1px solid #50575e;
	border-radius: 50%;
	background: transparent;
}

.my-gallery-pro-slider-dot[aria-current="true"]::before {
	top: 6px;
	right: 6px;
	bottom: 6px;
	left: 6px;
	border-color: #1d2327;
	background: #1d2327;
}

.my-gallery-pro-slider-thumbs {
	position: relative;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-top: 10px;
	padding: 4px;
	scrollbar-width: thin;
}

.my-gallery-pro-slider-thumb {
	flex: 0 0 auto;
	overflow: hidden;
	width: 76px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: #eef0f4;
	opacity: 0.72;
	cursor: pointer;
}

.my-gallery-pro-shell .my-gallery-pro-grid .my-gallery-pro-slider-thumb img,
.my-gallery-pro-slider-thumb-placeholder {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.my-gallery-pro-slider-thumb-placeholder {
	background: linear-gradient(135deg, #1d2327, #3c434a);
}

.my-gallery-pro-slider-thumb[aria-selected="true"] {
	border-color: #1d2327;
	opacity: 1;
}


.my-gallery-pro-dialog {
	width: min(94vw, 1180px);
	max-width: 1180px;
	height: min(92vh, 900px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #11151d;
	color: #fff;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.my-gallery-pro-dialog::backdrop {
	background: rgba(5, 8, 14, 0.86);
}

.my-gallery-pro-dialog-shell {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	height: 100%;
}

.my-gallery-pro-dialog-header,
.my-gallery-pro-dialog-footer {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
}

.my-gallery-pro-dialog-title,
.my-gallery-pro-dialog-position {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.my-gallery-pro-dialog-title {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.my-gallery-pro-dialog-close,
.my-gallery-pro-dialog-nav {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
}

.my-gallery-pro-dialog-close:hover,
.my-gallery-pro-dialog-nav:hover,
.my-gallery-pro-dialog-close:focus-visible,
.my-gallery-pro-dialog-nav:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.18);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.my-gallery-pro-dialog-media {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	min-height: 0;
	padding: 0 14px;
}

.my-gallery-pro-dialog-figure {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	text-align: center;
}

.my-gallery-pro-dialog-image {
	display: block;
	align-self: center;
	justify-self: center;
	max-width: 100%;
	max-height: calc(92vh - 164px);
	object-fit: contain;
}

.my-gallery-pro-dialog-video {
	position: relative;
	overflow: hidden;
	align-self: center;
	justify-self: center;
	width: min(100%, calc((92vh - 164px) * var(--mgp-ratio, 1.7778)));
	max-height: calc(92vh - 164px);
	aspect-ratio: var(--mgp-ratio, 16 / 9);
	border-radius: 6px;
	background: #000;
}

.my-gallery-pro-dialog-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 72px;
	height: 72px;
	margin: -36px 0 0 -36px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(10, 14, 22, 0.72);
	cursor: pointer;
}

.my-gallery-pro-dialog-play:hover,
.my-gallery-pro-dialog-play:focus-visible {
	background: #3157d5;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.my-gallery-pro-dialog-watch {
	justify-self: center;
	color: #d7dce7;
	font-size: 14px;
	line-height: 1.5;
}

.my-gallery-pro-dialog-watch:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.my-gallery-pro-dialog-caption {
	min-height: 22px;
	margin: 10px 0 0;
	color: #d7dce7;
	font-size: 14px;
	line-height: 1.5;
}

body.my-gallery-pro-viewer-open {
	overflow: hidden;
}

/*
 * Tablet: wider than 782px up to 1024px. Starting at 782px leaves no gap for
 * fractional widths such as 782.4px; at exactly 782px the mobile rules below
 * match too and win because they come later. Keep this block before them.
 */
@container (min-width: 782px) and (max-width: 1024px) {
	.my-gallery-pro-grid {
		--mgp-active-columns: var(--mgp-tablet-columns);
	}

	.my-gallery-pro-grid.is-slider-layout {
		--mgp-active-slides: var(--mgp-tablet-slides);
	}

	.my-gallery-pro-grid.is-grid-layout {
		grid-template-columns: repeat(var(--mgp-tablet-columns), minmax(0, 1fr));
	}

	.my-gallery-pro-grid.is-masonry-layout {
		columns: var(--mgp-tablet-columns);
	}

	.my-gallery-pro-tiles > .my-gallery-pro-item {
		grid-column: span var(--mgp-tw, var(--mgp-w, 1));
		grid-row: span var(--mgp-th, var(--mgp-h, 1));
	}
}

/* Viewport fallback for the tablet range only where container queries are unavailable. */
@supports not (container-type: inline-size) {
	@media (min-width: 782px) and (max-width: 1024px) {
		.my-gallery-pro-grid {
			--mgp-active-columns: var(--mgp-tablet-columns);
		}

		.my-gallery-pro-grid.is-slider-layout {
			--mgp-active-slides: var(--mgp-tablet-slides);
		}

		.my-gallery-pro-grid.is-grid-layout {
			grid-template-columns: repeat(var(--mgp-tablet-columns), minmax(0, 1fr));
		}

		.my-gallery-pro-grid.is-masonry-layout {
			columns: var(--mgp-tablet-columns);
		}

		.my-gallery-pro-tiles > .my-gallery-pro-item {
			grid-column: span var(--mgp-tw, var(--mgp-w, 1));
			grid-row: span var(--mgp-th, var(--mgp-h, 1));
		}
	}
}

@container (max-width: 782px) {
	.my-gallery-pro-grid {
		--mgp-active-columns: var(--mgp-mobile-columns);
	}

	.my-gallery-pro-grid.is-slider-layout {
		--mgp-active-slides: var(--mgp-mobile-slides);
	}

	.my-gallery-pro-grid.is-grid-layout {
		grid-template-columns: repeat(var(--mgp-mobile-columns), minmax(0, 1fr));
	}

	.my-gallery-pro-grid.is-masonry-layout {
		columns: var(--mgp-mobile-columns);
	}

	.my-gallery-pro-tiles > .my-gallery-pro-item {
		grid-column: span var(--mgp-mw, 1);
		grid-row: span var(--mgp-mh, 1);
	}
}

@media (max-width: 782px) {
	.my-gallery-pro-grid {
		--mgp-active-columns: var(--mgp-mobile-columns);
	}

	.my-gallery-pro-grid.is-slider-layout {
		--mgp-active-slides: var(--mgp-mobile-slides);
	}

	.my-gallery-pro-grid.is-grid-layout {
		grid-template-columns: repeat(var(--mgp-mobile-columns), minmax(0, 1fr));
	}

	.my-gallery-pro-grid.is-masonry-layout {
		columns: var(--mgp-mobile-columns);
	}

	.my-gallery-pro-tiles > .my-gallery-pro-item {
		grid-column: span var(--mgp-mw, 1);
		grid-row: span var(--mgp-mh, 1);
	}

	.my-gallery-pro-dialog {
		width: 100vw;
		max-width: none;
		height: 100vh;
		max-height: none;
		border-radius: 0;
	}

	.my-gallery-pro-dialog-image {
		max-height: calc(100vh - 180px);
	}

	.my-gallery-pro-dialog-media {
		grid-template-columns: 1fr;
	}

	.my-gallery-pro-dialog-nav {
		position: absolute;
		z-index: 1;
		top: 50%;
		transform: translateY(-50%);
	}

	.my-gallery-pro-dialog-previous {
		left: 8px;
	}

	.my-gallery-pro-dialog-next {
		right: 8px;
	}

	.my-gallery-pro-dialog-video {
		width: min(100%, calc((100vh - 238px) * var(--mgp-ratio, 1.7778)));
		max-height: calc(100vh - 238px);
	}

	/* The buttons sit below a video, never over its picture or controls. */
	.my-gallery-pro-dialog.is-video .my-gallery-pro-dialog-media {
		position: relative;
		padding-bottom: 58px;
	}

	.my-gallery-pro-dialog.is-video .my-gallery-pro-dialog-nav {
		top: auto;
		bottom: 6px;
		transform: none;
	}

	.my-gallery-pro-dialog.is-video .my-gallery-pro-dialog-previous {
		left: calc(50% - 52px);
	}

	.my-gallery-pro-dialog.is-video .my-gallery-pro-dialog-next {
		right: calc(50% - 52px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.my-gallery-pro-shell .my-gallery-pro-grid .my-gallery-pro-image,
	.my-gallery-pro-play {
		transition: none;
	}

	.my-gallery-pro-slider-track {
		scroll-behavior: auto;
	}
}