/*
 * 07-hotel-gallery — gallery.css
 * Masonry grid, gallery items, hover overlay, filter tabs, GLightbox brand colours.
 * Inherits CSS custom properties from prasanthi-hotel-theme.
 * GLightbox base CSS loaded separately from CDN.
 */

:root {
    --hg-maroon  : var(--clr-maroon,   #6B1A1A);
    --hg-brown   : var(--clr-brown,    #5C3317);
    --hg-gold    : var(--clr-gold,     #C9A96E);
    --hg-cream   : var(--clr-cream,    #FAF7F2);
    --hg-stone   : var(--clr-stone,    #E8E0D5);
    --hg-ink     : var(--clr-ink,      #1A1208);
    --hg-muted   : var(--clr-muted,    #7A6E62);
    --hg-white   : #FFFFFF;
    --hg-font-b  : var(--font-body,    system-ui, sans-serif);
    --hg-font-d  : var(--font-display, 'Georgia', serif);
    --hg-ease    : var(--ease-out,     cubic-bezier(0.16,1,0.3,1));
    --hg-gap     : 10px;
}

/* ── Filter tabs ─────────────────────────────────────────────── */
.hotel-gallery-filters {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 6px;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--hg-stone);
    padding-bottom: 1rem;
}

.hotel-gallery-filter {
    display       : inline-flex;
    align-items   : center;
    gap           : 6px;
    padding       : .4rem 1rem;
    font-family   : var(--hg-font-b);
    font-size     : .72rem;
    font-weight   : 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color         : var(--hg-muted);
    background    : transparent;
    border        : 1px solid var(--hg-stone);
    border-radius : 2px;
    cursor        : pointer;
    transition    : all 220ms var(--hg-ease);
    white-space   : nowrap;
}

.hotel-gallery-filter:hover {
    color       : var(--hg-maroon);
    border-color: var(--hg-maroon);
    background  : rgba(107,26,26,.06);
}

.hotel-gallery-filter.is-active {
    background  : var(--hg-maroon);
    color       : var(--hg-white);
    border-color: var(--hg-maroon);
}

.hotel-gallery-filter__count {
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    width         : 18px;
    height        : 18px;
    background    : rgba(255,255,255,.25);
    border-radius : 50%;
    font-size     : .65rem;
    line-height   : 1;
}

.hotel-gallery-filter:not(.is-active) .hotel-gallery-filter__count {
    background: rgba(107,26,26,.12);
    color     : var(--hg-maroon);
}

/* ── Masonry grid ────────────────────────────────────────────── */
.hotel-gallery-grid {
    /* Masonry JS controls layout; we set gutter via padding on items */
    position: relative;
}

/* Column sizer: tells Masonry the base column width */
.hotel-gallery-grid__sizer,
.hotel-gallery-item { padding: calc(var(--hg-gap) / 2); }

.hotel-gallery-grid.hotel-gallery-cols-2 .hotel-gallery-grid__sizer,
.hotel-gallery-grid.hotel-gallery-cols-2 .hotel-gallery-item { width: 50%; }

.hotel-gallery-grid.hotel-gallery-cols-3 .hotel-gallery-grid__sizer,
.hotel-gallery-grid.hotel-gallery-cols-3 .hotel-gallery-item { width: 33.3333%; }

.hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-grid__sizer,
.hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-item { width: 25%; }

/* ── Gallery item ────────────────────────────────────────────── */
.hotel-gallery-item { display: block; }

.hotel-gallery-item__link {
    display       : block;
    position      : relative;
    overflow      : hidden;
    border-radius : 3px;
    cursor        : pointer;
    text-decoration: none;
    /* Removed fixed aspect-ratio — let Masonry handle natural heights */
}

.hotel-gallery-item__img {
    display    : block;
    width      : 100%;
    height     : auto;
    object-fit : cover;
    transition : transform 700ms var(--hg-ease);
}

.hotel-gallery-item__link:hover .hotel-gallery-item__img {
    transform: scale(1.05);
}

/* ── Hover overlay ───────────────────────────────────────────── */
.hotel-gallery-item__overlay {
    position   : absolute;
    inset      : 0;
    background : linear-gradient(
        to bottom,
        rgba(107,26,26,.02) 0%,
        rgba(26,18,8,.72)   100%
    );
    opacity    : 0;
    transition : opacity 350ms var(--hg-ease);
    display    : flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap        : 8px;
    padding    : 1rem;
}

.hotel-gallery-item__link:hover .hotel-gallery-item__overlay { opacity: 1; }

/* Zoom icon */
.hotel-gallery-item__zoom svg,
.hotel-gallery-item__play svg {
    width       : 36px;
    height      : 36px;
    stroke      : var(--hg-white);
    transition  : transform 300ms var(--hg-ease);
}

.hotel-gallery-item__link:hover .hotel-gallery-item__zoom svg,
.hotel-gallery-item__link:hover .hotel-gallery-item__play svg {
    transform: scale(1.15);
}

.hotel-gallery-item__play svg {
    fill  : var(--hg-white);
    stroke: none;
}

/* Caption */
.hotel-gallery-item__caption {
    font-family   : var(--hg-font-b);
    font-size     : .8rem;
    color         : rgba(255,255,255,.9);
    text-align    : center;
    line-height   : 1.4;
    max-width     : 90%;
}

/* Tag badge */
.hotel-gallery-item__tag-badge {
    position      : absolute;
    bottom        : .6rem;
    left          : .6rem;
    font-family   : var(--hg-font-b);
    font-size     : .62rem;
    font-weight   : 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color         : var(--hg-white);
    background    : rgba(107,26,26,.75);
    padding       : .15rem .5rem;
    border-radius : 2px;
    backdrop-filter: blur(4px);
}

/* ── Empty state ─────────────────────────────────────────────── */
.hotel-gallery-empty {
    text-align : center;
    color      : var(--hg-muted);
    font-style : italic;
    padding    : 3rem;
}

/* ── Admin column badge ──────────────────────────────────────── */
.hotel-gal-tag-badge {
    display       : inline-block;
    background    : rgba(107,26,26,.08);
    color         : var(--hg-maroon);
    border        : 1px solid rgba(107,26,26,.2);
    padding       : 2px 8px;
    border-radius : 2px;
    font-size     : 11px;
    font-weight   : 600;
    letter-spacing: .05em;
}

/* ── GLightbox brand override ────────────────────────────────── */
.glightbox-container .gprev,
.glightbox-container .gnext {
    background: var(--hg-maroon) !important;
}
.glightbox-container .gprev:hover,
.glightbox-container .gnext:hover {
    background: #4A1010 !important;
}
.glightbox-container .gclose {
    background: var(--hg-maroon) !important;
}
.glightbox-container .gclose svg path { fill: var(--hg-white) !important; }

/* Caption in lightbox */
.glightbox-container .gslide-description .gdesc-inner {
    background  : rgba(26,18,8,.88);
    color       : var(--hg-white);
    font-family : var(--hg-font-d);
    font-style  : italic;
    font-size   : .95rem;
    padding     : .75rem 1.25rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-grid__sizer,
    .hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-item { width: 33.3333%; }
}

@media (max-width: 768px) {
    .hotel-gallery-grid.hotel-gallery-cols-3 .hotel-gallery-grid__sizer,
    .hotel-gallery-grid.hotel-gallery-cols-3 .hotel-gallery-item { width: 50%; }

    .hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-grid__sizer,
    .hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-item { width: 50%; }

    .hotel-gallery-filter { padding: .35rem .75rem; }
}

@media (max-width: 480px) {
    .hotel-gallery-grid.hotel-gallery-cols-2 .hotel-gallery-grid__sizer,
    .hotel-gallery-grid.hotel-gallery-cols-2 .hotel-gallery-item,
    .hotel-gallery-grid.hotel-gallery-cols-3 .hotel-gallery-grid__sizer,
    .hotel-gallery-grid.hotel-gallery-cols-3 .hotel-gallery-item,
    .hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-grid__sizer,
    .hotel-gallery-grid.hotel-gallery-cols-4 .hotel-gallery-item { width: 100%; }

    :root { --hg-gap: 6px; }
}