/* Featured image carousel */
.ipsCarousel--gallery-featured{
	--i-column-gap: 0em;
	border-radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra);
}
.ipsCarousel--gallery-featured .ipsFigure{
	border-radius: 0;
}

.elGalleryImage {
	display: grid;
	place-content: center;
	position: relative;
}

.cGalleryImageFade {
	position: absolute;
	bottom: 1em;
	inset-inline-end: 1em;
	transition: opacity 0.3s ease-in-out;
	opacity: 0;
}

.elGalleryImage:hover .cGalleryImageFade,
.elGalleryImage.cGalleryImageHover .cGalleryImageFade {
	opacity: 1;
}

.elGalleryImage .ipsNsfwOverlay{
	position: absolute;
	inset: 0;
	color: #fff;
}

.elGalleryImageNav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.elGalleryImageNav a {
	color: #fff;
	font-size: 60px;
	width: 1em;
	height: 1em;
	display: grid;
	place-content: center;
	opacity: .4;
	transition: all 0.2s ease-in-out;
	z-index: 100;
	pointer-events: auto;
}
	.elGalleryImage:hover .elGalleryImageNav a {
		opacity: 1;
		background: rgba(0,0,0,0.2);
	}

	.elGalleryImageNav i{
		font-size: .4em;
	}

/*
	----------------
	- Category grid
	----------------
*/

/* Show long dates */
:is(.ipsData--gallery-categories, .ipsData--gallery-club-categories) .ipsTime__short{
	display: none;
}
:is(.ipsData--gallery-categories, .ipsData--gallery-club-categories) .ipsTime__long{
	display: revert;
}

/*
	----------------
	- Image view: thumbnail carousel
	----------------
*/

.cGalleryImageThumbs{
	position: relative;
	background-color: oklch(25% calc(clamp(0, 100 - var(--i-base-c), 1) * 5%) var(--i-base-h));
	box-shadow: inset hsl(0 0% 100% / .1) 0px 1px 0px;
	border-radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra);
}


@media (max-width: 767px){
	.cGalleryImageThumbs{
		border-radius: 0;
	}
}

/* ALBUM LIST IN A CATEGORY */
.cGalleryAlbums > li:not( :last-child ) {
	margin-bottom: 7px;
}

/* IMAGE VIEW PAGE */
.cGalleryViewImage {
	/* display: grid;
	place-items: center; */
	position: relative;
}

	.cGalleryViewImage img[data-role="theImage"],
	#elGalleryVideo {
		margin: auto;
		position: relative;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.cGalleryViewImage [data-ipslightbox]{
		display: grid;
		/* place-items: center; */
		cursor: zoom-in;
		height: clamp(300px, 60vh, 800px);
	}
	
	.cGalleryViewImage_controls {
		margin-inline-start: auto;
	}

/* NOTES */
.cGalleryViewImage:hover .cGalleryNote {
	opacity: 1;
}

.cGalleryNote {
	position: absolute;
	opacity: 0;
}

.cGalleryNote_border {
	border: 1px solid #000;
	height: 100%;
	background: rgba(255,255,255,0.0001);
}

	.cGalleryNote_border::after {
		content: '';
		position: absolute;
		inset: 1px;
		display: block;
		border: 1px solid #ccc;
	}

	.cGalleryNote_editing .cGalleryNote_border,
	.cGalleryNote_editing .cGalleryNote_border::after {
		border-style: dashed;
		opacity: 1;
	}

.cGalleryNote_editing {
	opacity: 1 !important;
}

	.cGalleryNote_editing .cGalleryNote_note {
		opacity: 1 !important;
		display: block !important;
		width: 280px;
		padding: 12px;
		pointer-events: auto;
		z-index: 1000;
	}

		.cGalleryNote_editing .cGalleryNote_note a {
			color: #fff;
		}

		.cGalleryNote_editing .cGalleryNote_note textarea {
			outline: 1px solid currentColor;
			outline-offset: 0px;
			padding: 1em;
		}

.cGalleryNote_note {
	width: max-content;
	max-width: 250px;
	position: absolute;
	top: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
	background: hsl(0 0% 0% / .6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-weight: 600;
	font-size: .9em;
	border-radius: 5px;
	pointer-events: none;
	padding: 10px;
}

.cGalleryNote_delete { 
	position: absolute;
	top: -10px;
	inset-inline-end: -10px;
	width: 1.5em;
	height: 1.5em;
	display: grid;
	place-content: center;
	border-radius: 50%;
	background: #000;
	border: 1px solid currentColor;
	color: #fff;
	font-size: 17px;
}

/* jQuery resizable styles */
.ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize;	height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize;	height: 7px; width: 100%; bottom: -5px;	left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px;	right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize;	width: 7px;	left: -5px;	top: 0;	height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px;	top: -5px; }
.ui-icon-gripsmall-diagonal-se {
	background: url( "https://www.networny.com/applications/core/dev/resources/global/resizable.png" );
}
.ui-draggable { cursor: move;}

.cGallerySearchAlbumThumbs,
.cGalleryManagedAlbumThumbs {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
}

	/* Restrict thumbs in Activity Stream to 20 */
	.cGallerySearchAlbumThumbs li:nth-child(20) ~ *{
		display: none;
	}

.cGalleryManagedAlbumThumbs{
	margin-top: 10px;
}

.cGalleryAlbums_recent {
	--_thumb: 100px;
	--_gap: 4px;
	padding-inline-start: calc(var(--_thumb) * 2 + var(--_gap));
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--_thumb), 1fr));
	gap: var(--_gap);
	height: calc(var(--_thumb) * 2 + var(--_gap));
	position: relative;
	overflow: hidden;
}

.cGalleryAlbums_recent > li {
	height: var(--_thumb);
	position: relative;
}

	.cGalleryAlbums_recent .ipsFigure{
		height: 100%;
	}
	
		.cGalleryAlbums_recent .ipsFigure__footer{
			justify-self: end;
			padding: .5em;
		}

		.cGalleryAlbums_recent .ipsFigure__footer::before{
			display: none;
		}

	.cGalleryAlbums_recent > li:first-child {
		width: calc(var(--_thumb) * 2);
		height: calc(var(--_thumb) * 2);
		overflow: hidden;
		position: absolute;
		inset-inline-start: 0;
	}

.cGalleryAlbums_recent--small {
	--_thumb: 40px;
}

/* Restyle the above for the sidebar */
.ipsWidget--vertical .cGalleryAlbums_recent{
	padding: 0;
	height: auto;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

	.ipsWidget--vertical .cGalleryAlbums_recent > li:first-child{
		width: auto;
		height: auto;
		position: static;
	}

	.ipsWidget--vertical .cGalleryAlbums_recent > li{ height: auto; }

		/* Since results are unlimited, display a maximum of 12 using css */
		.ipsWidget--vertical .cGalleryAlbums_recent > li:nth-child(12) ~ li{
			display: none;
		}

	.ipsWidget--vertical .cGalleryAlbums_recent .ipsFigure__main {
		aspect-ratio: 1;
	}

/* General style which creates the square thumb container */
.cGalleryThumb {
	max-width: 170px;
	max-height: 170px;
}

.cGalleryAlbumThumb {
	width: 280px;
	height: 235px;
}

@media screen and (max-width: 767px) {
	.ipsApp .cGalleryAlbums_recent {
		margin-bottom: 3px;
	}

	.cGalleryAlbums_recent {
		--_thumb: 40px;
	}

	.cGalleryAlbums_recent + .ipsList {
		padding-inline-start: 4px;
	}
}




/* v5 code */

/* Feature image on index */
.ipsCarousel--gallery-featured{
	height: clamp(480px, 80vh, 610px);
}

/* Larger icons for album list view */
.ipsData--gallery-row-list{
	--i-data--icon-width: 80px;
}


/* Faded masonry for Album listing */
.ipsMasonry--album-summary{
	max-height: 300px;
	overflow: hidden;
	mask-image: linear-gradient(to bottom, hsl(0 0% 0%) 200px, hsl(0 0% 0% / 0));
}

/* Image view */
.elGalleryHeader {
	position: relative;
	z-index: 1; /* Ensure notes overlap the navigation strip */
	background-color: oklch(25% calc(clamp(0, 100 - var(--i-base-c), 1) * 5%) var(--i-base-h));
	border-radius: var(--i-box--bo-ra) var(--i-box--bo-ra) 0 0;
	color: hsl(0 0% 100%);
}

.ipsCarousel--gallery-image-thumbs{
	--i-carousel--pa: 2em 1.5em;
	--_height: 100px;
	gap: 1.5em;
}

	.ipsCarousel--gallery-image-thumbs > :first-child{
		margin-inline-start: auto;
	}
	.ipsCarousel--gallery-image-thumbs > :last-child{
		margin-inline-end: auto;
	}

	.ipsCarousel--gallery-image-thumbs [data-active] .ipsFigure{
		outline: 1px solid currentColor;
		outline-offset: 3px;
	}