/* ====== Zmienne + bazowe tak jak na głównej ====== */
    :root{
      --white:#FFFFFF; --paper:#F8F8F6; --paper-2:#F2F1EE;
      --black:#0A0A0A; --graphite:#1C1C1C; --muted:#6F6F6F;
      --gold:#D4B483; --gold-light:#CBB27C;
      --line:#E8E5DE; --radius:16px; --radius-lg:22px; --radius-pill:50px;
      --shadow-soft:0 4px 14px rgba(0,0,0,.06);
      --maxw:1200px; --gap:clamp(16px,2vw,24px);
      --nav-h:72px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--graphite);background:var(--white);line-height:1.65}
    .container{width:min(100% - 32px, var(--maxw)); margin-inline:auto}
    a{color:inherit;text-decoration:none}
    h1,h2,h3{font-family:Poppins,Inter,sans-serif;line-height:1.2;margin:0 0 12px;color:var(--black)}
    h1{font-size:clamp(26px,4.6vw,40px)}
    h2{font-size:clamp(18px,2.6vw,22px);margin-top:28px}

    /* ====== NAVBAR (jak u Ciebie) ====== */
    .navbar{
      position:sticky; top:0; z-index:50; height:var(--nav-h);
      background: rgba(255,255,255,.92);
      backdrop-filter: saturate(140%) blur(6px);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
    .brand{display:flex;align-items:center;gap:12px;min-width:170px;color:var(--black);font-weight:700;letter-spacing:.2px}
    .brand .logo{height:clamp(44px,5vw,56px);width:auto;display:block}
    .nav-links{display:flex;gap:clamp(12px,2vw,22px);align-items:center;flex-wrap:nowrap}
    .nav-links a{color:var(--black);opacity:.9;font-weight:500;font-size:15px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius-pill);border:1px solid transparent;font-weight:700}
/* PRZYCISK – złoty jak w oryginale + bevel */
.btn-gold{
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--black);
  border: 0px solid var(--gold);                 /* wąska złota otoczka */
  padding: 10px 18px;
  line-height: 1;
  border-radius: 999px;
  /* bevel (wypukłość): delikatny highlight u góry i cień u dołu */
  box-shadow:
    inset 0 px 0 rgba(255,255,255,.35),         /* jasna krawędź u góry */
    inset 0 -1px 0 rgba(0,0,0,.08),              /* lekka przyciemniona dolna krawędź */
    0 8px 24px rgba(0,0,0,.08);                  /* miękki cień jak na screenie */
  transition: background .2s ease, box-shadow .2s ease, transform .06s ease;
}

.btn-gold:hover{
  /* nie zmieniamy na „pełne wypełnienie” – tylko lekko wzmacniamy gradient,
     żeby wyglądał tak jak na hoverze w oryginale */
  background: linear-gradient(180deg, #E3C992 0%, #B9935A 100%); /* jaśniejsza góra, ciemniejszy dół */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),         /* mocniejszy highlight u góry */
    inset 0 -1px 0 rgba(0,0,0,.10),              /* odrobinę ciemniejszy dół */
    0 10px 28px rgba(0,0,0,.10);
}
/* Przyciski */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1px solid transparent; font-weight:700;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn-gold{
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--black);
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 8px 24px rgba(0,0,0,.08);
}
.btn-gold:hover{background: linear-gradient(180deg, #E3C992, #B9935A)}
.btn-ghost-gold{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn-ghost-gold:hover{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#111}

/* Hero */
.page-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:clamp(28px,6vh,48px) 0}
.page-hero p{color:var(--muted)}

/* Filtry */
.filters{margin:24px 0;display:flex;gap:12px;flex-wrap:wrap}
.filters button{cursor:pointer}

/* Portfolio grid */
main{padding: clamp(28px,6vh,48px) 0}
.grid{display:grid;gap:var(--gap)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.cols-3{grid-template-columns:1fr}}

.tile{
  position:relative;cursor:zoom-in;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:#f2f2f2;
  box-shadow:var(--shadow-soft);aspect-ratio:4/3;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;display:none;place-items:center;
  background:rgba(0,0,0,.92);z-index:100;padding:24px;
}
.lightbox.open{display:grid}
.lightbox img,.lightbox video{
  max-width:96vw;max-height:86vh;border-radius:12px;box-shadow:var(--shadow);
}
.lightbox .close{
  position:absolute;top:16px;right:16px;font-size:28px;color:#fff;
  background:rgba(255,255,255,.08);border-radius:9999px;padding:8px 14px;cursor:pointer;
}

/* Footer */
.footer {
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 12px 0 20px; /* mniejszy odstęp */
  background: var(--paper-2);
}

.footer-grid{ display:grid; gap:12px; grid-template-columns: 1fr auto; align-items:center }


/* --- Portfolio: KAFELKI O STAŁYM FORMACIE --- */
#portfolio .grid { gap: var(--gap); }

#portfolio .tile{
  position: relative;
  aspect-ratio: 4 / 3;           /* stała proporcja miniatury */
  border-radius: 14px;
  overflow: hidden;              /* przytnij to, co wyjdzie poza kafelek */
  border: 1px solid var(--line);
  background: #f2f2f2;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
}

#portfolio .tile img,
#portfolio .tile video{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* miniatura wypełnia kafelek, zachowuje kompozycję */
  display: block;
}

/* W siatce ukryj kontrolki wideo (pełne sterowanie w lightboxie) */
#portfolio .tile video::-webkit-media-controls-enclosure{ display:none !important; }
#portfolio .tile video{ pointer-events: none; } /* klik otwiera lightbox, nie odtwarzacz */

/* Portfolio grid */
main{ 
  padding: clamp(28px,6vh,48px) 0;
}
.grid{ 
  display:grid; 
  gap: var(--gap);
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline:16px; /* bez przycinania */
}
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:980px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .grid.cols-3{ grid-template-columns:1fr; } }

.tile{
  position:relative;
  cursor:zoom-in;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f1f1f1;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/3;
  width:100%;
}
.tile img{
  width:100%; 
  height:100%;
  object-fit:cover;   /* kafelki wypełniają cały box */
  display:block;
}

/* Lightbox – pełna widoczność, bez przycięć */
.lightbox img,
.lightbox video {
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  width:auto;
  height:auto;
  object-fit: contain;
  border-radius:12px;
}


/* === FIX NAVBAR NA PORTFOLIO – identycznie jak na stronie głównej === */
.navbar{
  position: fixed !important;
  top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.navbar.visible{ transform: translateY(0); opacity: 1; box-shadow: var(--shadow-soft); }

/* Zapewnij, że kontent nie chowa się pod navem */
section, main{ scroll-margin-top: calc(var(--nav-h) + 12px); }