/*
 * JK UAE Image Gallery — CSS grid trích & làm chắc từ ultimate-elementor/image-gallery.min.css.
 * Giữ NGUYÊN class UAE (.uael-*) + width cột (25%/...) + gutter mặc định 20px (margin -10/padding 10),
 * nhưng layout chạy bằng flex-wrap để KHÔNG phụ thuộc CSS sinh-per-post của UAE (display:inline-grid).
 * Chỉ grid/masonry; bỏ justified/carousel/slick/fancybox.
 */

/* --- Wrapper + layout --- */
.uael-gallery-parent{clear:both}
.uael-img-gallery-wrap{display:flex;flex-wrap:wrap;margin:0 -10px;padding:0;list-style:none outside;clear:both}
.uael-img-gallery-wrap .uael-grid-item{box-sizing:border-box;float:none;width:25%;padding:0 10px} /* default 4 cột + gutter 20px */
.uael-img-gallery-wrap .uael-grid-item-content{position:relative;margin-bottom:20px} /* default row gap 20px */
.uael-img-gallery-wrap .uael-grid-img-thumbnail{overflow:hidden;line-height:0}
.uael-img-gallery-wrap img{width:100%;margin-bottom:0;transition:all .3s linear;vertical-align:middle}
.uael-grid-img{display:block}

/* --- Số cột (theo prefix_class trên wrapper widget) --- */
.uael-img-grid__column-1 .uael-img-gallery-wrap .uael-grid-item{width:100%}
.uael-img-grid__column-2 .uael-img-gallery-wrap .uael-grid-item{width:50%}
.uael-img-grid__column-3 .uael-img-gallery-wrap .uael-grid-item{width:33.3333%}
.uael-img-grid__column-4 .uael-img-gallery-wrap .uael-grid-item{width:25%}
.uael-img-grid__column-5 .uael-img-gallery-wrap .uael-grid-item{width:20%}
.uael-img-grid__column-6 .uael-img-gallery-wrap .uael-grid-item{width:16.6666%}
@media (max-width:1024px){
	.uael-img-grid-tablet__column-1 .uael-img-gallery-wrap .uael-grid-item{width:100%}
	.uael-img-grid-tablet__column-2 .uael-img-gallery-wrap .uael-grid-item{width:50%}
	.uael-img-grid-tablet__column-3 .uael-img-gallery-wrap .uael-grid-item{width:33.3333%}
	.uael-img-grid-tablet__column-4 .uael-img-gallery-wrap .uael-grid-item{width:25%}
	.uael-img-grid-tablet__column-5 .uael-img-gallery-wrap .uael-grid-item{width:20%}
	.uael-img-grid-tablet__column-6 .uael-img-gallery-wrap .uael-grid-item{width:16.6666%}
}
@media (max-width:767px){
	.uael-img-grid-mobile__column-1 .uael-img-gallery-wrap .uael-grid-item{width:100%}
	.uael-img-grid-mobile__column-2 .uael-img-gallery-wrap .uael-grid-item{width:50%}
	.uael-img-grid-mobile__column-3 .uael-img-gallery-wrap .uael-grid-item{width:33.3333%}
	.uael-img-grid-mobile__column-4 .uael-img-gallery-wrap .uael-grid-item{width:25%}
	.uael-img-grid-mobile__column-5 .uael-img-gallery-wrap .uael-grid-item{width:20%}
	.uael-img-grid-mobile__column-6 .uael-img-gallery-wrap .uael-grid-item{width:16.6666%}
}

/* --- Masonry (1% data) bằng CSS columns, không cần isotope --- */
.uael-img-masonry-wrap.uael-img-gallery-wrap{display:block;margin:0 -10px}
.uael-img-masonry-wrap .uael-grid-item{float:none;display:inline-block;vertical-align:top}

/* --- Overlay hover (icon hiện khi rê chuột) --- */
.uael-img-gallery-wrap .uael-grid-img-overlay{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;transition:background-color 150ms linear}
.uael-img-gallery-wrap .uael-grid-img-overlay i,
.uael-img-gallery-wrap .uael-grid-img-overlay img,
.uael-img-gallery-wrap .uael-grid-img-overlay svg{opacity:0;position:absolute;transition:opacity 135ms linear}
.uael-img-gallery-wrap .uael-grid-img-overlay i,
.uael-img-gallery-wrap .uael-grid-img-overlay svg{text-align:center;top:50%;width:100%;font-size:26px;transform:translateY(-50%)}
.uael-grid-gallery-img:hover .uael-grid-img-overlay i,
.uael-grid-gallery-img:hover .uael-grid-img-overlay img,
.uael-grid-gallery-img:hover .uael-grid-img-overlay svg{opacity:1}

/* --- Caption (on-image / on-hover) --- */
.uael-img-gallery-wrap .uael-grid-img-content{margin:0;padding:0}
.uael-img-gallery-wrap .uael-grid-img-caption{position:absolute;left:0;bottom:0;width:100%;padding:12px;background:rgba(0,0,0,.4);text-align:center;opacity:0;pointer-events:none;transition:all .2s linear;box-sizing:border-box}
.uael-img-gallery-wrap .uael-grid-img-caption .uael-grid-caption-text{color:#fff;margin:0}
.uael-caption-on-image .uael-img-gallery-wrap .uael-grid-img-caption{opacity:1;pointer-events:auto}
.uael-caption-on-hover .uael-img-gallery-wrap .uael-grid-item-content:hover .uael-grid-img-caption{opacity:1;pointer-events:auto}