.gp-tabs{--gp-gap:12px; --gp-accent:#111827; --gp-overlay:rgba(0,0,0,.55); --gp-radius:12px;}
.gp-tabs__nav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px}
.gp-tabs__btn{padding:8px 12px; border:1px solid #e5e7eb; background:#fff; border-radius:9999px; cursor:pointer}
.gp-tabs__btn.is-active{background:var(--gp-accent); color:#fff; border-color:var(--gp-accent)}
.gp-tabs__panel{display:none}
.gp-tabs__panel.is-active{display:block}

/* Equal-height grid using aspect-ratio */
.gp-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gp-gap)}
.gp-item{position:relative; display:block; border-radius:var(--gp-radius); overflow:hidden; border:1px solid #e5e7eb; aspect-ratio: 4 / 3;}
.gp-item img{display:block; width:100%; height:100%; object-fit:cover}

/* Hover overlay */
.gp-item::after{
  content:'Podgląd';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; opacity:0; background:var(--gp-overlay);
  transition:opacity .2s ease;
}
.gp-item:hover::after{opacity:1}

/* Lightbox */
.gp-lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:999999; display:flex; align-items:center; justify-content:center; padding:24px}
.gp-lightbox__img{max-width:96vw; max-height:90vh; border-radius:12px}
.gp-lightbox__close{position:fixed; top:16px; right:16px; background:transparent; border:0; color:#fff; font-size:28px; cursor:pointer}
.gp-lightbox__nav{position:fixed; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:space-between; padding:24px}
.gp-lightbox__btn{pointer-events:auto; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; padding:8px 12px; border-radius:999px; cursor:pointer}
@media (max-width:640px){ .gp-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gp-gap)} }

/* Loader */
.gp-tabs.is-loading .gp-loader{display:flex}
.gp-loader{display:none; align-items:center; justify-content:center; padding:16px; margin:8px 0; background:#f9fafb; border:1px dashed #e5e7eb; border-radius:8px; font-weight:600}
.gp-loader.is-hidden{display:none}

@media (max-width: 640px){
  .gp-gallery{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 640px){
  .gp-lightbox__nav{
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    display: flex; justify-content: center; gap: 12px;
    padding: 0 12px;
  }
  .gp-lightbox__btn{min-width: 44px; line-height: 40px; padding: 0 12px; border-radius: 999px; font-weight:600}
}

/* Mobile preview button on thumbs */
.gp-item{position:relative}
.gp-item__peek{
  position:absolute; right:8px; bottom:8px;
  font-size:12px; line-height:1; padding:6px 8px;
  background:rgba(17,24,39,.85); color:#fff; border-radius:6px;
  pointer-events:none; opacity:0; transform:translateY(4px); transition:.2s;
}
/* Show as hover on desktop */
@media (min-width: 641px){
  .gp-item:hover .gp-item__peek{opacity:1; transform:none; pointer-events:none}
}
/* Always visible on mobile */
@media (max-width: 640px){
  .gp-item__peek{opacity:1; transform:none; pointer-events:none}
}

/* Modern tabs */
.gp-tabs__nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.gp-tabs__nav button{border-radius:999px; border:1px solid #e5e7eb; padding:6px 12px; background:#fff; transition:.15s}
.gp-tabs__nav button.is-active{background:#111827; color:#fff; border-color:#111827}
.gp-item{border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); transition:transform .12s}
.gp-item:hover{transform:translateY(-2px)}