/**
 * Leovoid Custom Gallery – Frontend CSS
 *
 * File location: /leovoid-custom-gallery/frontend/assets/leovoid-custom-gallery.css
 *
 * All class names use the leovoid- prefix to avoid conflicts.
 * Dynamic values are driven by CSS custom properties set inline on the wrapper.
 */

/* ── Reset / Base ────────────────────────────────────────────────────────────── */

.leovoid-custom-gallery-wrap *,
.leovoid-custom-gallery-wrap *::before,
.leovoid-custom-gallery-wrap *::after {
	box-sizing: border-box;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────────── */

.leovoid-custom-gallery-wrap {
	--leovoid-columns: 3;
	--leovoid-gap: 10px;
	--leovoid-aspect-ratio: 66.67%;
	--leovoid-row-height: 200px;
	--leovoid-image-transition: 800ms;
	--leovoid-image-border-color: transparent;
	--leovoid-image-border-width: 0px;
	--leovoid-image-border-radius: 0px;
	--leovoid-overlay-bg-normal: rgba(0,0,0,0);
	--leovoid-overlay-bg-hover: rgba(0,0,0,0.5);
	--leovoid-overlay-blend-mode: normal;
	--leovoid-css-filter: none;
	--leovoid-css-filter-hover: none;
	--leovoid-title-color: #ffffff;
	--leovoid-desc-color: #ffffff;
	--leovoid-content-align: center;
	--leovoid-content-padding: 20px;
	--leovoid-item-min-width: 0px;
	--leovoid-item-min-height: 0px;
	--leovoid-loadmore-bg: #333333;
	--leovoid-loadmore-bg-hover: #555555;
	--leovoid-loadmore-text: #ffffff;

	width: 100%;
}

/* Entrance animation states */
.leovoid-entrance-pending {
    opacity: 0;
}
.leovoid-entrance-pending.leovoid-entrance--fade-up {
    transform: translateY(30px);
}
.leovoid-entrance-pending.leovoid-entrance--fade-down {
    transform: translateY(-30px);
}
.leovoid-entrance-pending.leovoid-entrance--zoom-in {
    transform: scale(0.85);
}
.leovoid-entrance-visible {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--leovoid-entrance-duration, 500ms) ease,
        transform var(--leovoid-entrance-duration, 500ms) ease;
}

/* ── Grid Container ──────────────────────────────────────────────────────────── */

.leovoid-custom-gallery-grid {
	width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRID LAYOUT
   Uses CSS Grid with a fixed aspect ratio enforced via ::before padding trick.
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-layout-grid .leovoid-custom-gallery-grid {
	display: grid;
	grid-template-columns: repeat( var(--leovoid-columns), 1fr );
	gap: var(--leovoid-gap);
}

.leovoid-layout-grid .leovoid-custom-gallery-item {
	position: relative;
	overflow: hidden;
	border: var(--leovoid-image-border-width) solid var(--leovoid-image-border-color);
	border-radius: var(--leovoid-image-border-radius);
	min-width: var(--leovoid-item-min-width);
	min-height: var(--leovoid-item-min-height);
}

/* Force aspect ratio via padding trick */
.leovoid-layout-grid .leovoid-custom-gallery-item::before {
	content: '';
	display: block;
	padding-top: var(--leovoid-aspect-ratio);
}

.leovoid-layout-grid .leovoid-custom-gallery-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: var(--leovoid-css-filter, none);
	transition: transform var(--leovoid-image-transition) ease,
	            filter var(--leovoid-image-transition) ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MASONRY LAYOUT
   Three sub-modes controlled by data-masonry-style attribute:
     columns  → CSS columns (browser-native)
     balanced → JS Balanced (Pinterest-style, managed by leovoid-gallery.js)
     grid     → CSS Grid with auto-rows and server-side grid-row:span N
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Masonry: CSS columns mode ── */
.leovoid-layout-masonry[data-masonry-style="columns"] .leovoid-custom-gallery-grid {
	columns: var(--leovoid-columns);
	column-gap: var(--leovoid-gap);
}

.leovoid-layout-masonry[data-masonry-style="columns"] .leovoid-custom-gallery-item {
	break-inside: avoid;
	margin-bottom: var(--leovoid-gap);
	overflow: hidden;
	border-radius: var(--leovoid-image-border-radius);
	border: var(--leovoid-image-border-width) solid var(--leovoid-image-border-color);
	min-width: var(--leovoid-item-min-width);
	min-height: var(--leovoid-item-min-height);
	/* aspect-ratio injected per-item via PHP inline style */
}

.leovoid-layout-masonry[data-masonry-style="columns"] .leovoid-custom-gallery-item div:first-of-type{
    	min-height: 200px;
}

.leovoid-layout-masonry[data-masonry-style="columns"] .leovoid-custom-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	/* height is set by the item's aspect-ratio, so fill it */
	position: absolute;
	inset: 0;
	filter: var(--leovoid-css-filter, none);
	transition: transform var(--leovoid-image-transition) ease,
	            filter var(--leovoid-image-transition) ease;
}

/* items need position:relative so absolute image child positions correctly */
.leovoid-layout-masonry[data-masonry-style="columns"] .leovoid-custom-gallery-item {
	position: relative;
}

/* ── Masonry: Balanced (JS Pinterest) mode ── */
.leovoid-layout-masonry[data-masonry-style="balanced"] .leovoid-custom-gallery-grid {
	display: flex;
	align-items: flex-start;
	gap: var(--leovoid-gap);
}

/* Each column is a flex child created by JS */
.leovoid-masonry-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--leovoid-gap);
	min-width: 0;
}

.leovoid-layout-masonry[data-masonry-style="balanced"] .leovoid-custom-gallery-item {
	width: 100%;
	overflow: hidden;
	border-radius: var(--leovoid-image-border-radius);
	border: var(--leovoid-image-border-width) solid var(--leovoid-image-border-color);
	min-width: var(--leovoid-item-min-width);
	min-height: var(--leovoid-item-min-height);
	position: relative;
	/* aspect-ratio injected per-item via PHP inline style */
}

.leovoid-layout-masonry[data-masonry-style="balanced"] .leovoid-custom-gallery-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: var(--leovoid-css-filter, none);
	transition: transform var(--leovoid-image-transition) ease,
	            filter var(--leovoid-image-transition) ease;
}

/* ── Masonry: CSS Grid span mode ── */
.leovoid-layout-masonry[data-masonry-style="grid"] .leovoid-custom-gallery-grid {
	display: grid;
	grid-template-columns: repeat( var(--leovoid-columns), 1fr );
	grid-auto-rows: 10px; /* small row unit; items span multiple rows */
	gap: var(--leovoid-gap);
}

.leovoid-layout-masonry[data-masonry-style="grid"] .leovoid-custom-gallery-item {
	overflow: hidden;
	border-radius: var(--leovoid-image-border-radius);
	border: var(--leovoid-image-border-width) solid var(--leovoid-image-border-color);
	min-width: var(--leovoid-item-min-width);
	min-height: var(--leovoid-item-min-height);
	position: relative;
	/* grid-row: span N set inline by PHP */
}

.leovoid-layout-masonry[data-masonry-style="grid"] .leovoid-custom-gallery-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: var(--leovoid-css-filter, none);
	transition: transform var(--leovoid-image-transition) ease,
	            filter var(--leovoid-image-transition) ease;
}

/* ── Fallback (no data-masonry-style set) – same as columns ── */
.leovoid-layout-masonry:not([data-masonry-style]) .leovoid-custom-gallery-grid {
	columns: var(--leovoid-columns);
	column-gap: var(--leovoid-gap);
}

.leovoid-layout-masonry:not([data-masonry-style]) .leovoid-custom-gallery-item {
	break-inside: avoid;
	margin-bottom: var(--leovoid-gap);
	position: relative;
	overflow: hidden;
}

/* ── Masonry: Classic Columns (CSS column-count) ─────────────────────────────── */

.leovoid-layout-masonry.leovoid-masonry-style-columns .leovoid-custom-gallery-grid {
    display: block;           /* override CSS Grid */
    column-count: var(--leovoid-columns, 3);
    column-gap: var(--leovoid-gap, 10px);
}

.leovoid-layout-masonry.leovoid-masonry-style-columns .leovoid-custom-gallery-item {
    break-inside: avoid;
    display: inline-block;    /* required for column-count to work correctly */
    width: 100%;
    margin-bottom: var(--leovoid-gap, 10px);
    vertical-align: top;
}

.leovoid-layout-masonry.leovoid-masonry-style-columns .leovoid-custom-gallery-image {
    position: relative;
    width: 100%;
    padding-top: 0;           /* remove the padding-top aspect-ratio trick used in grid mode */
    height: auto;
    background-size: cover;
    background-position: center;
}

/* Responsive column overrides for classic columns */
@media ( max-width: 1024px ) {
    .leovoid-layout-masonry.leovoid-masonry-style-columns .leovoid-custom-gallery-grid {
        column-count: var(--leovoid-columns-tablet, var(--leovoid-columns, 2));
    }
}

@media ( max-width: 767px ) {
    .leovoid-layout-masonry.leovoid-masonry-style-columns .leovoid-custom-gallery-grid {
        column-count: var(--leovoid-columns-mobile, 1);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   JUSTIFIED LAYOUT
   PHP outputs fixed width/height per item based on row-height and aspect ratio.
   JS can re-justify on resize.
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-layout-justified .leovoid-custom-gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--leovoid-gap);
	align-items: flex-start;
}

.leovoid-layout-justified .leovoid-custom-gallery-item {
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	border-radius: var(--leovoid-image-border-radius);
	border: var(--leovoid-image-border-width) solid var(--leovoid-image-border-color);
	min-width: var(--leovoid-item-min-width);
	min-height: var(--leovoid-item-min-height);
	/* width & height set inline by PHP */
}

.leovoid-layout-justified .leovoid-custom-gallery-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: var(--leovoid-css-filter, none);
	transition: transform var(--leovoid-image-transition) ease,
	            filter var(--leovoid-image-transition) ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SHARED IMAGE HOVER ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-custom-gallery-item:hover .leovoid-custom-gallery-image {
	filter: var(--leovoid-css-filter-hover, none);
}

/* Zoom In */
.leovoid-img-anim-zoom-in:hover .leovoid-custom-gallery-image {
	transform: scale(1.08);
}

/* Zoom Out – start scaled up */
.leovoid-img-anim-zoom-out .leovoid-custom-gallery-image {
	transform: scale(1.08);
}
.leovoid-img-anim-zoom-out:hover .leovoid-custom-gallery-image {
	transform: scale(1);
}

/* Move Left */
.leovoid-img-anim-move-left:hover .leovoid-custom-gallery-image {
	transform: translateX(-8%);
}

/* Move Right */
.leovoid-img-anim-move-right:hover .leovoid-custom-gallery-image {
	transform: translateX(8%);
}

/* Move Up */
.leovoid-img-anim-move-up:hover .leovoid-custom-gallery-image {
	transform: translateY(-8%);
}

/* Move Down */
.leovoid-img-anim-move-down:hover .leovoid-custom-gallery-image {
	transform: translateY(8%);
}

/* Default hover scale (no animation class) */
.leovoid-custom-gallery-item:hover:not([class*="leovoid-img-anim-"]) .leovoid-custom-gallery-image {
	transform: scale(1.02);
	transition: transform 300ms ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   OVERLAY
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-custom-gallery-item__overlay {
	position: absolute;
	inset: 0;
	background: var(--leovoid-overlay-bg-normal);
	mix-blend-mode: var(--leovoid-overlay-blend-mode, normal);
	transition: background var(--leovoid-image-transition) ease,
	            opacity var(--leovoid-image-transition) ease,
	            transform var(--leovoid-image-transition) ease;
	pointer-events: none;
}

.leovoid-custom-gallery-item:hover .leovoid-custom-gallery-item__overlay {
	background: var(--leovoid-overlay-bg-hover);
}

/* Overlay entrance animations */
.leovoid-ovl-anim-enter-from-right { transform: translateX(100%); }
.leovoid-ovl-anim-enter-from-left  { transform: translateX(-100%); }
.leovoid-ovl-anim-enter-from-top   { transform: translateY(-100%); }
.leovoid-ovl-anim-enter-from-bottom{ transform: translateY(100%); }
.leovoid-ovl-anim-enter-zoom-in    { transform: scale(0); }
.leovoid-ovl-anim-enter-zoom-out   { transform: scale(1.5); opacity: 0; }
.leovoid-ovl-anim-fade-in          { opacity: 0; }

.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-enter-from-right,
.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-enter-from-left,
.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-enter-from-top,
.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-enter-from-bottom,
.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-enter-zoom-in,
.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-enter-zoom-out,
.leovoid-custom-gallery-item:hover .leovoid-ovl-anim-fade-in {
	transform: none;
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Image filters on hover
   ══════════════════════════════════════════════════════════════════════════════ */

	.leovoid-custom-gallery-image {
		filter: var(--leovoid-css-filter, none);
		transition: filter var(--leovoid-image-transition, 800ms) ease;
	}

	.leovoid-custom-gallery-item:hover .leovoid-custom-gallery-image {
		filter: var(--leovoid-css-filter-hover, none);
	}

	
/* ══════════════════════════════════════════════════════════════════════════════
   CONTENT (TITLE + DESCRIPTION)
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-custom-gallery-item__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center; /* overridden by --content-valign via JS */
	align-items: var(--leovoid-content-align, center);
	text-align: var(--leovoid-content-align, center);
	padding: var(--leovoid-content-padding, 20px);
	pointer-events: none;
	transition: opacity var(--leovoid-image-transition) ease,
	            transform var(--leovoid-image-transition) ease;
}

.leovoid-custom-gallery-item__title {
	color: var(--leovoid-title-color, #fff);
	margin: 0 0 6px;
}

.leovoid-custom-gallery-item__description {
	color: var(--leovoid-desc-color, #fff);
	margin: 0;
}

/* Content animations */
.leovoid-cnt-anim-fade-in { opacity: 0; }
.leovoid-custom-gallery-item:hover .leovoid-cnt-anim-fade-in { opacity: 1; }

.leovoid-cnt-anim-enter-from-bottom { transform: translateY(20px); opacity: 0; }
.leovoid-custom-gallery-item:hover .leovoid-cnt-anim-enter-from-bottom { transform: none; opacity: 1; }

.leovoid-cnt-anim-enter-from-top { transform: translateY(-20px); opacity: 0; }
.leovoid-custom-gallery-item:hover .leovoid-cnt-anim-enter-from-top { transform: none; opacity: 1; }

.leovoid-cnt-anim-enter-from-left { transform: translateX(-20px); opacity: 0; }
.leovoid-custom-gallery-item:hover .leovoid-cnt-anim-enter-from-left { transform: none; opacity: 1; }

.leovoid-cnt-anim-enter-from-right { transform: translateX(20px); opacity: 0; }
.leovoid-custom-gallery-item:hover .leovoid-cnt-anim-enter-from-right { transform: none; opacity: 1; }

.leovoid-cnt-anim-grow { transform: scale(0.85); opacity: 0; }
.leovoid-custom-gallery-item:hover .leovoid-cnt-anim-grow { transform: scale(1); opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   VIDEO ITEM
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-item--video .leovoid-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	pointer-events: none;
	transition: transform 250ms ease, opacity 250ms ease;
	opacity: 0.85;
}

.leovoid-item--video:hover .leovoid-play-icon {
	transform: translate(-50%, -50%) scale(1.12);
	opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--leovoid-filter-space-between);
	justify-content: center; /* default; overridden by modifier class */
	margin-bottom: var(--leovoid-filter-gap);
	list-style: none;
	padding: 0;
	margin-top: 0;
}

.leovoid--filter-align-left  .leovoid-filter-bar,
.leovoid-filter-bar.leovoid--filter-align-left  { justify-content: flex-start; }
.leovoid--filter-align-right .leovoid-filter-bar,
.leovoid-filter-bar.leovoid--filter-align-right { justify-content: flex-end; }

.leovoid-filter-item {
	background: none;
	border: none;
	padding: 4px 0;
	cursor: pointer;
	color: var(--leovoid-filter-text-normal);
	font: inherit;
	position: relative;
	outline:none;
	transition: color 250ms ease;
}

.leovoid-filter-item:hover {
	color: var(--leovoid-filter-text-hover);
}

.leovoid-filter-item--active {
	color: var(--leovoid-filter-text-active);
	font-weight: 700;
}

/* Pointer: underline */
.leovoid--pointer-underline .leovoid-filter-item::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--leovoid-filter-pointer-width);
	background: transparent;
	transition: background 250ms ease, transform 250ms ease, opacity 250ms ease;
}
.leovoid--pointer-underline .leovoid-filter-item:hover::after,
.leovoid--pointer-underline .leovoid-filter-item--active::after {
	background: var(--leovoid-filter-pointer-active);
}

/* Pointer: overline */
.leovoid--pointer-overline .leovoid-filter-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--leovoid-filter-pointer-width);
	background: transparent;
	transition: background 250ms ease;
}
.leovoid--pointer-overline .leovoid-filter-item:hover::before,
.leovoid--pointer-overline .leovoid-filter-item--active::before {
	background: var(--leovoid-filter-pointer-active);
}

/* Pointer: framed */
.leovoid--pointer-framed .leovoid-filter-item {
	border: var(--leovoid-filter-pointer-width) solid transparent;
	padding: 4px 10px;
	transition: border-color 250ms ease, color 250ms ease;
}
.leovoid--pointer-framed .leovoid-filter-item:hover,
.leovoid--pointer-framed .leovoid-filter-item--active {
	border-color: var(--leovoid-filter-pointer-active);
}

/* Pointer: background */
.leovoid--pointer-background .leovoid-filter-item {
	padding: 5px 14px;
	border-radius: 3px;
	transition: background 250ms ease, color 250ms ease;
}
.leovoid--pointer-background .leovoid-filter-item:hover,
.leovoid--pointer-background .leovoid-filter-item--active {
	background: var(--leovoid-filter-pointer-active);
	color: var(--leovoid-filter-text-hover);
}

/* ══════════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 20px;
}

.leovoid-page-btn {
	background: #f5f5f5;
	border: 1px solid #ddd;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 3px;
	transition: background 200ms ease, color 200ms ease;
	font: inherit;
}

.leovoid-page-btn:hover {
	background: #e0e0e0;
}

.leovoid-page-btn.active {
	background: #333;
	color: #fff;
	border-color: #333;
}

/* Load More */
.leovoid-loadmore-wrap {
	text-align: center;
	margin-top: 24px;
}

.leovoid-loadmore-btn {
	display: inline-block;
	background: var(--leovoid-loadmore-bg);
	color: var(--leovoid-loadmore-text);
	border: none;
	padding: 10px 28px;
	cursor: pointer;
	border-radius: 3px;
	font: inherit;
	font-size: 0.95em;
	transition: background 200ms ease;
}

.leovoid-loadmore-btn:hover {
	background: var(--leovoid-loadmore-bg-hover);
}

/* ══════════════════════════════════════════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════════════════════════════════════════ */

.leovoid-hidden {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.leovoid-filter-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.leovoid-filter-bar::-webkit-scrollbar {
		display: none;
	}
	.leovoid-filter-item {
		white-space: nowrap;
	}
}


/* ── Gallery Group wrapper ────────────────────────────────────────────────── */

.leovoid-gallery-group-wrap {
    width: 100%;
}

/* Items hidden by the filter JS */
.leovoid-filter-hidden {
    display: none !important;
}