/* ==========================================================================
   Gallery Component — Standalone CSS
   --------------------------------------------------------------------------
   Hoàn toàn độc lập với theme. Dùng chung cho mọi giao diện.
   - All selectors scoped trong `.anp-gallery` wrapper để tránh collision
   - CSS custom properties (--gal-*) cho phép tùy biến từ ngoài
   - Click ảnh → FancyBox 5 lightbox (data-fancybox attribute trên anchor)
     FancyBox CSS+JS load riêng (xem README), KHÔNG bundle trong file này.
   ========================================================================== */

.anp-gallery {
    /* Tokens — override các biến này bên ngoài để fit theme khác */
    --gal-accent: #c5a572;            /* gold default */
    --gal-overlay-from: rgba(20, 30, 60, 0.4);
    --gal-overlay-to: rgba(197, 165, 114, 0.5);
    --gal-row-height: 220px;
    --gal-cols: 3;
    --gal-gap: 18px;
    --gal-radius: 0;
    --gal-icon-color: #fff;
    --gal-icon-font: Georgia, "Playfair Display", "Times New Roman", serif;
    --gal-icon-size: 3rem;
    --gal-shine: rgba(255, 255, 255, 0.55);

    box-sizing: border-box;
}
.anp-gallery *, .anp-gallery *::before, .anp-gallery *::after { box-sizing: border-box; }

/* ---- Grid ---- */
.anp-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--gal-cols), 1fr);
    grid-auto-rows: var(--gal-row-height);
    gap: var(--gal-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Item (anchor) ---- */
.anp-gallery .gal {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--gal-radius);
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: zoom-in;
}

/* Image fill + zoom on hover */
.anp-gallery .gal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s ease;
}
.anp-gallery .gal:hover img {
    transform: scale(1.1);
    filter: brightness(1.05);
}

/* Shine sweep */
.anp-gallery .gal::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(110deg,
        transparent 0%, transparent 30%,
        var(--gal-shine) 50%,
        transparent 70%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 3;
    transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.anp-gallery .gal:hover::before { left: 125%; }

/* Gradient overlay + "+" zoom icon */
.anp-gallery .gal::after {
    content: "+";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gal-overlay-from), var(--gal-overlay-to));
    color: var(--gal-icon-color);
    font-family: var(--gal-icon-font);
    font-size: var(--gal-icon-size);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
    pointer-events: none;
}
.anp-gallery .gal:hover::after { opacity: 1; }

/* Span variants — tạo masonry effect */
.anp-gallery .gal.tall { grid-row: span 2; }
.anp-gallery .gal.wide { grid-column: span 2; }
.anp-gallery .gal.tall.wide { grid-row: span 2; grid-column: span 2; }

/* ---- Optional caption (figcaption hoặc data-caption pulled by FancyBox) ---- */
.anp-gallery .gal-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px 16px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    /* Serif italic — match heading style của theme (Playfair Display / Georgia) */
    font-family: var(--gal-icon-font);
    font-style: italic;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 4;
    pointer-events: none;
}
.anp-gallery .gal:hover .gal-caption {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .anp-gallery { --gal-cols: 2; --gal-row-height: 200px; }
}
@media (max-width: 600px) {
    .anp-gallery {
        --gal-cols: 1;
        --gal-row-height: 220px;
        --gal-gap: 12px;
    }
    .anp-gallery .gal.tall,
    .anp-gallery .gal.wide,
    .anp-gallery .gal.tall.wide {
        grid-row: span 1;
        grid-column: span 1;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .anp-gallery *, .anp-gallery *::before, .anp-gallery *::after {
        transition-duration: 0.01ms !important;
    }
    .anp-gallery .gal:hover img { transform: none; }
}