/* ============================================================================
   WANS · MOTYW „ULOTKA 2026"  (v2 — pełny plakat + autorskie maskotki)
   Wspólna skóra dla index.html, glosowanie.html, plan-zajec.html
   Dołączać ZAWSZE po wewnętrznym <style> danej strony.
   Wymaga w tym samym katalogu: agent-detektyw.svg, agent-uczony.svg,
   agent-pedagog.svg, agent-peek.svg
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ---------- 1. WSPÓLNE TOKENY ---------- */
:root{
  --paper:#ece7d8; --paper-2:#e3dccb;
  --ink:#16130c; --ink-soft:#4a4536;
  --accent:#cc2417; --accent-d:#9e1b11; --accent-l:#ef5a4b;
  --hair:#cbc4b0; --rule:#16130c;

  --bg:#16130c; --bg2:#1e1910;
  --surface:rgba(236,231,216,.045); --surface-2:rgba(236,231,216,.075);
  --border:rgba(236,231,216,.13); --border-2:rgba(236,231,216,.22);
  --text:#efe9da; --muted:#b6ad96; --faint:#867c63;
  --accent-2:#e0532f; --accent-soft:rgba(204,36,23,.15);
  --shadow:0 18px 44px -20px rgba(0,0,0,.85);
  --r:6px; --sat:#2ea88b; --sun:#cc2417;

  --sans:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;

  --tear:polygon(0 10%,3% 0,19% 7%,38% 1%,60% 8%,80% 0,97% 6%,100% 16%,
                 99% 85%,100% 97%,79% 91%,57% 100%,35% 92%,16% 99%,2% 90%,0 82%);
  --halftone:radial-gradient(rgba(236,231,216,.07) 1.1px, transparent 1.4px);
  --halftone-red:radial-gradient(rgba(204,36,23,.10) 1.1px, transparent 1.4px);
}

/* ---------- 2. TYPOGRAFIA ---------- */
body{ font-family:var(--sans); }
h1,h2,h3,h4,.section-head h2,.block-head h2{ font-family:var(--sans); letter-spacing:-.02em; }
h1,h2,.section-head h2,.block-head h2,.hero h1,.masthead h1.brand{ font-weight:900; text-transform:uppercase; }

/* ---------- 3. ZIARNO NA CAŁEJ STRONIE ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  mix-blend-mode:overlay; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- 4. POSTRZĘPIONY CZERWONY BANER (znak rozpoznawczy) ---------- */
.eyebrow,.idx,.vs-eyebrow,.sp-eyebrow,.recruit-eyebrow,.vt-live,.vs-live,.year-pill,.rbadge{
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--accent); color:var(--paper) !important;
  font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  padding:5px 13px; border:0; border-radius:0 !important;
  clip-path:var(--tear); transform:rotate(-1.4deg);
  box-shadow:3px 3px 0 var(--ink); text-shadow:none;
}
.idx{ transform:rotate(2deg); font-size:.82rem; }
.vs-eyebrow,.sp-eyebrow,.recruit-eyebrow,.vt-live,.vs-live{ box-shadow:2px 2px 0 var(--ink); }
.vt-live i,.vs-live i,.live-top i{ background:var(--paper) !important; }
.year-pill,.crumb .here{ border-radius:0 !important; }
.badge,.tag,.b-type,.b-room{ border-radius:2px !important; }
.live-top .ttl{ color:var(--accent-d); }

/* ---------- 5. NAGŁÓWKI SEKCJI = CZERWONY MARKER (jak „KIERUNKI:”) ---------- */
.block-head h2,.section-head h2{
  display:inline-block; width:fit-content; max-width:100%;
  background:var(--accent); color:var(--paper) !important;
  padding:.12em .34em; line-height:1.16;
  clip-path:var(--tear); transform:rotate(-1deg);
  box-shadow:6px 6px 0 var(--ink);
}
.block-head h2::after,.section-head h2::after{ content:none; }

/* duży nagłówek hero — bez markera, kolory kierunków zostają */
.hero-main h2{ display:block; background:none; color:var(--paper); padding:0; box-shadow:none; clip-path:none; transform:none; }
.hero-main h2 .k-adm{ color:var(--adm) } .hero-main h2 .k-ped{ color:var(--ped) } .hero-main h2 .k-psy{ color:var(--psy) }

/* ---------- 6. SEKCJE CIEMNE = PLAKAT + HALFTONE ---------- */
.masthead{
  background:var(--halftone) 0 0/22px 22px, var(--ink);
  color:var(--paper); position:relative; overflow:hidden;
}
.hero{
  background:var(--halftone) 0 0/24px 24px, var(--ink);
  color:var(--paper); position:relative; overflow:hidden;
  border-bottom:3px solid var(--accent);
}
.masthead .wrap,.hero .wrap{ position:relative; z-index:3; }
.masthead .eyebrow{ color:var(--paper) !important; }
.hero-main .eyebrow{ color:var(--paper) !important; }
.hero-main p{ color:#d7d1c2 !important; }
.hero-meta{ border-left:2px solid rgba(236,231,216,.18) !important; }
.meta-row{ border-bottom-color:rgba(236,231,216,.14) !important; }
.meta-row .k{ color:var(--accent-l) !important; }
.meta-row .v{ color:var(--paper); }
.hero h1 em,.hero h2 em{ color:var(--accent-l); }

/* ---------- 7. PASEK GÓRNY / NAWIGACJA / STOPKI ---------- */
.topbar{ background:var(--ink); color:var(--paper); }
.nav{ background:var(--paper); border-bottom:2px solid var(--ink); }
.nav.scrolled{ box-shadow:0 2px 0 var(--accent); }
.nav-mark .dot{ background:var(--accent); }
footer.site-footer,.site-footer,footer{ background:var(--halftone) 0 0/22px 22px, var(--ink) !important; position:relative; overflow:hidden; }
.site-footer .wrap,.footer-top,.footer-bottom{ position:relative; z-index:3; }

/* ---------- 8. PRZYCISKI — TWARDY PLAKAT ---------- */
.btn,.btn-accent,.vote-btn,.submit-btn,.btn-cal,.btn-ghost,.recruit-go,.sp-go,.ps-btn,.vt-btn,.vs-cta{
  border-radius:0 !important; font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
}
.btn-accent,.vote-btn,.submit-btn,.btn-cal,.recruit-go{
  background:var(--accent) !important; color:var(--paper) !important;
  border:2px solid var(--ink) !important; box-shadow:5px 5px 0 var(--ink) !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn-accent:hover,.vote-btn:hover,.submit-btn:hover,.btn-cal:hover,.recruit-go:hover{
  background:var(--ink) !important; color:var(--paper) !important;
  transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--accent) !important;
}
.btn-cal svg{ stroke:var(--paper) !important; }
.btn,.btn-ghost{ background:transparent; border:2px solid currentColor !important; box-shadow:4px 4px 0 var(--accent); transition:transform .16s ease, box-shadow .16s ease; }
.btn:hover,.btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--accent); }

/* ---------- 9. KARTY — twarde krawędzie ---------- */
.stat-tile,.vote-stats,.zinner,.modal,.who-wrap,.summary{ border-radius:0 !important; }

/* baner rekrutacji — odporny na brak obrazka */
.recruit-img{ aspect-ratio:1492/1054; object-fit:cover; background:var(--ink); }
.recruit-fallback{ display:none; }
.recruit-card.noimg .recruit-img{ display:none; }
.recruit-card.noimg .recruit-fallback{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:clamp(28px,6vw,60px); color:var(--paper); min-height:160px; justify-content:center;
}
.recruit-card.noimg .recruit-fallback b{ font-family:var(--sans); font-weight:900; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.7rem,7vw,3rem); line-height:1; }
.recruit-card.noimg .recruit-fallback span{ font-family:var(--mono); font-size:.92rem; color:#d7d1c2; line-height:1.6; max-width:46ch; }

/* ---------- 10. PASEK ZASAD (glosowanie) gold -> czerwień ---------- */
.rule-bar{ background:var(--accent) !important; color:var(--paper) !important; border-bottom:3px solid var(--ink) !important; }
.rule-bar b{ color:var(--paper) !important; text-decoration:underline; text-underline-offset:3px; }
.rule-bar .rb-ico{ background:var(--ink) !important; color:var(--paper) !important; border-radius:0 !important; clip-path:var(--tear); }

/* ---------- 11. STRONA „PLAN-ZAJEC” (cała ciemna) ---------- */
body.ulotka-dark{ background:var(--halftone) 0 0/22px 22px, var(--bg); }
.section-head h2{ box-shadow:5px 5px 0 var(--ink); }
.btn-ghost{ color:var(--muted); }
.crumb .here{ background:var(--accent); color:var(--paper); padding:3px 10px; clip-path:var(--tear); transform:rotate(-1deg); }
.crumb button:hover{ color:var(--accent-l); }
.topbar .year-pill{ transform:rotate(-1.4deg); }

/* ============================================================================
   12. AUTORSKIE MASKOTKI — rozmieszczone bezpiecznie (czysto dekoracyjne)
   ============================================================================ */
.masthead::after,.site-footer::before,.site-footer::after,
footer.site-footer::before,footer.site-footer::after,
section#kierunki::after,body.ulotka-vote .hero .wrap::after,.footer::before{
  content:""; position:absolute; pointer-events:none; background-repeat:no-repeat;
  background-size:contain; background-position:center bottom;
}

/* INDEX — masthead: detektyw zerka z prawej (wolna przestrzeń) */
.masthead{ position:relative; overflow:hidden; }
.masthead::after{ right:8px; bottom:-30px; width:140px; height:200px; z-index:1; opacity:.95;
  background-image:url("agent-detektyw.svg"); }

/* INDEX — sekcja „Kierunki”: uczony jako delikatny znak wodny ZA treścią */
section#kierunki{ position:relative; }
section#kierunki::after{ right:-10px; bottom:-16px; width:150px; height:218px; z-index:-1; opacity:.5;
  background-image:url("agent-uczony.svg"); }

/* INDEX/GLOSOWANIE — stopka: pedagog z lewej, peek z prawej */
.site-footer::before,footer.site-footer::before{ left:-12px; bottom:-12px; width:160px; height:200px; z-index:1; opacity:.42;
  background-image:url("agent-pedagog.svg"); }
.site-footer::after,footer.site-footer::after{ right:-6px; bottom:0; width:115px; height:115px; z-index:1; opacity:.42;
  background-image:url("agent-peek.svg"); }

/* GLOSOWANIE — hero: detektyw w prawej, wolnej części */
.hero .wrap{ position:relative; }
body.ulotka-vote .hero .wrap::after{ right:-8px; bottom:-34px; width:150px; height:214px; z-index:1; opacity:.9;
  background-image:url("agent-detektyw.svg"); }

/* PLAN — stopka: pedagog jako znak wodny */
.footer{ position:relative; overflow:hidden; }
.footer::before{ right:0; bottom:-14px; width:120px; height:150px; z-index:0; opacity:.32;
  background-image:url("agent-pedagog.svg"); }

/* ---------- 13. AKCENT KOMIKSOWY (błyskawica przy banerze rekrutacji) ---------- */
.recruit{ position:relative; }
.recruit::before{
  content:""; position:absolute; left:-6px; top:-20px; width:48px; height:66px; z-index:5; pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 56'%3E%3Cpath d='M24 0 L4 30 H18 L12 56 L36 22 H22 Z' fill='%23cc2417' stroke='%2316130c' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform:rotate(-10deg);
}

/* ---------- 14. LINKI / FOCUS ---------- */
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.k-ped{color:var(--ped)} .k-psy{color:var(--psy)} .k-adm{color:var(--adm)}

/* ---------- 15. RWD — chowamy postacie na wąskich ekranach ---------- */
@media (max-width:980px){
  .masthead::after,body.ulotka-vote .hero .wrap::after,section#kierunki::after{ display:none; }
}
@media (max-width:640px){
  .eyebrow,.idx{ transform:none; }
  .btn-accent,.vote-btn,.submit-btn,.btn-cal,.recruit-go{ box-shadow:3px 3px 0 var(--ink) !important; }
  .site-footer::before,.site-footer::after,footer::before,footer::after,.recruit::before,.footer::before{ display:none; }
  .block-head h2,.section-head h2{ line-height:1.34; }
}
@media (prefers-reduced-motion: reduce){
  .btn-accent,.vote-btn,.submit-btn,.btn-cal,.recruit-go,.btn,.btn-ghost{ transition:none; }
}