/* ===========================
   GALLERY — STYLESHEET (gallery.css)
   =========================== */

/* Reset / Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: #fff;
  color: #111;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wrap{ max-width: 1200px; margin: 0 auto; padding: 16px; }
h1{ font-size: 1.6rem; margin: 10px 0; }
h1 small{ font-size: .9rem; color:#666; font-weight: 400; margin-left: .35rem; }
.desc{ color:#555; }

/* ===========================
   HEADER (logo + menu + hamburger)
   =========================== */
.site-header{
  position: relative;
  z-index: 50;
  background: #1c1c1c;
  background-image: linear-gradient(#262626,#1c1c1c);
  color:#fff;
}
.site-header .shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  justify-content: space-between; /* logo lewo, menu prawo */
  gap: 16px;
  flex-wrap: nowrap;
}
.brand{ flex:0 0 auto; }
.brand img{ height:28px; width:auto; display:block; }

/* Desktop menu */
.main-nav{ margin-left: auto; }
.main-nav ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:22px;
}
.main-nav a{
  color:#fff; text-decoration:none;
  font-weight:600; opacity:.9;
}
.main-nav a:hover{ opacity:1; }
.main-nav a.is-active{ opacity:1; }
.badge-new{
  color:#fff; font-size:.7rem; font-weight:600;
  vertical-align: top; margin-left: 2px;
}

/* Hamburger button */
.nav-toggle{
  display:none;            /* desktop: niewidoczny */
  margin-left:auto;
  background:transparent;
  border:0;
  width:40px; height:40px;
  padding:8px;
  cursor:pointer;
}
.nav-toggle:focus{ outline:2px solid #fff; outline-offset:2px; }
.nav-toggle__bar{
  display:block;
  height:2px; width:100%;
  background:#fff;
  margin:5px 0;
  transition: transform .2s ease, opacity .2s ease;
}
/* animacja ikony (krzyżyk) gdy otwarte */
.site-header.is-open .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__bar:nth-child(2){ opacity:0; }
.site-header.is-open .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* MOBILE panel nawigacji */
@media (max-width:920px){
  .nav-toggle{ display:block; z-index:3; }

  .main-nav{
    position: fixed;
    top: var(--header-h, 56px); /* realna wysokość headera – ustawiana w JS */
    left: 0; right: 0;
    background:#1c1c1c;
    box-shadow: 0 10px 20px rgba(0,0,0,.35);

    /* całkowicie ukryte, nieklikalne */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .main-nav ul{
    display:flex; flex-direction:column;
    margin:0; padding:0; list-style:none;
  }
  .main-nav li{ border-top:1px solid rgba(255,255,255,.08); }
  .main-nav a{ display:block; padding:14px 16px; color:#fff; text-decoration:none; opacity:1; }

  /* po otwarciu */
  .site-header.is-open .main-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
}

/* Odstęp między headerem a treścią */
.page-head.wrap{ padding-top:18px; }

/* ===========================
   Siatka miniaturek
   =========================== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
  margin:16px 0;
}
.card{ margin:0; }
.card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background:#f3f3f3;
  cursor: pointer;                 /* łapka */
}
.card figcaption{ font-size:.9rem; color:#555; margin-top:6px; }

/* Reklamy na liście */
.ad{
  margin:16px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  line-height:0;
}

/* Powrót do listy galerii */
.back-row{
  text-align:center;
  margin:16px 0 8px;
}

/* ===========================
   LIGHTBOX
   =========================== */
.lightbox{
  position: fixed; inset: 0;
  background:#000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  z-index: 9999;
  overflow:hidden;
}
.lightbox--open{ display:flex; }

.lightbox__close{
  position:fixed; top:10px; right:12px;
  z-index:3;
  font-size:28px; line-height:1;
  padding:6px 10px;
  background:transparent;
  color:#fff; border:0; cursor:pointer;
}
.lightbox__close:hover{ opacity:.85; }

.lightbox__nav{
  position:fixed; top:50%; transform: translateY(-50%);
  z-index:3;
  background: rgba(255,255,255,.12);
  border:0; color:#fff;
  font-size:28px;
  padding:14px 16px;
  border-radius:8px; cursor:pointer;
  transition: background .15s ease;
}
.lightbox__nav--prev{ left:16px; }
.lightbox__nav--next{ right:16px; }
.lightbox__nav:hover{ background: rgba(255,255,255,.22); }

/* Wewnętrzny kontener – przewijanie tylko w pionie */
.lightbox__inner{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  overflow-y:auto;
  overflow-x:hidden;
}

/* Reklama nad zdjęciem */
.ad--lb{
  display:flex; justify-content:center; align-items:center;
  width:100%; margin:0; padding:0;
  line-height:0; font-size:0;
}
.ad--lb ins.adsbygoogle{ display:inline-block; width:728px; height:90px; }
@media (max-width:768px){
  .ad--lb ins.adsbygoogle{ width:320px; height:100px; }
}

/* Scena (IMG + podpis) */
.lightbox__stage{
  width:100%;
  max-width: calc(100vw - 0px);
  padding-inline: 12px;
  margin:0;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

/* Duże zdjęcie – rozmiarem steruje JS */
#lightbox-img{
  display:block;
  background:#000;
  border-radius:8px;
  max-width:100%;
  height:auto;
  object-fit: contain;
}

/* Podpis pod zdjęciem */
#lightbox-caption{
  color:#ddd;
  text-align:center;
  margin-top:6px;
  width:min(100%, 1100px);
  padding:0 12px 12px;
}
.lb-caption{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}
.lb-title{
  font-size:1.05rem;
  color:#fff;
  font-weight:600;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.lb-meta{ font-size:.9rem; color:#cfcfcf; }
.lb-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
}

/* Przyciski */
.btn{
  -webkit-appearance:none; appearance:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  border:2px solid transparent;
  transition: all .15s ease;
}
.btn--primary{
  background:#ffffff;
  color:#111;
  border-color:#ffffff;
}
.btn--primary:hover{ filter:brightness(.9); }
.btn--ghost{
  background:transparent;
  color:#111;
  border-color:#111;
}
.site-header .btn--ghost,
.lightbox .btn--ghost{
  color:#fff; border-color:#fff;
}
.btn--ghost:hover{ background: rgba(255,255,255,.12); }

/* Clean mode (podgląd bez UI) */
.clean-view #lb-ad-top{ display:none!important; }
.clean-view #lightbox-caption{ display:none!important; }

/* Focus outlines (a11y) */
.btn:focus,
.lightbox__close:focus,
.lightbox__nav:focus,
.main-nav a:focus{
  outline:2px solid #fff; outline-offset:2px;
}

/* ===========================
   FOOTER
   =========================== */
.site-footer{
  margin-top:28px;
  background:#222;
  background-image: linear-gradient(#2b2b2b, #212121);
  color:#dcdcdc;
  font-size:.95rem;
}
.site-footer .shell{
  max-width:1200px; margin:0 auto; padding:28px 16px;
  text-align:center;
}
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }


/* ===== Lista galerii (index.php) ===== */
.gl-search{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin:12px 0 4px;
}
.gl-search input[type="search"]{
  flex:1 1 260px; min-width:220px;
  padding:10px 12px; border:1px solid #ddd; border-radius:10px;
  font-size:1rem;
}

.gl-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1100px){ .gl-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px) { .gl-grid{ grid-template-columns: 1fr; } }

.gl-card{
  background:#fff; border:1px solid #eee; border-radius:14px;
  overflow:hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
}
.gl-cover{
  position:relative; display:block; line-height:0; background:#f3f3f3;
}
.gl-cover img{ width:100%; height:auto; display:block; }
.gl-cover--placeholder{ aspect-ratio: 16/9; background:#e9e9e9; }

.gl-cover__arrow{
  position:absolute; right:10px; bottom:10px;
  background:#fff; color:#111; border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  font-weight:700;
}
.gl-cover:hover .gl-cover__arrow{ transform: translateX(2px); }

.gl-meta{ padding:14px 14px 16px; }
.gl-date{ color:#999; font-size:.9rem; margin-bottom:6px; }
.gl-title{ margin:0 0 8px; font-size:1.15rem; }
.gl-title a{ color:#111; text-decoration:none; }
.gl-title a:hover{ text-decoration:underline; }
.gl-desc{ margin:0 0 10px; color:#555; }
.gl-count{ color:#666; font-size:.95rem; }

.gl-pager{
  display:flex; gap:8px; justify-content:center; align-items:center;
  margin:20px 0 6px;
  flex-wrap:wrap;
}
.gl-page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:38px; padding:0 10px;
  background:#fff; border:1px solid #ddd; border-radius:10px;
  text-decoration:none; color:#111; font-weight:600;
}
.gl-page:hover{ background:#f7f7f7; }
.gl-page.is-active{ background:#111; color:#fff; border-color:#111; }
.gl-page.is-disabled{ opacity:.45; pointer-events:none; }
.gl-ellipsis{ color:#888; padding:0 6px; }

/* Miniatury z /midi/ – stałe proporcje i ładny kadr */
.gl-cover img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}
.gl-cover--placeholder{ aspect-ratio:16/9; }