/* ══════════════════════════════════════════════════════════════════
   Portfolio wideo — wspólne style (index.html + video.html)
   Motyw: "sala projekcyjna" — ciemny, kinowy, editorialowy.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0C0E12;
  --surface:#14171D;
  --surface-2:#1B1F27;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --text:#ECEDF0;
  --muted:#969CAA;
  --faint:#697080;
  --accent:#E3B368;
  --accent-soft:rgba(227,179,104,.13);
  --radius:14px;
  --radius-lg:20px;
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img{display:block;max-width:100%;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);}

/* small helpers */
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:500;margin:0;
}
.display{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.02em;}

/* ── Odznaka dostępności (pulsująca kropka) ─────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;background:var(--surface);
}
.dot{width:8px;height:8px;border-radius:50%;background:#5FD08A;position:relative;}
.dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:#5FD08A;opacity:.35;animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.5;}100%{transform:scale(1.8);opacity:0;}}

/* ── HERO / góra strony ─────────────────────────────────────────────── */
.hero{border-bottom:1px solid var(--line);padding:clamp(56px,10vw,120px) 0 0;}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:clamp(40px,7vw,72px);}
.wordmark{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;}
.hero h1{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(2.6rem,8vw,6rem);line-height:.98;letter-spacing:-.03em;
  margin:18px 0 0;
}
.role{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(1.15rem,2.6vw,1.7rem);color:var(--accent);
  margin:16px 0 0;letter-spacing:-.01em;
}
.statement{color:var(--muted);font-size:clamp(1rem,1.6vw,1.18rem);max-width:52ch;margin:22px 0 0;}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0;align-items:center;}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.95rem;font-weight:500;text-decoration:none;
  padding:13px 24px;border-radius:999px;transition:transform .2s var(--ease),background .2s ease,border-color .2s ease;
}
.btn-primary{background:var(--accent);color:#0C0E12;}
.btn-primary:hover{transform:translateY(-2px);background:#EFC583;}
.btn-ghost{border:1px solid var(--line-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);}

.facts{display:flex;flex-wrap:wrap;gap:10px 34px;margin:44px 0 0;padding:0;list-style:none;}
.facts li{display:flex;flex-direction:column;gap:2px;}
.facts .k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.facts .v{font-size:.98rem;color:var(--text);font-weight:500;}

/* pasek klientów (marquee) */
.clients{border-top:1px solid var(--line);margin-top:clamp(44px,7vw,72px);overflow:hidden;}
.clients-inner{display:flex;align-items:center;gap:14px;padding:22px 0;}
.clients-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);white-space:nowrap;flex-shrink:0;}
.marquee{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 32s linear infinite;}
.marquee-track span{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.05rem;color:var(--muted);white-space:nowrap;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ── Sekcje / nagłówki sekcji ───────────────────────────────────────── */
main{padding:clamp(48px,7vw,84px) 0 0;}
.section{margin-bottom:clamp(56px,8vw,96px);}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,3vw,36px);}
.section-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;margin:0;}
.section-count{color:var(--faint);font-size:.9rem;}

/* filtry + sortowanie */
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:clamp(24px,3vw,34px);}
.filters{display:flex;flex-wrap:wrap;gap:9px;overflow-x:auto;scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.chip{
  font-family:inherit;font-size:.86rem;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:9px 17px;cursor:pointer;white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.chip:hover{color:var(--text);border-color:var(--line-strong);}
.chip.active{color:#0C0E12;background:var(--accent);border-color:var(--accent);font-weight:500;}
.sort{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:.86rem;white-space:nowrap;}
.sort select{
  font-family:inherit;font-size:.86rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;cursor:pointer;
}

/* ── SIATKA + KAFELKI ───────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid{grid-template-columns:1fr;}}

.tile{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:14px;transition:opacity .4s var(--ease),filter .4s var(--ease);}
.thumb{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:var(--surface-2);
  border:1px solid var(--line);
}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .5s ease;}
.thumb.no-img{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);}
.thumb.no-img::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 34px);}
.thumb.no-img .play{opacity:.3;}
.thumb-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(180deg,rgba(12,14,18,0) 45%,rgba(12,14,18,.72) 100%);
  opacity:0;transition:opacity .35s ease;
}
.thumb-overlay .view{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:500;color:#fff;
  transform:translateY(8px);transition:transform .35s var(--ease);
}
.thumb-overlay .view svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:2;}
.play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,14,18,.5);border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .35s ease,transform .35s var(--ease),background .25s ease,border-color .25s ease;
}
.play svg{width:19px;height:19px;fill:#fff;margin-left:3px;transition:fill .25s ease;}

.meta{display:flex;flex-direction:column;gap:5px;padding:0 2px;}
.cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;}
.ttl{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.08rem;line-height:1.25;margin:0;}
.tile .yr{font-size:.82rem;color:var(--faint);}
.tile.is-featured .thumb{border-color:var(--accent-soft);}

/* efekt hover: spotlight na najeżdżanym, wygaszenie reszty */
@media (hover:hover){
  .grid:has(.tile:hover) .tile:not(:hover){opacity:.42;filter:saturate(.65);}
  .tile:hover .thumb img{transform:scale(1.07);}
  .tile:hover .thumb-overlay{opacity:1;}
  .tile:hover .thumb-overlay .view{transform:translateY(0);}
  .tile:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .tile:hover .thumb.no-img .play{opacity:1;}
  .tile:hover .play{background:var(--accent);border-color:var(--accent);}
  .tile:hover .play svg{fill:#0C0E12;}
  .tile:hover .ttl{color:var(--accent);transition:color .25s ease;}
}

/* ── PODSTRONA REALIZACJI (video.html) ──────────────────────────────── */
.back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:.9rem;padding:clamp(28px,4vw,44px) 0 clamp(22px,3vw,30px);transition:color .2s ease;}
.back:hover{color:var(--accent);}
.back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;}

.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;border:1px solid var(--line);}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,5vw,64px);padding:clamp(34px,5vw,56px) 0;align-items:start;}
@media (max-width:820px){.detail{grid-template-columns:1fr;gap:32px;}}
.detail h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.03;letter-spacing:-.02em;margin:12px 0 0;}
.detail .desc{color:var(--muted);font-size:1.05rem;margin:24px 0 0;}
.detail .desc p{margin:0 0 15px;}
.tools{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;padding:0;list-style:none;}
.tools li{font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px;}

.specs{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:6px 24px;}
.specs dl{margin:0;}
.specs .row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.specs .row:last-child{border-bottom:0;}
.specs dt{color:var(--faint);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;}
.specs dd{margin:0;font-weight:500;text-align:right;}

.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding:clamp(30px,4vw,48px) 0;}
@media (max-width:560px){.prevnext{grid-template-columns:1fr;}}
.pn{text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;transition:border-color .2s ease,background .2s ease;}
.pn:hover{border-color:var(--accent);background:var(--accent-soft);}
.pn .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.pn.next{text-align:right;}
.pn .pn-ttl{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.1rem;margin-top:6px;}

/* ── STOPKA (wyższa, kolumny) ───────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:var(--surface);margin-top:clamp(40px,6vw,80px);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding:clamp(48px,7vw,80px) 0 clamp(34px,4vw,48px);}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px 28px;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand .fname{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;}
.footer-brand p{color:var(--muted);font-size:.95rem;max-width:34ch;margin:12px 0 18px;}
.footer-col h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 16px;font-weight:500;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col a{color:var(--text);text-decoration:none;font-size:.98rem;transition:color .2s ease;display:inline-flex;align-items:center;gap:10px;}
.footer-col a:hover{color:var(--accent);}
.footer-col svg{width:17px;height:17px;fill:currentColor;flex-shrink:0;opacity:.75;}
.footer-bottom{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:22px 0;color:var(--faint);font-size:.85rem;}
.footer-bottom a{color:var(--faint);text-decoration:none;transition:color .2s ease;}
.footer-bottom a:hover{color:var(--accent);}

/* ── Dostępność / ruch ──────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto;}
  .marquee-track{animation:none;}
}