/* ============================================================
   JC Masonry Gallery — Frontend Styles
   ============================================================ */

:root {
    --jcg-c-primary:   #053300;
    --jcg-c-secondary: #55892e;
    --jcg-c-white:     #ffffff;
    --jcg-c-shadow:    rgba(5, 51, 0, 0.18);
}

/* ---- Wrapper ---- */
.jcg-gallery-wrap { width: 100%; }

/* ================================================================
   FILTER BUTTONS
   ================================================================ */
.jcg-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.jcg-align-left   { justify-content: flex-start; }
.jcg-align-center { justify-content: center; }
.jcg-align-right  { justify-content: flex-end; }

/* Base button */
.jcg-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .3px;
    border: 2px solid var(--jcg-c-primary);
    background: transparent;
    color: var(--jcg-c-primary);
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s, transform .15s, box-shadow .25s;
    user-select: none;
    white-space: nowrap;
}

/* Pills */
.jcg-filters--pills .jcg-filter-btn { border-radius: 50px; }

/* Square */
.jcg-filters--square .jcg-filter-btn { border-radius: 6px; }

/* Underline */
.jcg-filters--underline .jcg-filter-btn {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 9px 16px 7px;
    background: transparent;
}
.jcg-filters--underline .jcg-filter-btn:hover,
.jcg-filters--underline .jcg-filter-btn.is-checked {
    border-bottom-color: var(--jcg-c-secondary);
    background: transparent !important;
    color: var(--jcg-c-secondary) !important;
}

/* Hover & active */
.jcg-filter-btn:hover {
    background: var(--jcg-c-primary);
    color: var(--jcg-c-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--jcg-c-shadow);
}

.jcg-filter-btn.is-checked {
    background: var(--jcg-c-secondary);
    border-color: var(--jcg-c-secondary);
    color: var(--jcg-c-white);
    box-shadow: 0 4px 14px rgba(85, 137, 46, .35);
}

.jcg-filter-btn.is-checked:hover { background: #437020; border-color: #437020; }

/* Count badge */
.jcg-filter-btn .jcg-count {
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: .75rem;
}
.jcg-filter-btn:not(.is-checked) .jcg-count {
    background: rgba(5,51,0,.08);
}

/* ================================================================
   GRID
   ================================================================ */
.jcg-grid {
    position: relative;
    /* gap é controlado via inline var --jcg-gap */
}

.jcg-item {
    width: calc(
        (100% - (var(--jcg-cols) - 1) * var(--jcg-gap))
        / var(--jcg-cols)
    );
    margin-bottom: var(--jcg-gap);
    /* Isotope trata do posicionamento */
}

.jcg-gutter-sizer { width: var(--jcg-gap); }

/* ================================================================
   GRID UNIFORME (fitRows): altura igual em todas as fotos — 3:2 por defeito.
   Usa padding-bottom trick (imune a theme overrides).
   O container height:0 + padding-bottom:X% cria a altura proporcional
   à largura; filhos ficam position:absolute a preencher.
   ================================================================ */
.jcg-gallery-wrap[data-layout="fitRows"] .jcg-item-inner {
    overflow: hidden;
    height: 0;
    padding-bottom: 66.667%; /* 3:2 default */
}

/* ================================================================
   PROPORÇÃO EXPLÍCITA (grid_ratio) — funciona em masonry e fitRows.
   Vem depois → especificidade igual mas posição posterior → sobrepõe.
   ================================================================ */
.jcg-grid[data-ratio] .jcg-item-inner {
    overflow: hidden;
    height: 0;
}
.jcg-grid[data-ratio="square"] .jcg-item-inner { padding-bottom: 100%; }
.jcg-grid[data-ratio="4-3"]    .jcg-item-inner { padding-bottom: 75%; }
.jcg-grid[data-ratio="3-2"]    .jcg-item-inner { padding-bottom: 66.667%; }
.jcg-grid[data-ratio="16-9"]   .jcg-item-inner { padding-bottom: 56.25%; }

/* Imagem em cover: fitRows (sempre) + qualquer layout com ratio explícito */
.jcg-gallery-wrap[data-layout="fitRows"] .jcg-img,
.jcg-grid[data-ratio] .jcg-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
}

/* ================================================================
   ITEM INNER
   ================================================================ */
.jcg-item-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--jcg-radius);
    display: block;
    background: #e8f0e0;
    box-shadow: 0 2px 10px rgba(5,51,0,.08);
    transition: box-shadow .3s, transform .3s;
}
.jcg-item-inner:hover { box-shadow: 0 8px 28px rgba(5,51,0,.20); }

/* Image */
.jcg-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}

/* ================================================================
   HOVER EFFECTS
   ================================================================ */

/* Zoom */
.jcg-item-inner.hover-zoom:hover .jcg-img,
.jcg-item-inner.hover-zoom_overlay:hover .jcg-img {
    transform: scale(1.07);
}

/* Overlay */
.jcg-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 51, 0, 0.70);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .35s ease;
    border-radius: var(--jcg-radius);
}

.jcg-item-inner.hover-overlay:hover .jcg-item-overlay,
.jcg-item-inner.hover-zoom_overlay:hover .jcg-item-overlay {
    opacity: 1;
}

/* Icon inside overlay */
.jcg-item-icon {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 50%;
    transition: background .25s, border-color .25s, transform .25s;
    text-decoration: none;
}
.jcg-item-icon:hover {
    background: var(--jcg-c-secondary);
    border-color: var(--jcg-c-secondary);
    transform: scale(1.1);
    color: #fff;
}

/* Caption */
.jcg-item-caption {
    color: rgba(255,255,255,.9);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .4px;
    text-align: center;
    padding: 0 12px;
}

/* ================================================================
   ISOTOPE ANIMATION
   Não colocar transition CSS no .jcg-item — o Isotope gere via
   inline style. CSS transition aqui conflitua e causa o salto.
   ================================================================ */

/* ================================================================
   LIGHTBOX
   ================================================================ */
.jcg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s;
}

.jcg-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}

.jcg-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 20, 2, 0.92);
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.jcg-lightbox-container {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jcg-lightbox-img-wrap {
    max-width: 90vw;
    max-height: 82vh;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    background: #111;
}

.jcg-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    transition: opacity .3s;
}

.jcg-lightbox-caption {
    color: rgba(255,255,255,.75);
    font-size: .88rem;
    margin-top: 14px;
    text-align: center;
    letter-spacing: .3px;
}

/* Lightbox buttons */
.jcg-lightbox-close,
.jcg-lightbox-prev,
.jcg-lightbox-next {
    position: absolute;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
    transition: background .2s, transform .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    backdrop-filter: blur(6px);
}

.jcg-lightbox-close {
    top: -50px; right: 0;
    width: 42px; height: 42px;
    font-size: 1.6rem;
    line-height: 1;
}
.jcg-lightbox-close:hover { background: var(--jcg-c-secondary); transform: rotate(90deg); }

.jcg-lightbox-prev,
.jcg-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 50px; height: 50px;
    font-size: 2rem;
    line-height: 1;
}
.jcg-lightbox-prev { left: -64px; }
.jcg-lightbox-next { right: -64px; }
.jcg-lightbox-prev:hover,
.jcg-lightbox-next:hover {
    background: var(--jcg-c-secondary);
    transform: translateY(-50%) scale(1.08);
}

/* ================================================================
   PAGINATION
   ================================================================ */
.jcg-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
}

.jcg-pagination.jcg-align-left   { justify-content: flex-start; }
.jcg-pagination.jcg-align-center { justify-content: center; }
.jcg-pagination.jcg-align-right  { justify-content: flex-end; }

.jcg-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: .88rem;
    font-weight: 600;
    border: 2px solid var(--jcg-c-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--jcg-c-primary);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    user-select: none;
    line-height: 1;
}

.jcg-page-btn:hover:not([disabled]) {
    background: var(--jcg-c-primary);
    color: var(--jcg-c-white);
    transform: translateY(-1px);
}

.jcg-page-btn.is-active {
    background: var(--jcg-c-secondary);
    border-color: var(--jcg-c-secondary);
    color: var(--jcg-c-white);
    cursor: default;
}

.jcg-page-btn[disabled] {
    opacity: .35;
    cursor: default;
}

.jcg-page-btn.jcg-page-prev,
.jcg-page-btn.jcg-page-next {
    font-size: 1.4rem;
    font-weight: 400;
    padding: 0 8px;
}

.jcg-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 38px;
    color: var(--jcg-c-primary);
    font-size: .9rem;
    opacity: .6;
    user-select: none;
}

/* ================================================================
   NO RESULTS
   ================================================================ */
.jcg-no-results {
    text-align: center;
    color: #999;
    padding: 40px;
    font-size: .95rem;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .jcg-item {
        width: calc(
            (100% - (var(--jcg-cols-tablet, 2) - 1) * var(--jcg-gap))
            / var(--jcg-cols-tablet, 2)
        );
    }
}

@media (max-width: 767px) {
    .jcg-item {
        width: calc(
            (100% - (var(--jcg-cols-mobile, 1) - 1) * var(--jcg-gap))
            / var(--jcg-cols-mobile, 1)
        );
    }
    .jcg-lightbox-prev { left: -44px; }
    .jcg-lightbox-next { right: -44px; }
}