/* ============================================================
   BB Filterable Gallery — Static Base CSS
   ============================================================ */

/* ─── Gallery Wrapper ────────────────────────────────────────── */

.htcm-gallery {
    position: relative;
    box-sizing: border-box;
}

/* ─── Filter Bar ─────────────────────────────────────────────── */

.htcm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--htcm-filter-spacing, 8px);
    justify-content: var(--htcm-filter-justify, flex-start);
    margin-bottom: var(--htcm-filter-margin-bottom, 20px);
}

.htcm-gallery .htcm-filters .htcm-filter-btn {
    display: inline-block;
    cursor: pointer;
    transition: background-color var(--htcm-filter-transition, 200ms) ease,
                color var(--htcm-filter-transition, 200ms) ease,
                border-color var(--htcm-filter-transition, 200ms) ease;
    line-height: 1.4;
    /* Reset any theme/BB button overrides */
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    border-radius: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    padding: 0;
    margin: 0;
    width: auto;
    outline: none;
}

.htcm-gallery .htcm-filters .htcm-filter-btn:hover,
.htcm-gallery .htcm-filters .htcm-filter-btn.active {
    box-shadow: none;
}

/* Responsive: horizontal scroll */
.htcm-filters--scroll {
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.htcm-filters--scroll::-webkit-scrollbar { display: none; }

/* Responsive: dropdown — the <select> injected by JS */
.htcm-filter-select {
    display: block;
    width: 100%;
    margin-bottom: var(--htcm-filter-margin-bottom, 20px);
    padding: 0.4em 0.6em;
    font-size: inherit;
    border: 1px solid currentColor;
    background: var(--htcm-filter-btn-bg, #fff);
    color: var(--htcm-filter-btn-text, inherit);
    cursor: pointer;
}

/* Responsive: toggle — the toggle button injected by JS */
.htcm-filter-toggle-btn {
    display: inline-block;
    cursor: pointer;
    margin-bottom: 6px;
}
.htcm-filters--toggle-hidden {
    display: none !important;
}
.htcm-filters--toggle-visible {
    display: flex !important;
    flex-direction: column;
}

/* ─── Grid ───────────────────────────────────────────────────── */

/* CSS Grid — grid-template-columns and gap set per-instance in frontend.css.php */
.htcm-grid {
    display: grid;
}

/* ─── Grid Items ─────────────────────────────────────────────── */

.htcm-item {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    aspect-ratio: var(--htcm-ratio, 1/1);
}

/* Hidden state — used by filter JS and pagination JS */
.htcm-item.htcm-hidden {
    display: none;
}

/* Inner wrapper (a or div) fills the item */
.htcm-item-inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* ─── Image ──────────────────────────────────────────────────── */

.htcm-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform var(--htcm-transition, 300ms) ease,
        filter var(--htcm-transition, 300ms) ease;
}

/* ─── Hover Effects ──────────────────────────────────────────── */

/* Zoom In */
.htcm-hover-zoom .htcm-item:hover img {
    transform: scale(1.08);
}

/* Zoom Out */
.htcm-hover-zoom-out .htcm-item img {
    transform: scale(1.08);
}
.htcm-hover-zoom-out .htcm-item:hover img {
    transform: scale(1);
}

/* Slide Up */
.htcm-hover-slide-up .htcm-item:hover img {
    transform: translateY(-5%);
}

/* Grayscale */
.htcm-hover-grayscale .htcm-item img {
    filter: grayscale(0);
}
.htcm-hover-grayscale .htcm-item:hover img {
    filter: grayscale(100%);
}

/* Blur */
.htcm-hover-blur .htcm-item:hover img {
    filter: blur(3px);
}

/* Brightness */
.htcm-hover-brightness .htcm-item:hover img {
    filter: brightness(1.2);
}

/* ─── Overlay ────────────────────────────────────────────────── */

.htcm-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--htcm-overlay-bg, rgba(0,0,0,0.4));
    transition: opacity var(--htcm-transition, 300ms) ease;
}

/* Always visible */
.htcm-overlay--always {
    opacity: 1;
    pointer-events: auto;
}

/* Hover visible */
.htcm-overlay--hover {
    opacity: 0;
    pointer-events: none;
}
.htcm-item:hover .htcm-overlay--hover {
    opacity: 1;
    pointer-events: auto;
}

/* Hidden (display:none path not needed — overlay is absent from DOM when display=none) */

/* ─── Overlay Icon ───────────────────────────────────────────── */

.htcm-overlay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--htcm-overlay-icon-size, 24px);
    height: var(--htcm-overlay-icon-size, 24px);
    color: var(--htcm-overlay-icon-color, #fff);
    font-size: var(--htcm-overlay-icon-size, 24px);
    line-height: 1;
}

.htcm-overlay-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

/* ─── Caption ────────────────────────────────────────────────── */

.htcm-caption {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--htcm-caption-bg, rgba(0,0,0,0.5));
    color: var(--htcm-caption-color, #fff);
    transition: opacity var(--htcm-transition, 300ms) ease,
                transform var(--htcm-transition, 300ms) ease;
    z-index: 2;
}

/* Position: top */
.htcm-caption--top {
    top: 0;
    bottom: auto;
}

/* Position: center */
.htcm-caption--center {
    top: 50%;
    transform: translateY(-50%);
}

/* Position: bottom */
.htcm-caption--bottom {
    bottom: 0;
    top: auto;
}

/* Always visible */
.htcm-caption--always {
    opacity: 1;
}

/* Hover visible */
.htcm-caption--hover {
    opacity: 0;
}
.htcm-item:hover .htcm-caption--hover {
    opacity: 1;
}

/* ─── Pagination ─────────────────────────────────────────────── */

.htcm-pagination {
    margin-top: 24px;
    text-align: center;
}

.htcm-load-more-btn {
    display: inline-block;
    cursor: pointer;
    padding: 10px 24px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}

.htcm-load-more-btn:hover {
    background: currentColor;
}

/* Page numbers */
.htcm-page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.htcm-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid currentColor;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s ease, color 0.2s ease;
}

.htcm-page-num.active,
.htcm-page-num:hover {
    background: currentColor;
}