/* Klub Pictures — podstrona /cennik/. Ten sam system co strona główna (style.css): tokeny, typografia, przyciski. */

/* ===== 1. Ceny na mapie sali ===== */
.chero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1120px; overflow: hidden; background: var(--c-bg); color: #fff; }
.chero__shot { position: absolute; inset: 0; overflow: hidden; background: var(--c-bg); }
.cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cam img { width: 100%; height: 100%; object-fit: cover; }
.chero__shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to bottom, rgba(6, 8, 10, .62) 0%, rgba(6, 8, 10, 0) 16%),
  linear-gradient(to top, var(--c-bg) 0%, rgba(6, 8, 10, .9) 24%, rgba(6, 8, 10, .45) 46%, rgba(6, 8, 10, 0) 64%),
  linear-gradient(to right, rgba(6, 8, 10, .55) 0%, rgba(6, 8, 10, 0) 48%); }
.chero__panel { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(40px, 7vh, 88px); z-index: 2; }
.chero__panel > * { max-width: 600px; }
.chero__panel .lead { margin-top: 18px; color: rgba(255, 255, 255, .8); }

/* Etykiety przy pinezkach: nie skalują się razem z kamerą (--inv) */
.tag { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; transform: scale(var(--inv, 1)); }
.tag__pin { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; 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); }
.tag__lbl { position: absolute; display: grid; gap: 3px; padding: 9px 13px 10px; border-radius: 12px; white-space: nowrap; font-size: .875rem; font-weight: 500; line-height: 1.2; color: #fff; 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, .14), 0 10px 30px -10px rgba(0, 0, 0, .6); }
.tag__lbl em { font: normal 500 15px var(--f-mono); color: var(--c-lamp); letter-spacing: -.01em; }
.tag--r .tag__lbl { left: 28px; top: 0; transform: translateY(-50%); }
.tag--l .tag__lbl { right: 28px; top: 0; transform: translateY(-50%); }
.tag--t .tag__lbl { bottom: 28px; left: 0; transform: translateX(-50%); }
.tag--b .tag__lbl { top: 28px; left: 0; transform: translateX(-50%); }
.js .tag__pin, .js .tag__lbl { opacity: 0; }
.js .chero.is-in .tag__pin { animation: tagPin .7s var(--ease) both; animation-delay: calc(.25s + var(--d) * .12s); }
.js .chero.is-in .tag__lbl { animation: tagLbl .7s var(--ease) both; animation-delay: calc(.38s + var(--d) * .12s); }
@keyframes tagPin { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes tagLbl { from { opacity: 0; } to { opacity: 1; } }
.chero.is-short .tag--t .tag__lbl, .chero.is-short .tag--b .tag__lbl { left: 28px; right: auto; top: 0; bottom: auto; transform: translateY(-50%); }
.chero.is-portrait .tag--b .tag__lbl { left: 28px; top: 0; transform: translateY(-50%); }
.chero.is-portrait .tag--l .tag__lbl { right: auto; left: -18px; top: 28px; transform: none; }
.chero.is-portrait .cam img { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.plegend { display: none; }

/* ===== 2. Podział stołu na osoby ===== */
.split { display: flex; gap: 4px; height: 46px; margin-top: 14px; }
.split i { flex: 1 1 0; min-width: 0; display: grid; place-items: center; overflow: hidden; white-space: nowrap; border-radius: 10px; font: normal 500 12px var(--f-mono); color: var(--c-lamp); background: rgba(243, 198, 126, .1); box-shadow: inset 0 0 0 1px rgba(243, 198, 126, .32); }
.split i.is-new { animation: segIn .45s var(--ease) both; }
.split.is-tight i { font-size: 0; }
@keyframes segIn { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: none; } }

/* ===== 3. Poza kartą ===== */
.cprice { padding-top: 0; }

/* ===== 4. Karta ===== */
.karta { padding-top: 0; }
.karta__head { display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px); }
.karta__head > div:first-child { display: grid; gap: 16px; }
.karta__tools { display: flex; gap: 10px; align-items: center; }
.ksearch { display: flex; align-items: center; gap: 10px; width: 340px; max-width: 100%; height: 44px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line-2); transition: box-shadow .2s; }
.ksearch:focus-within { box-shadow: inset 0 0 0 1px var(--c-ink); }
.ksearch .ico { width: 17px; height: 17px; flex: none; color: var(--c-ink-2); }
.ksearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--c-ink); font: inherit; font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none; }
.ksearch input::placeholder { color: var(--c-ink-3); }
.ksearch input::-webkit-search-cancel-button { display: none; }
.ksearch__x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--c-surface-3); display: grid; place-items: center; cursor: pointer; }
.ksearch__x svg { width: 14px; height: 14px; stroke: var(--c-ink); stroke-width: 1.8; fill: none; }

.karta__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
/* Legenda jak na mapie: działy i liczba pozycji, podświetlony dział, który właśnie czytasz */
.kleg { grid-column: 1 / span 3; position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 2px; }
.kleg a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: .9375rem; color: var(--c-ink-2); transition: background-color .2s, color .2s, opacity .2s; }
.kleg a em { font: normal 12px var(--f-mono); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.kleg a:hover { color: var(--c-ink); background: var(--c-surface); }
.kleg a[aria-current="true"] { color: var(--c-ink); background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); }
.kleg a[aria-current="true"] em { color: var(--c-lamp); }
.kleg a.is-empty { opacity: .3; pointer-events: none; }
.karta__list { grid-column: 4 / span 9; }
.kgrp { margin-bottom: clamp(48px, 5vw, 72px); scroll-margin-top: calc(var(--hdr) + 24px); }
.kgrp__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-2); }
.kgrp__h { font-size: 1.5rem; font-weight: 500; letter-spacing: -.022em; line-height: 1.2; }
.kgrp__n { font: 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); }
.kcat { margin-top: 26px; }
.kgrp__head + .kcat { margin-top: 14px; }
.kgrp__head + .kcat:has(.kcat__h) { margin-top: 26px; }
.kcat__h { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-lamp); }
.kcat__note { margin-top: 6px; font-size: .875rem; color: var(--c-ink-2); }
.kcat__todo { display: inline-block; margin-top: 8px; padding: 5px 9px; border-radius: 8px; border: 1px dashed rgba(243, 198, 126, .5); font: 11px var(--f-mono); color: var(--c-lamp); }
.klist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; margin-top: 4px; }
.klist--sizes { grid-template-columns: 1fr; }
.kit { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 13px; border-bottom: 1px solid var(--c-line); }
.kit__n { min-width: 0; font-size: 1rem; color: var(--c-ink); }
.kit__n small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--c-ink-3); }
.kit__p { flex: none; display: flex; gap: 18px; }
.kit__v { font: 500 .9375rem var(--f-mono); color: var(--c-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit__v i { margin-right: 7px; font-style: normal; font-weight: 400; font-size: .75rem; color: var(--c-ink-3); }
.klist--sizes .kit__v { min-width: 104px; text-align: right; }
.kempty { padding: 28px 0; color: var(--c-ink-2); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.kempty b { color: var(--c-ink); font-weight: 500; }

/* ===== Tablet ===== */
@media (max-width: 1079px) {
  .kleg { grid-column: 1 / span 4; }
  .karta__list { grid-column: 5 / span 8; }
  .klist { grid-template-columns: 1fr; }
}

/* ===== Telefon ===== */
@media (max-width: 759px) {
  .chero { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; padding-top: var(--hdr); }
  .chero__panel { position: relative; order: 0; padding-top: 22px; padding-bottom: 28px; }
  .chero__panel .lead { margin-top: 14px; font-size: 1rem; }
  .chero .stop__cta { display: grid; grid-template-columns: 1.4fr 1fr; margin-top: 22px; }
  .chero__shot { position: relative; order: 1; height: auto; aspect-ratio: 1 / .78; margin-inline: var(--pad); border-radius: 18px; }
  .chero__shade { display: none; }
  .tag__lbl { display: none; }
  .tag__pin { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 12px; box-shadow: 0 0 0 5px rgba(243, 198, 126, .22), 0 0 22px rgba(243, 198, 126, .55); }
  /* Na telefonie etykiety zasłaniałyby salę: liczby na zdjęciu, ceny w legendzie pod spodem (jak „Mapa klubu” w menu) */
  .plegend { display: block; order: 2; padding: 6px var(--pad) 8px; }
  .plegend li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--c-line); }
  .plegend .num { margin: 0; }
  .plegend b { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.015em; }
  .plegend em { font: normal 13px var(--f-mono); color: var(--c-lamp); }
  .karta__tools { width: 100%; }
  .ksearch { width: 100%; }
  /* Na telefonie drukowanie zostaje (Patryk 15.10.2026): okrągły przycisk z ikoną obok wyszukiwarki */
  .karta__tools .kdruk { --h: 44px; flex: none; width: 44px; padding: 0; justify-content: center; gap: 0; }
  .karta__tools .kdruk__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ksearch { flex: 1; min-width: 0; }
  /* Legenda jako pasek działów przyklejony pod nagłówkiem */
  .kleg { grid-column: 1 / -1; z-index: 30; top: 0; display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--pad)) 8px; padding: 10px var(--pad); background: rgba(6, 8, 10, .88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); scrollbar-width: none; transition: top .45s var(--ease); }
  .kleg::-webkit-scrollbar { display: none; }
  body:has(.hdr:not(.is-hidden)) .kleg { top: var(--hdr); }
  .kleg a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line); font-size: .875rem; gap: 8px; }
  .kleg a[aria-current="true"] { background: var(--c-ink); color: var(--c-bg); box-shadow: none; }
  .kleg a[aria-current="true"] em { color: var(--c-bg); opacity: .6; }
  .karta__list { grid-column: 1 / -1; }
  .kgrp { scroll-margin-top: calc(var(--hdr) + 72px); }
  .kgrp__h { font-size: 1.3125rem; }
  .kit--multi { flex-wrap: wrap; row-gap: 6px; }
  .kit--multi .kit__p { width: 100%; justify-content: flex-start; gap: 6px 16px; flex-wrap: wrap; }
  .klist--sizes .kit__v { min-width: 0; }
  .kit--multi .kit__v { text-align: left; }
}

/* ===== Wersja do druku (przycisk „Drukuj” i stary adres ?druk) ===== */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; color: #111 !important; }
  body { font-size: 10pt; }
  .hdr, .menu, .chero, .calc, .cprice, .faq, .ftr, .dock, .cookie, .toast, .sheet, .kleg, .karta__tools, .kempty, .skip, .kcat__todo { display: none !important; }
  .karta { padding: 0 !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .karta__head { margin-bottom: 6mm; }
  .karta__head .label { color: #555; }
  .karta__head .h2 { font-size: 20pt; color: #111; }
  .karta__head .body { color: #444; max-width: none; }
  .karta__grid { display: block; }
  .karta__list { columns: 2; column-gap: 10mm; }
  .kgrp { break-inside: auto; margin-bottom: 5mm; }
  .kgrp__head { border-color: #999; padding-bottom: 1.5mm; break-after: avoid; }
  .kgrp__h { font-size: 13pt; color: #111; }
  .kgrp__n { color: #777; }
  .kcat { margin-top: 3mm !important; }
  .kcat__h { color: #555; }
  .kcat__note { color: #555; }
  .klist, .klist--sizes { display: block; }
  .kit { padding-block: 1.3mm; border-color: #ddd; break-inside: avoid; }
  .kit__n { color: #111; font-size: 9.5pt; }
  .kit__n small { color: #666; }
  .kit__v { color: #111; font-size: 9pt; }
  .kit__v i { color: #666; }
  .klist--sizes .kit__v { min-width: 0; }
}