/* lens-gallery.css — หน้าตาสไลเดอร์ (Swiper) และตารางแกลเลอรี่ (GLightbox) */

/* ---------- สไลเดอร์หน้าแรก ---------- */
.lens-swiper {
    width: 100%;
    aspect-ratio: 1440 / 300;
    min-height: 150px;
    background: #e5e5e5;
    --swiper-theme-color: #fff;
    --swiper-navigation-size: 26px;
}
.lens-swiper .swiper-slide { background: #e5e5e5; }
.lens-swiper .swiper-slide a,
.lens-swiper .swiper-slide img { display: block; width: 100%; height: 100%; }
.lens-swiper .swiper-slide img { object-fit: cover; }
.lens-swiper .swiper-button-prev,
.lens-swiper .swiper-button-next {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    transition: background .2s;
}
.lens-swiper .swiper-button-prev:hover,
.lens-swiper .swiper-button-next:hover { background: rgba(0, 0, 0, .6); }
.lens-swiper .swiper-pagination-bullet { background: #fff; opacity: .6; }
.lens-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* ---------- ตารางแกลเลอรี่ ---------- */
.lens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-w, 175px), 100%), 1fr));
    gap: var(--tile-gap, 10px);
    margin: 10px 0;
}
.lens-grid .lens-tile {
    position: relative;
    display: block;
    aspect-ratio: var(--tile-ratio, 4 / 3);
    overflow: hidden;
    border-radius: var(--tile-radius, 5px);
    background: #e5e5e5;
}
.lens-grid .lens-tile img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform .35s ease;
}
.lens-grid .lens-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity .25s;
}
.lens-grid .lens-tile:hover img,
.lens-grid .lens-tile:focus-visible img { transform: scale(1.06); }
.lens-grid .lens-tile:hover::after,
.lens-grid .lens-tile:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .lens-grid .lens-tile img { transition: none; }
}