/* =====================================================================
   smacznejkawusi.pl: strona galerii (galeria.php)
   Rama (header/footer/pasek oferty/.blok) siedzi w assets/css/wspolne.css.
   Kolory/kontury/cienie/komponenty bazowe: design/tokens.css.
   ===================================================================== */

.strona-naglowek{padding:36px 0 6px}
.strona-naglowek h1{font-size:clamp(30px,4.4vw,46px);margin:8px 0 10px}
.strona-naglowek .count{color:var(--czerwien)}
.strona-naglowek p{font-size:15px;font-weight:500;max-width:60ch}

/* auto-fit (nie auto-fill): przy małej liczbie kawusi puste tory się zwijają
   zamiast rozciągać 1fr na niewidoczne kolumny, więc karty nie zostają
   przyklejone do lewej z morzem pustki obok. Górny limit w minmax pilnuje,
   żeby pojedyncza kawusia nie napęczniała na całą szerokość kontenera. */
.galeria-pelna{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,240px));gap:18px}
/* .karta-foto łączy się w HTML z .karta (tokens.css), stamtąd bierze
   tło/kontur/promień/cień bazowy, tu tylko nadpisujemy hover i wnętrze.
   Cała kafelka (nie tylko zdjęcie) jest kwadratem 1:1, podpis/autor
   nakładają się na dół zdjęcia gradientem, więc karta nie wydłuża się
   o pasek tekstu pod spodem. */
.karta-foto{position:relative;display:block;aspect-ratio:1;text-decoration:none;color:inherit;
  overflow:hidden;transition:transform .08s,box-shadow .08s}
.karta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.karta-foto .opis{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  gap:1px;padding:22px 12px 9px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,12,8,.82) 65%)}
.karta-foto .podpis{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.karta-foto .autor{font-size:12px;font-weight:500;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.karta-foto:hover{transform:translate(-2px,-2px);box-shadow:var(--cien-duzy)}
.karta-foto:hover img{transform:scale(1.04);transition:transform .25s}

.stan-pusty{padding:44px 24px;text-align:center;font-size:15px;font-weight:600}
.stan-pusty a{color:var(--czerwien)}

.pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.pager span.btn{cursor:default}