/* ==========================================================================
   Galeria klientów — Bartosz Kokoszanek
   Układ i kolorystyka jak w portfolio na kokoszanek.pl: karty zdjęć na
   jasnym tle, bez pełnoekranowego banera okładki. Motyw jest ZAWSZE jasny,
   tak jak strona główna — celowo nie reagujemy na ciemny motyw systemu,
   żeby galeria wyglądała identycznie jak kokoszanek.pl u każdego klienta.

   Ekran logowania (.brama) i lightbox (.lupa) są ciemne z osobnego powodu:
   pierwszy stoi na rozmytym zdjęciu, drugi pokazuje zdjęcie na pełnym
   ekranie — jasny tekst na ciemnym tle jest tam jedyną czytelną opcją.
   ========================================================================== */

:root {
  --tlo: #fdfdfb;
  --tlo-kafel: #eceae5;
  --atrament: #191919;
  --szary: #6f6b66;
  --linia: #e6e2dc;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
  --przejscie: cubic-bezier(.22, .61, .36, 1);
}

/* Ekran logowania, ekran „galeria wygasła" i lightbox: zawsze ciemne,
   niezależnie od --tlo/--atrament wyżej — .brama ma zdjęcie w tle, .lupa to
   ciemny podgląd; jasny tekst na obu musi zostać czytelny bez względu na
   motyw. Na obu widokach stopka.php jest osobnym elementem obok .brama
   (nie jej potomkiem), dlatego override wisi na klasie <body>, żeby dotarł
   też do niej przez dziedziczenie. */
.widok-logowanie, .widok-wygasla, .lupa {
  --tlo: #0d0d0d;
  --tlo-pasek: #131313;
  --atrament: #f2efea;
  --szary: #9b958c;
  --linia: #2a2825;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--atrament);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--atrament); outline-offset: 3px; }

/* --- Ikony (SVG rysowane linią) ------------------------------------------ */
.ikona {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--szary);
  transition: color .25s, background .25s;
  border-radius: 50%;
}
.ikona:hover { color: var(--atrament); background: rgba(255, 255, 255, .07); }
.ikona svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Ekran logowania
   ========================================================================== */

.brama {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem 5rem;
  overflow: hidden;
}

/* Tło: miniatura 32 px rozciągnięta i rozmyta — atmosfera bez zdradzania zdjęć. */
.brama__tlo {
  position: absolute;
  inset: -8%;
  background-image: var(--tlo-mini);
  background-size: cover;
  background-position: center;
  filter: blur(48px) saturate(.7) brightness(.42);
  transform: scale(1.15);
  z-index: 0;
}
.brama::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(13, 13, 13, .5), rgba(13, 13, 13, .88));
  z-index: 1;
}

.brama__srodek {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 24rem;
  text-align: center;
}

.brama__marka {
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--szary);
  margin-bottom: 2.2rem;
}

.brama__tytul {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 7vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

.brama__data {
  margin-top: .9rem;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--szary);
}

.brama__formularz {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.8rem;
  text-align: left;
}

.pole { display: grid; gap: .5rem; }
.pole__etykieta {
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--szary);
}
.pole input {
  width: 100%;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--linia);
  color: var(--atrament);
  font: inherit;
  font-size: 1rem;
  transition: border-color .3s, background .3s;
}
.pole input:hover { border-color: #3d3a35; }
.pole input:focus {
  border-color: var(--atrament);
  background: rgba(255, 255, 255, .08);
  outline: none;
}

.brama__blad {
  font-size: .88rem;
  line-height: 1.55;
  color: #e0a58b;
  border-left: 2px solid #a45c3d;
  padding-left: .9rem;
}

.brama__pomoc {
  margin-top: 2.5rem;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--szary);
}
.brama__pomoc--szersza { margin-top: 1.8rem; }
.brama__pomoc a { border-bottom: 1px solid var(--linia); }
.brama__pomoc a:hover { border-color: var(--atrament); color: var(--atrament); }
.brama__pomoc span { margin: 0 .5rem; opacity: .5; }

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .95rem 2.2rem;
  border: 1px solid var(--atrament);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .35s, color .35s;
}
.przycisk:hover { background: var(--atrament); color: var(--tlo); }
.przycisk--pelny { width: 100%; margin-top: .6rem; }

/* ==========================================================================
   Nagłówek galerii — tekstowy, jak strona-naglowek w portfolio na stronie
   głównej (bez zdjęcia w tle: pełnoekranowy baner źle kroił kompozycję
   większości zdjęć, niezależnie od tego, które ustawiono jako okładkę).
   ========================================================================== */

.etykieta {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--szary);
  margin-bottom: 1rem;
}

.galeria-naglowek {
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.galeria-naglowek h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
}
.galeria-naglowek .lead {
  margin-top: .8rem;
  font-size: 1.05rem;
  color: var(--szary);
}
.galeria-naglowek__akcje {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: 1.4rem;
}

/* ==========================================================================
   Blok marki
   ========================================================================== */

.marka {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) 1.5rem clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--linia);
  max-width: 1600px;
  margin: 0 auto;
}
.marka__nazwa {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 500;
  letter-spacing: .02em;
}
.marka__tel { margin-top: .2rem; font-size: .88rem; color: var(--szary); }
.marka__tel a:hover { color: var(--atrament); }

.marka__social {
  display: flex;
  justify-content: center;
  gap: .7rem;
  margin-top: 1rem;
}
.kolko {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--linia);
  border-radius: 50%;
  color: var(--szary);
  transition: border-color .25s, color .25s;
}
.kolko:hover { border-color: var(--atrament); color: var(--atrament); }
.kolko svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Panel informacyjny (rozwijany ikoną „i") ----------------------------- */
.info-panel {
  max-width: 42rem;
  margin: 2rem auto 0;
  padding: 1.5rem;
  border: 1px solid var(--linia);
  text-align: center;
}
.info-panel[hidden] { display: none; }
.info-panel__wiadomosc {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.info-panel__meta { font-size: .85rem; color: var(--szary); }
.info-panel__meta + .info-panel__meta { margin-top: .5rem; }

.termin {
  max-width: 42rem;
  margin: 2rem auto 0;
  padding: .9rem 1.4rem;
  border: 1px solid var(--linia);
  text-align: center;
  font-size: .85rem;
  color: var(--szary);
}

/* ==========================================================================
   Siatka zdjęć — mozaika jak w galeriach realizacji na stronie głównej:
   naturalne proporcje każdego zdjęcia (pionowe zajmują pełną wysokość
   kolumny, poziome są niższe), zamiast przycinania wszystkiego do
   jednakowego kadru. Technicznie kolumny CSS (columns), nie grid —
   dokładnie to samo, czego używa .mozaika w motywie WordPressa.
   ========================================================================== */

.siatka {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem 5rem;
  columns: 3;
  column-gap: 1.1rem;
}
.kafel {
  display: block;
  width: 100%;
  margin-bottom: 1.1rem;
  break-inside: avoid;
  overflow: hidden;
  background: var(--tlo-kafel);
  padding: 0;
}
.kafel img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .8s var(--przejscie), opacity .5s;
}
.kafel:hover img { transform: scale(1.035); }

@media (max-width: 1100px) { .siatka { columns: 2; } }
@media (max-width: 480px)  { .siatka { columns: 2; column-gap: .6rem; } .kafel { margin-bottom: .6rem; } }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8, 8, 8, .97);
  display: grid;
  grid-template-rows: 1fr auto;
  animation: pojaw .25s ease-out;
}
.lupa[hidden] { display: none; }
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }

.lupa__ramka {
  /* display:grid + place-items:center miało tu pułapkę specyfikacji:
     procentowa wysokość dziecka (max-height:100% na zdjęciu) potrafi się
     nie rozwiązać w zagnieżdżonym grida — efekt: pionowe kadry wychodziły
     poza ekran. Flexbox rozwiązuje procenty w tym układzie niezawodnie. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 7vw, 5rem) clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.lupa__zdjecie {
  /* width/height:auto nadpisuje atrybuty width/height z HTML-a. Bez tego
     ramka elementu zostawała szeroka na całe zdjęcie źródłowe (1200 px)
     przy ograniczonej wysokości — object-fit ratował sam obraz, ale
     element zajmował miejsce obok pionowego kadru. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  object-fit: contain;
}

.lupa__narzedzia {
  position: absolute;
  top: .6rem;
  right: .9rem;
  z-index: 2;
  display: flex;
  gap: .2rem;
}
.lupa__narzedzia .ikona { color: rgba(255, 255, 255, .75); }
.lupa__narzedzia .ikona:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.lupa__nawigacja {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 5rem;
  color: rgba(255, 255, 255, .6);
  transition: color .25s;
}
.lupa__nawigacja:hover { color: #fff; }
.lupa__nawigacja svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lupa__nawigacja--wstecz { left: .2rem; }
.lupa__nawigacja--dalej { right: .2rem; }

.lupa__stopka {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.5rem calc(.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia);
}
.lupa__licznik {
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--szary);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .lupa__nawigacja { height: 4rem; width: 2.6rem; }
  .lupa__nawigacja svg { width: 1.4rem; height: 1.4rem; }
}

/* ==========================================================================
   Stopka
   ========================================================================== */

.stopka {
  border-top: 1px solid var(--linia);
  padding: 2.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .76rem;
  letter-spacing: .16em;
  color: var(--szary);
}
.stopka a { transition: color .3s; }
.stopka a:hover { color: var(--atrament); }
.stopka span { margin: 0 .7rem; opacity: .5; }

/* Na ekranie logowania stopka nie ma się narzucać. */
.widok-logowanie .stopka,
.widok-wygasla .stopka {
  position: fixed;
  inset: auto 0 0 0;
  border: 0;
  z-index: 3;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}