/* Klub Pictures — podstrona /zorganizuj-impreze/. Wspólne elementy (pierwszy ekran, licznik, kalkulator, linia) w style.css. */

/* ===== 1. Pierwszy ekran: tort i stoły, osoba z tortem po prawej, tekst na ciemnym pierwszym planie ===== */
.thero__shot img { object-position: 50% 40%; transform: scale(calc(1.2 + var(--p, 0) * .06)); transform-origin: 0% 40%; filter: brightness(.8) saturate(.95); }

/* ===== 2. Kalkulator: pasek „na miejscu” i „cały klub” ===== */
.calc__hrs button { padding: 0 12px; }
.pbar { display: flex; gap: 3px; height: 14px; margin-top: 14px; border-radius: 999px; overflow: hidden; }
.pbar i { display: block; height: 100%; }
.pbar__use { flex: none; width: var(--use, 60%); background: linear-gradient(90deg, rgba(243, 198, 126, .55), var(--c-lamp)); box-shadow: 0 0 18px rgba(243, 198, 126, .35); transition: width .5s var(--ease); }
.pbar__rent { flex: 1; background: rgba(242, 238, 230, .14); }
.pleg { display: grid; gap: 8px; margin-top: 4px; }
.pleg li { display: flex; align-items: baseline; gap: 10px; font-size: .9375rem; color: var(--c-ink-2); }
.pleg li b { margin-left: auto; font: 500 .9375rem var(--f-mono); color: var(--c-ink); text-align: right; font-variant-numeric: tabular-nums; }
.pleg i { flex: none; width: 10px; height: 10px; border-radius: 3px; transform: translateY(1px); }
.pleg__use { background: var(--c-lamp); }
.pleg__rent { background: rgba(242, 238, 230, .3); }
.pnudge { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: .9375rem; color: var(--c-ink-2); }
.pnudge b { color: var(--c-lamp); font-weight: 500; }
.calc__out > .btn { justify-self: start; margin-top: 6px; }

/* ===== 3. W cenie ===== */
.incl { padding-top: 0; }
.incl__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; align-items: center; }
.incl__fig { grid-column: 1 / span 5; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.incl__fig img { width: 100%; height: 100%; object-fit: cover; }
.incl__text { grid-column: 7 / span 6; display: grid; gap: 18px; justify-items: start; }
.incl__list { grid-template-columns: 1fr 1fr; width: 100%; padding-inline: 0; gap: 12px 24px; }
.incl__list li { color: var(--c-ink); }
.incl__k { margin-top: 10px; }
.incl__text .more { margin-top: 4px; }

/* ===== 3b. Urodziny ===== */
.bday { padding-top: 0; }
.bday__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 20px; align-items: start; }
.bday__head { grid-column: 1 / span 5; display: grid; gap: 14px; }
.bday__text { grid-column: 7 / span 6; display: grid; gap: 18px; min-width: 0; }
.bday__text .good { grid-template-columns: 1fr; padding-inline: 0; gap: 12px; }
.bday__text .good li { color: var(--c-ink-2); }
.bday__text .good b { color: var(--c-ink); font-weight: 500; }

/* ===== 4. Jak to działa ===== */
.isteps { padding-top: 0; }
.isteps .eve__head a { color: var(--c-ink); font-weight: 500; text-underline-offset: 3px; }

/* ===== Tablet ===== */
@media (max-width: 1079px) {
  .incl__fig { grid-column: 1 / span 5; }
  .incl__text { grid-column: 6 / span 7; }
  .incl__list { grid-template-columns: 1fr; }
  .bday__head { grid-column: 1 / span 5; }
  .bday__text { grid-column: 6 / span 7; }
}

/* ===== Telefon ===== */
@media (max-width: 759px) {
  .thero__shot img { object-position: 50% 50%; transform: scale(calc(1 + var(--p, 0) * .06)); transform-origin: 50% 50%; }
  .incl__fig, .incl__text { grid-column: 1 / -1; }
  .bday__head, .bday__text { grid-column: 1 / -1; }
  .incl__fig { aspect-ratio: 4 / 4; }
  .calc__hrs button { padding: 0 9px; font-size: .8125rem; }
  .pleg li { flex-wrap: wrap; row-gap: 2px; }
  .pleg li b { margin-left: 20px; width: 100%; text-align: left; }
  .calc__out > .btn { justify-self: stretch; }
}