/*
Theme Name: Sztuka dla Zwycięstwa
Theme URI: https://sztukadlazwyciestwa.pl
Author: Three Dots Agency
Description: Motyw akcji charytatywnej „Sztuka dla Zwycięstwa”. Wymaga wtyczki SDZ Core.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sdz
*/

/* Kroje hostowane lokalnie – bez zapytań do zewnętrznych serwerów (RODO). */
@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage-latin-ext.woff2) format("woff2");
  font-weight:200 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Bricolage Grotesque";src:url(assets/fonts/bricolage-latin.woff2) format("woff2");
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Work Sans";src:url(assets/fonts/worksans-latin-ext.woff2) format("woff2");
  font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Work Sans";src:url(assets/fonts/worksans-latin.woff2) format("woff2");
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --blue:#375AB2; --blue-deep:#2A4790; --yellow:#F8E60D; --yellow-deep:#CDBE05;
  --paper:#FBFAF7; --paper-2:#F1EDE3; --paper-3:#E3DCCB; --coal:#11100E;
  --bg:var(--paper); --surface:#FFFFFF; --fg:#11100E; --muted:#5E584B;
  --line:rgba(17,16,14,.16); --shadow:0 18px 40px -22px rgba(17,16,14,.45);
  --display:"Bricolage Grotesque","Archivo Black",system-ui,sans-serif;
  --body:"Work Sans",system-ui,-apple-system,sans-serif;
  --sp:clamp(1rem,3.5vw,2.75rem);
  --maxw:1240px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background-color .7s ease,color .7s ease;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp)}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);max-width:62ch}

/* pola kolorystyczne sekcji */
.field-blue{background:var(--blue);--fg:#FBFAF7;--muted:rgba(251,250,247,.78);--line:rgba(251,250,247,.26);--surface:rgba(255,255,255,.07);color:var(--fg)}
.field-yellow{background:var(--yellow);--fg:#11100E;--muted:rgba(17,16,14,.7);--line:rgba(17,16,14,.22);--surface:rgba(255,255,255,.5);color:var(--fg)}
.field-coal{background:var(--coal);--fg:#F6F3EC;--muted:rgba(246,243,236,.7);--line:rgba(246,243,236,.2);--surface:rgba(255,255,255,.06);color:var(--fg)}

/* ---------- kursor ---------- */
#cursor{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--yellow);
  pointer-events:none;z-index:9999;mix-blend-mode:normal;opacity:0;transform:translate(-50%,-50%)}
@media (hover:none),(pointer:coarse){#cursor{display:none!important}}

/* ---------- panel podglądu ---------- */

/* ---------- nagłówek ---------- */
header{position:sticky;top:0;z-index:900;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line);
  transition:background-color .7s ease,border-color .7s ease}
.bar{display:flex;align-items:center;gap:20px;height:64px}
.brandmark{width:26px;height:60px;flex:none;display:block}
.brandname{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1;
  text-transform:uppercase;max-width:8ch}
nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
nav a{font:600 14px/1 var(--body);text-decoration:none;color:var(--muted);white-space:nowrap}
nav a:hover{color:var(--fg)}
@media(max-width:780px){nav a.hide-s{display:none}}

/* ---------- przycisk malowany ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55em;isolation:isolate;
  font:700 15px/1 var(--body);padding:15px 24px;border:2px solid currentColor;border-radius:2px;
  text-decoration:none;cursor:pointer;background:transparent;color:inherit;overflow:hidden}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--yellow);
  transform:scaleX(0);transform-origin:left center;transition:transform .42s cubic-bezier(.2,.7,.2,1);
  -webkit-mask:var(--brush);mask:var(--brush);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--coal)}
.btn--solid{background:var(--yellow);color:var(--coal);border-color:var(--yellow)}
.btn--solid::before{background:#fff}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- hero ---------- */
#hero{position:relative;overflow:hidden;padding:clamp(30px,4.5vw,54px) 0 clamp(30px,4vw,52px)}
#tiles{position:absolute;inset:-12% -2% -12% -2%;z-index:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;opacity:.55;filter:saturate(.75)}
#tiles .plate{width:100%;aspect-ratio:3/4;display:block;border-radius:2px;overflow:hidden}
#tiles .plate canvas{width:100%;height:100%;display:block;object-fit:cover}
#hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(31,48,110,.92) 0%,rgba(41,66,150,.80) 42%,rgba(41,66,150,.55) 70%,rgba(41,66,150,.72) 100%)}
#hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:end}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
#lockup{width:auto;max-width:100%;height:auto;max-height:min(44vh,400px);display:block;overflow:visible}
#sdz-letters path{fill:#FBFAF7}
#sdz-hand path{fill:var(--yellow)}
#sdz-dot path{fill:var(--yellow)}
.hero-side{padding-bottom:8px}
.hero-side .lead{color:rgba(251,250,247,.85)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(22px,2.6vw,34px);
  border-top:1px solid var(--line);padding-top:22px}
.counts b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,5.2vw,3.4rem);
  line-height:1;font-variant-numeric:tabular-nums;color:var(--yellow)}
.counts span{font:600 12px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- marquee ---------- */
.marquee{background:var(--yellow);color:var(--coal);border-block:2px solid var(--coal);overflow:hidden;padding:10px 0}
.marquee .track{display:flex;gap:0;width:max-content;will-change:transform}
.marquee .track span{font-family:var(--display);font-weight:800;font-size:clamp(15px,1.9vw,22px);
  letter-spacing:.01em;text-transform:uppercase;padding-inline:18px;white-space:nowrap;opacity:.85}
.marquee .track span::after{content:"◆";margin-left:18px;font-size:.6em;vertical-align:middle;opacity:.5}

/* ---------- sekcje ---------- */
section{padding:clamp(56px,8vw,110px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,44px)}
.sec-head h2{font-size:clamp(2rem,6vw,4rem)}
.underline{position:relative;display:inline-block}
.underline svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.underline svg path{fill:none;stroke:var(--yellow);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}

/* ---------- filtry ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:600 13px/1 var(--body);padding:10px 15px;border:1.5px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);cursor:pointer;transition:.2s}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip:hover{color:var(--fg)}

/* ---------- kafelki prac ---------- */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:clamp(14px,2vw,26px)}
.work{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transform-style:preserve-3d;will-change:transform}
.work .ph{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-3)}
.work .plate{position:absolute;inset:0}
.work .plate canvas{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.work:hover .plate canvas{transform:scale(1.045)}
.work .duo{position:absolute;inset:0;background:var(--blue);mix-blend-mode:color;
  transition:opacity .55s ease;opacity:.16}
.work .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,70,.02),rgba(14,30,74,.12));
  transition:opacity .55s ease;opacity:1}
.work:hover .duo,.work:hover .veil{opacity:0}
.work .tab{position:absolute;left:0;bottom:16px;z-index:2;background:var(--yellow);color:var(--coal);
  font:700 10px/1 var(--body);letter-spacing:.13em;text-transform:uppercase;padding:6px 10px 6px 14px;
  border-radius:0 2px 2px 0;box-shadow:0 6px 18px -10px rgba(0,0,0,.6);transition:opacity .4s ease}
.work:hover .tab{opacity:.35}
.work .meta{padding:14px 15px 16px;display:flex;flex-direction:column;gap:5px}
.work .meta h3{font-size:19px;line-height:1.1}
.work .meta .who{font:500 13.5px/1.3 var(--body);color:var(--muted)}
.work .state{display:flex;align-items:center;gap:6px;font:700 11px/1.35 var(--body);
  letter-spacing:.08em;text-transform:uppercase;margin-top:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.s-live{color:#1C7B3F} .s-soon{color:var(--muted)} .s-done{color:var(--muted)}
.count{font-variant-numeric:tabular-nums;font-weight:700}
.stamp{position:absolute;top:14px;right:14px;z-index:3;background:var(--yellow);color:var(--coal);
  font:800 12px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;
  border:2px solid var(--coal);border-radius:2px;transform:rotate(-6deg);box-shadow:var(--shadow)}
.work .go{margin-top:10px;align-self:flex-start;font:700 13px/1 var(--body);text-decoration:none;
  border-bottom:2px solid var(--yellow);padding-bottom:3px}

/* ---------- ściana nazwisk ---------- */
.wall{border-top:1px solid var(--line)}
.wall li{list-style:none}
.wall a{display:flex;align-items:baseline;gap:16px;padding:clamp(9px,1.4vw,15px) 0;
  border-bottom:1px solid var(--line);text-decoration:none;transition:color .25s}
.wall .nm{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,4.4vw,2.7rem);line-height:1;
  letter-spacing:-.02em;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wall .fld{margin-left:auto;font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wall a:hover .nm{color:var(--blue);transform:translateX(14px)}
:where(.field-coal) .wall a:hover .nm{color:var(--yellow)}
#peek{position:fixed;top:0;left:0;width:190px;aspect-ratio:3/4;z-index:800;pointer-events:none;opacity:0;
  border-radius:2px;overflow:hidden;box-shadow:var(--shadow);transform:translate(-50%,-50%) scale(.9)}
#peek canvas{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:900px){#peek{display:none}}

/* ---------- sekwencja sprzętu ---------- */
#seq{position:relative}
.seq-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;min-height:58vh}
@media(max-width:900px){.seq-stage{grid-template-columns:1fr}}
.seq-steps{position:relative}
.seq-step{opacity:.22;transition:opacity .4s ease;padding:14px 0;border-top:1px solid var(--line)}
.seq-step.on{opacity:1}
.seq-step h3{font-size:clamp(1.3rem,2.6vw,2rem);margin-bottom:6px}
.seq-step p{color:var(--muted);max-width:46ch}
.seq-art{aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.seq-art svg{width:min(100%,340px);height:auto}
.seq-num{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--yellow)}

/* ---------- fundacje ---------- */
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.4vw,30px)}
.org{border:1px solid var(--line);border-radius:3px;padding:24px;display:flex;flex-direction:column;gap:10px;background:var(--surface)}
.org h3{font-size:1.35rem}
.org .role{font:600 11.5px/1 var(--body);letter-spacing:.11em;text-transform:uppercase;color:var(--yellow)}
.org p{color:var(--muted);font-size:15px}

/* ---------- formularz ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px}
@media(max-width:700px){.form{grid-template-columns:1fr}}
.form .full{grid-column:1/-1}
.f label{display:block;font:600 12px/1 var(--body);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.f{position:relative}
.f input,.f textarea{width:100%;font:400 16px/1.5 var(--body);color:var(--fg);background:transparent;
  border:2px solid var(--line);border-radius:2px;padding:13px 14px;transition:border-color .25s}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--yellow)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted)}
.consent input{margin-top:3px;accent-color:var(--blue);width:18px;height:18px;flex:none}

footer{border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--muted)}
.foot{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #cursor{display:none}
}

/* ---------- elementy specyficzne dla WordPressa ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--yellow);color:var(--coal);
  padding:12px 18px;font:700 14px/1 var(--body)}
.skip-link:focus{left:8px;top:8px}
.entry-content{max-width:70ch}
.entry-content h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:1.6em 0 .5em}
.entry-content h3{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:1.4em 0 .4em}
.entry-content p{margin:0 0 1.1em}
.entry-content ul,.entry-content ol{margin:0 0 1.1em 1.2em;padding:0}
.entry-content li{margin-bottom:.4em}
.entry-content a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.entry-content img{height:auto;border-radius:2px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 12px;border:1.5px solid var(--line);border-radius:2px;text-decoration:none;font:600 15px/1 var(--body)}
.pagination .current{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.empty{border:2px dashed var(--line);border-radius:3px;padding:clamp(28px,5vw,56px);text-align:center;color:var(--muted)}
.empty b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--fg);margin-bottom:8px}
.single-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:860px){.single-hero{grid-template-columns:1fr}}
.single-hero .figure{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--paper-3)}
.single-hero .figure img,.single-hero .figure canvas{width:100%;height:100%;object-fit:cover;display:block}
.single-hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);margin-bottom:10px}
.quote{border-left:4px solid var(--yellow);padding-left:18px;font-size:1.1rem;font-style:italic;color:var(--muted);margin:20px 0}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block}
.reel{width:100%;max-width:320px;border-radius:3px;display:block;margin-top:16px}
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;align-items:center}
.partners a{display:grid;place-items:center;padding:22px;border:1px solid var(--line);border-radius:3px;background:var(--surface)}
.partners img{max-height:64px;width:auto;filter:grayscale(1);opacity:.75;transition:.3s}
.partners a:hover img{filter:none;opacity:1}
.ff-el-group input,.ff-el-group textarea{font-family:var(--body)!important}
.sdz-form .ff-el-group{margin-bottom:16px}
.sdz-form .ff-btn-submit{font:700 15px/1 var(--body)!important;background:var(--yellow)!important;color:var(--coal)!important;
  border:2px solid var(--yellow)!important;border-radius:2px!important;padding:15px 24px!important}


/* ---------- zdjęcia prac i sygnet w nagłówku ---------- */
.work .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.work:hover .ph img{transform:scale(1.045)}
.brandmark .sy-hand path{fill:var(--fg)}
.brandmark .sy-dot path{fill:var(--yellow)}
.field-blue .brandmark .sy-hand path,.field-coal .brandmark .sy-hand path{fill:#FBFAF7}
.seq-art{min-height:min(52vw,380px)}
.seq-art .seq-frame{max-width:340px;width:100%}
#peek img{width:100%;height:100%;object-fit:cover;display:block}
.wall a[data-img]:hover .nm{color:var(--yellow)}

/* menu z panelu */
nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
nav li{list-style:none;margin:0;padding:0;display:flex;align-items:center}
nav li::marker{content:""}
nav li.btn{border:0;padding:0;background:none;overflow:visible}
nav li.btn::before{display:none}
nav li.btn > a{display:inline-flex;align-items:center;font:700 13px/1 var(--body);padding:11px 16px;border:2px solid currentColor;border-radius:2px;color:var(--fg);text-decoration:none;transition:.25s}
nav li.btn > a:hover{background:var(--yellow);color:var(--coal);border-color:var(--yellow)}
nav li.current-menu-item > a{color:var(--fg)}

/* wąskie ekrany */
@media(max-width:520px){
  .bar{height:auto;padding-block:10px;flex-wrap:wrap;gap:10px}
  .brandname{font-size:13px;max-width:9ch}
  .brandmark{width:22px;height:50px}
  nav{gap:12px;width:100%;justify-content:space-between}
  nav a{font-size:13px}
  nav li.btn > a{padding:9px 12px;font-size:12px}
  .counts{grid-template-columns:1fr;gap:12px;text-align:left}
  .counts b{font-size:2.2rem}
  .sec-head{flex-direction:column;align-items:flex-start}
  .stamp{font-size:10px;padding:7px 9px}
}