/**
 * Supernero Image/Video Gallery Lightbox - PRO Public Styles
 * 
 * This file contains both Lite and Pro styles to avoid multiple CSS requests.
 *
 * @package     Supernero_Image_Video_Gallery_Pro
 * @since       1.0.0
 */

/* LITE STYLES (Consolidated) */

/* Layout system */
.entry-content .sivgl-gallery-container,
.sivgl-gallery-container {
	width: var(--sivgl-width, 100%);
	max-width: var(--sivgl-max-width, 100%);
	margin-left: var(--sivgl-align-left, 0);
	margin-right: var(--sivgl-align-right, auto);
	margin-top: var(--sivgl-margin-top, 0);
	margin-bottom: var(--sivgl-margin-bottom, 0);
	padding-left: var(--sivgl-padding-x, 0);
	padding-right: var(--sivgl-padding-x, 0);
	background-image: var(--sivgl-bg-image, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Gallery wrapper */
.sivgl-gallery{
	background-color: var(--sivgl-bg, transparent);
	overflow: hidden
}

.sivgl-cp {
	padding: var(--sivgl-cp-y, var(--sivgl-padding-y, 0)) var(--sivgl-cp-x, var(--sivgl-padding-x, 0))
}

/* Grid layout */
.sivgl-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--sivgl-columns, 4), minmax(0, 1fr));
	gap: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em)) var(--sivgl-gap-x, var(--sivgl-gap, 0.5em));
}

/* Grid items */
.sivgl-layout-grid-item {
	overflow: hidden;
	border-radius: var(--sivgl-item-radius, 0);
	border: var(--sivgl-item-border-width, 0) solid var(--sivgl-item-border-color, transparent);
	box-sizing: border-box;
}
/* Lightbox link hover/focus */
.sivgl-layout-grid-item .sivgl-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
/* Image */
.sivgl-layout-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* List layout */
.sivgl-layout-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	gap: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em));
}
.sivgl-layout-list-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	overflow: hidden;
	border-radius: var(--sivgl-item-radius, 0);
	border: var(--sivgl-item-border-width, 0) solid var(--sivgl-item-border-color, transparent);
	box-sizing: border-box;
}
.sivgl-layout-list-item .sivgl-link {
	display: flex;
	flex-direction: row;
	width: 100%;
	text-decoration: none;
	gap: var(--sivgl-gap-x, var(--sivgl-gap, 0.5em));
}
.sivgl-layout-list-item img {
	width: auto;
	max-width: 150px;
	height: auto;
	object-fit: cover;
	display: block;
	border-radius: var(--sivgl-item-radius, 0);
}
.sivgl-layout-list-item .sivgl-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	gap: 0.25em;
	min-width: 0;
}
/* Tablet override */
@media (max-width: 1023.98px) {
	.sivgl-layout-grid {
		grid-template-columns: repeat(var(--sivgl-columns-tablet, 3), minmax(0, 1fr));
		gap: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em)) var(--sivgl-gap-x, var(--sivgl-gap, 0.5em));
	}

	.sivgl-layout-list {
		gap: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em));
	}
}
/* Mobile override */
@media (max-width: 767.98px) {
	.sivgl-layout-grid {
		grid-template-columns: repeat(var(--sivgl-columns-mobile, 2), minmax(0, 1fr));
		gap: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em)) var(--sivgl-gap-x, var(--sivgl-gap, 0.5em));
	}

	.sivgl-layout-list {
		gap: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em));
	}
	.sivgl-layout-list {
		flex-direction: column;
	}
}

/* CARD */
/* Card container */
.sivgl-has-card .sivgl-layout-grid-item,
.sivgl-has-card .sivgl-layout-list-item,
.sivgl-has-card .sivgl-layout-masonry-item,
.sivgl-has-card .sivgl-layout-justified-item {
	position: relative;
}
/* Image fills the card */
.sivgl-has-card .sivgl-layout-grid-item img,
.sivgl-has-card .sivgl-layout-list-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Meta */
.sivgl-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	background: linear-gradient(to top, var(--sivgl-thumb-meta-bg, rgba(0,0,0,0.4)) 60%, transparent 100%);
}
/* Title */
.sivgl-meta-title {
	font-weight: 600;
	color: var(--sivgl-thumb-title-color, inherit);
	font-size: var(--sivgl-thumb-title-size, inherit);
}
/* Category */
.sivgl-meta-category {
	color: var(--sivgl-thumb-category-color, inherit);
	font-size: var(--sivgl-thumb-category-size, inherit);
}
/* Description */
.sivgl-meta-desc {
	color: var(--sivgl-thumb-description-color, inherit);
	font-size: var(--sivgl-thumb-description-size, inherit);
}
/* Hover‑revealed area */
.sivgl-meta-hover-show {
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}
/* Show hover */
.sivgl-layout-grid-item:hover .sivgl-meta-hover-show,
.sivgl-layout-list-item:hover .sivgl-meta-hover-show {
	max-height: 4em;
}
/* overflow ellipsis */
.sivgl-meta-title,
.sivgl-meta-category,
.sivgl-meta-desc,
.sivgl-meta-hover-show > * {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}


/* PRO STYLES */
.sivgl-hidden{display:none;}

/* Filter Show Animation for Grid and List */
@keyframes sivglFilterShow {
	0% {
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.sivgl-layout-grid-item,
.sivgl-layout-list-item {
	animation: sivglFilterShow 0.3s ease-out forwards;
}

/* Category Filter Navigation */
.sivgl-filter-wrapper{
	display:flex;
	width:100%;
	margin-bottom:1em;
	color: var(--sivgl-nav-category-color, inherit);
	font-size: var(--sivgl-nav-category-size, inherit);
}
/* Alignment */
.sivgl-filter-align-left{justify-content:flex-start;}
.sivgl-filter-align-center{justify-content:center;}
.sivgl-filter-align-right{justify-content:flex-end;}
/* Shared layout */
.sivgl-filter-list,
.sivgl-filter-button,
.sivgl-filter-text{
	display:flex;
	flex-wrap:wrap;
	gap:var(--sivgl-filter-gap,.5em);
	list-style:none;
	margin:0;
	padding:0;
}
/* BUTTON STYLE */
.sivgl-filter-button button{
	cursor:pointer;
	padding:var(--sivgl-filter-padding,.35em .75em);
	background:var(--sivgl-filter-bg,transparent);
	color:var(--sivgl-filter-color,inherit);
	border:var(--sivgl-filter-border,1px solid rgba(0,0,0,.15));
	border-radius:var(--sivgl-filter-radius,4px);
	font:inherit;
}
.sivgl-filter-button button.active{
	background:var(--sivgl-filter-active-bg,#333);
	color:var(--sivgl-filter-active-color,#fff);
}
/* TABS STYLE */
.sivgl-filter-list li{
	cursor:pointer;
	padding:.3em .6em;
	border-bottom:2px solid transparent;
}
.sivgl-filter-list li.active{
	border-bottom-color:var(--sivgl-filter-active-bg,currentColor);
	font-weight:600;
}
/* TEXT STYLE */
.sivgl-filter-text span{
	cursor:pointer;
	padding:0;
}
.sivgl-filter-text span.active{
	text-decoration:underline;
}
/* DROPDOWN */
.sivgl-filter-select{
	padding:var(--sivgl-filter-padding,.35em .75em);
	background:var(--sivgl-filter-bg,#fff);
	color:var(--sivgl-filter-color,inherit);
	border:var(--sivgl-filter-border,1px solid rgba(0,0,0,.15));
	border-radius:var(--sivgl-filter-radius,4px);
	font:inherit;
}

/* MASONRY */
.sivgl-has-card .sivgl-layout-masonry-item {
	position: relative;
}

.sivgl-layout-masonry-item img {
	width: 100%;
	height: auto;
	display: block;
}

.sivgl-layout-masonry-item .sivgl-link {
	display: block;
}

/* Meta animation */
.sivgl-layout-masonry-item .sivgl-meta {
	transform: translateY(100%);
	opacity: 0;
	transition: transform .3s ease, opacity .3s ease;
}

/* Hover */
.sivgl-layout-masonry-item:hover .sivgl-meta {
	transform: translateY(0);
	opacity: 1;
}

.sivgl-layout-masonry-item:hover .sivgl-meta-hover-show {
	max-height: 4em;
}

.sivgl-layout-masonry {
	display: block !important;
	position: relative;
}
.sivgl-sizer,
.sivgl-layout-masonry-item {
	width: calc((100% - (var(--sivgl-columns, 4) - 1) * var(--sivgl-gap-x, 0px)) / var(--sivgl-columns, 4));
}
.sivgl-gutter-sizer {
	width: var(--sivgl-gap-x, 0px);
}

.sivgl-layout-masonry-item {
	margin-bottom: var(--sivgl-gap-y, var(--sivgl-gap, 0.5em));
	box-sizing: border-box;
	overflow: hidden;
	border-radius: var(--sivgl-item-radius, 0);
	border: var(--sivgl-item-border-width, 0) solid var(--sivgl-item-border-color, transparent);
}

/* Responsive Masonry */
@media (max-width: 1023.98px) {
	.sivgl-sizer,
	.sivgl-layout-masonry-item {
		width: calc((100% - (var(--sivgl-columns-tablet, 3) - 1) * var(--sivgl-gap-x, 0px)) / var(--sivgl-columns-tablet, 3));
	}
}
@media (max-width: 767.98px) {
	.sivgl-sizer,
	.sivgl-layout-masonry-item {
		width: calc((100% - (var(--sivgl-columns-mobile, 2) - 1) * var(--sivgl-gap-x, 0px)) / var(--sivgl-columns-mobile, 2));
	}
}