/* =========================================================
   Lorcana PL - motyw portalu newsowego
   Warstwy: tokeny -> layout -> komponenty -> tresc -> RWD
   ========================================================= */

:root{
  --bg:#ffffff;
  --bg-soft:#f6f4fb;
  --card:#ffffff;
  --ink:#1c1633;
  --muted:#6b6486;
  --line:#e8e4f3;
  --gold:#c9a227;
  --gold-soft:#f4ead0;
  --gold-ink:#8a6d10;
  --amethyst:#6d4fc4;
  --amethyst-soft:#ece7fb;
  --steel:#2b7bb9;
  --parchment-ink:var(--ink);
  --parchment-accent:#9a7446;
  --parchment-muted:var(--muted);
  --brand-accent:#8a6632;
  /* Kolor tekstowych akcentow: aktywne menu, linki "Zobacz wiecej" */
  --accent-text:#8a6632;
  --shadow:0 8px 24px rgba(40,25,90,.08);
  --radius:14px;
  --font-head:'Sora','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
}

/* Tryb ciemny ustawiany atrybutem przez JS... */
[data-theme="dark"]{
  --bg:#141021;
  --bg-soft:#1c1730;
  --card:#1f1936;
  --ink:#f0edf9;
  --muted:#9d95ba;
  --line:#332b52;
  --gold:#e0bb45;
  --gold-soft:#3a3220;
  --gold-ink:#e0bb45;
  --amethyst:#9c82ec;
  --amethyst-soft:#2b2350;
  --steel:#5fa8dd;
  --parchment-ink:#efe4cc;
  --parchment-accent:#d6bd8f;
  --parchment-muted:#9f927c;
  --brand-accent:#d6bd8f;
  --accent-text:#9c82ec;
  --shadow:0 8px 24px rgba(0,0,0,.4);
}

/* ...oraz awaryjnie z preferencji systemu, gdy JS nie zadziala */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141021;
    --bg-soft:#1c1730;
    --card:#1f1936;
    --ink:#f0edf9;
    --muted:#9d95ba;
    --line:#332b52;
    --gold:#e0bb45;
    --gold-soft:#3a3220;
    --gold-ink:#e0bb45;
    --amethyst:#9c82ec;
    --amethyst-soft:#2b2350;
    --steel:#5fa8dd;
    --parchment-ink:#efe4cc;
    --parchment-accent:#d6bd8f;
    --parchment-muted:#9f927c;
    --brand-accent:#d6bd8f;
    --accent-text:#9c82ec;
    --shadow:0 8px 24px rgba(0,0,0,.4);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;transition:background .3s,color .3s}
h1,h2,h3,h4,.brand{font-family:var(--font-head);overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--amethyst);outline-offset:2px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--card);border:1px solid var(--line);padding:10px 16px;border-radius:999px}

/* ---------- pasek gorny ---------- */
.topbar{background:linear-gradient(90deg,var(--amethyst),var(--steel));color:#fff;font-size:13px;padding:6px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar b{color:#ffe9a8}

/* ---------- naglowek i nawigacja ---------- */
header.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.brand{font-weight:800;font-size:22px;letter-spacing:-.5px;display:flex;align-items:center;min-width:0;white-space:nowrap}
/* Logo w tonacji pergaminu: ciemny braz atramentu, "Polska" w cieplym sepii */
.brand{color:var(--parchment-ink)}
.brand .pl{color:var(--brand-accent)}
.brand .suffix{color:var(--parchment-muted);font-weight:600}
.nav ul{display:flex;gap:22px;list-style:none;font-size:14.5px;font-weight:500}
.nav nav a{padding:6px 2px;border-bottom:2px solid transparent;display:inline-block}
.nav nav a.active,.nav nav a:hover{border-bottom-color:var(--parchment-accent);color:var(--accent-text)}
.nav-right{margin-left:auto;display:flex;gap:10px;align-items:center}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:14px;line-height:1.2;color:var(--ink);font-family:inherit;white-space:nowrap}
.icon-btn:hover{border-color:var(--parchment-accent)}
.menu-btn{display:none}

/* ---------- ikony SVG (Lucide, macros/icons.html.twig) ---------- */
.icon{display:inline-block;width:1em;height:1em;vertical-align:-.14em;flex:0 0 auto}
.icon-btn .icon{width:16px;height:16px;vertical-align:middle}
.tt-icon{display:inline-flex}
.tt-icon .icon-sun,[data-theme="dark"] .tt-icon .icon-moon{display:none}
[data-theme="dark"] .tt-icon .icon-sun{display:inline-block}
.loc .icon,.week-meta .icon{color:var(--parchment-accent);margin-right:2px}
.tier-btn .icon{margin-right:4px}
.side-box h3 .icon,.week-info h4 .icon{color:var(--accent-text)}

/* ---------- hero: duzy slot-karuzela + dwie boczne karty ---------- */
.hero{padding:28px 0}
.hero-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.hero-layout--single{grid-template-columns:1fr}
.hero-carousel{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,#3d2d7a,#6d4fc4 55%,#2b7bb9)}
.hero-track{position:relative;height:420px}
/* Podmiana slajdu to "zasłona" odsłaniająca nowy kadr od lewej do prawej,
   a nie zwykly crossfade — kolejnosc warstw pilnuje JS (z-index per slajd) */
.hero-slide{position:absolute;inset:0;display:flex;align-items:flex-end;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1);pointer-events:none}
.hero-slide.is-active{clip-path:inset(0 0 0 0);pointer-events:auto}
.hero-media{position:absolute;inset:0;display:block}
.hero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,220,120,.35),transparent 55%)}
/* na zdjeciu zamiast poswiaty: lagodny gradient od dolu na calym slajdzie, niezalezny od ilosci
   tekstu — etykieta, tytul i zajawka zawsze leza na ciemniejszym tle */
.hero-media.has-image::after{background:linear-gradient(to top,rgba(14,9,34,.88) 0%,rgba(14,9,34,.72) 28%,rgba(14,9,34,.4) 55%,rgba(14,9,34,.12) 75%,rgba(14,9,34,0) 90%)}
.hero-media img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-content{position:relative;z-index:2;padding:32px 32px 38px;color:#fff;background:linear-gradient(transparent,rgba(20,12,50,.85));width:100%}
.hero-media.has-image + .hero-content{background:none}
.hero-content h2{font-size:32px;line-height:1.2;margin-bottom:8px;text-shadow:0 1px 2px rgba(10,6,30,.55),0 2px 12px rgba(10,6,30,.35);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.hero-content h2 a{color:inherit}
.hero-content p{opacity:.88;font-size:15px;max-width:60ch}

/* Kropki pelnia sie w tempie autoplay, pokazujac ze slajd zaraz sie zmieni */
.hero-progress{position:absolute;left:20px;right:20px;bottom:16px;z-index:3;height:4px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden}
.hero-progress-fill{display:block;height:100%;width:0;background:#fff;border-radius:inherit}
.hero-progress-fill.is-filling{animation:hero-fill 8s linear forwards}
@keyframes hero-fill{from{width:0}to{width:100%}}

/* Boczne karty pokazuja zawsze te dwa wpisy, ktore w danym momencie nie sa duze */
.hero-side{display:flex;flex-direction:column;gap:16px;height:420px;min-height:0}
/* position:relative + kazdy wariant tresci na absolute w tym samym miejscu:
   pudelko ma stala wysokosc, wiec podmiana nigdy nie przesuwa layoutu,
   a stary i nowy tekst przenikaja sie plynnie zamiast znikac/pojawiac sie skokiem */
/* Warianty tresci leza na sobie w jednej komorce gridu zamiast na absolute:
   kolumna ma stala wysokosc karuzeli (420px), a tytul i zajawka sa przycinane
   do 2 i 3 linii, wiec dlugi tekst nie zmienia rozmiaru kart. "safe center" pilnuje, zeby przy
   ciasnym pudelku wyrownanie nie wypchnelo gory tresci pod obciecie. */
.hero-mini{flex:1 1 0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr)}
.hero-mini-slide{grid-area:1/1;overflow:hidden;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);opacity:0;transform:translateY(5px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.hero-mini-slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto;z-index:1}
.hero-mini-slide h3{font-size:16px;margin:6px 0 4px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex-shrink:0}
.hero-mini-slide h3 a{color:inherit}
.hero-mini-slide p{font-size:13.5px;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ---------- caly kafelek klikalny ---------- */
/* Link w tytule rozciaga sie pseudo-elementem na cala karte (najblizszy przodek
   z position), wiec klik w zajawke, date czy tlo tez otwiera artykul. Link zostaje
   jeden, wiec czytniki ekranu i Tab widza go tak jak wczesniej. */
.card,.list-item,.hero-mini-slide{position:relative}
.card h3 a::after,.list-item h3 a::after,.hero-mini-slide h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover h3 a,.list-item:hover h3 a,.hero-mini-slide:hover h3 a{color:var(--accent-text)}
/* Karuzela: zdjecie slajdu jest juz linkiem na calym slajdzie; tekst go nie zaslania */
.hero-content{pointer-events:none}
.hero-slide.is-active .hero-content a{pointer-events:auto}
.hero-slide:hover .hero-content h2 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- etykiety ---------- */
/* align-self trzyma etykiete przy lewej krawedzi w kontenerach flex,
   bez tego rozciaga sie na cala szerokosc karty */
.tag{display:inline-block;align-self:flex-start;max-width:100%;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--gold);color:#2a2100}
.tag.meta{background:var(--amethyst-soft);color:var(--amethyst)}
.tag.event{background:var(--gold-soft);color:var(--gold-ink)}
.tag.plain{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}

/* ---------- naglowek sekcji ---------- */
.sec{display:flex;align-items:center;gap:14px;margin:36px 0 18px}
.sec h2{font-size:22px;white-space:nowrap}
.sec::after{content:"";height:2px;flex:1;background:linear-gradient(90deg,var(--parchment-accent),transparent)}
.sec .more{font-size:13.5px;color:var(--accent-text);font-weight:600;white-space:nowrap}

/* ---------- karty ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px)}
.thumb{height:150px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;color:#fff;font-size:15px;letter-spacing:.03em;text-align:center;padding:0 12px;overflow:hidden;position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.thumb.pos-top img,.hero-media img.pos-top{object-position:top}
.thumb.pos-bottom img,.hero-media img.pos-bottom{object-position:bottom}
.t1{background:linear-gradient(120deg,#6d4fc4,#2b7bb9)}
.t2{background:linear-gradient(120deg,#c9a227,#e07b3a)}
.t3{background:linear-gradient(120deg,#2b7bb9,#37b48f)}
.t4{background:linear-gradient(120deg,#b04a8f,#6d4fc4)}
.t5{background:linear-gradient(120deg,#37485e,#6d4fc4)}
.t6{background:linear-gradient(120deg,#e07b3a,#c9a227)}
.card-body{padding:16px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:16px;line-height:1.35;margin:8px 0 6px}
.card-body p{font-size:13.5px;color:var(--muted)}
.meta-row{font-size:12px;color:var(--muted);margin-top:auto;padding-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- layout dwukolumnowy ---------- */
.layout{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-top:8px;align-items:start}
.list-item{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.list-item .thumb{height:90px;border-radius:10px;font-size:12px}
.list-item h3{font-size:16.5px;margin:2px 0 4px;line-height:1.35}
.list-item p{font-size:13.5px;color:var(--muted)}
/* podstrona z lista wszystkich newsow: wiekszy obrazek z lewej */
.news-list{max-width:900px}
.news-list .list-item{grid-template-columns:260px 1fr;gap:22px;padding:20px 0}
.news-list .list-item:first-child{padding-top:4px}
.news-list .list-item .thumb{height:160px;font-size:14px}
.news-list .list-item h3{font-size:19px}
.news-list .list-item p{font-size:14.5px;margin-bottom:6px}

/* ---------- sidebar ---------- */
.side-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:20px}
.side-box h3{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.side-box p{font-size:13.5px;color:var(--muted)}
.side-box .more{font-size:13.5px;color:var(--accent-text);font-weight:600}
.side-box--soon{border-style:dashed}
.soon-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--amethyst-soft);color:var(--amethyst);white-space:nowrap}

/* ---------- hero aktualnego dodatku ---------- */
.set-hero{position:relative;margin:-8px 0 32px;padding:0 0 8px;isolation:isolate}
/* Maska zamiast nakladki kolorem: zanikanie zawsze trafia we wlasciwe tlo strony,
   tak samo w trybie jasnym i ciemnym. Przyciemnienie siedzi w srodku maski,
   wiec gasnie razem z grafika. */
.set-hero-bg{position:absolute;inset:0;z-index:0;border-radius:18px 18px 0 0;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%)}
.set-hero-bg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,rgba(16,10,40,.88),rgba(16,10,40,.6) 58%,rgba(16,10,40,.3))}
.set-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(190px,1.15fr) minmax(0,1.7fr) minmax(175px,.9fr);gap:16px 26px;align-items:center;padding:26px 30px 20px}

/* margin-top odsuwa logo i karte od gornej krawedzi — kolumny sa wysrodkowane
   wzgledem najwyzszej (tekstowej), wiec margines przesuwa je w dol */
.set-hero-logo{display:flex;justify-content:center;margin:22px 0 0}
.set-hero-logo img{display:block;width:100%;max-width:270px;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.set-hero-name{font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1.1;color:#fff;text-align:center;text-shadow:0 4px 16px rgba(0,0,0,.5)}

.set-hero-info{color:#fff}
.set-hero-info h2{font-family:var(--font-head);font-size:28px;line-height:1.15;margin-bottom:14px;text-shadow:0 3px 14px rgba(0,0,0,.45)}
.set-hero-info p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.93);max-width:58ch;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.set-hero-dates{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:14px}
.set-hero-dates li{display:flex;align-items:baseline;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(2px)}
.set-hero-dates span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.8}
.set-hero-dates strong{font-size:13.5px;font-weight:600;white-space:nowrap}

/* Jedno miejsce na karte: kolejna wjezdza z prawej, poprzednia wychodzi w lewo.
   Zaokraglenie, ciecie i cien siedza na slocie, nie na karcie — karta zostaje
   plaska warstwa przesuwana wylacznie translate. Skalowanie w transformacji
   kazalo kompozytorowi rasteryzowac warstwe w innej skali, co rozmywalo grafike.
   aspect-ratio dokladnie jak zrodlo (537x750), wiec object-fit nic nie przycina. */
.set-hero-cards{display:flex;justify-content:center;align-items:center;margin-top:22px}
.set-card-slot{position:relative;flex:none;width:clamp(150px,14vw,215px);aspect-ratio:537/750;overflow:hidden;border-radius:11px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.set-card{position:absolute;inset:0;opacity:0;transform:translateX(38%);transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.set-card.is-active{opacity:1;transform:translateX(0);z-index:2}
.set-card.is-leaving{opacity:0;transform:translateX(-38%);z-index:1}
.set-card img{display:block;width:100%;height:100%;object-fit:cover}
.set-card--empty{border:1px solid rgba(255,255,255,.25)}

.set-hero-cta{position:relative;z-index:1;display:flex;justify-content:center;padding-top:6px}
.set-hero-btn{display:inline-block;padding:11px 26px;border-radius:999px;background:var(--amethyst);color:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow);transition:transform .15s,background .15s}
.set-hero-btn:hover{background:var(--steel);transform:translateY(-2px)}

/* ---------- terminarz ---------- */
.cal{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.cal-row{display:grid;grid-template-columns:86px 1fr auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.cal-row:last-child,.cal-row:last-of-type{border-bottom:none}
.cal-row:hover{background:var(--bg-soft)}
.date-badge{text-align:center;background:var(--amethyst-soft);border-radius:12px;padding:8px 4px}
.date-badge .d{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--amethyst);line-height:1}
.date-badge .m{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cal-row h3{font-size:16px;line-height:1.35}
.cal-row .loc{font-size:13px;color:var(--muted)}
.pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pill.dlc,.pill.regional-championship,.pill.set-championship,.pill.duzy-turniej,.pill.prerelease{background:var(--gold-soft);color:var(--gold-ink)}
.pill.regional-qualifier,.pill.lcq,.pill.ccq,.pill.local-qualifier{background:var(--amethyst-soft);color:var(--amethyst)}
.pill.turniej-lokalny,.pill.inne{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}

/* ---------- terminarz: kalendarz tygodniowy ---------- */
.week-cal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.week-cell{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-height:130px;display:flex;flex-direction:column;gap:10px}
.week-cell h4{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--ink)}
.week-cell.is-empty h4{color:var(--muted)}
.week-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.week-list li{padding-bottom:9px;border-bottom:1px dashed var(--line)}
.week-list li:last-child{border:none;padding-bottom:0}
.week-list strong{display:block;font-size:13.5px;line-height:1.3;margin-bottom:2px}
.week-list a{color:inherit;text-decoration:none}
.week-list a:hover{color:var(--amethyst)}
.week-meta{display:block;font-size:12px;color:var(--muted)}
.week-empty{font-size:13px;color:var(--muted)}
.week-info{background:var(--amethyst-soft);border-color:transparent}
.week-info h4{color:var(--amethyst)}
.week-info p{font-size:13px;line-height:1.55;color:var(--ink);opacity:.85}

/* ---------- terminarz: filtry ---------- */
.cal-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 22px;margin-bottom:16px;padding:14px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
.cal-filters[hidden]{display:none}
.cal-filter-group{display:flex;flex-direction:column;gap:7px;min-width:0}
.cal-filter-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--amethyst);color:var(--amethyst)}
.chip.is-on{background:var(--amethyst);border-color:var(--amethyst);color:#fff}
.chip:focus-visible,.cal-select:focus-visible,.cal-reset:focus-visible{outline:2px solid var(--amethyst);outline-offset:2px}
.cal-select{font-family:inherit;font-size:13.5px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);max-width:100%;cursor:pointer}
.cal-filter-meta{display:flex;align-items:center;gap:12px;margin-left:auto;padding-bottom:2px}
.cal-count{font-size:13px;color:var(--muted);white-space:nowrap}
.cal-reset{font-family:inherit;font-size:13px;font-weight:600;color:var(--amethyst);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cal-reset[hidden]{display:none}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip:has(input:checked){background:var(--amethyst);border-color:var(--amethyst);color:#fff}
.chip:has(input:focus-visible){outline:2px solid var(--amethyst);outline-offset:2px}
.cal-search{font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 20px;border:none;border-radius:999px;background:var(--amethyst);color:#fff;cursor:pointer;transition:filter .15s}
.cal-search:hover{filter:brightness(1.1)}
.cal-search:focus-visible{outline:2px solid var(--amethyst);outline-offset:2px}
.cal-row[hidden]{display:none}
.cal-row.is-last{border-bottom:none}
.cal-none{padding:22px 20px;text-align:center;font-size:14px;color:var(--muted)}
.cal-none[hidden]{display:none}

/* Teaser linkujacy do archiwum jako osobnej podstrony, oraz powrot z niej */
.cal-archive-link{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin:20px 0;padding:16px 20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--muted)}
.cal-archive-link .more{font-size:13.5px;font-weight:600;color:var(--accent-text);white-space:nowrap}
.cal-back{margin:24px 0;font-size:14px}
.cal-back a{color:var(--amethyst);font-weight:600;text-decoration:none}
.cal-back a:hover{text-decoration:underline}

/* ---------- CTA ---------- */
.cta{margin:44px 0;border-radius:18px;padding:34px;background:linear-gradient(120deg,var(--amethyst),var(--steel));color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{font-size:24px}
.cta p{opacity:.88;font-size:14px}
.cta .form{display:flex;gap:10px;flex-wrap:wrap}
.cta input{border:none;border-radius:999px;padding:12px 18px;min-width:240px;font-size:14px;font-family:inherit}
.cta .btn{border:none;border-radius:999px;padding:12px 22px;background:var(--gold);color:#2a2100;font-weight:700;cursor:pointer;font-size:14px;font-family:inherit;display:inline-block}

/* ---------- tresc artykulu ---------- */
.article{max-width:760px;margin:0 auto;padding:28px 0}
.article-head{margin-bottom:22px}
.article-head h1{font-size:34px;line-height:1.2;margin:10px 0 12px}
.article-head .lead{font-size:17px;color:var(--muted)}
.article-hero{border-radius:18px;overflow:hidden;margin:22px 0;box-shadow:var(--shadow)}
.article-hero img{display:block;width:100%;height:auto}
.prose{font-size:16.5px}
.prose h2{font-size:24px;margin:32px 0 10px}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--amethyst);text-decoration:underline;text-underline-offset:3px}
.prose blockquote,.tier-note blockquote{border-left:3px solid var(--parchment-accent);background:var(--bg-soft);padding:12px 18px;margin:20px 0;border-radius:0 10px 10px 0;color:var(--muted)}
.prose img{border-radius:12px;margin:16px 0}
.prose code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.9em}
.prose pre{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto;margin-bottom:16px}
.prose pre code{border:none;background:none;padding:0}
.prose table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14.5px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
/* artykuly: justowany tekst (z dzieleniem wyrazow, zeby nie bylo dziur) i wysrodkowane obrazki */
.e-content p,.e-content li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.e-content img{display:block;margin-left:auto;margin-right:auto}
.table-scroll{overflow-x:auto}

/* ---------- tierlista talii ---------- */
/* Kolory atramentow trzymamy w jednym miejscu, zeby kropka i obramowanie
   chipa zawsze braly ten sam odcien. */
.tier{
  --ink-amber:#d29a2a;
  --ink-amethyst:#8a5cd1;
  --ink-emerald:#2f9e6b;
  --ink-ruby:#d2453f;
  --ink-sapphire:#2b86c5;
  --ink-steel:#7b8699;
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)
}
.tier-row{display:grid;grid-template-columns:76px 1fr;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}
.tier-row:last-child{border-bottom:none}
.tier-row:hover{background:var(--bg-soft)}

/* Kafelek tieru: litera niesie kolor, podpis pod nia tlumaczy co ten tier znaczy */
.tier-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;padding:10px 6px;text-align:center;background:var(--bg-soft);border:1px solid var(--line);align-self:start}
.tier-badge .t{font-family:var(--font-head);font-size:30px;font-weight:800;line-height:1}
.tier-badge .lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.75;line-height:1.25}
.tier-s .tier-badge{background:linear-gradient(135deg,#f6d365,#d9a520);border-color:#d9a520;color:#3a2a00}
.tier-a .tier-badge{background:linear-gradient(135deg,#ff9a6b,#ef5f3c);border-color:#ef5f3c;color:#3a1200}
.tier-b .tier-badge{background:linear-gradient(135deg,#8fd9a8,#3fa76d);border-color:#3fa76d;color:#0b2e1c}
.tier-c .tier-badge{background:linear-gradient(135deg,#8fc7ef,#3d8fcc);border-color:#3d8fcc;color:#062338}
.tier-d .tier-badge{background:linear-gradient(135deg,#b9a6ef,#7b5dd1);border-color:#7b5dd1;color:#1b0f3d}
.tier-e .tier-badge{background:linear-gradient(135deg,#c9c4d8,#9a93ad);border-color:#9a93ad;color:#241f33}
.tier-f .tier-badge{background:linear-gradient(135deg,#9a93ad,#5f5872);border-color:#5f5872;color:#fff}

.tier-main{min-width:0}
.tier-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:6px}
.tier-head h3{font-size:17px;line-height:1.3}
.ink-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none}
.ink{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted)}
.ink .dot{width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}
.ink-img{display:inline-flex;align-items:center;flex:0 0 auto;line-height:1}
.ink .ink-img .ink-icon{height:1.5em;margin:0;vertical-align:middle}
.ink .ink-img .ink-icon--dot{width:9px;height:9px;margin:0}
.ink-amber{color:var(--ink-amber);border-color:var(--ink-amber)}
.ink-amethyst{color:var(--ink-amethyst);border-color:var(--ink-amethyst)}
.ink-emerald{color:var(--ink-emerald);border-color:var(--ink-emerald)}
.ink-ruby{color:var(--ink-ruby);border-color:var(--ink-ruby)}
.ink-sapphire{color:var(--ink-sapphire);border-color:var(--ink-sapphire)}
.ink-steel{color:var(--ink-steel);border-color:var(--ink-steel)}
.tier-note{font-size:13.5px;color:var(--muted);margin-bottom:10px;max-width:75ch}
.tier-note p,.tier-note ul,.tier-note ol{margin:0 0 6px}
.tier-note > :last-child,.tier-note blockquote > :last-child{margin-bottom:0}
/* cytat: ramka jak w tresci strony, odstepy dopasowane do krotkiego opisu */
.tier-note blockquote{padding:8px 14px;margin:6px 0 8px}
.tier-note ul,.tier-note ol{padding-left:1.3em}
.tier-note a{color:var(--amethyst)}

/* Szesc kart w jednym rzedzie; puste sloty trzymaja siatke rowna,
   gdy talia ma mniej niz szesc zdjec */
.tier-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}
.tier-card{aspect-ratio:5/7;border-radius:9px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.tier-card img{width:100%;height:100%;object-fit:cover;display:block}
.tier-card.is-empty{border-style:dashed;opacity:.5}
.tier-card.is-link{overflow:visible;transition:transform .15s ease,border-color .15s ease}
.tier-card.is-link a{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.tier-card.is-link:hover,.tier-card.is-link:focus-within{transform:translateY(-2px);border-color:var(--amethyst)}
.tier-card.is-link a:focus-visible{outline:2px solid var(--amethyst);outline-offset:3px}
.tier-card.is-missing{display:flex;align-items:center;justify-content:center;padding:6px;border-style:dashed;text-align:center;font-size:11px;color:var(--muted);cursor:help}
@media (prefers-reduced-motion:reduce){.tier-card.is-link{transition:none}}

.tier-links{display:flex;flex-wrap:wrap;gap:8px}
.tier-btn{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:600;line-height:1;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.tier-btn:hover{border-color:var(--amethyst);color:var(--amethyst)}

/* ---------- paginacja, komunikaty, stany puste ---------- */
.pagination{display:flex;gap:8px;justify-content:center;list-style:none;margin:32px 0;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--card)}
.pagination .active span{background:var(--amethyst);border-color:var(--amethyst);color:#fff;font-weight:600}
.pagination .disabled span{opacity:.4}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:22px;color:var(--muted);font-size:14px;text-align:center}
.messages{margin:16px 0}
.messages > div{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);margin-bottom:8px;font-size:14px}
.breadcrumbs{font-size:13px;color:var(--muted);padding:16px 0}
.breadcrumbs a:hover{color:var(--amethyst)}

/* ---------- stopka ---------- */
footer.site{border-top:1px solid var(--line);margin-top:20px;padding:32px 0;background:var(--bg-soft)}
footer.site .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;font-size:13.5px;color:var(--muted)}
footer.site h4{color:var(--ink);font-size:14px;margin-bottom:8px}
footer.site ul{list-style:none}
footer.site li{padding:3px 0}
footer.site a:hover{color:var(--amethyst)}
footer.site .fine{margin-top:8px;font-size:12px}

/* ---------- responsywnosc ---------- */
@media(max-width:900px){
  .hero-layout,.layout,.grid,footer.site .wrap{grid-template-columns:1fr}
  .hero{padding:20px 0}
  .hero-track{height:300px}
  .set-hero-inner{grid-template-columns:1fr;gap:14px;padding:22px 18px 18px;text-align:center}
  .set-hero-logo,.set-hero-cards{margin-top:0}
  .set-hero-info p{margin:0 auto}
  .set-hero-dates{justify-content:center}
  .set-hero-logo img{max-width:250px}
  .set-hero-bg{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%)}
  .hero-side{height:auto}
  .hero-mini{flex:none;height:140px}
  .hero-content{padding:20px 20px 34px}
  .hero-content h2{font-size:24px}
  .hero-content p{font-size:14.5px}
  .list-item{grid-template-columns:1fr;gap:12px}
  .list-item .thumb{height:150px}
  .news-list .list-item{grid-template-columns:1fr;gap:12px}
  .news-list .list-item .thumb{height:190px}
  .cal-row{grid-template-columns:60px 1fr;gap:12px;row-gap:8px;padding:14px 16px}
  .cal-row .pill{grid-column:2;justify-self:start}
  .cal-filters{gap:12px 16px;padding:12px 14px}
  .cal-filter-meta{margin-left:0;width:100%;justify-content:space-between}
  .cal-select{width:100%}
  .cal-filter-group{width:100%}
  .tier-row{grid-template-columns:58px 1fr;gap:12px;padding:16px}
  .tier-badge .t{font-size:24px}
  .tier-badge .lbl{display:none}
  .tier-cards{grid-template-columns:repeat(3,1fr);gap:6px}
  .week-cal-grid{grid-template-columns:repeat(2,1fr)}
  .article{padding:20px 0}
  .article-head h1{font-size:26px}
  .prose{font-size:16px}

  /* Nagłówek: nawigacja chowa się pod przycisk, etykieta trybu znika, zostaje ikona */
  .nav{height:60px;gap:12px}
  .brand{font-size:19px}
  .nav-right{gap:8px}
  .menu-btn{display:inline-flex}
  .tt-label{display:none}
  .icon-btn{padding:9px 12px;min-height:40px}
  .nav nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;padding:4px 20px 12px;max-height:calc(100vh - 60px);overflow-y:auto}
  header.site.open .nav nav{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav nav a.active{border-bottom-color:var(--parchment-accent)}
}

@media(max-width:560px){
  .wrap{padding:0 16px}
  .topbar{font-size:12px}
  .sec{margin:26px 0 14px;gap:10px;flex-wrap:wrap}
  .sec h2{font-size:18px;white-space:normal}
  .sec::after{flex-basis:100%;order:3}
  .grid{gap:14px}
  .thumb{height:130px}
  .card-body{padding:14px}
  .hero-track{height:260px}
  .set-hero-info h2{font-size:22px}
  .set-hero-info p{font-size:14px}
  .set-card-slot{width:165px}
  .hero-content{padding:16px 16px 30px}
  .hero-content h2{font-size:21px}
  .hero-progress{bottom:12px;left:16px;right:16px}
  .article-head h1{font-size:23px}
  .side-box{padding:16px}
  .week-cal-grid{grid-template-columns:1fr}
  .tier-row{grid-template-columns:48px 1fr;padding:14px}
  .tier-badge{padding:8px 4px}
  .tier-badge .t{font-size:21px}
  .tier-head h3{font-size:15.5px}
  .tier-btn{font-size:12.5px;padding:8px 12px}
  .cta{padding:22px;margin:32px 0;gap:16px}
  .cta h2{font-size:20px}
  .cta .form{width:100%}
  .cta input{min-width:0;width:100%}
  .cta .btn{width:100%;text-align:center}
}

/* Najwezsze telefony: logo musi zmiescic sie obok obu przyciskow */
@media(max-width:400px){
  .nav{gap:8px}
  .brand{font-size:15.5px;overflow:hidden}
  .nav-right{flex:0 0 auto}
  .icon-btn{padding:9px 11px}
  .topbar{font-size:11.5px}
}

/* ---------- zgloszenie wydarzenia (modal) ---------- */
.ev-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:18px;padding:14px 18px;background:var(--amethyst-soft);border:1px solid var(--line);border-radius:var(--radius)}
.ev-cta .prose{margin:0}
.ev-cta .prose p{margin:0}
.ev-open{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14px;font-weight:700;padding:10px 20px;border:none;border-radius:999px;background:var(--amethyst);color:#fff;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,background .15s}
.ev-open:hover{background:var(--steel);transform:translateY(-1px)}
.ev-open:focus-visible{outline:2px solid var(--amethyst);outline-offset:3px}

.ev-modal{position:fixed;inset:0;margin:auto;height:fit-content;width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:none;background:transparent;color:var(--ink);overflow:visible}
.ev-modal::backdrop{background:rgba(20,14,40,.55);backdrop-filter:blur(3px)}
.ev-modal[open]{animation:ev-in .2s ease}
@keyframes ev-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ev-modal-card{position:relative;max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(22px,5vw,36px);background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow)}
.ev-modal-card h2{font-family:var(--font-head);font-size:clamp(22px,4vw,28px);line-height:1.2;margin:10px 0 6px}
.ev-lead{color:var(--muted);font-size:14.5px;margin:0 0 18px}
.ev-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--bg-soft);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.ev-close:hover{color:var(--amethyst);border-color:var(--amethyst)}
.ev-close:focus-visible{outline:2px solid var(--amethyst);outline-offset:2px}

.ev-modal form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.ev-modal .form-field{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.ev-modal .form-field.ev-half{grid-column:auto}
.ev-modal .form-field label{font-size:13px;font-weight:600;color:var(--muted)}
.ev-modal .form-field .required{color:var(--amethyst)}
.ev-modal .form-input-wrapper{display:block;border:none;border-radius:0;overflow:visible}
.ev-modal .form-input-prepend{background:transparent;color:inherit}
.ev-modal input[type=text],.ev-modal input[type=email],.ev-modal input[type=date],.ev-modal select,.ev-modal textarea{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px}
.ev-modal textarea{resize:vertical;min-height:84px}
.ev-modal input:focus,.ev-modal select:focus,.ev-modal textarea:focus{outline:2px solid var(--amethyst);outline-offset:1px;border-color:var(--amethyst)}
.ev-modal .form-description{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ev-modal .has-errors input,.ev-modal .has-errors select,.ev-modal .has-errors textarea{border-color:#d2453f}
.ev-modal .form-message{color:#d2453f;font-size:12.5px;margin:4px 0 0}
.ev-modal .basic-captcha .form-input-wrapper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ev-modal .basic-captcha .form-input-addon{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ev-modal .basic-captcha img{display:block;height:44px;width:auto;box-sizing:border-box;border-radius:10px;border:1px solid var(--line)}
.ev-modal .basic-captcha input{flex:1;min-width:120px;height:44px}
/* przycisk odswiezenia: ta sama wysokosc co obrazek i pole; form-styles.css wtyczki
   daje ikonie margines 8px i 18px, stad selektory z .form-data.basic-captcha */
.ev-modal .basic-captcha .reload-captcha-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;margin:0;box-sizing:border-box;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s}
.ev-modal .form-data.basic-captcha .form-input-prepend .reload-captcha-button>svg{display:block;width:20px;height:20px;margin:0;transition:transform .3s}
.ev-modal .basic-captcha .reload-captcha-button:hover{color:var(--amethyst);border-color:var(--amethyst)}
.ev-modal .form-data.basic-captcha .form-input-prepend .reload-captcha-button:hover>svg{transform:rotate(-90deg)}
.ev-modal .basic-captcha .reload-captcha-button:focus-visible{outline:2px solid var(--amethyst);outline-offset:1px}
.ev-modal .buttons{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:4px}
.ev-modal .ev-submit{font-family:inherit;font-size:15px;font-weight:700;padding:11px 24px;border:none;border-radius:999px;background:var(--amethyst);color:#fff;cursor:pointer}
.ev-modal .ev-submit:hover{filter:brightness(1.08)}
.ev-modal .ev-submit:focus-visible{outline:2px solid var(--amethyst);outline-offset:3px}
.ev-modal .notices{grid-column:1/-1;margin:0 0 14px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);font-size:14px}
.ev-modal .notices p{margin:0}
.ev-modal .notices.success{border-color:#2f9e5b;color:#2f9e5b}
.ev-modal .notices.error{border-color:#d2453f;color:#d2453f}
@media (max-width:560px){
  .ev-cta{flex-direction:column;align-items:stretch}
  .ev-open{justify-content:center}
  .ev-modal form{grid-template-columns:1fr}
  .ev-modal .buttons .ev-submit{width:100%}
}
.ev-rph-row{display:flex;gap:8px;align-items:stretch}
.ev-rph-row input{flex:1;min-width:0}
.ev-rph-btn{flex-shrink:0;font-family:inherit;font-size:13.5px;font-weight:700;padding:0 16px;border-radius:10px;border:1px solid var(--amethyst);background:var(--amethyst-soft);color:var(--amethyst);cursor:pointer;white-space:nowrap}
.ev-rph-btn:hover{background:var(--amethyst);color:#fff}
.ev-rph-btn:disabled{opacity:.6;cursor:progress}
.ev-rph-btn:focus-visible{outline:2px solid var(--amethyst);outline-offset:2px}
.ev-rph-status{font-size:13px;margin:6px 0 0;color:var(--muted)}
.ev-rph-status.is-success{color:#2f9e5b}
.ev-rph-status.is-error{color:#d2453f}
.ev-modal .form-field.ev-rph{padding-bottom:14px;border-bottom:1px dashed var(--line)}
@media (max-width:560px){
  .ev-rph-row{flex-direction:column}
  .ev-rph-btn{padding:10px 16px}
}