/**
 * 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);
    aspect-ratio: var(--leovoid-ar, 3 / 2); /* primary height source; ::before below is the fallback */
}

/* 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 */
    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;
}

/* ── LINE POINTER BASE (underline / overline / double-line) ──────────────── */

.leovoid--pointer-underline .leovoid-filter-item::after,
.leovoid--pointer-double-line .leovoid-filter-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: var(--leovoid-filter-pointer-width, 2px);
    background: var(--leovoid-filter-pointer-hover);
    opacity: 0;
    transition: opacity 250ms ease, transform 250ms ease;
}

.leovoid--pointer-overline .leovoid-filter-item::before,
.leovoid--pointer-double-line .leovoid-filter-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--leovoid-filter-pointer-width, 2px);
    background: var(--leovoid-filter-pointer-hover);
    opacity: 0;
    transition: opacity 250ms ease, transform 250ms ease;
}

/* Hover — correct variable */
.leovoid--pointer-underline .leovoid-filter-item:hover::after,
.leovoid--pointer-double-line .leovoid-filter-item:hover::after,
.leovoid--pointer-double-line .leovoid-filter-item:hover::before,
.leovoid--pointer-overline .leovoid-filter-item:hover::before {
    opacity: 1;
    background: var(--leovoid-filter-pointer-hover);
}

/* Active */
.leovoid--pointer-underline .leovoid-filter-item--active::after,
.leovoid--pointer-double-line .leovoid-filter-item--active::after,
.leovoid--pointer-double-line .leovoid-filter-item--active::before,
.leovoid--pointer-overline .leovoid-filter-item--active::before {
    opacity: 1;
    background: var(--leovoid-filter-pointer-active);
}

/* Animation: None */
.leovoid--animation-none.leovoid--pointer-underline .leovoid-filter-item::after,
.leovoid--animation-none.leovoid--pointer-double-line .leovoid-filter-item::after,
.leovoid--animation-none.leovoid--pointer-double-line .leovoid-filter-item::before,
.leovoid--animation-none.leovoid--pointer-overline .leovoid-filter-item::before {
    transition: none;
}

/* Animation: Slide — scaleX from left edge */
.leovoid--animation-slide.leovoid--pointer-underline .leovoid-filter-item::after,
.leovoid--animation-slide.leovoid--pointer-double-line .leovoid-filter-item::after,
.leovoid--animation-slide.leovoid--pointer-double-line .leovoid-filter-item::before,
.leovoid--animation-slide.leovoid--pointer-overline .leovoid-filter-item::before {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 250ms ease;
}
.leovoid--animation-slide.leovoid--pointer-underline .leovoid-filter-item:hover::after,
.leovoid--animation-slide.leovoid--pointer-double-line .leovoid-filter-item:hover::after,
.leovoid--animation-slide.leovoid--pointer-double-line .leovoid-filter-item:hover::before,
.leovoid--animation-slide.leovoid--pointer-overline .leovoid-filter-item:hover::before {
    transform: scaleX(1);
    background: var(--leovoid-filter-pointer-hover);
}
.leovoid--animation-slide.leovoid--pointer-underline .leovoid-filter-item--active::after,
.leovoid--animation-slide.leovoid--pointer-double-line .leovoid-filter-item--active::after,
.leovoid--animation-slide.leovoid--pointer-double-line .leovoid-filter-item--active::before,
.leovoid--animation-slide.leovoid--pointer-overline .leovoid-filter-item--active::before {
    transform: scaleX(1);
    background: var(--leovoid-filter-pointer-active);
}

/* Animation: Grow — scaleX from center */
.leovoid--animation-grow.leovoid--pointer-underline .leovoid-filter-item::after,
.leovoid--animation-grow.leovoid--pointer-double-line .leovoid-filter-item::after,
.leovoid--animation-grow.leovoid--pointer-double-line .leovoid-filter-item::before,
.leovoid--animation-grow.leovoid--pointer-overline .leovoid-filter-item::before {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 250ms ease;
}
.leovoid--animation-grow.leovoid--pointer-underline .leovoid-filter-item:hover::after,
.leovoid--animation-grow.leovoid--pointer-double-line .leovoid-filter-item:hover::after,
.leovoid--animation-grow.leovoid--pointer-double-line .leovoid-filter-item:hover::before,
.leovoid--animation-grow.leovoid--pointer-overline .leovoid-filter-item:hover::before {
    transform: scaleX(1);
    background: var(--leovoid-filter-pointer-hover);
}
.leovoid--animation-grow.leovoid--pointer-underline .leovoid-filter-item--active::after,
.leovoid--animation-grow.leovoid--pointer-double-line .leovoid-filter-item--active::after,
.leovoid--animation-grow.leovoid--pointer-double-line .leovoid-filter-item--active::before,
.leovoid--animation-grow.leovoid--pointer-overline .leovoid-filter-item--active::before {
    transform: scaleX(1);
    background: var(--leovoid-filter-pointer-active);
}

/* Animation: Drop In — line drops from above into position (overflow clips the start) */
.leovoid--animation-drop-in.leovoid--pointer-underline .leovoid-filter-item,
.leovoid--animation-drop-in.leovoid--pointer-overline .leovoid-filter-item,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item,
.leovoid--animation-drop-out.leovoid--pointer-underline .leovoid-filter-item,
.leovoid--animation-drop-out.leovoid--pointer-overline .leovoid-filter-item,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item {
    overflow: hidden;
}
.leovoid--animation-drop-in.leovoid--pointer-underline .leovoid-filter-item::after,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item::after,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item::before,
.leovoid--animation-drop-in.leovoid--pointer-overline .leovoid-filter-item::before {
    opacity: 1;
    transform: translateY(-100%);
    transition: transform 250ms ease;
}
.leovoid--animation-drop-in.leovoid--pointer-underline .leovoid-filter-item:hover::after,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item:hover::after,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item:hover::before,
.leovoid--animation-drop-in.leovoid--pointer-overline .leovoid-filter-item:hover::before {
    transform: translateY(0);
    background: var(--leovoid-filter-pointer-hover);
}
.leovoid--animation-drop-in.leovoid--pointer-underline .leovoid-filter-item--active::after,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item--active::after,
.leovoid--animation-drop-in.leovoid--pointer-double-line .leovoid-filter-item--active::before,
.leovoid--animation-drop-in.leovoid--pointer-overline .leovoid-filter-item--active::before {
    transform: translateY(0);
    background: var(--leovoid-filter-pointer-active);
}

/* Animation: Drop Out — line rises from below into position */
.leovoid--animation-drop-out.leovoid--pointer-underline .leovoid-filter-item::after,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item::after,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item::before,
.leovoid--animation-drop-out.leovoid--pointer-overline .leovoid-filter-item::before {
    opacity: 1;
    transform: translateY(100%);
    transition: transform 250ms ease;
}
.leovoid--animation-drop-out.leovoid--pointer-underline .leovoid-filter-item:hover::after,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item:hover::after,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item:hover::before,
.leovoid--animation-drop-out.leovoid--pointer-overline .leovoid-filter-item:hover::before {
    transform: translateY(0);
    background: var(--leovoid-filter-pointer-hover);
}
.leovoid--animation-drop-out.leovoid--pointer-underline .leovoid-filter-item--active::after,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item--active::after,
.leovoid--animation-drop-out.leovoid--pointer-double-line .leovoid-filter-item--active::before,
.leovoid--animation-drop-out.leovoid--pointer-overline .leovoid-filter-item--active::before {
    transform: translateY(0);
    background: var(--leovoid-filter-pointer-active);
}

/* ── FRAMED POINTER ───────────────────────────────────────────────────────── */

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

/* Framed: Grow */
.leovoid--animation-grow.leovoid--pointer-framed .leovoid-filter-item {
    transform: scale(0.85);
}
.leovoid--animation-grow.leovoid--pointer-framed .leovoid-filter-item:hover,
.leovoid--animation-grow.leovoid--pointer-framed .leovoid-filter-item--active {
    transform: scale(1);
}

/* Framed: Shrink */
.leovoid--animation-shrink.leovoid--pointer-framed .leovoid-filter-item {
    transform: scale(1.15);
}
.leovoid--animation-shrink.leovoid--pointer-framed .leovoid-filter-item:hover,
.leovoid--animation-shrink.leovoid--pointer-framed .leovoid-filter-item--active {
    transform: scale(1);
}

/* Framed: Draw — border draws from top-left corner via clip-path */
.leovoid--animation-draw.leovoid--pointer-framed .leovoid-filter-item {
    border-color: var(--leovoid-filter-pointer-hover);
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 350ms ease, border-color 250ms ease, color 250ms ease;
}
.leovoid--animation-draw.leovoid--pointer-framed .leovoid-filter-item:hover {
    clip-path: inset(0 0 0 0);
    border-color: var(--leovoid-filter-pointer-hover);
}
.leovoid--animation-draw.leovoid--pointer-framed .leovoid-filter-item--active {
    clip-path: inset(0 0 0 0);
    border-color: var(--leovoid-filter-pointer-active);
}

/* Framed: Corners — top-left and bottom-right corners expand to full frame */
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item {
    border-color: transparent;
    transition: border-color 0ms;
}
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 10px; height: 10px;
    border-top: var(--leovoid-filter-pointer-width, 2px) solid transparent;
    border-left: var(--leovoid-filter-pointer-width, 2px) solid transparent;
    transition: border-color 250ms ease, width 250ms ease, height 250ms ease;
}
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 10px; height: 10px;
    border-bottom: var(--leovoid-filter-pointer-width, 2px) solid transparent;
    border-right: var(--leovoid-filter-pointer-width, 2px) solid transparent;
    transition: border-color 250ms ease, width 250ms ease, height 250ms ease;
}
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item:hover::before,
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item:hover::after {
    border-color: var(--leovoid-filter-pointer-hover);
    width: 100%; height: 100%;
}
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item--active::before,
.leovoid--animation-corners.leovoid--pointer-framed .leovoid-filter-item--active::after {
    border-color: var(--leovoid-filter-pointer-active);
    width: 100%; height: 100%;
}

/* Framed: None */
.leovoid--animation-none.leovoid--pointer-framed .leovoid-filter-item {
    transition: border-color 0ms, color 0ms;
}

/* ── BACKGROUND POINTER ───────────────────────────────────────────────────── */

.leovoid--pointer-background .leovoid-filter-item {
    padding: 5px 14px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    z-index: 0; /* creates stacking context so ::before z-index:-1 stays within item */
    transition: color 250ms ease;
}

/* Animated fill via ::before — sits behind text */
.leovoid--pointer-background .leovoid-filter-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--leovoid-filter-pointer-hover);
    opacity: 0;
    transform: none;
    transition: opacity 250ms ease, transform 250ms ease;
}
.leovoid--pointer-background .leovoid-filter-item:hover::before {
    opacity: 1;
    transform: none;
    background: var(--leovoid-filter-pointer-hover);
}
.leovoid--pointer-background .leovoid-filter-item--active::before {
    opacity: 1;
    transform: none;
    background: var(--leovoid-filter-pointer-active);
}

/* Background: Grow */
.leovoid--animation-grow.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: scale(0);
    transition: transform 250ms ease;
}
.leovoid--animation-grow.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-grow.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: scale(1);
}

/* Background: Shrink */
.leovoid--animation-shrink.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: scale(1.4);
    transition: transform 250ms ease;
}
.leovoid--animation-shrink.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-shrink.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: scale(1);
}

/* Background: Sweep Left (enters from right) */
.leovoid--animation-sweep-left.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: translateX(101%);
    transition: transform 250ms ease;
}
.leovoid--animation-sweep-left.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-sweep-left.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: translateX(0);
}

/* Background: Sweep Right (enters from left) */
.leovoid--animation-sweep-right.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: translateX(-101%);
    transition: transform 250ms ease;
}
.leovoid--animation-sweep-right.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-sweep-right.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: translateX(0);
}

/* Background: Sweep Up (enters from bottom) */
.leovoid--animation-sweep-up.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: translateY(101%);
    transition: transform 250ms ease;
}
.leovoid--animation-sweep-up.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-sweep-up.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: translateY(0);
}

/* Background: Sweep Down (enters from top) */
.leovoid--animation-sweep-down.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: translateY(-101%);
    transition: transform 250ms ease;
}
.leovoid--animation-sweep-down.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-sweep-down.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: translateY(0);
}

/* Background: Shutter In Vertical (closes from top and bottom toward center) */
.leovoid--animation-shutter-in-vertical.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 250ms ease;
}
.leovoid--animation-shutter-in-vertical.leovoid--pointer-background .leovoid-filter-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--leovoid-filter-pointer-hover);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 250ms ease;
}
.leovoid--animation-shutter-in-vertical.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-shutter-in-vertical.leovoid--pointer-background .leovoid-filter-item:hover::after {
    transform: scaleY(0.5);
}
.leovoid--animation-shutter-in-vertical.leovoid--pointer-background .leovoid-filter-item--active::before,
.leovoid--animation-shutter-in-vertical.leovoid--pointer-background .leovoid-filter-item--active::after {
    transform: scaleY(0.5);
    background: var(--leovoid-filter-pointer-active);
}

/* Background: Shutter Out Vertical (expands from center vertically) */
.leovoid--animation-shutter-out-vertical.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 250ms ease;
}
.leovoid--animation-shutter-out-vertical.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-shutter-out-vertical.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: scaleY(1);
}
.leovoid--animation-shutter-out-vertical.leovoid--pointer-background .leovoid-filter-item--active::before {
    background: var(--leovoid-filter-pointer-active);
}

/* Background: Shutter In Horizontal (closes from left and right toward center) */
.leovoid--animation-shutter-in-horizontal.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 250ms ease;
}
.leovoid--animation-shutter-in-horizontal.leovoid--pointer-background .leovoid-filter-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--leovoid-filter-pointer-hover);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 250ms ease;
}
.leovoid--animation-shutter-in-horizontal.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-shutter-in-horizontal.leovoid--pointer-background .leovoid-filter-item:hover::after {
    transform: scaleX(0.5);
}
.leovoid--animation-shutter-in-horizontal.leovoid--pointer-background .leovoid-filter-item--active::before,
.leovoid--animation-shutter-in-horizontal.leovoid--pointer-background .leovoid-filter-item--active::after {
    transform: scaleX(0.5);
    background: var(--leovoid-filter-pointer-active);
}

/* Background: Shutter Out Horizontal (expands from center horizontally) */
.leovoid--animation-shutter-out-horizontal.leovoid--pointer-background .leovoid-filter-item::before {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 250ms ease;
}
.leovoid--animation-shutter-out-horizontal.leovoid--pointer-background .leovoid-filter-item:hover::before,
.leovoid--animation-shutter-out-horizontal.leovoid--pointer-background .leovoid-filter-item--active::before {
    transform: scaleX(1);
}
.leovoid--animation-shutter-out-horizontal.leovoid--pointer-background .leovoid-filter-item--active::before {
    background: var(--leovoid-filter-pointer-active);
}

/* Background: None */
.leovoid--animation-none.leovoid--pointer-background .leovoid-filter-item::before {
    transition: none;
}

/* ── TEXT POINTER ─────────────────────────────────────────────────────────── */

.leovoid--pointer-text .leovoid-filter-item {
    transition: transform 250ms ease, color 250ms ease;
}

/* Text: Grow */
.leovoid--animation-grow.leovoid--pointer-text .leovoid-filter-item:hover,
.leovoid--animation-grow.leovoid--pointer-text .leovoid-filter-item--active {
    transform: scale(1.15);
}

/* Text: Shrink */
.leovoid--animation-shrink.leovoid--pointer-text .leovoid-filter-item:hover,
.leovoid--animation-shrink.leovoid--pointer-text .leovoid-filter-item--active {
    transform: scale(0.85);
}

/* Text: Sink */
.leovoid--animation-sink.leovoid--pointer-text .leovoid-filter-item:hover,
.leovoid--animation-sink.leovoid--pointer-text .leovoid-filter-item--active {
    transform: translateY(3px);
}

/* Text: Float */
.leovoid--animation-float.leovoid--pointer-text .leovoid-filter-item:hover,
.leovoid--animation-float.leovoid--pointer-text .leovoid-filter-item--active {
    transform: translateY(-4px);
}

/* Text: Skew */
.leovoid--animation-skew.leovoid--pointer-text .leovoid-filter-item:hover,
.leovoid--animation-skew.leovoid--pointer-text .leovoid-filter-item--active {
    transform: skewX(-8deg);
}

/* Text: Rotate */
.leovoid--animation-rotate.leovoid--pointer-text .leovoid-filter-item:hover,
.leovoid--animation-rotate.leovoid--pointer-text .leovoid-filter-item--active {
    transform: rotate(-6deg);
}

/* Text: None */
.leovoid--animation-none.leovoid--pointer-text .leovoid-filter-item {
    transition: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   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;
}


/* ── Elementor flex-wrap:wrap mobile height fix ─────────────────────────────
 * When .e-con.e-flex has flex-wrap:wrap (via --flex-wrap-mobile), Elementor's
 * default align-items:stretch forces the widget wrapper to a fixed cross-axis
 * height. The gallery content overflows this box without contributing to flow.
 *
 * :has() targets ONLY the Elementor widget that directly contains a leovoid
 * gallery — zero impact on any other widget or container on the page.
 *
 ── Elementor widget width fix ─────────────────────────────────────────────
 * When no explicit width is set on the shortcode widget in the Elementor
 * editor, the flex item defaults to content-based (auto) sizing. All
 * width:% inside it cascade to 0 (circular dependency). This targets ONLY
 * widgets that contain a leovoid gallery and gives them a concrete width
 * without touching any other widget on the page.
 * ────────────────────────────────────────────────────────────────────────── */
.elementor-widget:has(.leovoid-custom-gallery-wrap),
.elementor-widget:has(.leovoid-gallery-group-wrap) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: flex-start !important; /* defeats stretch, sizes to content */
	width: 100% !important;   /* overrides width:var(--width,auto) from Elementor */
    min-width: 0 !important;  /* allows shrinking in multi-widget rows */
}

.elementor-shortcode:has(.leovoid-custom-gallery-wrap),
.elementor-shortcode:has(.leovoid-gallery-group-wrap) {
    height: auto !important;
    overflow: visible !important;
}