:root{
  --bg:#fff; --fg:#111; --muted:#6b6b6b; --border:#e6e6e6;
  --gap:18px; --card-max:416px; --thumb-max:320px;
  --menu-size:14px;

  /* MENU button vars */
  --menu-btn-bg:#f4f4f4; --menu-btn-fg:#222; --menu-btn-border:#d7d7d7; --menu-btn-hover-border:#bdbdbd; --menu-btn-active-bg:#f4f4f4;
  --menu-btn-radius:10px; --menu-btn-fw:500;
  /* LANG button vars */
  --lang-btn-bg:#111; --lang-btn-fg:#fff; --lang-btn-border:#111; --lang-btn-hover-border:#444; --lang-btn-active-bg:#111;
  --lang-btn-radius:999px; --lang-btn-fw:500;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:#111;font-family:var(--font-family, Inter, system-ui, Arial, Helvetica, sans-serif); text-align:center;}
a{color:#555;text-decoration:none}
a:hover{text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px;flex:1 0 auto}
.topbar{display:flex;flex-direction:column;align-items:center;gap:14px}
.logo img{width:min(312px, 52vw);height:auto;display:block}

/* MENU */
.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.nav a{padding:6px 12px;border-radius:var(--menu-btn-radius);font-weight:var(--menu-btn-fw);transition:background .15s ease,color .15s ease,border-color .15s ease; border:1px solid transparent; font-size:var(--menu-size); text-transform:var(--menu-transform, none);}
body.menu-btn-outline .nav a{background:transparent;color:var(--menu-fg, #545454);border-color:transparent}
body.menu-btn-outline .nav a:hover{background:transparent;border-color:var(--menu-btn-hover-border);color:#333}
body.menu-btn-outline .nav a.active{background:var(--menu-btn-active-bg);border-color:transparent;color:#222}
body.menu-btn-filled .nav a{background:var(--menu-btn-bg);color:var(--menu-btn-fg);border-color:var(--menu-btn-bg)}
body.menu-btn-filled .nav a:hover{border-color:var(--menu-btn-hover-border)}
body.menu-btn-filled .nav a.active{background:var(--menu-btn-active-bg)}

/* Language button */
.lang-toggle{position:fixed;top:12px;right:12px;z-index:1200}
.lang-btn{border:1px solid var(--lang-btn-border);background:var(--lang-btn-bg);color:var(--lang-btn-fg);padding:6px 12px;border-radius:var(--lang-btn-radius);font-size:11px;font-weight:var(--lang-btn-fw);letter-spacing:.02em;cursor:pointer;opacity:.95}
.lang-btn:hover{opacity:1; border-color:var(--lang-btn-hover-border)}

/* Spacing */
.gap{height:24px}
.gap-home{height:72px}
.sep-lg{height:28px}
.sep-xl{height:40px}

/* Title */
.page-title{font-size:22px;font-weight:600;letter-spacing:.01em;margin:8px 0}

/* Rich text */
.project-text{max-width:70ch;margin:0 auto; text-align:justify; text-justify:inter-word; line-height:1.6; hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; word-wrap:break-word;}
.project-text p{margin:0 0 1em}
.project-text b, .project-text strong{font-weight:700}
.project-text i, .project-text em{font-style:italic}
body.page-contact .project-text, body.page-shop .project-text{ text-align:center; text-justify:auto; }

/* Home cards */
.grid-cards{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:calc(var(--gap) + 10px);justify-items:center}
.card{width:100%;max-width:var(--card-max);aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;background:#f7f7f7;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .22s ease, filter .18s ease}
.card .label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));color:#fff;text-align:center;padding:10px 8px;font-weight:500;letter-spacing:.01em;opacity:0;transition:opacity .18s ease}
.card:hover img{transform:scale(1.03);filter:brightness(.9)}
.card:hover .label{opacity:1}

/* Galleries */
.grid-gallery{display:grid;grid-template-columns:1fr;gap:var(--gap);justify-content:center}
.project-text-block{padding:30px 0;line-height:1.8;font-size:16px;max-width:800px;margin:0 auto;width:100%;text-align:center}
.project-text-block p{margin:0 0 1em 0}
.project-text-block p:last-child{margin-bottom:0}
.project-image-row{display:flex;gap:var(--gap);justify-content:center;align-items:center;flex-wrap:wrap}
.project-image-block{}
.thumb{width:100%;max-width:var(--thumb-max);aspect-ratio:1/1;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--border);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.06);margin:0 auto}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .22s ease, filter .18s ease}
.thumb:hover img{transform:scale(1.04);filter:brightness(.9)}
.thumb .caption{position:absolute;left:0;right:0;bottom:0;color:#fff;text-align:center;padding:8px 6px;background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));font-size:13px;font-weight:500;opacity:0;transition:opacity .18s ease}
.thumb:hover .caption{opacity:1}

/* Per-page thumb shapes */
body.thumb-home-auto .card{aspect-ratio:auto}
body.thumb-home-auto .card img{width:100%;height:auto;object-fit:contain}
body.thumb-cat-auto #category-grid .thumb{aspect-ratio:auto}
body.thumb-cat-auto #category-grid .thumb img{width:100%;height:auto;object-fit:contain}
body.thumb-prj-auto #project-grid .thumb{aspect-ratio:auto}
body.thumb-prj-auto #project-grid .thumb img{width:100%;height:auto;object-fit:contain}

/* Page hero images */
.page-hero{display:flex;justify-content:center}
.page-hero .frame{border-radius:14px;border:1px solid var(--border);overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.page-hero img{width:100%;height:auto;display:block}
.page-hero .frame--bio{width:min(420px, 70vw);} /* BIO pionowo */
.page-hero .frame--contact{width:min(420px, 70vw);}
.page-hero .frame--shop{width:min(420px, 70vw);}

/* Mobile: always show captions */
@media (max-width: 768px) {
  .thumb .caption { opacity: 1 !important; }
  .card .label { opacity: 1 !important; }
}

/* Inline editing buttons */
.inline-edit-logo-btn{position:absolute;top:0;right:-110px;padding:8px 16px;background:#111;color:#fff;border:1px solid #111;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:100;white-space:nowrap}
.inline-edit-logo-btn:hover{background:#333;border-color:#333;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.inline-edit-img-btn{position:absolute;top:12px;right:12px;padding:8px 16px;background:#111;color:#fff;border:1px solid #111;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.15);z-index:100}
.inline-edit-img-btn:hover{background:#333;border-color:#333;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.inline-edit-text-btn{position:absolute;top:-40px;right:0;padding:8px 16px;background:#111;color:#fff;border:1px solid #111;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.inline-edit-text-btn:hover{background:#333;border-color:#333;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.inline-edit-btn-primary{padding:10px 20px;background:#111;color:#fff;border:1px solid #111;border-radius:10px;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s ease}
.inline-edit-btn-primary:hover{background:#222;border-color:#222}
.inline-edit-btn-secondary{padding:10px 20px;background:transparent;color:#111;border:1px solid #ddd;border-radius:10px;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s ease}
.inline-edit-btn-secondary:hover{background:#f4f4f4;border-color:#ccc}
.inline-edit-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:3000;padding:20px}
.inline-edit-modal-content{background:#fff;border-radius:12px;padding:28px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.inline-edit-modal-content h3{margin:0 0 20px;font-size:20px;font-weight:600;color:#111}
.inline-edit-modal-content label{display:block;margin:16px 0 6px;font-weight:600;font-size:13px;color:#333}
.inline-edit-modal-content textarea{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-family:inherit;font-size:14px;resize:vertical;line-height:1.5}
.inline-edit-modal-content textarea:focus{outline:none;border-color:#111;box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.inline-edit-modal-buttons{display:flex;gap:10px;margin-top:24px}
.inline-edit-hint{font-size:12px;color:#888;margin:12px 0 0;line-height:1.6;padding:10px;background:#f9f9f9;border-radius:6px}

/* Footer */
.footer{background:transparent;margin-top:auto; padding-top:54px;}
.footer .line{height:1px;background:var(--border)}
.footer .copy{padding:10px 0 24px 0;font-size:12px;color:#808080;text-align:center;background:transparent}

/* Modal (slideshow) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,.92);padding:24px;z-index:1000}
.modal.show{display:flex}
.modal .stage{width:min(1100px, 92vw);height:min(85vh, 92vw);border-radius:12px;position:relative;overflow:hidden;background:transparent;padding:0;
              display:flex; align-items:center; justify-content:center;}
.modal .stage .lb-img{position:absolute;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;
                      opacity:0; transform:translateX(0); transition:opacity .28s ease, transform .28s ease;}
.modal .stage .lb-img.active{opacity:1; transform:translateX(0)}
.modal .stage .lb-img.enter-right{opacity:0; transform:translateX(40px)}
.modal .stage .lb-img.enter-left{opacity:0; transform:translateX(-40px)}
.modal .stage .lb-img.leave-left{opacity:0; transform:translateX(-40px)}
.modal .stage .lb-img.leave-right{opacity:0; transform:translateX(40px)}
.modal .index{position:static;margin-top:16px;color:#fff;text-align:center;font-size:12px;opacity:.9}
.modal .btn{display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.65);background:rgba(0,0,0,.25);color:#fff;border-radius:999px;width:48px;height:48px;font-weight:500;font-size:22px;cursor:pointer;opacity:.9}
.modal .btn:hover{opacity:1}
.modal .close{position:fixed;top:18px;left:18px;width:44px;height:44px;font-size:18px;border:1px solid rgba(255,255,255,.6)}
.modal .arrow.left{position:fixed;left:18px;top:50%;transform:translateY(-50%)}
.modal .arrow.right{position:fixed;right:18px;top:50%;transform:translateY(-50%)}

/* Responsive */
@media (max-width: 720px){
  .container{padding:16px}
  .grid-cards{grid-template-columns:1fr}
}
@media (max-width: 440px){
  .grid-gallery{grid-template-columns:1fr !important}
}