/* GITECHY Gallery front end. Theme via the custom properties below. */

.galley {
	--galley-columns: 3;
	--galley-gap: 8px;
	--galley-radius: 2px;
	--galley-accent: #2271b1;
	--galley-grid-ratio: 1;
	--galley-thumb: 240px; /* Preview size (Settings → Display). */
	--galley-carousel-height: min(calc(var(--galley-thumb) * 1.5), 75vh);
	--_cols: var(--galley-columns);
	/* Auto columns: preview-size cells, but never fewer than 2 per row. */
	--_cell: min(var(--galley-thumb), calc(50cqi - var(--galley-gap)));
	container-type: inline-size;
	/* Required with container-type: its intrinsic width is 0, so inside flex
	   layouts (Spectra/Kadence/Elementor containers) it would collapse. */
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 1.5em 0;
}

/* Gallery width (Settings → Display) ------------------------------------- */

.galley--width-custom {
	max-width: var(--galley-max-width, 1200px);
	margin-inline: auto;
}

.galley--width-full {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--galley-gap);
	box-sizing: border-box;
}

@media (max-width: 900px) {
	.galley { --_cols: min(var(--galley-columns), 3); }
}

@media (max-width: 600px) {
	.galley { --_cols: min(var(--galley-columns), 2); }
}

.galley-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Toolbar ---------------------------------------------------------------- */

.galley-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.galley-toolbar__end {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.galley:not(.is-ready) [data-galley-select-mode] { display: none; }

.galley-btn {
	padding: 0.5em 1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	cursor: pointer;
}

.galley-btn--primary {
	border-color: var(--galley-accent);
	background: var(--galley-accent);
	color: #fff;
}

.galley-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.galley-count { font-size: 0.875rem; opacity: 0.8; }

/* Items ------------------------------------------------------------------ */

.galley-items {
	margin: 0;
	padding: 0;
}

.galley-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--galley-radius);
	background: rgba(127, 127, 127, 0.12);
}

.galley-link { display: block; }

.galley-item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease, opacity 0.2s ease;
	-webkit-user-drag: none;
	user-select: none;
}

.galley-link:hover img { transform: scale(1.02); }

/* Blur placeholder (32 px preview) while the photo loads; photos fade in once loaded (galley.js). */
.galley-item.has-placeholder .galley-link { position: relative; overflow: hidden; }
.galley-item.has-placeholder .galley-link::before {
	content: "";
	position: absolute;
	inset: -10px;
	background: var(--galley-ph) center / cover no-repeat;
	filter: blur(10px);
}
.galley-item.has-placeholder img { position: relative; }
.galley.is-ready .galley-item img:not(.is-loaded) { opacity: 0; }

/* "Show more photos" (loads by itself while scrolling). */
.galley-more { margin: 16px 0 0; text-align: center; }
.galley-more.is-loading .galley-btn { opacity: 0.6; pointer-events: none; }
.galley--carousel .galley-more { display: none; }

.galley-item figcaption {
	padding: 6px 8px;
	font-size: 0.8125rem;
}

/* Overlay controls: visible on hover/focus, always on touch and while selecting. */
.galley-check,
.galley-download {
	position: absolute;
	top: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	opacity: 0;
	transition: opacity 0.15s ease;
	cursor: pointer;
}

.galley-check { left: 8px; }
.galley-download { right: 8px; text-decoration: none; }

.galley-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--galley-accent);
	cursor: pointer;
}

.galley-item:hover .galley-check,
.galley-item:hover .galley-download,
.galley-item:focus-within .galley-check,
.galley-item:focus-within .galley-download,
.galley.is-selecting .galley-check,
.galley:not(.is-ready) .galley-check,
.galley-item.is-selected .galley-check {
	opacity: 1;
}

@media (hover: none) {
	.galley-check,
	.galley-download { opacity: 1; }
}

.galley.is-selecting .galley-link { cursor: copy; }
.galley.is-selecting .galley-link:hover img { transform: none; }

.galley-item.is-selected { outline: 3px solid var(--galley-accent); outline-offset: -3px; }
.galley-item.is-selected img { opacity: 0.85; }

/* Grid ------------------------------------------------------------------- */

.galley--grid .galley-items {
	display: grid;
	grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
	gap: var(--galley-gap);
}

.galley--grid.galley--cols-auto .galley-items {
	grid-template-columns: repeat(auto-fill, minmax(var(--_cell), 1fr));
}

.galley--grid .galley-item img {
	aspect-ratio: var(--galley-grid-ratio);
	object-fit: cover;
}

/* Masonry (CSS columns: order runs top-to-bottom per column) ------------- */

.galley--masonry .galley-items {
	columns: var(--_cols);
	column-gap: var(--galley-gap);
}

.galley--masonry.galley--cols-auto .galley-items {
	column-count: auto;
	column-width: var(--_cell);
}

.galley--masonry .galley-item {
	break-inside: avoid;
	margin-bottom: var(--galley-gap);
}

/* Alignment (Settings → Display) ---------------------------------------- */
/* With auto columns, limit the photo area to exactly as many preview-size
   columns as there are photos, then align that area. Galleries with more
   photos than fit in a row still use the full width. The +1px absorbs
   rounding so the column count never drops by one. */

.galley--cols-auto:not(.galley--align-stretch):not(.galley--carousel) .galley-toolbar,
.galley--cols-auto:not(.galley--align-stretch):not(.galley--carousel) .galley-viewport {
	max-width: calc(var(--galley-count) * (var(--_cell) + var(--galley-gap)) - var(--galley-gap) + 1px);
}

.galley--align-center .galley-toolbar,
.galley--align-center .galley-viewport { margin-inline: auto; }

.galley--align-left .galley-toolbar,
.galley--align-left .galley-viewport { margin-inline: 0 auto; }

.galley--align-right .galley-toolbar,
.galley--align-right .galley-viewport { margin-inline: auto 0; }

/* Stretch: collapse empty columns so the photos grow to reach both edges. */
.galley--grid.galley--cols-auto.galley--align-stretch .galley-items {
	grid-template-columns: repeat(auto-fit, minmax(var(--_cell), 1fr));
}

.galley--masonry.galley--cols-auto.galley--align-stretch .galley-items {
	column-count: var(--galley-count); /* With column-width set, this is a maximum. */
}

/* Custom-width galleries: position the whole gallery box. */
.galley--width-custom.galley--align-left { margin-inline: 0 auto; }
.galley--width-custom.galley--align-right { margin-inline: auto 0; }

/* Carousel: auto margins center/right-align short tracks but collapse to 0
   when the track overflows, so scrolling still reaches the first photo. */
.galley--carousel.galley--align-center .galley-item:first-child,
.galley--carousel.galley--align-right .galley-item:first-child { margin-left: auto; }
.galley--carousel.galley--align-center .galley-item:last-child { margin-right: auto; }

/* Carousel --------------------------------------------------------------- */

.galley--carousel .galley-viewport { position: relative; }

.galley--carousel .galley-items {
	display: flex;
	gap: var(--galley-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.galley--carousel .galley-item {
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.galley--carousel .galley-item img {
	width: auto;
	max-width: 90vw;
	height: var(--galley-carousel-height);
	object-fit: cover;
}

.galley--carousel .galley-link:hover img { transform: none; }

.galley-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	transform: translateY(-50%);
	cursor: pointer;
}

.galley-nav--prev { left: 8px; }
.galley-nav--next { right: 8px; }
.galley-nav:disabled { opacity: 0; pointer-events: none; }
.galley:not(.is-ready) .galley-nav { display: none; }

/* Lightbox --------------------------------------------------------------- */

html.galley-lock { overflow: hidden; }

.galley-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-rows: 1fr auto;
	background: rgba(8, 8, 8, 0.96);
	color: #fff;
}

.galley-lightbox[hidden] { display: none; }

.galley-lb__stage {
	--_pad-y: 16px;
	--_pad-x: 64px;
	position: relative;
	min-height: 0;
	overflow: hidden;
	touch-action: pan-y;
}

/* Pinned inside the stage and centered with auto margins, so the photo is
   always scaled to fit the visible area, whatever the theme does to <img>. */
.galley-lightbox .galley-lb__img {
	position: absolute;
	inset: var(--_pad-y) var(--_pad-x);
	width: auto;
	height: auto;
	max-width: calc(100% - 2 * var(--_pad-x));
	max-height: calc(100% - 2 * var(--_pad-y));
	margin: auto;
	padding: 0;
	border: 0;
	box-shadow: none;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	transition: filter 0.2s ease;
}

.galley-lb__img.is-loading { filter: blur(2px); }

.galley-lb__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 16px;
	font-size: 0.875rem;
}

.galley-lb__caption {
	flex: 1;
	overflow: hidden;
	opacity: 0.8;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.galley-lb__counter { opacity: 0.7; font-variant-numeric: tabular-nums; }

.galley-lb__actions { display: flex; gap: 4px; margin-left: auto; }

.galley-lb__btn,
.galley-lb__nav {
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.galley-lb__btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.galley-lb__btn:hover,
.galley-lb__btn:focus-visible { background: rgba(255, 255, 255, 0.12); }
.galley-lb__btn[hidden] { display: none; }
.galley-lb__btn.is-on { background: var(--galley-accent, #2271b1); }
.galley-lb__btn svg { width: 22px; height: 22px; }

.galley-lb__nav {
	position: absolute;
	top: calc(50% - 28px);
	width: 56px;
	height: 56px;
	opacity: 0.75;
}

.galley-lb__nav:hover { opacity: 1; }
.galley-lb__nav[hidden] { display: none; }
.galley-lb__nav svg { width: 36px; height: 36px; }
.galley-lb__nav--prev { left: 4px; }
.galley-lb__nav--next { right: 4px; }

/* Fullscreen photo size (Settings → Display) */

.galley-lightbox--fill { grid-template-rows: 1fr; }
.galley-lightbox--fill .galley-lb__stage { --_pad-y: 0px; --_pad-x: 0px; }

.galley-lightbox--fill .galley-lb__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 32px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.galley-lightbox--custom .galley-lb__img {
	max-width: min(calc(100% - 2 * var(--_pad-x)), calc(var(--galley-lb-scale, 0.85) * 100vw));
	max-height: min(calc(100% - 2 * var(--_pad-y)), calc(var(--galley-lb-scale, 0.85) * 100vh));
}

@media (max-width: 600px) {
	.galley-lb__stage { --_pad-y: 8px; --_pad-x: 8px; }
	.galley-lb__nav { display: none; }
}

/* Gallery pages: no author/date byline (common theme + block-theme markup) */

.single-galley_gallery .entry-meta,
.single-galley_gallery .posted-on,
.single-galley_gallery .byline,
.single-galley_gallery .wp-block-post-date,
.single-galley_gallery .wp-block-post-author,
.single-galley_gallery .wp-block-post-author-name {
	display: none !important;
}

/* Client access: messages, password screen, download PIN ---------------- */

.galley-message {
	max-width: 640px;
	margin: 1.5em auto;
	padding: 1.25em 1.5em;
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 8px;
	text-align: center;
}

.galley-message p:last-child { margin-bottom: 0; }
.galley-message__title { margin: 0 0 0.5em; font-size: 1.4em; }

.galley-message--editor {
	max-width: none;
	margin: 0 0 12px;
	padding: 0.6em 1em;
	border-color: #dba617;
	background: #fcf9e8;
	color: #3c2c00;
	font-size: 0.875rem;
	text-align: left;
}

.galley-message--locked form.post-password-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75em;
	margin-top: 1em;
}

.galley-message--locked form.post-password-form p { margin: 0; }
/* WordPress's own "This content is password-protected…" line; our heading says it. */
.galley-message--locked form.post-password-form > p:first-child { display: none; }

.galley-pin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
	font-size: 0.875rem;
}

.galley-pin__row { display: inline-flex; gap: 8px; }

.galley-pin input[type="password"] {
	width: 10em;
	padding: 0.45em 0.75em;
	border: 1px solid rgba(127, 127, 127, 0.5);
	border-radius: 999px;
	font: inherit;
}

.galley-pin__error { flex-basis: 100%; color: #b32d2e; }

/* Theme resets ------------------------------------------------------------ */
/* Themes such as Astra style every button/link, including :hover/:focus
   (e.g. `button:focus { background: blue }`). Pin our controls' look with
   selectors that outrank those. */

.galley button,
.galley-lightbox button {
	min-width: 0;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
}

.galley .galley-btn { padding: 0.5em 1em; }

.galley .galley-btn:hover,
.galley .galley-btn:focus {
	border-color: currentColor;
	background: rgba(127, 127, 127, 0.12);
	color: inherit;
}

.galley .galley-btn--primary:hover,
.galley .galley-btn--primary:focus {
	border-color: var(--galley-accent);
	background: var(--galley-accent);
	color: #fff;
	filter: brightness(1.1);
}

.galley .galley-nav,
.galley-lightbox .galley-lb__btn,
.galley-lightbox .galley-lb__nav { padding: 0; }

.galley .galley-nav:hover,
.galley .galley-nav:focus {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}

.galley-lightbox .galley-lb__btn,
.galley-lightbox .galley-lb__btn:focus,
.galley-lightbox .galley-lb__nav,
.galley-lightbox .galley-lb__nav:hover,
.galley-lightbox .galley-lb__nav:focus {
	border: 0;
	background: transparent;
	color: #fff;
}

.galley-lightbox .galley-lb__btn:hover,
.galley-lightbox .galley-lb__btn:focus-visible { background: rgba(255, 255, 255, 0.12); }
.galley-lightbox .galley-lb__btn.is-on { background: var(--galley-accent, #2271b1); }

.galley .galley-download:hover,
.galley .galley-download:focus { color: #fff; }

/* Right-click blocker ---------------------------------------------------- */

/* Suppress iOS long-press "Save Image" and text/image selection. */
.galley-protect .galley-item img,
.galley-protect .galley-lb__img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.galley-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 100001;
	padding: 10px 18px;
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.92);
	color: #fff;
	font-size: 0.875rem;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.galley-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.galley *,
	.galley-lightbox * { transition: none !important; scroll-behavior: auto !important; }
}