/* JP2 Gallery front styles (revamp) */

/* JP2G Filter — improved */
.jp2g-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem;justify-content:flex-start;align-items:center;--jp2g-filter-base-color:inherit;--jp2g-filter-base-bg:#f2f2f2;--jp2g-filter-hover-color:inherit;--jp2g-filter-hover-bg:#e7e7e7;--jp2g-filter-active-color:#fff;--jp2g-filter-active-bg:#111;--jp2g-filter-underline-color:currentColor;--jp2g-filter-underline-thickness:2px;--jp2g-filter-underline-color-hover:currentColor;--jp2g-filter-underline-thickness-hover:var(--jp2g-filter-underline-thickness);--jp2g-filter-active-underline-color:currentColor;--jp2g-filter-active-underline-thickness:var(--jp2g-filter-underline-thickness)}
.jp2g-filter[data-align="center"]{justify-content:center}
.jp2g-filter[data-align="flex-end"]{justify-content:flex-end}
.jp2g-filter[data-upper="1"] button{text-transform:uppercase;letter-spacing:.02em}
.jp2g-filter[data-mobile-scroll="1"]{flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.jp2g-filter[data-mobile-scroll="1"]::-webkit-scrollbar{height:6px}
.jp2g-filter[data-mobile-scroll="1"]::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px}

.jp2g-filter button{border:0;padding:.5rem .75rem;border-radius:var(--jp2g-filter-radius,.5rem);cursor:pointer;transition:all .18s ease}
.jp2g-filter[data-style="pills"] button{background:var(--jp2g-filter-base-bg,#f2f2f2)}
.jp2g-filter[data-style="pills"] button.is-active{background:var(--jp2g-filter-active-bg,#111);color:var(--jp2g-filter-active-color,#fff)}

.jp2g-filter[data-style="underline"] button{background:transparent;border-radius:0;position:relative}
.jp2g-filter[data-style="underline"] button::after{content:"";display:block;height:var(--jp2g-filter-underline-thickness);background:var(--jp2g-filter-underline-color);transform:scaleX(0);transition:transform .18s ease;margin-top:.25rem}
.jp2g-filter[data-style="underline"] button.is-active::after{transform:scaleX(1)}

.jp2g-filter[data-style="ghost"] button{background:transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.jp2g-filter[data-style="ghost"] button.is-active{box-shadow:inset 0 0 0 2px #111}

.jp2g-filter .jp2g-reset{margin-left:auto;border:0;background:transparent;opacity:.7}


.jp2g-wrap{
  --jp2g-gap:12px;
  --jp2g-cols-d:4;
  --jp2g-cols-t:3;
  --jp2g-cols-m:2;
  --jp2g-ratio:auto;
  --jp2g-row-h:220px;
  display:grid;
  grid-template-columns:repeat(var(--jp2g-cols-d), minmax(0,1fr));
  gap:var(--jp2g-gap);
}
@media (max-width: 1024px){
  .jp2g-wrap{ grid-template-columns:repeat(var(--jp2g-cols-t), minmax(0,1fr)); }
}
@media (max-width: 767px){
  .jp2g-wrap{ grid-template-columns:repeat(var(--jp2g-cols-m), minmax(0,1fr)); }
}

.jp2g-wrap[data-layout="grid"] .jp2g-item{
  display:block; position:relative; overflow:hidden; border-radius:var(--jp2g-radius, .5rem);
  aspect-ratio: var(--jp2g-ratio);
}
.jp2g-wrap[data-layout="grid"] .jp2g-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Masonry via CSS columns fallback (progressive) */
.jp2g-wrap[data-layout="masonry"]{ column-gap: var(--jp2g-gap); }
.jp2g-wrap[data-layout="masonry"]{ display:block; }
.jp2g-wrap[data-layout="masonry"] .jp2g-item{ break-inside: avoid; display:block; margin:0 0 var(--jp2g-gap); border-radius:var(--jp2g-radius, .5rem); overflow:hidden; }
.jp2g-wrap[data-layout="masonry"] .jp2g-img{ width:100%; height:auto; display:block; }
@media (min-width: 1025px){ .jp2g-wrap[data-layout="masonry"]{ column-count: var(--jp2g-cols-d); } }
@media (max-width: 1024px){ .jp2g-wrap[data-layout="masonry"]{ column-count: var(--jp2g-cols-t); } }
@media (max-width: 767px){ .jp2g-wrap[data-layout="masonry"]{ column-count: var(--jp2g-cols-m); } }

/* Justified layout — heights computed by JS; we keep a minimal default */
.jp2g-wrap[data-layout="justified"]{ display:block; }
.jp2g-wrap[data-layout="justified"] .jp2g-row{ display:flex; gap:var(--jp2g-gap); margin:0 0 var(--jp2g-gap); }
.jp2g-wrap[data-layout="justified"] .jp2g-item{ display:block; position:relative; overflow:hidden; border-radius:var(--jp2g-radius, .5rem); }
.jp2g-wrap[data-layout="justified"] .jp2g-img{ width:100%; height:100%; object-fit:cover; display:block; }

.jp2g-cap{
  position:absolute; left:.5rem; bottom:.5rem; right:.5rem;
  background:rgba(0,0,0,.45); color:#fff; padding:.25rem .5rem;
  border-radius:.375rem; font-size:.85rem; line-height:1.2;
}

.jp2g-actions{ display:flex; justify-content:center; margin:1rem 0 0; }
.jp2g-actions .jp2g-more{ border:0; background:#111; color:#fff; padding:.65rem 1rem; border-radius:.5rem; cursor:pointer }

/* base text color */
.jp2g-filter button{color:var(--jp2g-filter-base-color)}
.jp2g-filter button:hover{color:var(--jp2g-filter-hover-color)}
.jp2g-filter[data-style="pills"] button:hover{background:var(--jp2g-filter-hover-bg,#e7e7e7)}
.jp2g-filter[data-style="ghost"] button:hover{background:var(--jp2g-filter-hover-bg,transparent)}
.jp2g-filter[data-style="underline"] button:hover::after{background:var(--jp2g-filter-underline-color-hover);height:var(--jp2g-filter-underline-thickness-hover)}
/* Load More button */
.jp2g-more-wrap{display:flex;justify-content:center;margin:1rem 0}
.jp2g-more-wrap.is-full .jp2g-more{width:100%}
.jp2g-more{background:#f2f2f2;color:#111;border:0;border-radius:.5rem;padding:.75rem 1.25rem;cursor:pointer;transition:all .18s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.jp2g-more:hover{background:#e7e7e7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}