/* Klub Pictures — /galeria-zdjec/: sala z pinezkami 1–5 jako spis treści, pod nią zestawy zdjęć w równych rzędach (bez kadrowania). */

/* ===== 1. Sala ===== */
.ghall { padding-top: calc(var(--hdr) + clamp(28px, 4vw, 56px)); }
.ghall__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 16px; align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.ghall__head > div { grid-column: 1 / span 6; display: grid; gap: 14px; }
.ghall__head .lead { grid-column: 8 / span 5; }
.ghall__room { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-line), 0 30px 80px rgba(0, 0, 0, .45); }
.ghall__room img { width: 100%; height: auto; }
/* na szerszym ekranie pasek sali 2,2 : 1 (bez podłogi), pinezki przeliczone na ten kadr: widać 68% wysokości, od 12,7% */
@media (min-width: 760px) {
  .ghall__room img { aspect-ratio: 2.2; object-fit: cover; object-position: 50% 40%; }
  .gtag { top: calc((var(--y) - 12.7%) / .682); }
}
.ghall__room::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 40% 45%, rgba(6, 8, 10, 0) 40%, rgba(6, 8, 10, .45) 100%); }
.gtag { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 10px; transform: translate(-17px, -50%); text-decoration: none; color: #fff; }
.gtag b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 13px var(--f-mono); color: var(--c-bg); background: var(--c-lamp);
  box-shadow: 0 0 0 6px rgba(243, 198, 126, .22), 0 0 30px rgba(243, 198, 126, .6); transition: transform .25s var(--ease); }
.gtag span { display: grid; padding: 7px 12px 8px; border-radius: 12px; font-size: .875rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
  background: rgba(6, 8, 10, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.gtag em { font: normal 11px var(--f-mono); letter-spacing: .04em; color: var(--c-lamp); }
.gtag:hover b, .gtag:focus-visible b { transform: scale(1.12); }
.gtag:focus-visible { outline: none; }
.gtag:focus-visible span { box-shadow: inset 0 0 0 2px var(--c-lamp); }

.glegend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.glegend a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 9px; border-radius: 999px; text-decoration: none; font-size: .875rem; color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-line-2); transition: background-color .2s; }
.glegend a:hover { background: var(--c-surface-2); }
.glegend .num { margin: 0; }
.glegend .num--ghost { background: transparent; color: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line-2); }
.glegend b { font-weight: 500; }
.glegend em { font: normal 12px var(--f-mono); color: var(--c-ink-3); }

/* ===== 2. Zestawy: rzędy wyrównane do szerokości, każde zdjęcie w swoich proporcjach ===== */
.gset { padding-block: clamp(56px, 7vw, 104px) 0; scroll-margin-top: 72px; }
.gset + .faq { margin-top: clamp(40px, 5vw, 72px); }
.gset__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 10px; align-items: end; }
.gset__head .h2 { grid-column: 1 / span 6; display: flex; align-items: center; gap: 14px; }
.gset__head .h2 .num { width: 34px; height: 34px; margin: 0; font-size: 13px; flex: none; }
.gset__head .body { grid-column: 8 / span 5; }
.gset__head .more { margin-left: 4px; }
.ggrid { --rh: clamp(180px, 19vw, 280px); display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.4vw, 32px); }
.ggrid--3::after { content: ""; flex: 999 1 0; } /* ostatni rząd nie rozciąga się na siłę */
.gfig { position: relative; margin: 0; flex: var(--ar) 1 calc(var(--ar) * var(--rh)); border-radius: 14px; overflow: hidden; background: var(--c-surface); }
.ggrid--1 .gfig { flex: 0 1 min(100%, 880px); }
.gfig button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gfig img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
.gfig:hover img { transform: scale(1.03); }
.gfig figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 9px; font-size: .8125rem; line-height: 1.35; color: #fff;
  background: rgba(6, 8, 10, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.gfig--todo { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: var(--ar); padding: 20px; max-width: 420px;
  background: linear-gradient(160deg, #1A2224, #0D1112); box-shadow: inset 0 0 0 1px var(--c-line); font-size: .875rem; color: var(--c-ink-2); }
.gfig--todo b { font-size: 1.0625rem; font-weight: 500; color: var(--c-ink); }
.gfig--todo em { align-self: flex-start; margin-top: 8px; padding: 5px 8px; border: 1px dashed rgba(243, 198, 126, .5); border-radius: 8px;
  font: normal 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-lamp); }

/* ===== Tablet: na sali same numery, opis w legendzie ===== */
@media (max-width: 1079px) {
  .gtag span { display: none; }
  .ghall__head > div, .ghall__head .lead, .gset__head .h2, .gset__head .body { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .ghall { padding-top: calc(var(--hdr) + 20px); }
  .ghall__room { border-radius: 16px; }
  .gtag { transform: translate(-14px, -50%); }
  .gtag b { width: 28px; height: 28px; font-size: 12px; box-shadow: 0 0 0 4px rgba(243, 198, 126, .22), 0 0 20px rgba(243, 198, 126, .55); }
  .glegend a { height: 36px; font-size: .8125rem; }
  .ggrid { --rh: 150px; gap: 8px; }
  .gfig { border-radius: 12px; }
  .gfig figcaption { left: 8px; bottom: 8px; font-size: .75rem; }
}