/* Custom Gallery — frontend styles */

.cg-gallery-wrap {
	clear: both !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	position: relative !important;
	float: none !important;
	overflow: visible !important;
}

.cg-gallery {
	--cg-gap: 14px;
	--cg-radius: 6px;
	--cg-muted: #6b7280;
	--cg-accent: #111;
	--cg-overlay: rgba(0, 0, 0, 0.92);

	box-sizing: border-box;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	margin: 0 0 2rem !important;
	padding: 0 !important;
	position: relative !important;
	float: none !important;
	clear: both !important;
	overflow: visible !important;
}

.cg-gallery *,
.cg-gallery *::before,
.cg-gallery *::after {
	box-sizing: border-box;
}

/* ---------- Title ----------
   The ONLY element that intentionally inherits theme typography
   (per user request). Only set bottom spacing. */

.cg-gallery .cg-title {
	margin-top: 0;
	margin-bottom: var(--cg-gap);
}

/* ---------- Filters ---------- */

.cg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--cg-gap);
}

.cg-filter {
	appearance: none;
	background: transparent;
	border: 1px solid #d4d4d8;
	color: var(--cg-fg);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cg-filter:hover,
.cg-filter:focus-visible {
	border-color: var(--cg-fg);
	outline: none;
}

.cg-filter.is-active {
	background: var(--cg-accent);
	color: #fff;
	border-color: var(--cg-accent);
}

/* ---------- Flickr/Unsplash-style masonry (CSS Grid + row spans) ----------
   The server emits a flat list of items, each carrying `data-aspect="W/H"`.
   gallery.js calculates each item's natural pixel height and assigns
   `grid-row-end: span N` against a 1px `grid-auto-rows` track, which is the
   same trick Flickr Explore and Unsplash use to get a tightly woven,
   document-order masonry that handles mixed portrait/landscape cleanly.

   Default columns: 3 desktop / 2 tablet / 1 mobile.
   The user-configurable column setting (2–5) overrides the desktop count
   but the responsive collapse on smaller viewports is preserved so images
   never get crushed below ~280px wide. */

/* Pre-JS / fallback state: simple vertical stream. Each item keeps its
   natural aspect-ratio (via the inline --cg-aspect variable). The instant
   gallery.js adds `cg-laid-out`, the grid kicks in and items snap into
   their masonry positions — no flash of chaos. */
.cg-gallery .cg-grid {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	list-style: none !important;
}

.cg-gallery .cg-grid.cg-laid-out {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-rows: 1px !important;
	grid-auto-flow: row !important;
	column-gap: var(--cg-gap) !important;
	row-gap: 0 !important;
	align-items: start !important;
}

/* Explicit column-count overrides (settings: columns = 2|3|4|5). */
.cg-gallery.cg-cols-2 .cg-grid.cg-laid-out { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cg-gallery.cg-cols-3 .cg-grid.cg-laid-out { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cg-gallery.cg-cols-4 .cg-grid.cg-laid-out { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.cg-gallery.cg-cols-5 .cg-grid.cg-laid-out { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

/* Tablet: anything 3+ collapses to 2 columns. */
@media (max-width: 900px) {
	.cg-gallery .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-3 .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-4 .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-5 .cg-grid.cg-laid-out {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Mobile: one column, full bleed. */
@media (max-width: 600px) {
	.cg-gallery .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-2 .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-3 .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-4 .cg-grid.cg-laid-out,
	.cg-gallery.cg-cols-5 .cg-grid.cg-laid-out {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.cg-gallery .cg-item {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 0 var(--cg-gap) !important;
	padding: 0 !important;
	border-radius: var(--cg-radius) !important;
	overflow: hidden !important;
	position: relative !important;
	float: none !important;
	clear: none !important;
	transform: none !important;
	background: #fff !important;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12) !important;
	break-inside: avoid !important;
	-webkit-column-break-inside: avoid !important;
	page-break-inside: avoid !important;
}

.cg-gallery .cg-item.is-hidden {
	display: none !important;
}

/* The link is the fixed aspect-ratio box. Its height comes purely from
   `--cg-aspect` (the server-provided width/height ratio), so the tile
   reserves correct space whether or not the image has loaded yet. This is
   what makes lazy-loading safe: an unloaded image can no longer collapse
   the tile and break the masonry packing. */
.cg-gallery .cg-link {
	display: block !important;
	position: relative !important;
	cursor: zoom-in;
	text-decoration: none !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--cg-aspect, 1) !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* The image fills the aspect box absolutely, so it never contributes to the
   tile's height. With the box ratio matching the image ratio there's no
   crop; object-fit just guards against sub-pixel rounding. */
.cg-gallery .cg-item img,
.cg-gallery .cg-item .cg-img {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	clip: auto !important;
	clip-path: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
}

.cg-gallery .cg-item:hover img,
.cg-gallery .cg-item:hover .cg-img {
	transform: scale(1.02) !important;
}

/* ---------- Slider mode ----------
   [custom_gallery_slider board="slug"] renders the items as a horizontally
   scrolling "film reel". Every frame is the SAME size regardless of the
   image's orientation: the thumbnail is cropped to fill the frame, and the
   full, uncropped image is revealed in the lightbox on click. Layout is fully
   independent of image load (fixed width/height), so portrait + landscape
   tiles line up identically on first paint. Prev/Next buttons (added by JS)
   scroll the rail so it works with a mouse, not just touch/trackpad. */
.cg-gallery.cg-mode-slider {
	position: relative !important;
}

.cg-gallery.cg-mode-slider .cg-grid,
.cg-gallery.cg-mode-slider .cg-grid.cg-laid-out {
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	grid-auto-rows: auto !important;
	gap: var(--cg-gap) !important;
	width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	padding: 4px 48px 16px !important;
	margin: 0 !important;
	scroll-snap-type: x mandatory !important;
	scroll-padding-inline: 48px !important;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

/* Uniform frame. Height/width are fixed so every tile matches on load. */
.cg-gallery.cg-mode-slider .cg-item {
	flex: 0 0 auto !important;
	width: 240px !important;
	max-width: 240px !important;
	height: 180px !important;
	margin: 0 !important;
	grid-row-end: auto !important;
	scroll-snap-align: start !important;
}

.cg-gallery.cg-mode-slider .cg-link {
	aspect-ratio: auto !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

.cg-gallery.cg-mode-slider .cg-item img,
.cg-gallery.cg-mode-slider .cg-item .cg-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* The real caption shows in the lightbox; keep the reel to clean frames. */
.cg-gallery.cg-mode-slider .cg-caption {
	display: none !important;
}

@media (min-width: 900px) {
	.cg-gallery.cg-mode-slider .cg-item {
		width: 300px !important;
		max-width: 300px !important;
		height: 210px !important;
	}
}

@media (max-width: 600px) {
	.cg-gallery.cg-mode-slider .cg-grid,
	.cg-gallery.cg-mode-slider .cg-grid.cg-laid-out {
		padding: 4px 16px 14px !important;
		scroll-padding-inline: 16px !important;
	}
	.cg-gallery.cg-mode-slider .cg-item {
		width: 70vw !important;
		max-width: 70vw !important;
		height: 52vw !important;
	}
}

/* Reel scroll buttons (injected by gallery.js). */
.cg-gallery.cg-mode-slider .cg-slider-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 3 !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 999px !important;
	border: 1px solid rgba(15, 23, 42, 0.12) !important;
	background: rgba(255, 255, 255, 0.96) !important;
	color: #111 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
	transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

.cg-gallery.cg-mode-slider .cg-slider-prev { left: 4px !important; }
.cg-gallery.cg-mode-slider .cg-slider-next { right: 4px !important; }

.cg-gallery.cg-mode-slider .cg-slider-nav:hover {
	background: #fff !important;
}

.cg-gallery.cg-mode-slider .cg-slider-nav:disabled {
	opacity: 0 !important;
	pointer-events: none !important;
}

.cg-caption {
	font-size: 13px;
	color: var(--cg-muted);
	padding: 8px 10px 10px;
	line-height: 1.4;
}

.cg-empty {
	color: var(--cg-muted);
	font-style: italic;
}

/* Admin-only frontend diagnostic line. Never shown to logged-out visitors. */
.cg-admin-note {
	margin: 12px 0;
	padding: 10px 12px;
	background: #fffbe5;
	border: 1px solid #f0d68a;
	border-radius: 4px;
	color: #4a3c00;
	font-size: 13px;
	line-height: 1.5;
	word-break: break-all;
}

.cg-admin-note-link {
	color: #2271b1;
	text-decoration: underline;
}

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

.cg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--cg-overlay);
	display: none;
	align-items: center;
	justify-content: center;
	touch-action: none;
}

.cg-lightbox.is-open {
	display: flex;
}

.cg-lightbox-stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 24px 56px;
}

/* The card hugs the image and is the anchor for the prev/next arrows, so the
   arrows always sit on the card's top edge — never floating above it — for
   both portrait and landscape images. Slightly larger padding gives the
   arrows room to rest on the card. */
.cg-lightbox-card {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: min(94vw, 1200px);
	max-height: calc(100vh - 120px);
	padding: 18px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 16px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

/* "Click to zoom" magnifier hint, shown on the opened image only. Appears
   when the lightbox supports zoom, the hint is enabled, and the image is at
   1x; it fades out once the visitor zooms in. Pointer-events stay off so a
   click still toggles zoom. Position (top/centre/bottom) is configurable so
   it can be kept clear of the nav arrows. */
.cg-lightbox-card::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	background-color: rgba(17, 24, 39, 0.62);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='21' y1='21' x2='15.8' y2='15.8'/%3E%3Cline x1='10.5' y1='7.5' x2='10.5' y2='13.5'/%3E%3Cline x1='7.5' y1='10.5' x2='13.5' y2='10.5'/%3E%3C/svg%3E");
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Anchor + hidden (slightly shrunk) transform per position. */
.cg-lightbox.cg-hint-bottom .cg-lightbox-card::after { top: auto; bottom: 16px; transform: translateX(-50%) scale(0.85); }
.cg-lightbox.cg-hint-top .cg-lightbox-card::after    { bottom: auto; top: 16px; transform: translateX(-50%) scale(0.85); }
.cg-lightbox.cg-hint-center .cg-lightbox-card::after { bottom: auto; top: 50%; transform: translate(-50%, -50%) scale(0.85); }

/* Shown state — only when zoomable, hint enabled, and not yet zoomed. */
.cg-lightbox.cg-zoomable.cg-hint-on.cg-hint-bottom:not(.cg-zoomed) .cg-lightbox-card::after,
.cg-lightbox.cg-zoomable.cg-hint-on.cg-hint-top:not(.cg-zoomed) .cg-lightbox-card::after {
	opacity: 0.9;
	transform: translateX(-50%) scale(1);
}

.cg-lightbox.cg-zoomable.cg-hint-on.cg-hint-center:not(.cg-zoomed) .cg-lightbox-card::after {
	opacity: 0.9;
	transform: translate(-50%, -50%) scale(1);
}

.cg-lightbox-img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 156px);
	width: auto;
	height: auto;
	border-radius: 4px;
	user-select: none;
	-webkit-user-drag: none;
	transform-origin: center center;
	transition: transform 0.2s ease;
	cursor: grab;
}

.cg-lightbox-img.is-zoomed {
	cursor: grab;
}

.cg-lightbox-img.is-dragging {
	cursor: grabbing;
	transition: none;
}

.cg-lightbox-controls {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	gap: 8px;
	z-index: 2;
}

.cg-zoom-slider {
	position: absolute;
	top: 72px;
	right: 22px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 150px;
	padding: 10px 7px;
	background: rgba(0, 0, 0, 0.48);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cg-zoom-slider.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.cg-zoom-range {
	width: 118px;
	height: 18px;
	margin: 0;
	accent-color: #fff;
	cursor: pointer;
	transform: rotate(-90deg);
	transform-origin: center;
}

.cg-zoom-range:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 4px;
}

.cg-lightbox-counter {
	position: absolute;
	top: 22px;
	left: 16px;
	color: #fff;
	font-size: 14px;
	opacity: 0.7;
	z-index: 2;
	letter-spacing: 0.02em;
}

.cg-btn {
	appearance: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	width: 42px;
	height: 42px;
	border-radius: 999px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cg-btn:hover,
.cg-btn:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	outline: none;
}

.cg-btn:active {
	transform: scale(0.96);
}

/* Prev/Next are anchored to the card's top corners, so they rest on the card
   itself (top-left / top-right) rather than floating in the empty space above
   it. They stay on the card for any image aspect ratio. */
.cg-nav {
	position: absolute;
	top: 10px;
	width: 46px;
	height: 46px;
	background: rgba(0, 0, 0, 0.55);
	border-color: rgba(255, 255, 255, 0.42);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	z-index: 3;
}

.cg-prev { left: 10px; }
.cg-next { right: 10px; }

/* ---- Arrow placement modes (set in Settings → Lightbox arrows) ----
   The mode class lives on the .cg-lightbox root and is applied per gallery
   when the lightbox opens. Defaults above = top corners. */

/* Top centre, as a pair. */
.cg-lightbox.cg-arrows-top-center .cg-nav { top: 10px; bottom: auto; }
.cg-lightbox.cg-arrows-top-center .cg-prev { left: calc(50% - 52px); right: auto; }
.cg-lightbox.cg-arrows-top-center .cg-next { left: calc(50% + 6px);  right: auto; }

/* Middle of the card, left/right sides. */
.cg-lightbox.cg-arrows-sides .cg-nav {
	top: 50%;
	transform: translateY(-50%);
}
.cg-lightbox.cg-arrows-sides .cg-prev { left: 10px; right: auto; }
.cg-lightbox.cg-arrows-sides .cg-next { right: 10px; left: auto; }

/* Bottom corners. */
.cg-lightbox.cg-arrows-bottom-corners .cg-nav { top: auto; bottom: 10px; }
.cg-lightbox.cg-arrows-bottom-corners .cg-prev { left: 10px; right: auto; }
.cg-lightbox.cg-arrows-bottom-corners .cg-next { right: 10px; left: auto; }

/* Bottom centre, as a pair. */
.cg-lightbox.cg-arrows-bottom-center .cg-nav { top: auto; bottom: 10px; }
.cg-lightbox.cg-arrows-bottom-center .cg-prev { left: calc(50% - 52px); right: auto; }
.cg-lightbox.cg-arrows-bottom-center .cg-next { left: calc(50% + 6px);  right: auto; }

/* No arrows — visitor swipes (touch) or click-drags (mouse) to navigate. */
.cg-lightbox.cg-arrows-none .cg-nav { display: none; }

.cg-lightbox-caption {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.4);
	padding: 6px 12px;
	border-radius: 4px;
	max-width: 80vw;
	text-align: center;
	opacity: 0.9;
	z-index: 2;
}

.cg-lightbox-caption:empty {
	display: none;
}

@media (max-width: 600px) {
	.cg-btn {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}
	.cg-nav { top: 8px; width: 40px; height: 40px; }
	.cg-prev { left: 8px; }
	.cg-next { right: 8px; }
	.cg-lightbox-card { padding: 14px; }
	.cg-lightbox-controls { top: 10px; right: 10px; }
	.cg-zoom-slider { top: 58px; right: 10px; height: 126px; }
	.cg-zoom-range { width: 96px; }
	.cg-lightbox-counter { top: 14px; left: 10px; }
}

/* Hide page scroll while lightbox is open */
body.cg-lightbox-open {
	overflow: hidden;
}

/* ---------- Watermark ---------- */
/* Overlaid text on gallery thumbnails and the lightbox image. */
.cg-watermark {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 4;
	max-width: calc(100% - 16px);
	padding: 3px 8px;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(0, 0, 0, 0.42);
	border-radius: 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cg-lightbox-watermark {
	right: 14px;
	bottom: 14px;
	font-size: 14px;
	padding: 5px 12px;
}

.cg-watermark:empty {
	display: none;
}

/* ---------- Strict (download deterrent) ---------- */
/* The link still receives clicks (lightbox), but the image itself can't be
   dragged, selected, or saved via the usual casual routes. Right-click and
   dragstart are also blocked in JS. */
.cg-strict .cg-img,
.cg-strict .cg-link img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	pointer-events: none;
}

/* In the lightbox, keep pointer events so zoom/pan still work; just stop the
   image being dragged out or text-selected. Right-click is blocked in JS. */
.cg-lightbox.cg-strict .cg-lightbox-img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* ---------- Shop mode (WooCommerce-ready) ---------- */
.cg-buy {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: #111;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.cg-buy:hover,
.cg-buy:focus-visible {
	background: #2563eb;
	color: #fff;
	outline: none;
}

.cg-buy:active {
	transform: scale(0.97);
}

.cg-buy-price {
	font-weight: 500;
	opacity: 0.85;
}

.cg-buy-price del {
	opacity: 0.6;
}