/* HaloStrzegom - Main Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --pink:#e8186d; --purple:#6b21a8;
  --grad:linear-gradient(135deg,#e8186d 0%,#6b21a8 100%);
  --bg:#fafafa; --bg2:#f4f4f8; --border:#e5e5ee;
  --text:#1a1523; --text2:#6b6b80; --text3:#9898a8;
  --white:#fff; --radius:1rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;font-size:16px}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.15}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:clamp(1.1rem,2vw,1.5rem)}
input,textarea,select,button{font-family:'Manrope',sans-serif}

/* ── SCROLL PROGRESS ── */
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:9999;width:0;transition:width .1s}

/* ── CONTAINER ── */
/* Uwaga: wcześniej istniały DWIE reguły .container (tu i w linii ~339),
   bez żadnego media query między nimi — druga po cichu nadpisywała
   max-width i padding pierwszej (kolejność w kaskadzie). To dawało
   niejednoznaczną, "na granicy" szerokość kontenera w okolicach 1240px,
   co przy oknie przeglądarki blisko tej wartości (np. niezmaksymalizowane
   okno na 13-calowym MacBooku) mogło dawać niespójny układ w zależności
   od dokładnej szerokości okna. Scalone w jedną, jednoznaczną regułę. */
.container{max-width:1240px;margin:0 auto;padding:0 1rem}
.section{padding:4rem 0}
.bg-white{background:#fff}

/* ── NAV ── */
#main-nav{position:sticky;top:0;z-index:1200;background:linear-gradient(120deg,rgba(36,11,74,.96) 0%,rgba(103,27,158,.94) 38%,rgba(232,24,109,.90) 72%,rgba(84,22,135,.95) 100%);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(24,8,44,.18);transition:box-shadow .3s,background .3s}
#main-nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%);pointer-events:none}
#main-nav.scrolled{box-shadow:0 14px 34px rgba(18,4,34,.24)}
.nav-inner{position:relative;display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);align-items:center;gap:1rem;min-height:4.4rem;max-width:1200px;margin:0 auto;padding:.55rem 1.25rem}
.nav-logo{position:relative;z-index:1;grid-column:1;justify-self:start;flex-shrink:0}
.nav-logo img{height:2.7rem;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 8px 22px rgba(30,8,48,.24))}
.nav-links{display:flex;align-items:center;justify-content:center;gap:.3rem;list-style:none;position:relative;z-index:1;grid-column:2;margin:0 auto}
.nav-links a{padding:.58rem .95rem;border-radius:999px;font-size:.92rem;font-weight:700;color:rgba(255,255,255,.90);transition:background .15s,color .15s,transform .15s}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-1px)}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;position:relative;z-index:1;grid-column:3;justify-self:end;min-width:180px}
.nav-mobile-toggle{display:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:.8rem;cursor:pointer;padding:.45rem;line-height:0;transition:background .15s,border-color .15s}
.nav-mobile-toggle:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.nav-mobile-menu{display:none;flex-direction:column;padding:.35rem 1.25rem 1rem;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(57,17,100,.98),rgba(109,28,166,.95) 48%,rgba(232,24,109,.93) 100%)}
.nav-mobile-menu a{padding:.8rem .2rem;font-size:.98rem;font-weight:700;color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.12)}
.nav-mobile-menu a:last-child{border-bottom:none}
.nav-mobile-menu a.active{color:#fff}
@media(max-width:900px){
  .nav-inner{grid-template-columns:auto 1fr auto}
  .nav-links{display:none}
  .nav-actions{min-width:auto}
  .nav-mobile-toggle{display:block}
  .nav-mobile-menu.open{display:flex}
}



@keyframes navActivePulse{
  0%{transform:translateX(-50%) scale(1);opacity:.9;box-shadow:0 0 0 0 rgba(255,255,255,.38)}
  50%{transform:translateX(-50%) scale(1.28);opacity:1;box-shadow:0 0 0 8px rgba(255,255,255,0)}
  100%{transform:translateX(-50%) scale(1);opacity:.92;box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@keyframes navActivePulseDark{
  0%{transform:translateX(-50%) scale(1);opacity:.9;box-shadow:0 0 0 0 rgba(183,0,77,.28)}
  50%{transform:translateX(-50%) scale(1.28);opacity:1;box-shadow:0 0 0 8px rgba(183,0,77,0)}
  100%{transform:translateX(-50%) scale(1);opacity:.92;box-shadow:0 0 0 0 rgba(183,0,77,0)}
}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.6rem;border-radius:2rem;background:var(--grad);color:#fff;border:none;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;transition:opacity .2s,transform .15s}
.btn-primary:hover{opacity:.88;transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.5rem;border-radius:2rem;background:transparent;color:var(--pink);border:2px solid var(--pink);cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;transition:background .2s,color .2s,transform .15s}
.btn-outline:hover{background:var(--pink);color:#fff;transform:translateY(-2px)}
.btn-outline-light{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.5rem;border-radius:2rem;background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.5);cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;transition:background .2s,border-color .2s,transform .15s}
.btn-outline-light:hover{background:rgba(255,255,255,.22);border-color:#fff;transform:translateY(-2px)}
.btn-submit{padding:.75rem 2rem;border-radius:2rem;background:var(--grad);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;border:none;cursor:pointer;width:100%;transition:opacity .2s}
.btn-submit:hover{opacity:.9}

/* ── PAGE HEADER ── */
.page-header{background:var(--grad);color:#fff;padding:4rem 0 3rem;text-align:center}
.page-header-tag{font-size:.7rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:.5rem}
.page-header h1{color:#fff;margin-bottom:.5rem}
.page-header p{opacity:.8;font-size:1rem}

/* ── SECTION HEADING ── */
.section-head{margin-bottom:2rem}
.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--text)}
.accent-bar{display:block;width:3rem;height:3px;background:var(--grad);border-radius:2px;margin:.5rem 0 .75rem}

/* ── TAGS ── */
.tag{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.68rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:rgba(232,24,109,.12);color:var(--pink)}

/* ── HERO ── */
.hero{position:relative;min-height:520px;display:flex;align-items:flex-end;overflow:hidden;background:#0f0a1a}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.hero-slide.active{opacity:1}
.hero-slide-img{position:absolute;inset:0;background-size:cover;background-position:top center}
.hero-slide-overlay{position:absolute;inset:0;background:transparent}
.hero-content{position:relative;z-index:2;padding:3rem 1.25rem;max-width:1200px;margin:0 auto;width:100%}
.hero-tag{display:inline-block;padding:.3rem .85rem;border-radius:999px;background:rgba(232,24,109,.85);color:#fff;font-size:.7rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}
.hero-title{color:#fff;margin-bottom:.75rem;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-excerpt{color:rgba(255,255,255,.75);font-size:1rem;max-width:600px;margin-bottom:1.5rem}
.hero-dots{display:flex;gap:.5rem;margin-bottom:1.5rem}
.hero-dot{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;transition:all .2s;padding:0}
.hero-dot.active{width:1.5rem;border-radius:.25rem;background:#fff}

/* ── STATS BAR ── */
.stats-bar{background:var(--grad);padding:1rem 0}
.stats-inner{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}
.stat-item{text-align:center;color:#fff}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:800;line-height:1}
.stat-label{font-size:.75rem;opacity:.8;text-transform:uppercase;letter-spacing:.06em}

/* ── ARTICLE CARDS ── */
.article-grid{display:grid;gap:1.5rem}
.article-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;display:block}
.article-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.10)}
.article-card-img{height:200px;overflow:hidden;background:#eee}
.article-card-img-sm{height:120px;overflow:hidden;background:#eee}
.article-card-body{padding:1.25rem}
.article-card-title{font-size:1.1rem;margin-bottom:.4rem;line-height:1.3;color:var(--text)}
.article-card-excerpt{font-size:.875rem;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card-date{font-size:.75rem;color:var(--text3);margin-top:.75rem}

/* ── Licznik odsłon na kartach artykułów ──
   Data zostaje po lewej, oczko dociągnięte do prawej krawędzi karty przez
   margin-left:auto — to trzyma je w narożniku niezależnie od długości daty
   i nie wymaga zmiany układu istniejących kart. */
.article-card-date{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.article-views{display:inline-flex;align-items:center;gap:.28rem;margin-left:auto;
  font-size:.72rem;font-weight:700;line-height:1;color:var(--text-muted,#8b9094);
  letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.article-views svg{width:14px;height:14px;flex:0 0 auto;opacity:.85}
.story-meta-right{display:inline-flex;align-items:center;gap:.7rem}
.story-lead-card .article-views,.story-meta-right .article-views{margin-left:0}
@media(max-width:640px){
  .article-views{font-size:.69rem}
  .article-views svg{width:13px;height:13px}
}

/* ── FEATURED CARDS ── */
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.news-articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.featured-card{background:#fff;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;border:1px solid var(--border);display:block}
.featured-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.10)}
.featured-card-img{height:160px;background:#eee;overflow:hidden}
.featured-card-body{padding:1.25rem}
.featured-num{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;font-weight:700;color:var(--pink);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.35rem}

/* ── ARTICLE PAGE ── */
.article-body{max-width:860px;margin:0 auto;padding:0}
.article-body h2{font-size:1.5rem;font-weight:700;margin:2rem 0 .75rem}
.article-body h3{font-size:1.2rem;font-weight:700;margin:1.5rem 0 .5rem}
.article-body p{margin-bottom:1.25rem;line-height:1.85;color:var(--text2)}
.article-body ul,.article-body ol{margin:.75rem 0 1.25rem 1.5rem;color:var(--text2)}
.article-body li{margin-bottom:.35rem;line-height:1.7}
.article-body blockquote{border-left:3px solid var(--pink);margin:.8rem 0;padding:.5rem 1.25rem;color:var(--text2);background:rgba(232,24,109,.05);border-radius:0 .5rem .5rem 0}
.breadcrumb{font-size:.8rem;color:var(--text3);margin-bottom:1rem}
.breadcrumb a{color:var(--pink)}

/* ── GALLERY ── */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-top:1.25rem}
.gallery-item{border-radius:.75rem;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;background:#eee;transition:transform .15s}
.gallery-item:hover{transform:scale(1.02)}

/* ── LIGHTBOX ── */
#lightbox{display:none;position:fixed;inset:0;z-index:9000;align-items:center;justify-content:center;cursor:zoom-out;background:rgba(244,244,248,0);backdrop-filter:blur(0px);transition:background .38s ease,backdrop-filter .38s ease}
#lightbox.lb-opening{background:rgba(244,244,248,.75);backdrop-filter:blur(6px)}
#lightbox.open{display:flex;background:rgba(244,244,248,.75);backdrop-filter:blur(6px)}
#lb-inner{position:relative;display:flex;align-items:center;justify-content:center;max-width:92vw;max-height:90vh;transform:scale(.55) translateY(32px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .38s ease;cursor:default}
#lightbox.open #lb-inner{transform:scale(1) translateY(0);opacity:1}
#lb-img{max-width:88vw;max-height:86vh;object-fit:contain;display:block;border-radius:.875rem;box-shadow:0 24px 80px rgba(107,33,168,.18),0 4px 16px rgba(0,0,0,.08)}
#lb-video{max-width:88vw;max-height:86vh;display:block;border-radius:.875rem;background:#000;box-shadow:0 24px 80px rgba(107,33,168,.18),0 4px 16px rgba(0,0,0,.08)}
#lb-close{position:fixed;top:1.25rem;right:1.25rem;background:#fff;border:1.5px solid var(--border);color:var(--text2);width:2.4rem;height:2.4rem;border-radius:50%;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.1);transition:background .15s,transform .15s;z-index:1}
#lb-close:hover{background:var(--bg2);transform:scale(1.1)}
#lb-prev,#lb-next{position:fixed;top:50%;transform:translateY(-50%);background:#fff;border:1.5px solid var(--border);color:var(--text);width:2.75rem;height:2.75rem;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.1);transition:background .15s,transform .15s,opacity .2s;opacity:.85;z-index:1}
#lb-prev:hover,#lb-next:hover{background:var(--bg2);opacity:1;transform:translateY(-50%) scale(1.08)}
#lb-prev{left:1.25rem}
#lb-next{right:1.25rem}
#lb-prev.hidden,#lb-next.hidden{display:none}
#lb-counter{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:2rem;padding:.3rem .85rem;font-size:.78rem;font-weight:600;color:var(--text2);box-shadow:0 2px 8px rgba(0,0,0,.08);opacity:0;transition:opacity .3s .1s;pointer-events:none}
#lightbox.open #lb-counter{opacity:1}

/* ── TIMELINE ── */
.tl-wrap{position:relative;padding:.5rem 0;max-width:680px}
.tl-wrap::before{content:'';position:absolute;left:22px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent 0%,var(--pink) 5%,var(--purple) 95%,transparent 100%)}
.tl-item{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:2.75rem;position:relative;opacity:0;transform:translateX(-22px)}
.tl-item:last-child{margin-bottom:0}
.tl-item.tl-visible{opacity:1;transform:translateX(0);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.tl-num{width:46px;height:46px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0;position:relative;z-index:2;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(232,24,109,.2)}
.tl-item.tl-visible .tl-num{animation:tlPop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tlPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.tl-body{padding-top:.25rem;flex:1}
.tl-year{font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:.3rem}
.tl-title{font-family:'Barlow Condensed',sans-serif;font-size:1.3rem;font-weight:700;color:var(--text);line-height:1.2;margin-bottom:.5rem;letter-spacing:.01em;text-transform:uppercase}
.tl-desc{font-size:.9rem;color:var(--text2);line-height:1.75}
.tl-body::after{content:'';display:block;height:1px;background:linear-gradient(to right,var(--border),transparent);margin-top:1.5rem}
.tl-item:last-child .tl-body::after{display:none}

/* ── ATTRACTIONS (warto zobaczyc) ── */
.attr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.attr-tile{background:#fff;border-radius:1rem;border:2px solid var(--border);padding:1.1rem 1rem 1rem;cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s}
.attr-tile:hover,.attr-tile.active{box-shadow:0 6px 20px rgba(0,0,0,.09);transform:translateY(-3px)}
.attr-tile-icon{width:3rem;height:3rem;border-radius:50%;margin:0 auto .75rem;display:flex;align-items:center;justify-content:center}
.attr-tile-icon svg{width:1.3rem;height:1.3rem;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.attr-tile-name{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:.35rem}
.attr-tile-badge{display:inline-flex;align-items:center;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.15rem .55rem;border-radius:2rem}

/* ── FILTER BAR ── */
.filter-bar{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.search-wrap{position:relative;width:100%}
.search-wrap svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--text3);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none;transition:stroke .2s}
.search-wrap:focus-within svg{stroke:var(--pink)}
.search-box{width:100%;padding:.85rem 3rem .85rem 2.9rem;border:1.5px solid var(--border);border-radius:.875rem;font-size:.95rem;outline:none;background:#fff;color:var(--text);transition:border-color .2s,box-shadow .2s}
.search-box:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(232,24,109,.1)}
.search-box::placeholder{color:var(--text3)}
.search-clear{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);width:1.6rem;height:1.6rem;border-radius:50%;background:var(--bg2);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;color:var(--text3);font-size:.75rem;transition:background .15s}
.search-clear:hover{background:var(--border)}
.search-clear.visible{display:flex}
.search-count{position:absolute;right:3rem;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--text3);pointer-events:none;white-space:nowrap}
.filter-cats{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filter-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-right:.25rem;white-space:nowrap}
.filter-btn{padding:.4rem .95rem;border-radius:2rem;border:1.5px solid var(--border);font-size:.8rem;cursor:pointer;background:#fff;color:var(--text2);font-weight:600;font-family:'Barlow Condensed',sans-serif;letter-spacing:.03em;transition:all .18s}
.filter-btn:hover{border-color:var(--pink);color:var(--pink);background:rgba(232,24,109,.05)}
.filter-btn.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(232,24,109,.25)}

/* ── PAGINATION ── */
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:2.5rem;flex-wrap:wrap}
.page-btn{padding:.4rem .9rem;border-radius:.5rem;border:1px solid var(--border);font-size:.85rem;cursor:pointer;background:#fff;color:var(--text2);transition:all .15s}
.page-btn:hover{border-color:var(--pink);color:var(--pink)}
.page-btn.active{background:var(--grad);color:#fff;border-color:transparent}

/* ── FORMS ── */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text2);margin-bottom:.4rem}
.form-input,.form-select,.form-textarea{width:100%;padding:.65rem 1rem;border:1.5px solid var(--border);border-radius:.65rem;font-size:.9rem;background:#fff;color:var(--text);transition:border-color .2s;outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--pink)}
.form-textarea{resize:vertical;min-height:8rem}
.contact-info-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:#fff;border-radius:.75rem;border:1px solid var(--border);margin-bottom:.75rem}
.contact-icon{width:2.5rem;height:2.5rem;background:rgba(232,24,109,.1);border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.flash{padding:.875rem 1.25rem;border-radius:.65rem;margin-bottom:1.25rem;font-size:.875rem;font-weight:500}
.flash.success{background:#dcfce7;color:#166534}
.flash.error{background:#fee2e2;color:#991b1b}

/* ── VALUES GRID ── */
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2rem}
.value-card{background:#fff;border-radius:var(--radius);border:1px solid var(--border);padding:1.5rem;text-align:center}
.value-icon{font-size:2rem;margin-bottom:.75rem}

/* ── SCROLL ANIMATIONS ── */
.sa{opacity:0;transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);pointer-events:none}
.sa-up{transform:translateY(40px)}
.sa-left{transform:translateX(-36px)}
.sa-right{transform:translateX(36px)}
.sa-visible{opacity:1!important;transform:none!important;pointer-events:auto!important}
.sa-d1{transition-delay:.08s}.sa-d2{transition-delay:.16s}.sa-d3{transition-delay:.24s}
.sa-d4{transition-delay:.32s}.sa-d5{transition-delay:.40s}.sa-d6{transition-delay:.48s}

/* ── FOOTER ── */
#site-footer{background:#0f0a1a;color:rgba(255,255,255,.7);padding:3rem 0 1.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-desc{font-size:.875rem;line-height:1.8;margin-top:.75rem}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.5rem}
.footer-links a{font-size:.875rem;color:rgba(255,255,255,.6);transition:color .2s}
.footer-links a:hover{color:var(--pink)}
.footer-heading{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;color:#fff;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1.5rem;text-align:center;font-size:.8rem;color:rgba(255,255,255,.35)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:4rem;color:var(--text3)}

/* ── MAP (warto zobaczyc) ── */
.attr-filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding:1.25rem 0 .25rem}
.attr-filter-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem .45rem .65rem;border-radius:2rem;border:2px solid var(--border);background:#fff;color:var(--text2);font-size:.8rem;font-weight:600;font-family:'Barlow Condensed',sans-serif;letter-spacing:.03em;cursor:pointer;transition:all .18s}
.attr-filter-btn.active{color:#fff}
.cat-icon{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-icon svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#attr-map-wrap{border-radius:1.25rem;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.07);margin-bottom:1.5rem}
#attr-map-header{padding:.65rem 1.1rem;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
#attr-map-header .map-title{font-size:.75rem;font-weight:700;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--text2)}
#attr-map-header .map-hint{font-size:.72rem;color:var(--text3)}
#attr-map{height:500px;width:100%}
.leaflet-popup-content-wrapper{border-radius:1rem!important;box-shadow:0 8px 40px rgba(0,0,0,.18)!important;padding:0!important;overflow:hidden;border:none!important}
.leaflet-popup-content{margin:0!important;width:280px!important}
.attr-popup{font-family:'Inter',sans-serif}
.attr-popup-header{padding:.85rem 1rem .7rem;display:flex;align-items:center;gap:.65rem}
.attr-popup-num{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:.95rem;flex-shrink:0}
.attr-popup-title{font-size:.95rem;font-weight:700;color:#1a1523;line-height:1.25;flex:1}
.attr-popup-body{padding:.1rem 1rem .9rem;border-top:1px solid #e5e5ee}
.attr-popup-desc{font-size:.82rem;color:#6b6b80;line-height:1.65;margin:.65rem 0 .5rem}
.attr-popup-meta{font-size:.75rem;color:#9898a8;display:flex;flex-direction:column;gap:.2rem;margin-bottom:.85rem}
.attr-popup-meta span{display:flex;align-items:center;gap:.4rem}
.attr-popup-meta svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.attr-popup-nav{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;padding:.6rem;border-radius:.65rem;border:none;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(135deg,#e8186d,#6b21a8);color:#fff;transition:opacity .15s}
.attr-popup-nav:hover{opacity:.88}
.attr-popup-nav svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

@media(max-width:768px){
  .featured-grid{grid-template-columns:1fr}
  .news-articles-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .attr-tiles{grid-template-columns:repeat(2,1fr)}
}

/* ── YOUTUBE EMBED ── */
.yt-embed-wrap{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:.75rem;margin:1.25rem 0;background:#000}
.yt-embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.fb-embed-wrap{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:.75rem;margin:1.25rem 0;background:#000}
.fb-embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.fb-embed-wrap.is-vertical{padding-bottom:177.78%;max-width:420px;margin-left:auto;margin-right:auto}
.fb-embed-wrap.is-p34{padding-bottom:133.33%;max-width:460px;margin-left:auto;margin-right:auto}
.fb-embed-wrap.is-p45{padding-bottom:125%;max-width:480px;margin-left:auto;margin-right:auto}
.fb-embed-wrap.is-square{padding-bottom:100%;max-width:520px;margin-left:auto;margin-right:auto}
.fb-embed-wrap.is-custom{max-width:480px;margin-left:auto;margin-right:auto}
.article-body-modern .fb-embed-wrap:not(:has(iframe)){height:auto;padding-bottom:0;overflow:visible;background:transparent;border-radius:0}
.article-body-modern .fb-embed-wrap .fb-embed-wrap{margin:0}
.article-body-modern .yt-embed-wrap:not(:has(iframe)){height:auto;padding-bottom:0;overflow:visible;background:transparent;border-radius:0}
.article-body-modern .yt-embed-wrap .yt-embed-wrap{margin:0}

/* ── WŁASNY PLIK WIDEO (na naszym serwerze, bez Facebooka) ──
   Wysokość ramki bierze się z SAMEGO PLIKU: <video> dostaje width:100% i
   height:auto, więc przeglądarka używa rzeczywistych proporcji nagrania.
   Poprzednia wersja narzucała jeden z pięciu gotowych formatów (16:9, 1:1,
   4:5, 3:4, 9:16) i zaokrąglała do najbliższego — film o proporcjach spoza
   tej listy dostawał wtedy czarne pasy u góry i u dołu.
   Klasy poniżej sterują już tylko SZEROKOŚCIĄ, żeby pionowe nagranie nie
   rozpychało się na całą kolumnę tekstu. Nie mają wpływu na proporcje, więc
   nawet źle dobrana klasa nie zniekształci obrazu.
   Atrybuty width/height na znaczniku <video> rezerwują miejsce, zanim
   wczytają się metadane — dzięki temu tekst pod filmem nie podskakuje. */
/* WYŚRODKOWANIE — trzy niezależne mechanizmy, celowo się dublujące.
   Ten element wielokrotnie uciekał na bok, bo edytor potrafi zmienić strukturę
   treści przy wstawianiu. Dlatego zamiast jednego sposobu wyrównania działają
   trzy naraz: margin:auto na kontenerze, text-align:center (obejmuje też
   przypadek, gdy scena stanie się elementem liniowym) oraz margin:auto na
   samej scenie. Żeby film wylądował z boku, musiałyby zawieść wszystkie trzy.
   Dochodzi jeszcze float:none — na wypadek, gdyby regułę pływania odziedziczył
   po którymś ze stylów treści artykułu. */
.halo-video-wrap{position:relative;display:block;margin:1.25rem auto;max-width:820px;
  text-align:center;float:none;clear:both}
.halo-video-wrap .halo-video{display:block;width:100%;height:auto;border:0;border-radius:14px;background:#000;
  margin-left:auto;margin-right:auto;float:none;
  box-shadow:0 18px 44px -12px rgba(26,12,48,.28), 0 4px 12px -4px rgba(26,12,48,.14)}

/* ── Własne sterowanie odtwarzaczem (assets/js/video-player.js) ──
   Scena jest elementem liniowo-blokowym, żeby obejmowała film co do piksela
   niezależnie od jego proporcji — pasek sterowania ma się kończyć dokładnie
   tam, gdzie kończy się obraz, a nie na krawędzi kolumny tekstu. */
.hv-stage{position:relative;display:inline-block;max-width:100%;vertical-align:top;
  margin:0 auto;border-radius:14px;overflow:hidden;line-height:0;
  box-shadow:0 18px 44px -12px rgba(26,12,48,.28), 0 4px 12px -4px rgba(26,12,48,.14)}
.hv-stage .halo-video{border-radius:0;box-shadow:none;margin:0;cursor:pointer}
.hv-stage:fullscreen{border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;background:#000}
.hv-stage:fullscreen .halo-video{max-height:100vh;max-width:100vw;width:auto;height:auto}

/* Pasek chowa się podczas odtwarzania i wraca przy najechaniu, dotknięciu lub
   fokusie z klawiatury. Przy zatrzymanym filmie jest widoczny zawsze. */
.hv-ui{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:.5rem;padding:.85rem .7rem .6rem;
  line-height:1;font-family:'Manrope',system-ui,sans-serif;
  background:linear-gradient(to top,rgba(10,4,20,.82) 0%,rgba(10,4,20,.55) 55%,rgba(10,4,20,0) 100%);
  opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.hv-stage:hover .hv-ui,
.hv-stage.is-paused .hv-ui,
.hv-stage:focus-within .hv-ui{opacity:1;transform:none}
.hv-btn{flex:0 0 auto;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;transition:background .15s ease}
.hv-btn:hover{background:rgba(255,255,255,.16)}
.hv-btn:focus-visible{outline:2px solid #ff5fa8;outline-offset:2px}
.hv-btn svg{width:19px;height:19px;fill:currentColor}
.hv-time{flex:0 0 auto;font-size:.72rem;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}
.hv-volbox{flex:0 0 auto;display:flex;align-items:center;gap:.15rem}
/* Suwak głośności rozwija się dopiero przy najechaniu — w wąskim odtwarzaczu
   nie ma miejsca, żeby trzymać go rozwiniętym na stałe. */
.hv-vol{width:0;opacity:0;transition:width .18s ease,opacity .18s ease}
.hv-volbox:hover .hv-vol,.hv-volbox:focus-within .hv-vol{width:56px;opacity:1}

/* Suwaki to zwykłe input[type=range] — stąd darmowa obsługa klawiatury.
   Wypełnienie rysujemy zmienną --hv-fill ustawianą ze skryptu. */
.hv-seek,.hv-vol{-webkit-appearance:none;appearance:none;height:14px;margin:0;
  background:transparent;cursor:pointer;--hv-fill:0%;--hv-buf:0%}
.hv-seek{flex:1 1 auto;min-width:40px}
.hv-seek::-webkit-slider-runnable-track,.hv-vol::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,#ff2f87 var(--hv-fill),rgba(255,255,255,.34) var(--hv-fill))}
.hv-seek::-moz-range-track,.hv-vol::-moz-range-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,#ff2f87 var(--hv-fill),rgba(255,255,255,.34) var(--hv-fill))}

/* Wskaźnik pobranego materiału - trzy odcinki na jednym pasku, jak w dużych
   odtwarzaczach: różowy to część odtworzona, jaśniejszy szary pokazuje, dokąd
   plik jest już wczytany, ciemny to reszta. Rysujemy to samym gradientem,
   bez dodatkowego elementu: suwak jest polem <input type="range">, więc
   podłożenie pod niego warstwy wymagałoby przebudowy całego paska i ręcznego
   odtworzenia obsługi klawiatury, której natywne pole ma już poprawną.
   Dotyczy TYLKO paska przewijania - przy głośności nie ma czego buforować. */
.hv-seek::-webkit-slider-runnable-track{
  background:linear-gradient(to right,
    #ff2f87 0, #ff2f87 var(--hv-fill),
    rgba(255,255,255,.78) var(--hv-fill), rgba(255,255,255,.78) var(--hv-buf),
    rgba(255,255,255,.34) var(--hv-buf))}
.hv-seek::-moz-range-track{
  background:linear-gradient(to right,
    #ff2f87 0, #ff2f87 var(--hv-fill),
    rgba(255,255,255,.78) var(--hv-fill), rgba(255,255,255,.78) var(--hv-buf),
    rgba(255,255,255,.34) var(--hv-buf))}
.hv-seek::-webkit-slider-thumb,.hv-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:11px;height:11px;margin-top:-3.5px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.45);border:0}
.hv-seek::-moz-range-thumb,.hv-vol::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
.hv-seek:focus-visible,.hv-vol:focus-visible{outline:2px solid #ff5fa8;outline-offset:3px;border-radius:4px}

/* Duży przycisk odtwarzania na środku — znika, gdy film gra. */
.hv-big{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:62px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,5,22,.55);color:#fff;backdrop-filter:blur(6px);
  transition:opacity .18s ease,transform .18s ease,background .18s ease}
.hv-big svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.hv-big:hover{background:rgba(183,0,77,.85);transform:translate(-50%,-50%) scale(1.06)}
.hv-big:focus-visible{outline:2px solid #ff5fa8;outline-offset:3px}
.hv-stage:not(.is-paused) .hv-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}

@media(max-width:640px){
  .hv-ui{opacity:1;transform:none;padding:.7rem .5rem .5rem}
  .hv-big{width:54px;height:54px}
  .hv-time{font-size:.68rem}
}
@media(prefers-reduced-motion:reduce){
  .hv-ui,.hv-big,.hv-vol{transition:none}
}
/* Pozostałość po wycofanym obrazku rozmytego tła. Reguła musi zostać, bo
   artykuły opublikowane wcześniej wciąż mają ten znacznik w treści — bez
   tego widnieje nad odtwarzaczem jako czarny prostokąt. !important, żeby
   zadziałała niezależnie od kolejności reguł. */
.halo-video-bg{display:none!important}
.halo-video-wrap.is-square{max-width:560px}

/* Nagranie pionowe — film wprost na bieli artykułu.
   Wysokość ograniczamy do 82% wysokości okna, maksymalnie 720 px. Miara
   względna, więc dopasowuje się do ekranu czytelnika zamiast trzymać się
   jednej sztywnej liczby: na trzynastocalowym laptopie film nadal mieści
   się w całości, a na większym monitorze wykorzystuje dostępne miejsce.
   Wcześniejszy limit 68% brał się z ograniczenia natywnego sterowania
   Safari, które poniżej ok. 400 px szerokości ukrywa pasek przewijania.
   Przy własnym sterowaniu ten próg przestał obowiązywać, więc film mógł
   urosnąć bez utraty jakiejkolwiek funkcji.
   Boki zostają puste i tak ma być: żadnego wypełnienia, ramki ani panelu.
   Kadr niesie miękki, rozproszony cień, który odrywa go od strony i sam w
   sobie wystarcza za oprawę. Brak dodatkowych elementów w treści oznacza
   też, że nie ma czego zepsuć, gdy arkusz stylów nie zdąży się odświeżyć. */
/* Wyśrodkowanie przez text-align + margin, a NIE przez display:flex.
   Układ rzędowy okazał się pułapką: gdy do kontenera trafił przez przypadek
   akapit (edytor potrafi tak zagnieździć treść przy wstawianiu), film i tekst
   ustawiały się obok siebie jak dwie kolumny, a odtwarzacz kurczył się do
   kilkudziesięciu pikseli. Przy układzie blokowym najgorsze, co się stanie,
   to akapit pod filmem — czyli nic strasznego. */
.halo-video-wrap.is-portrait,
.halo-video-wrap.is-vertical,
.halo-video-wrap.is-p34,
.halo-video-wrap.is-p45{
  /* Szerokość wyliczona z limitu wysokości i proporcji podanej przez serwer
     (--hv-ar = szerokość/wysokość). Wcześniej kontener zajmował całą kolumnę,
     a film stał wyśrodkowany w środku — dlatego nota pod nim nie miała jak
     trafić w krawędź obrazu. Teraz kontener JEST obrazem co do piksela.
     Zapasowa wartość .5625 to klasyczne 9:16, gdy wymiarów brak w bazie. */
  width:min(100%, calc(min(82vh,720px) * var(--hv-ar,.5625)));
  max-width:100%;display:block;text-align:center;
  background:none;border:0;padding:0;margin:1.25rem auto}
.halo-video-wrap.is-portrait .halo-video,
.halo-video-wrap.is-vertical .halo-video,
.halo-video-wrap.is-p34 .halo-video,
.halo-video-wrap.is-p45 .halo-video{
  /* width:100% zamiast auto — kontener ma już właściwą szerokość, więc film
     ma go po prostu wypełnić. Limit wysokości zostaje jako bezpiecznik na
     wypadek błędnej proporcji w bazie. */
  position:relative;width:100%;height:auto;max-width:100%;
  max-height:min(82vh,720px);border-radius:14px;background:#000;
  margin-left:auto;margin-right:auto;
  box-shadow:0 18px 44px -12px rgba(26,12,48,.28), 0 4px 12px -4px rgba(26,12,48,.14)}
/* Gdy działa własne sterowanie, cień i zaokrąglenie przejmuje scena —
   inaczej pasek wystawałby poza zaokrągloną krawędź obrazu. */
.halo-video-wrap .hv-stage{width:100%}
.halo-video-wrap.is-portrait .hv-stage,
.halo-video-wrap.is-vertical .hv-stage,
.halo-video-wrap.is-p34 .hv-stage,
.halo-video-wrap.is-p45 .hv-stage{max-height:min(82vh,720px)}
.halo-video-wrap.is-portrait .hv-stage .halo-video,
.halo-video-wrap.is-vertical .hv-stage .halo-video,
.halo-video-wrap.is-p34 .hv-stage .halo-video,
.halo-video-wrap.is-p45 .hv-stage .halo-video{max-height:min(82vh,720px)}

/* Na telefonie film wypełnia szerokość kolumny — cień byłby wtedy tylko
   niepotrzebnym pogrubieniem krawędzi przy samym brzegu ekranu. */
@media(max-width:640px){
  .halo-video-wrap.is-portrait,
  .halo-video-wrap.is-vertical,
  .halo-video-wrap.is-p34,
  .halo-video-wrap.is-p45{display:block;padding:0;margin:1rem auto}
  .halo-video-wrap.is-portrait .halo-video,
  .halo-video-wrap.is-vertical .halo-video,
  .halo-video-wrap.is-p34 .halo-video,
  .halo-video-wrap.is-p45 .halo-video{
    width:100%;max-height:none;border-radius:12px;
    box-shadow:0 8px 20px -8px rgba(26,12,48,.22)}
}
.article-body-modern .halo-video-wrap .halo-video-wrap{margin:0}

/* ── Nota o prawach autorskich pod odtwarzaczami ──
   Celowo dyskretna: ma być czytelna dla kogoś, kto szuka informacji o
   prawach, a nie krzyczeć na słuchacza przy każdym odtworzeniu.
   Domyślnie wyrównana DO LEWEJ i na pełną szerokość kolumny — tak, żeby
   na podstronie Podcast stała w jednej linii z listą odcinków. */
.halo-copyright-note{display:flex;align-items:flex-start;gap:.45rem;
  max-width:none;margin:.85rem 0 0;padding:0;
  font-size:.76rem;line-height:1.5;color:var(--muted,#6b7280)}
.halo-copyright-note svg{flex:0 0 auto;width:14px;height:14px;margin-top:.12rem;color:var(--primary,#b7004d)}
/* Zapas dla starszych wpisów, w których nota stoi ZA kontenerem wideo,
   a nie w środku. Nowe artykuły renderują ją wewnątrz (patrz articleVideoHtml). */
.halo-video-wrap + .halo-copyright-note{max-width:820px;margin:.4rem auto 1.5rem;
  justify-content:flex-start;text-align:left;font-size:.66rem}

/* ── Nota o prawach POD odtwarzaczem wideo ──
   Ma być drobna, tuż pod obrazem i dokładnie tak szeroka jak on, z tekstem
   dosuniętym do lewej krawędzi kadru. Ponieważ leży wewnątrz kontenera,
   a kontener ma dokładnie szerokość filmu, wyrównanie wychodzi samo.
   Układ blokowy, nie flex: przy dwóch wierszach tekstu element flex odsuwał
   tarczkę na sam koniec pierwszej linii i wisiała tam samotnie.
   Tarczka pod filmem znika — przy tak drobnym druku była plamką bez funkcji,
   a sam zapis mówi wszystko. W stopce i przy podcastach zostaje bez zmian. */
.halo-video-wrap .halo-copyright-note{
  display:block;width:auto;max-width:100%;margin:.4rem 0 0;padding:0;
  font-size:.66rem;line-height:1.45;text-align:left;
  color:var(--muted,#6b7280);opacity:.9}
.halo-video-wrap .halo-copyright-note svg{display:none}

/* ── Stopka: linia praw i pełna nota w jednym rzędzie ──
   Po lewej krótka linia z prawami, po prawej pełna nota — wyrównana do
   prawej krawędzi i zaczynająca się na wysokości tej pierwszej. */
.footer-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-copyline{margin:0;flex:0 0 auto}
.footer-rights{flex:1 1 320px;max-width:62ch;margin:0;
  font-size:.74rem;line-height:1.6;opacity:.72;text-align:right}
@media(max-width:900px){
  /* Przy węższym ekranie nota wraca pod linię praw i wyrównuje się do lewej —
     tekst wyrównany do prawej w wąskiej kolumnie jest męczący w czytaniu. */
  .footer-bottom{flex-direction:column;gap:.85rem}
  .footer-rights{max-width:none;text-align:left}
}
@media(max-width:640px){
  .halo-copyright-note{font-size:.72rem;margin-top:.7rem}
  .footer-rights{font-size:.71rem}
}


/* =========================
   HaloStrzegom 2026 editorial redesign
   Inspired by stitch concepts
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#b7004d;
  --primary-dim:#a00043;
  --secondary:#8930b0;
  --secondary-dim:#7c20a3;
  --tertiary:#a7295a;
  --surface:#f5f6f7;
  --surface-low:#eff1f2;
  --surface-high:#e6e8ea;
  --surface-white:#ffffff;
  --outline:#cfd3d6;
  --outline-soft:rgba(117,119,120,.15);
  --text:#2c2f30;
  --text-soft:#606567;
  --text-muted:#8b9094;
  --grad:linear-gradient(135deg,#b7004d 0%, #8930b0 100%);
  --grad-soft:linear-gradient(135deg,rgba(183,0,77,.08),rgba(137,48,176,.12));
  --card-shadow:0 20px 40px rgba(44,47,48,.06);
  --card-shadow-hover:0 28px 60px rgba(44,47,48,.10);
  --radius:1.2rem;
}
html{background:var(--surface)}
body{font-family:'Manrope',sans-serif!important;background:var(--surface)!important;color:var(--text)!important;line-height:1.7;font-size:16px}
h1,h2,h3,h4,h5,.section-title,.hero-title,.article-hero-title,.footer-brand,.footer-heading,.nav-btn,.nav-links a,.page-header h1{font-family:'Plus Jakarta Sans',sans-serif!important;letter-spacing:-.03em}
[style*="Barlow Condensed"]{font-family:'Plus Jakarta Sans',sans-serif!important}
a{transition:color .2s ease, transform .2s ease, opacity .2s ease}
img{border:0}
.section{padding:5.5rem 0}
.section-surface-low{background:var(--surface-low)}
.section-surface{background:var(--surface)}
.section-kicker,.page-header-tag,.featured-num,.story-list-tag,.hero-tag{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .78rem;border-radius:999px;background:rgba(137,48,176,.16);color:var(--secondary);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.section-kicker-light{background:rgba(255,255,255,.14);color:#fff}
.text-link{font-size:.95rem;font-weight:700;color:var(--primary)}
.text-link:hover{opacity:.8}
.editorial-head{display:flex;align-items:end;justify-content:space-between;gap:1.25rem;margin-bottom:2rem}
.editorial-head.center{justify-content:center;text-align:center}
.editorial-head.small{align-items:center}
.section-title{font-size:clamp(2rem,4vw,3rem)!important;color:var(--text)!important;line-height:1.02}
.accent-bar{display:none}

#main-nav{position:sticky;top:0;z-index:1200;background:linear-gradient(112deg,rgba(36,11,74,.98) 0%,rgba(74,21,126,.97) 34%,rgba(126,34,156,.95) 58%,rgba(232,24,109,.92) 100%)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:0 12px 34px rgba(27,7,52,.22)!important;overflow:visible}
#main-nav::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 58%);pointer-events:none}
#main-nav.scrolled{box-shadow:0 16px 36px rgba(19,5,37,.28)!important}
.nav-inner{position:relative;height:5.2rem;max-width:1240px;padding:0 1rem;gap:1rem;z-index:1}
.nav-logo{display:inline-flex;align-items:center;min-width:max-content}
.nav-logo img{display:block;width:auto;height:3rem;object-fit:contain;object-position:left center;filter:drop-shadow(0 8px 20px rgba(22,6,37,.24))}
.nav-links{gap:.95rem}
.nav-links a{position:relative;padding:0!important;background:none!important;border-radius:0!important;font-size:.94rem!important;font-weight:700!important;color:rgba(255,255,255,.82)!important}
.nav-links a:hover,.nav-links a.active{color:#fff!important}
.nav-links a.active::after{content:'';position:absolute;left:50%;bottom:-.65rem;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#fff;animation:navActivePulse 1.8s ease-in-out infinite}

/* Tymczasowe wyróżnienie linku „Podcast” w menu — odznaka „Nowość” +
   delikatny puls, żeby zwrócić uwagę na nową podstronę. Można zdjąć po
   ustaleniu, że wystarczająco dużo osób ją zauważyło — wystarczy usunąć
   warunek `$href === '/podcast'` w includes/header.php (4 miejsca) albo
   po prostu tę regułę CSS. */
.nav-link-badge{display:inline-flex;align-items:center;margin-left:.4rem;padding:.16rem .48rem;border-radius:999px;background:linear-gradient(135deg,#ff2f87,#7b2cff);color:#fff!important;font-size:.62rem!important;font-weight:800!important;letter-spacing:.04em;text-transform:uppercase;vertical-align:2px;animation:navBadgePulse 2.2s ease-in-out infinite}
@keyframes navBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,47,135,.45)}50%{box-shadow:0 0 0 5px rgba(255,47,135,0)}}
@media(prefers-reduced-motion:reduce){.nav-link-badge{animation:none}}
.nav-mobile-menu a .nav-link-badge{vertical-align:1px}
.nav-actions{display:flex;align-items:center;gap:.85rem}
.nav-btn{display:none!important}
.nav-mobile-toggle{display:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:.9rem;color:#fff;padding:.45rem}
.nav-mobile-menu{display:none;flex-direction:column;padding:0 1rem 1rem;background:linear-gradient(180deg,rgba(47,14,85,.98),rgba(111,29,163,.96) 52%,rgba(232,24,109,.92) 100%);backdrop-filter:blur(18px)}
.nav-mobile-menu a{padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-weight:700;color:rgba(255,255,255,.84)}
.nav-mobile-menu a.active,.nav-mobile-admin{color:#fff!important}
@media(max-width:900px){
  .nav-links,.nav-btn{display:none}
  .nav-mobile-toggle{display:block}
  .nav-mobile-menu.open{display:flex}
}

.btn-primary,.btn-submit{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.45rem;border-radius:999px;background:var(--primary)!important;color:#fff!important;border:none!important;font-weight:800!important;font-size:.95rem!important;box-shadow:0 16px 30px rgba(183,0,77,.18)}
.btn-primary:hover,.btn-submit:hover{background:var(--primary-dim)!important;transform:translateY(-1px)}
.btn-ghost,.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:.92rem 1.35rem;border-radius:999px;border:1px solid rgba(117,119,120,.18)!important;background:rgba(255,255,255,.66)!important;color:var(--text)!important;font-weight:700!important;backdrop-filter:blur(12px)}
.btn-ghost:hover,.btn-outline:hover{border-color:rgba(183,0,77,.25)!important;color:var(--primary)!important;background:#fff!important}
.btn-ghost-small{padding:.68rem 1rem;font-size:.88rem}
.btn-ghost-light,.btn-outline-light{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.35rem;border-radius:999px;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;font-weight:700!important;backdrop-filter:blur(14px)}
.btn-ghost-light:hover,.btn-outline-light:hover{background:rgba(255,255,255,.18)!important}

.home-hero-shell{padding:1.25rem 0 1rem;background:var(--surface)}
.hero-split-card{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);background:var(--surface-low);border-radius:1.75rem;overflow:hidden;box-shadow:var(--card-shadow);min-height:560px}
.hero-media-panel{position:relative;overflow:hidden;min-height:560px}
.hero-copy-panel{padding:3rem clamp(1.6rem,2.4vw,2.4rem);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;min-width:0;min-height:560px;background:rgba(255,255,255,.72)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.hero-slide.active{opacity:1}
.hero-slide-img{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.hero-slide-overlay{position:absolute;inset:0;background:transparent}
.hero-title-split{width:100%;font-size:clamp(2.15rem,3.45vw,3.85rem)!important;line-height:1.04!important;margin:.9rem 0 1rem;color:var(--text)!important;text-shadow:none!important;max-width:100%;min-width:0;min-height:4.16em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}
.hero-excerpt-split{font-size:1.05rem!important;color:var(--text-soft)!important;max-width:48ch;min-height:4.95em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:auto;margin-bottom:1.6rem;padding-top:1.8rem}
.hero-dots-split{display:flex;gap:.45rem;margin:0}
.hero-dot{width:.65rem!important;height:.65rem!important;border-radius:999px!important;background:rgba(44,47,48,.18)!important;border:none!important}
.hero-dot.active{width:2.1rem!important;background:var(--primary)!important}

.home-editorial{padding-top:3.5rem}
.home-top-grid{display:grid;grid-template-columns:minmax(0,1.45fr) 320px;gap:1.5rem;align-items:start}
.home-main-feed{display:flex;flex-direction:column;gap:1.25rem}
.story-lead-card{display:grid;grid-template-columns:280px 1fr;background:#fff;border-radius:1.5rem;overflow:hidden;box-shadow:var(--card-shadow)}
.story-lead-media{min-height:100%;background:var(--surface-high)}
.story-lead-media img{height:100%;min-height:100%;object-fit:cover}
.story-lead-body{padding:1.4rem 1.5rem}
.story-lead-body h3{font-size:1.8rem;line-height:1.05;margin:.6rem 0 .8rem;color:var(--text)}
.story-lead-body p{font-size:.97rem;color:var(--text-soft)}
.story-meta-row{margin-top:1rem;display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--text-muted);font-weight:700}
.home-live-card{position:relative;display:block;min-height:460px;border-radius:1.35rem;overflow:hidden;background:#141018;box-shadow:none}
.home-live-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.home-live-card:hover .home-live-bg{transform:scale(1.035)}
.home-live-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,7,14,.95) 0%,rgba(9,7,14,.88) 30%,rgba(9,7,14,.56) 52%,rgba(9,7,14,.12) 70%,rgba(9,7,14,0) 80%)}
.home-live-media-badge{position:absolute;left:1.35rem;top:1.35rem;z-index:2;display:inline-flex;align-items:center;gap:.48rem;padding:.44rem .72rem;border-radius:999px;background:rgba(17,24,39,.72);color:#fff;font-size:.78rem;font-weight:900;line-height:1;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.home-live-media-badge span{width:.78rem;height:.78rem;border-radius:999px;background:#ff274c;box-shadow:0 0 0 .28rem rgba(255,39,76,.18),0 0 0 .62rem rgba(255,39,76,.08)}
.home-live-update-badge{position:absolute;right:1.35rem;top:1.35rem;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem;border-radius:999px;background:rgba(17,24,39,.55);color:#fff;font-size:.74rem;font-weight:700;line-height:1;backdrop-filter:blur(3px);white-space:nowrap}
.home-live-update-badge svg{width:13px;height:13px;flex-shrink:0;opacity:.85}
.home-live-overlay{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;min-height:460px;max-width:min(560px,54%);padding:1.9rem 1.9rem 2.15rem}
.home-live-overlay-top{margin-bottom:auto;padding-top:2.9rem}
.home-live-kicker{display:block;color:#d9bcff;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.65rem;text-shadow:0 1px 4px rgba(0,0,0,.65),0 1px 14px rgba(0,0,0,.4)}
.home-live-overlay h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.1;margin:0 0 .8rem;color:#fff;letter-spacing:-.03em;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.55),0 1px 18px rgba(0,0,0,.35)}
.home-live-overlay p{margin:0;color:rgba(255,255,255,.85);font-size:.97rem;line-height:1.62;text-shadow:0 1px 5px rgba(0,0,0,.6),0 1px 14px rgba(0,0,0,.35)}
.home-live-divider{height:1px;background:rgba(255,255,255,.18);margin:1.4rem 0 1.1rem}
.home-live-info-row{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.home-live-info{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.82);font-size:.86rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.home-live-info svg{width:16px;height:16px;flex-shrink:0}
.home-live-cta{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;padding:.75rem 1.45rem;border-radius:999px;background:var(--grad);color:#fff;font-weight:800;font-size:.92rem;box-shadow:0 14px 32px rgba(137,48,176,.35);transition:transform .18s,box-shadow .18s}
.home-live-card:hover .home-live-cta{transform:translateY(-2px);box-shadow:0 18px 40px rgba(137,48,176,.45)}
.home-live-cta-arrow{display:inline-block;transition:transform .18s}
.home-live-card:hover .home-live-cta-arrow{transform:translateX(3px)}
.story-list-stack{display:grid;gap:1rem}

/* ── Przycisk "Pokaż więcej" pod listą "Najważniejsze dziś" ────────────────
   Pierwsze kliknięcie doczytuje 5 kolejnych artykułów przez AJAX; drugie
   (gdy data-state="redirect") przenosi na podstronę Aktualności. */
.home-load-more-wrap{display:flex;justify-content:center;margin-top:1.6rem}
.home-load-more-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-width:12rem;
  padding:.85rem 2rem;
  border:none;
  border-radius:999px;
  background:var(--grad);
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:.98rem;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(183,0,77,.28);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.home-load-more-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(183,0,77,.38)}
.home-load-more-btn:active{transform:translateY(0)}
.home-load-more-spinner{
  display:none;
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:homeLoadMoreSpin .7s linear infinite;
}
.home-load-more-btn.is-loading .home-load-more-label{opacity:.55}
.home-load-more-btn.is-loading .home-load-more-spinner{display:inline-block}
.home-load-more-btn.is-loading{pointer-events:none}
@keyframes homeLoadMoreSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .home-load-more-spinner{animation:none}
}
.story-list-item{display:grid;grid-template-columns:160px 1fr;gap:1rem;align-items:center;background:#fff;border-radius:1.35rem;padding:.65rem;box-shadow:var(--card-shadow)}
.story-list-item:hover,.story-lead-card:hover,.article-card:hover,.featured-card-modern:hover,.related-mini-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}
/* Karty promowane (duże kafle "home-live-card") dziedziczą powyższy hover
   przez wspólną klasę .story-lead-card — zdejmujemy tu tylko cień, ruch
   (translateY) zostaje. Inne typy kart (Aktualności, wyróżnione itd.) mają
   swój cień na hover bez zmian. */
.home-live-card:hover{box-shadow:none}
.story-list-thumb{height:126px;border-radius:1rem;overflow:hidden;background:var(--surface-high)}
.story-list-thumb img{height:100%}
.story-list-body h3{font-size:1.15rem;line-height:1.18;margin:.45rem 0;color:var(--text)}
.story-list-body p{font-size:.88rem;color:var(--text-soft);line-height:1.65}
.home-side-rail{display:grid;gap:1rem}
.info-widget,.spotlight-card,.article-side-card,.contact-side-card{background:#fff;border-radius:1.4rem;box-shadow:var(--card-shadow);padding:1.35rem}
.info-widget-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:1rem}
.mini-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.mini-stat-card{background:var(--surface-low);border-radius:1rem;padding:1rem}
.mini-stat-value{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.55rem;font-weight:800;color:var(--text);line-height:1}
.mini-stat-label{margin-top:.35rem;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700}
.culture-widget p,.spotlight-card p{font-size:.92rem;color:var(--text-soft)}
.widget-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
.spotlight-card{background:var(--grad);color:#fff}
.spotlight-card .spotlight-label{display:inline-block;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.8;margin-bottom:.55rem}
.spotlight-card h3{font-size:1.5rem;line-height:1.08;margin-bottom:.65rem}
.spotlight-card p{color:rgba(255,255,255,.84)}
.spotlight-slider{position:relative;display:grid;min-width:0}
.spotlight-slider-viewport{display:grid;min-width:0}
.spotlight-slide{grid-area:1/1;min-height:226px;padding-bottom:2.65rem;opacity:0;pointer-events:none;transform:translateX(10px);transition:opacity .28s ease,transform .28s ease;display:flex;flex-direction:column;justify-content:flex-start}
.spotlight-slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0)}
.spotlight-slide:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:3px}
.spotlight-slider-controls{position:absolute;left:0;right:0;bottom:1.05rem;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
.spotlight-slider-dots{display:flex;justify-content:center;align-items:center;gap:.5rem;pointer-events:auto}
.spotlight-slider-dot{width:.6rem;height:.6rem;padding:0;border:none;border-radius:999px;background:rgba(255,255,255,.32);cursor:pointer;transition:background .2s,transform .2s}
.spotlight-slider-dot.is-active{background:#fff;transform:scale(1.25)}
.spotlight-slider-dot:focus-visible{outline:2px solid rgba(255,255,255,.82);outline-offset:3px}
.popular-widget .info-widget-title{margin-bottom:.35rem}
.popular-article-list{list-style:decimal;margin:.15rem 0 0 1.15rem;padding:0}
.popular-article-list li{padding:.72rem 0;border-bottom:1px solid rgba(44,47,48,.08)}
.popular-article-list li:last-child{border-bottom:0;padding-bottom:0}
.popular-article-list li::marker{font-family:'Plus Jakarta Sans',sans-serif;font-size:.86rem;font-weight:800;color:var(--primary)}
.popular-article-link{display:block;color:var(--text);text-decoration:none;font-size:.95rem;font-weight:700;line-height:1.35;transition:color .18s ease}
.popular-article-link:hover{color:var(--primary)}
.popular-article-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ===== Widget pogody — odwzorowanie projektu (glassmorphism) ===== */

/* ── WIDGET "Posłuchaj artykułu" na stronie głównej ────────────────────────
   Duży odtwarzacz ("teraz odtwarzane") + lista klikalnych pozycji poniżej.
   Kliknięcie pozycji z listy podmienia zawartość dużego playera i odtwarza
   ją — patrz assets/js/main.js, sekcja "home-audio-hero". Pasek postępu w
   dużym playerze to dokładnie ten sam mechanizm data-audio-* (patrz
   includes/audio_player.php, buildAudioPlayerControls) co cienki pasek
   postępu gdzie indziej w portalu — .home-audio-hero-play-row .audio-player-track
   niżej w tym pliku tylko powiększa go i daje mu flex:1, więc
   odtwarzanie/przewijanie/obsługa błędów działa bez zmian w JS. */
.home-audio-hero-section{padding-top:clamp(2.4rem,4vw,3.6rem);padding-bottom:clamp(2.4rem,4vw,3.6rem)}
.home-audio-hero-head{margin-bottom:1.6rem}
.home-audio-hero-head .section-kicker{gap:.35rem;margin-bottom:.6rem}
.home-audio-hero-subtitle{margin:.5rem 0 0;font-size:1rem;color:var(--text2,#6b7280);max-width:42rem}

.home-audio-hero-card{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:1.8rem;
  padding:1.4rem;
  border-radius:1.6rem;
  background:#fff;
  border:1px solid rgba(137,48,176,.12);
  box-shadow:0 24px 50px rgba(90,34,232,.1);
  margin-bottom:1.1rem;
}
.home-audio-hero-media{
  position:relative;
  flex:0 0 clamp(11rem,24vw,16rem);
  border-radius:1.15rem;
  overflow:hidden;
  background:linear-gradient(135deg,#eceef1,#dfe4ea);
}
.home-audio-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.home-audio-hero-media img.is-empty{opacity:0}

.home-audio-hero-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.55rem}
.home-audio-hero-title-link{text-decoration:none}
.home-audio-hero-title-text{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.3rem,2.3vw,1.7rem);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--text);
  transition:color .2s ease;
}
.home-audio-hero-title-link:hover .home-audio-hero-title-text{color:var(--primary)}

.home-audio-hero-player{margin-top:.3rem}
.home-audio-hero-duration-badge{
  /* Pozycjonowana względem .home-audio-hero-card (position:relative wyżej),
     NIE względem .home-audio-hero-player (celowo bez position:relative) —
     inaczej odznaka "wisiałaby" tuż nad falą dźwiękową zamiast w rogu całej
     karty, i to w dodatku z offsetem zależnym od wysokości tytułu (kruche
     przy dłuższych, dwuwierszowych tytułach). */
  position:absolute;
  top:1.2rem;
  right:1.2rem;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.32rem .7rem;
  border-radius:999px;
  background:rgba(90,34,232,.08);
  color:#5a22e8;
  font-size:.76rem;
  font-weight:700;
}
.home-audio-hero-duration-badge .material-symbols-outlined{font-size:15px}
.home-audio-hero-play-row{display:flex;align-items:center;gap:1rem}
.home-audio-hero-play-btn{width:3.6rem;height:3.6rem;flex-shrink:0}
/* Duży player wraca do zwykłego, prostego paska postępu — te same klasy
   .audio-player-track/.audio-player-fill/.audio-player-handle co na stronie
   artykułu (patrz base rules niżej w tym pliku), tylko odrobinę grubszy i z
   flex:1, żeby wypełnił miejsce obok przycisku Play. Był tu wcześniej wariant
   z "fałszywą" falą dźwiękową (paski wysokości liczone z pliku MP3) — po
   kilku podejściach żaden nie wyglądał zadowalająco (bez ffmpeg na hostingu
   nie da się policzyć prawdziwej amplitudy), więc na wyraźną prośbę wrócono
   do prostego gradientowego paska. */
.home-audio-hero-play-row .audio-player-track{
  flex:1;
  height:8px;
}
.home-audio-hero-play-row .audio-player-handle{
  width:16px;
  height:16px;
}
.home-audio-hero-meta-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.55rem}
.home-audio-hero-time{display:flex;align-items:center;gap:.3rem;font-size:.82rem;color:#8b8f96;font-variant-numeric:tabular-nums}
.home-audio-hero-time-sep{opacity:.6}
.home-audio-hero-readmore{
  font-size:.86rem;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  white-space:nowrap;
}
.home-audio-hero-readmore span{transition:transform .2s ease}
.home-audio-hero-readmore:hover span{transform:translateX(3px)}

/* Włącznik "odtwarzaj kolejny automatycznie" w dużym playerze — zwykły
   checkbox wizualnie ukryty (dostępny dla czytników ekranu), a jego stan
   steruje wyglądem sąsiadującego "toru" przełącznika przez :checked + .
   Patrz assets/js/main.js, sekcja "home-audio-hero" (playNextInList). */
.home-audio-autoplay-toggle{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:.9rem;
  cursor:pointer;
  font-size:.82rem;
  color:#6b7280;
  user-select:none;
}
.home-audio-autoplay-toggle-input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  overflow:hidden;
}
.home-audio-autoplay-toggle-track{
  position:relative;
  flex:0 0 auto;
  width:2.15rem;
  height:1.2rem;
  border-radius:999px;
  background:#d8dbe3;
  transition:background .18s ease;
}
.home-audio-autoplay-toggle-knob{
  position:absolute;
  top:2px;
  left:2px;
  width:1rem;
  height:1rem;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s ease;
}
.home-audio-autoplay-toggle-input:checked + .home-audio-autoplay-toggle-track{
  background:linear-gradient(135deg,#5a22e8,#e90073);
}
.home-audio-autoplay-toggle-input:checked + .home-audio-autoplay-toggle-track .home-audio-autoplay-toggle-knob{
  transform:translateX(0.95rem);
}
.home-audio-autoplay-toggle-input:focus-visible + .home-audio-autoplay-toggle-track{
  outline:2px solid #5a22e8;
  outline-offset:2px;
}
@media (max-width:760px){
  .home-audio-hero-card{flex-direction:column;gap:1.1rem;padding:1.1rem}
  .home-audio-hero-media{flex-basis:auto;width:100%;aspect-ratio:16/9}
  /* Karta wciąż position:relative, więc plakietka czasu trwania nadal ląduje
     w jej prawym górnym rogu — teraz nad obrazkiem, bo obrazek jest pełnej
     szerokości u góry złożonej w kolumnę karty. */
  .home-audio-hero-duration-badge{top:.8rem;right:.8rem}
}

/* ── Lista pozycji pod dużym playerem ── */
.home-audio-list{display:flex;flex-direction:column;gap:.7rem}
.home-audio-list-more{margin-top:.7rem}
/* WAŻNE: .home-audio-list ustawia display:flex — deklaracje autora ZAWSZE
   biją domyślny arkusz przeglądarki dla [hidden], niezależnie od
   specyficzności, więc bez tej reguły ukryte sloty 5-6 i tak są widoczne od
   razu mimo atrybutu hidden. Ten sam problem i rozwiązanie co przy
   .explore-more-wrap[hidden] wyżej w tym pliku. */
.home-audio-list-more[hidden]{display:none!important}

.home-audio-list-item{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.65rem .9rem;
  border-radius:1rem;
  background:#fff;
  border:1px solid rgba(137,48,176,.1);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.home-audio-list-item:hover,
.home-audio-list-item:focus-visible{
  border-color:rgba(90,34,232,.28);
  box-shadow:0 10px 22px rgba(90,34,232,.08);
  outline:none;
}
.home-audio-list-item.is-playing{
  background:linear-gradient(135deg,rgba(90,34,232,.06),rgba(233,0,115,.07));
  border-color:rgba(90,34,232,.3);
}
.home-audio-list-thumb{
  flex:0 0 4rem;
  width:4rem;
  height:4rem;
  border-radius:.7rem;
  overflow:hidden;
  background:var(--surface-high,#eceef1);
  display:block;
}
.home-audio-list-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Miniatura ZAWSZE ma oba znaczniki w DOM (img + fallback) — dzięki temu JS
   może po zamianie pozycji z hero playerem (patrz assets/js/main.js,
   writeListItem) po prostu dopisać/zdjąć klasę is-empty, tak samo jak przy
   obrazku dużego playera, bez usuwania/tworzenia elementów. Gdy img jest
   is-empty, znika z przepływu i widać fallback (przycięty przez
   overflow:hidden rodzica do tej samej wysokości, co przy zwykłym stackowaniu
   dwóch pełnowymiarowych bloków). */
.home-audio-list-thumb img.is-empty{display:none}
.home-audio-list-thumb-fallback{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eceef1,#dfe4ea)}
.home-audio-list-play{
  flex:0 0 auto;
  width:2.3rem;
  height:2.3rem;
  border-radius:50%;
  background:linear-gradient(135deg,#5a22e8,#e90073);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-audio-list-play svg{width:14px;height:14px;margin-left:1px}
.home-audio-list-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.home-audio-list-title{
  font-weight:800;
  font-size:.92rem;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-audio-list-subtitle{
  font-size:.84rem;
  color:#8b8f96;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-audio-list-duration{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.3rem;
  font-size:.8rem;
  color:#8b8f96;
  font-variant-numeric:tabular-nums;
}
.home-audio-list-duration .material-symbols-outlined{font-size:15px}
.home-audio-list-readmore{
  flex:0 0 auto;
  font-size:.82rem;
  font-weight:800;
  color:var(--primary);
  text-decoration:none;
  display:none;
  align-items:center;
  gap:.3rem;
  white-space:nowrap;
}
.home-audio-list-readmore span{transition:transform .2s ease}
.home-audio-list-readmore:hover span{transform:translateX(3px)}
@media (min-width:900px){
  .home-audio-list-readmore{display:inline-flex}
}
@media (max-width:640px){
  .home-audio-list-item{gap:.7rem;padding:.55rem .7rem}
  .home-audio-list-thumb{flex-basis:3.2rem;width:3.2rem;height:3.2rem}
  .home-audio-list-play{width:1.9rem;height:1.9rem}
  .home-audio-list-title{font-size:.86rem}
  .home-audio-list-subtitle{display:none}
}

/* ── Przycisk "Pokaż więcej artykułów" ── */
.home-audio-more-wrap{display:flex;justify-content:center;margin-top:1.6rem}
.home-audio-more-btn{
  border:none;
  background:linear-gradient(135deg,#5a22e8,#e90073);
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(90,34,232,.26);
  transition:transform .18s ease, box-shadow .18s ease;
}
.home-audio-more-btn:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(90,34,232,.32)}
.home-audio-more-btn .material-symbols-outlined{font-size:18px}
.home-audio-more-btn span:last-child{transition:transform .18s ease}
.home-audio-more-btn:hover span:last-child{transform:translateX(3px)}

/* ── HOME CLASSIFIEDS ── */
.home-classifieds-section{
  padding-top:clamp(2.7rem,4.4vw,4rem);
  padding-bottom:clamp(3.1rem,5vw,4.7rem);
  background:linear-gradient(180deg,#f7f4fb 0%,var(--surface) 100%);
}
.home-classifieds-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.35rem;
}
.home-classifieds-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  align-items:stretch;
}
.home-classified-card,
.home-classified-cta{
  min-width:0;
  border-radius:1.35rem;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.home-classified-card:hover,
.home-classified-cta:hover{
  transform:translateY(-4px);
  box-shadow:var(--card-shadow-hover);
}
.home-classified-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(117,119,120,.09);
}
.home-classified-media{
  position:relative;
  aspect-ratio:16/10;
  background:var(--surface-high);
  overflow:hidden;
}
.home-classified-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.home-classified-card:hover .home-classified-media img{
  transform:scale(1.04);
}
.home-classified-noimg{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(107,33,168,.12),rgba(232,24,109,.10));
  color:var(--primary);
}
.home-classified-noimg .material-symbols-outlined{
  font-size:3rem;
  opacity:.55;
}
.home-classified-badge{
  position:absolute;
  left:.8rem;
  top:.8rem;
  display:inline-flex;
  align-items:center;
  max-width:calc(100% - 1.6rem);
  padding:.34rem .68rem;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--primary);
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.055em;
  box-shadow:0 10px 24px rgba(20,8,34,.12);
}
.home-classified-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.05rem 1.1rem 1.15rem;
}
.home-classified-body h3{
  margin:0 0 .45rem;
  color:var(--text);
  font-size:1.14rem;
  line-height:1.16;
  letter-spacing:-.035em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-classified-price{
  margin:0 0 .35rem;
  color:var(--primary);
  font-size:1rem;
  font-weight:900;
}
.home-classified-locality{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  width:max-content;
  max-width:100%;
  margin-bottom:.45rem;
  color:var(--text-soft);
  font-size:.82rem;
  font-weight:750;
}
.home-classified-locality .material-symbols-outlined{
  font-size:1rem;
  color:var(--text-muted);
}
.home-classified-body p{
  margin:0;
  color:var(--text-soft);
  font-size:.9rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-classified-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:auto;
  padding-top:.95rem;
  color:var(--text-muted);
  font-size:.8rem;
  font-weight:750;
}
.home-classified-foot strong{
  color:var(--primary);
  white-space:nowrap;
  font-weight:900;
}
.home-classified-cta{
  position:relative;
  isolation:isolate;
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:.45rem;
  padding:1.45rem;
  color:#fff;
  background:radial-gradient(circle at 86% 14%,rgba(255,255,255,.24),transparent 26%),linear-gradient(135deg,#5b21b6 0%,#8b2bc1 46%,#e8186d 100%);
  box-shadow:0 24px 58px rgba(117,35,151,.24);
}
.home-classified-cta::after{
  content:'';
  position:absolute;
  right:-2.4rem;
  bottom:-2.6rem;
  width:9rem;
  height:9rem;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  z-index:-1;
}
.home-classified-cta-icon{
  font-size:2.7rem!important;
  line-height:1!important;
  margin-bottom:.2rem;
  filter:drop-shadow(0 10px 20px rgba(20,8,34,.18));
}
.home-classified-cta-kicker{
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.74);
}
.home-classified-cta strong{
  max-width:11ch;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.6rem,2.25vw,2.2rem);
  line-height:.98;
  letter-spacing:-.06em;
}
.home-classified-cta em{
  font-style:normal;
  color:rgba(255,255,255,.82);
  font-size:1rem;
  font-weight:700;
}
.home-classified-cta-action{
  display:inline-flex;
  margin-top:1.1rem;
  padding:.68rem .9rem;
  border-radius:999px;
  background:#fff;
  color:var(--primary);
  font-size:.86rem;
  font-weight:900;
  box-shadow:0 14px 28px rgba(20,8,34,.12);
}
@media(max-width:980px){
  .home-classifieds-grid{grid-template-columns:1fr 1fr}
  .home-classified-cta{grid-column:1/-1;min-height:230px}
  .home-classified-cta strong{max-width:none}
}
@media(max-width:640px){
  .home-classifieds-head{align-items:flex-start;flex-direction:column;margin-bottom:1rem}
  .home-classifieds-grid{grid-template-columns:1fr}
  .home-classified-cta{grid-column:auto;min-height:240px}
}

.halo-flesz-widget{margin-top:1.4rem;min-width:0;max-width:100%;border-radius:1.4rem;padding:1.25rem;background:#fff;border:1px solid var(--line,#e4e7eb);box-shadow:0 10px 30px rgba(30,20,50,.06)}
.power-outage-widget{margin-top:1.4rem;border-radius:1.4rem;padding:1.3rem;background:#fff;border:1px solid var(--line,#e4e7eb);box-shadow:0 10px 30px rgba(30,20,50,.06)}
.power-outage-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.05rem}
.power-outage-icon{display:flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;border-radius:.85rem;background:linear-gradient(135deg,#b7004d 0%,#8930b0 100%);color:#fff;flex-shrink:0;box-shadow:0 8px 18px rgba(137,48,176,.28)}
.power-outage-icon svg{width:16px;height:16px}
.power-outage-head h3{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.02rem;line-height:1.25;font-weight:800;color:var(--text,#1a1523);letter-spacing:-.01em}
.power-outage-list{display:flex;flex-direction:column;gap:.85rem}
.power-outage-item{display:flex;align-items:center;gap:.9rem;padding-bottom:.85rem;border-bottom:1px solid #f0eef4}
.power-outage-item:last-child{border-bottom:none;padding-bottom:0}
.power-outage-when{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;padding:.5rem .45rem;border-radius:.8rem;background:linear-gradient(160deg,#fdeef6,#f4eafc);color:#8930b0}
.power-outage-date{font-family:'Plus Jakarta Sans',sans-serif;font-weight:900;font-size:.96rem;line-height:1.1}
.power-outage-time{font-size:.66rem;font-weight:700;opacity:.82;margin-top:.15rem;white-space:nowrap}
.power-outage-msg{margin:0;font-size:.85rem;line-height:1.55;color:#494b52}
.power-outage-empty-msg{margin:.2rem 0 1rem;font-size:.87rem;line-height:1.55;color:#6b7178}
.power-outage-foot{display:flex;flex-direction:column;gap:.6rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid #f0eef4}
.power-outage-foot > span{font-size:.68rem;line-height:1.5;color:#9096a0}
.power-outage-foot a{display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;padding:.45rem .85rem;border-radius:999px;background:#f4eafc;color:#8930b0;font-weight:800;font-size:.78rem;text-decoration:none;transition:background .15s,transform .15s}
.power-outage-foot a:hover{background:#ecd9f7;transform:translateY(-1px)}
.halo-flesz-slider,.halo-flesz-track{min-width:0;max-width:100%}
.halo-flesz-head{margin-bottom:.9rem}
.halo-flesz-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#c0186a}
.halo-flesz-live i{width:8px;height:8px;border-radius:50%;background:#e9188c;box-shadow:0 0 0 0 rgba(233,24,140,.6);animation:haloFleszPulse 1.8s infinite}
@keyframes haloFleszPulse{0%{box-shadow:0 0 0 0 rgba(233,24,140,.5)}70%{box-shadow:0 0 0 7px rgba(233,24,140,0)}100%{box-shadow:0 0 0 0 rgba(233,24,140,0)}}
.halo-flesz-head h3{margin:.3rem 0 0;font-size:1.15rem;line-height:1.2}
.halo-flesz-slider{position:relative}
.halo-flesz-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.halo-flesz-track::-webkit-scrollbar{display:none}
.halo-flesz-slide{flex:0 0 100%;min-width:0;max-width:100%;overflow:hidden;scroll-snap-align:start}
.halo-flesz-nav{position:absolute;top:40%;transform:translateY(-50%);width:34px;height:34px;border:none;border-radius:50%;background:rgba(20,16,32,.5);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:background .15s}
.halo-flesz-nav.prev{left:6px}.halo-flesz-nav.next{right:6px}
.halo-flesz-nav:hover{background:rgba(20,16,32,.82)}
.halo-flesz-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.75rem}
.halo-flesz-dots button{width:8px;height:8px;border-radius:50%;border:none;background:#d5d9df;cursor:pointer;padding:0;transition:.2s}
.halo-flesz-dots button.active{background:#c0186a;width:22px;border-radius:4px}
.halo-flesz-cover-tag{display:inline-block;margin-top:.6rem;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#c0186a;background:#fdeef6;padding:2px 8px;border-radius:6px}
.halo-flesz-media{border-radius:.9rem;overflow:hidden;background:#f2f3f5;line-height:0}
.halo-flesz-media.is-photo{cursor:zoom-in}
.halo-flesz-media.is-photo:hover img{transform:scale(1.03)}
.halo-flesz-media img{display:block;width:100%;height:auto;transition:transform .18s ease}
.halo-flesz-media.is-photo.is-landscape{aspect-ratio:2 / 3}
.halo-flesz-media.is-photo.is-landscape img{width:100%;height:100%;object-fit:cover}
.halo-flesz-media video{display:block;width:100%;height:auto;background:#000}
.halo-flesz-vthumb{position:relative;aspect-ratio:2 / 3;cursor:pointer}
.halo-flesz-vthumb img,.halo-flesz-vthumb video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.74)}
.halo-flesz-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:none;background:rgba(18,12,28,.28);cursor:pointer;z-index:2;padding:0}
.halo-flesz-play-icon{width:64px;height:64px;border-radius:50%;background:rgba(192,24,106,.94);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4);transition:transform .18s ease}
.halo-flesz-play-icon svg{width:26px;height:26px;margin-left:3px}
.halo-flesz-play:hover .halo-flesz-play-icon{transform:scale(1.09)}
.halo-flesz-caption{margin:.6rem 0 .25rem;font-size:.92rem;line-height:1.45;color:#2a2d30}
.halo-flesz-time{font-size:.74rem;color:#8b9096}
.weather-widget{position:relative;overflow:hidden;isolation:isolate;min-width:0;max-width:100%;border-radius:1.7rem;padding:1.6rem;color:#fff;background:radial-gradient(120% 92% at 90% 102%,rgba(233,24,140,.55),transparent 56%),linear-gradient(146deg,#3a2a6b 0%,#5b2a86 30%,#8e2a93 58%,#c11d7e 84%,#d81f86 100%);box-shadow:0 26px 60px rgba(72,20,90,.34)}
.weather-widget::before{content:'';position:absolute;top:-18%;right:-12%;width:62%;height:58%;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.30),rgba(255,255,255,.06) 45%,transparent 70%);z-index:-1;pointer-events:none}
.weather-widget.is-night{background:radial-gradient(120% 92% at 90% 102%,rgba(157,13,103,.5),transparent 56%),linear-gradient(146deg,#1f2a5e 0%,#3a2a6b 32%,#5a2a8e 60%,#9d0d67 100%)}
.weather-clouds{position:absolute;right:-8%;top:37%;width:74%;max-width:280px;z-index:-1;pointer-events:none}
.weather-clouds svg{display:block;width:100%;height:auto}
.weather-widget-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:1.2rem}
.weather-head{min-width:0}
.weather-kicker{font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:rgba(255,255,255,.58)}
.weather-widget h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:2.3rem;line-height:1.04;font-weight:800;letter-spacing:-.035em;color:#fff;margin:.5rem 0 0}
.weather-icon{position:relative;display:grid;place-items:center;flex:0 0 3.6rem;width:3.6rem;height:3.6rem;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:0 0 30px rgba(255,255,255,.18)}
.weather-icon::before,.weather-icon::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18);pointer-events:none}
.weather-icon::before{inset:-.7rem;background:rgba(255,255,255,.05)}
.weather-icon::after{inset:-1.2rem;border-color:rgba(255,255,255,.12)}
.weather-icon .material-symbols-outlined{position:relative;z-index:1;font-size:2.2rem;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 40}
.weather-temp-row{display:flex;align-items:flex-start;gap:.15rem;margin:.2rem 0 .4rem}
.weather-temp-row strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:5rem;line-height:.82;font-weight:800;letter-spacing:-.05em;color:#fff}
.weather-temp-row span{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.7rem;font-weight:700;line-height:1;color:rgba(255,255,255,.92);margin-top:.45rem}
.weather-summary{margin:0 0 1.3rem;font-family:'Plus Jakarta Sans',sans-serif;color:#fff;font-size:1.3rem;font-weight:600;line-height:1.3}
.weather-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.weather-detail{display:flex;align-items:flex-start;gap:.5rem;padding:.8rem .7rem;border-radius:1.15rem;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.weather-detail-wide{grid-column:1/-1}
.weather-detail-ic{flex:0 0 auto;font-size:1.2rem;color:#f0b4e6;font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 40;margin-top:.05rem}
.weather-detail-body{display:flex;flex-direction:column;min-width:0}
.weather-detail-label{font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.6);margin-bottom:.32rem;white-space:nowrap}
.weather-detail strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.3rem;line-height:1.1;font-weight:800;color:#fff}
.weather-detail-sub{margin-top:.3rem;font-style:normal;font-size:.84rem;line-height:1.4;color:rgba(255,255,255,.62);font-weight:500}
.weather-foot{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;color:rgba(255,255,255,.62)}
.weather-foot .material-symbols-outlined{font-size:1.05rem;color:rgba(255,255,255,.6)}
.weather-widget.is-loading .weather-icon{animation:weatherPulse 1.6s ease-in-out infinite}
@keyframes weatherPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.04);opacity:1}}

.video-hub-section{position:relative;overflow:hidden;background:linear-gradient(135deg,#7326af 0%, #9536c4 48%, #b01973 100%)!important;color:#fff}
.section-anchor{position:absolute;top:-120px;width:1px;height:1px;overflow:hidden}
.video-hub-bg{position:absolute;inset:0;background:radial-gradient(circle at 16% 6%,rgba(255,255,255,.13),transparent 28%),radial-gradient(circle at 82% 96%,rgba(255,255,255,.07),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));opacity:.82}
.video-hub-shell{position:relative;z-index:1}
.video-hub-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.35rem}
.halo-media-brand{position:relative;display:inline-flex;align-items:center;padding:0 0 .95rem;background:none!important;border:0!important;border-radius:0!important;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.4rem,2.3vw,2.25rem);font-weight:900;letter-spacing:.18em;text-transform:uppercase;line-height:1;color:#fff!important;-webkit-text-fill-color:#fff;text-shadow:0 0 18px rgba(255,255,255,.16),0 10px 28px rgba(35,8,55,.18);filter:drop-shadow(0 0 18px rgba(255,255,255,.14));animation:haloMediaTextPulse 2.8s ease-in-out infinite}
.halo-media-brand::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 15%,rgba(255,112,201,.95) 36%,rgba(151,71,255,.95) 58%,rgba(255,255,255,.88) 80%,rgba(255,255,255,0) 100%);background-size:220% 100%;box-shadow:0 0 20px rgba(255,96,184,.35);animation:haloMediaLineFlow 4.5s linear infinite}
.halo-media-brand::after{content:'';position:absolute;right:-.55rem;top:.08rem;width:.42rem;height:.42rem;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffb3e8 46%,rgba(255,255,255,0) 72%);box-shadow:0 0 16px rgba(255,255,255,.46),0 0 28px rgba(255,117,199,.32);animation:haloMediaSpark 1.9s ease-in-out infinite}
@keyframes haloMediaTextShift{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes haloMediaLineFlow{0%{background-position:0% 50%;opacity:.75}50%{opacity:1}100%{background-position:220% 50%;opacity:.78}}
@keyframes haloMediaTextPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1px) scale(1.015)}}
@keyframes haloMediaSpark{0%,100%{transform:translateY(0) scale(.9);opacity:.72}50%{transform:translateY(-2px) scale(1.16);opacity:1}}
.video-hub-title{color:#fff!important;max-width:12ch}
.video-split-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,390px);gap:1.5rem;align-items:start}
.video-feature-card,.video-playlist-panel{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.video-playlist-panel{display:flex;flex-direction:column;height:var(--halo-video-shell-height,640px);min-height:0}
#halo-video-player-shell{position:relative;overflow:hidden;border-radius:1.35rem!important;border:1px solid rgba(255,255,255,.10)!important;background:#12081f!important;box-shadow:0 20px 48px rgba(24,7,48,.22)!important}
#halo-video-player-shell.is-horizontal{aspect-ratio:16 / 9;width:100%}
#halo-video-player-shell.is-vertical{aspect-ratio:9 / 16;width:min(100%,430px);margin:0 auto}
#halo-video-player-frame{position:absolute;inset:0;width:100%;height:100%}
#halo-video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video-main-copy{padding:.15rem 0 0;margin-top:.85rem}
.video-main-copy span{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:rgba(255,255,255,.74);margin-bottom:.48rem}
.video-main-copy h3{font-size:1.7rem;line-height:1.06;color:#fff;max-width:18ch}
.video-main-copy p{display:none}
.video-playlist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.9rem;padding:0}
.video-playlist-kicker{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;color:rgba(255,255,255,.64);margin-bottom:.24rem}
.video-playlist-head h3{font-size:1.3rem;line-height:1.06;color:#fff}
.video-playlist-count{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.56)}
.video-playlist-modern{display:grid;gap:.7rem;flex:1;min-height:0;overflow:auto;padding-right:.15rem}
.video-playlist-modern::-webkit-scrollbar{width:8px}
.video-playlist-modern::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
.halo-video-item{display:grid;grid-template-columns:112px minmax(0,1fr);gap:.9rem;align-items:center;text-align:left;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:1rem;padding:.68rem;color:#fff;cursor:pointer;transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;box-shadow:none}
.halo-video-item:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.16)!important}
.halo-video-item.active{background:rgba(183,0,77,.17)!important;border-color:rgba(255,255,255,.20)!important;box-shadow:0 10px 24px rgba(24,7,48,.14)}
.halo-video-thumb{position:relative;display:block;aspect-ratio:16 / 10;border-radius:.9rem;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04))}
.halo-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.halo-video-thumb.is-fallback{display:flex;align-items:center;justify-content:center;padding:.8rem;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04),rgba(255,255,255,.08))}
.halo-video-fallback-mark{font-family:'Plus Jakarta Sans',sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.74);text-align:center}
.halo-video-play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2.7rem;height:2.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(17,15,23,.32);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(5px)}
.halo-video-play-icon svg{width:16px;height:16px;margin-left:2px}
.halo-video-item-copy{min-width:0;display:grid;gap:.25rem}
.halo-video-num{font-size:.71rem;color:rgba(255,255,255,.66);font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.halo-video-item-title{font-size:.98rem;font-weight:800;line-height:1.28;font-family:'Plus Jakarta Sans',sans-serif;color:#fff}
.halo-video-item-platform{font-size:.77rem;color:rgba(255,255,255,.70);font-weight:700;letter-spacing:.02em}
.event-poster-section{padding:clamp(4rem,6.5vw,6.25rem) 0;background:linear-gradient(135deg,#7f27c7 0%,#a52eb4 46%,#c30b68 100%)!important}
.event-poster-section .video-hub-bg{background:radial-gradient(circle at 18% 10%,rgba(255,255,255,.16),transparent 28%),radial-gradient(circle at 82% 82%,rgba(255,255,255,.10),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));opacity:1}
.event-poster-panel{position:relative;z-index:1;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:2rem;padding:clamp(1.35rem,3vw,2.25rem);background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055));box-shadow:0 28px 70px rgba(35,8,55,.18);backdrop-filter:blur(10px)}
.event-poster-panel::before{content:'';position:absolute;inset:-30% -12% auto auto;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 64%);pointer-events:none}
.event-poster-head{position:relative;z-index:1;align-items:flex-start;margin-bottom:clamp(1.35rem,2.8vw,2rem)}
.event-eyebrow{display:inline-flex;align-items:center;width:max-content;margin-bottom:.55rem;padding:.34rem .72rem;border-radius:999px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.82);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.event-brand{max-width:none;white-space:normal;text-transform:none!important;letter-spacing:-.055em!important;font-size:clamp(2rem,4.4vw,4.2rem)!important;line-height:.96!important}
.event-brand::before{height:2px;opacity:.72}
.event-brand::after{display:none}
.event-poster-lead{margin:.8rem 0 0;max-width:42rem;color:rgba(255,255,255,.78);font-size:1rem;line-height:1.7}
.event-carousel-controls{display:flex;gap:.55rem;flex-shrink:0}
.event-carousel-controls button{display:grid;place-items:center;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.10);color:#fff;cursor:pointer;backdrop-filter:blur(8px);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.event-carousel-controls button:hover{transform:translateY(-1px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.event-carousel-controls .material-symbols-outlined{font-size:1.45rem}
.event-carousel-shell{position:relative;z-index:1;overflow:hidden}
.event-poster-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,340px);gap:1.05rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:1px;padding:.25rem .15rem 1rem}
.event-poster-track::-webkit-scrollbar{height:8px}
.event-poster-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.event-poster-card{scroll-snap-align:start;display:grid;grid-template-rows:minmax(300px,400px) auto;min-height:0;border:1px solid rgba(255,255,255,.14);border-radius:1.35rem;overflow:hidden;background:rgba(255,255,255,.10);color:#fff;text-align:left;cursor:pointer;box-shadow:0 18px 42px rgba(24,7,48,.18);transition:transform .22s ease,border-color .22s ease,background .22s ease}
.event-poster-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.105)}
.event-poster-image{position:relative;display:block;min-height:0;background:rgba(15,7,28,.18)}
.event-poster-image::after{content:'';position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,rgba(20,8,38,0),rgba(20,8,38,.32));pointer-events:none}
.event-poster-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.event-poster-copy{display:grid;gap:.45rem;padding:1.05rem 1.05rem 1.15rem}
.event-poster-date{display:inline-flex;width:max-content;padding:.28rem .6rem;border-radius:999px;background:rgba(255,255,255,.16);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.event-poster-copy strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.14rem;line-height:1.12;color:#fff;letter-spacing:-.035em}
.event-poster-copy span:not(.event-poster-date){font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.75)}
.event-poster-open{display:inline-flex!important;align-items:center;width:max-content;margin-top:.35rem;padding:.55rem .85rem;border-radius:999px;background:rgba(255,255,255,.16);color:#fff!important;font-size:.78rem!important;font-weight:900!important;line-height:1!important}
.event-poster-section.is-single .event-carousel-controls{display:none}
.event-poster-section.is-single .event-poster-track{display:block;overflow:visible;padding:0}
.event-poster-section.is-single .event-poster-card{width:100%;grid-template-columns:minmax(280px,390px) minmax(0,1fr);grid-template-rows:none;align-items:stretch;border-radius:1.55rem;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08));box-shadow:0 24px 60px rgba(20,7,36,.18)}
.event-poster-section.is-single .event-poster-image{display:grid;place-items:center;min-height:0;height:clamp(360px,44vw,520px);padding:.9rem;background:rgba(18,8,34,.28)}
.event-poster-section.is-single .event-poster-image::after{display:none}
.event-poster-section.is-single .event-poster-image img{width:100%;height:100%;object-fit:contain;border-radius:1rem;box-shadow:0 18px 44px rgba(12,5,24,.24)}
.event-poster-section.is-single .event-poster-copy{align-content:center;padding:clamp(1.4rem,3vw,2.4rem);gap:.8rem;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035))}
.event-poster-section.is-single .event-poster-copy strong{font-size:clamp(1.8rem,3.3vw,3rem);line-height:1.02;letter-spacing:-.055em;max-width:12ch}
.event-poster-section.is-single .event-poster-copy span:not(.event-poster-date):not(.event-poster-open){max-width:38rem;font-size:1rem;line-height:1.75;color:rgba(255,255,255,.78)}
.event-poster-section.is-single .event-poster-open{margin-top:.4rem;padding:.8rem 1.15rem;background:#fff;color:var(--primary)!important;box-shadow:0 16px 30px rgba(30,8,46,.14)}
.event-poster-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem}
.event-poster-modal.open{display:flex}
.event-poster-modal-backdrop{position:absolute;inset:0;background:rgba(10,6,18,.64);backdrop-filter:blur(10px)}
.event-poster-modal-dialog{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,520px) minmax(280px,430px);width:min(980px,100%);max-height:min(88vh,820px);overflow:hidden;border-radius:1.5rem;background:#fff;box-shadow:0 30px 90px rgba(10,6,18,.34)}
.event-poster-modal-close{position:absolute;right:1rem;top:1rem;z-index:3;display:grid;place-items:center;width:2.6rem;height:2.6rem;border:none;border-radius:999px;background:rgba(255,255,255,.9);color:var(--text);cursor:pointer;box-shadow:0 8px 18px rgba(10,6,18,.15)}
.event-poster-modal-media{min-height:0;background:#140b24;display:grid;place-items:center}
.event-poster-modal-media img{width:100%;height:100%;max-height:88vh;object-fit:contain}
.event-poster-modal-copy{display:flex;flex-direction:column;justify-content:center;padding:2rem;color:var(--text);overflow:auto}
.event-poster-modal-copy > span{display:inline-flex;width:max-content;margin-bottom:.85rem;padding:.34rem .7rem;border-radius:999px;background:rgba(137,48,176,.14);color:var(--secondary);font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.event-poster-modal-copy > span:empty{display:none}
.event-poster-modal-copy h3{font-size:clamp(1.7rem,3vw,2.55rem);line-height:1.02;margin:0 0 1rem;color:var(--text);letter-spacing:-.055em}
.event-poster-modal-copy p{margin:0;color:var(--text-soft);line-height:1.8;font-size:1rem;white-space:pre-line}
.event-modal-readmore{display:inline-flex;align-items:center;gap:.45rem;width:max-content;margin-top:1.5rem;padding:.85rem 1.4rem;border-radius:999px;background:var(--primary);color:#fff!important;font-weight:800;font-size:.95rem;text-decoration:none;box-shadow:0 16px 30px rgba(183,0,77,.18);transition:background .2s,transform .2s}
.event-modal-readmore:hover{background:var(--primary-dim);transform:translateY(-1px)}
.event-modal-readmore .material-symbols-outlined{font-size:1.15rem}
.event-modal-readmore[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.halo-media-brand,.halo-media-brand::before,.halo-media-brand::after{animation:none!important}}
@media(max-width:1100px){
  .video-playlist-modern{max-height:none}
  .event-poster-section.is-single .event-poster-card{grid-template-columns:1fr}
  .event-poster-section.is-single .event-poster-copy strong{max-width:none}
  .event-poster-modal-dialog{grid-template-columns:1fr;max-height:92vh;overflow:auto}
  .event-poster-modal-media img{max-height:60vh}
}
@media(max-width:760px){
  .video-hub-head{align-items:flex-start}
  .video-hub-head,.video-playlist-head{flex-direction:column}
  .video-playlist-panel{height:auto}
  .video-main-copy h3{font-size:1.5rem;max-width:none}
  .halo-video-item{grid-template-columns:100px minmax(0,1fr)}
  .event-carousel-controls{width:100%;justify-content:flex-start}
  .event-poster-track{grid-auto-columns:minmax(245px,82vw)}
  .event-poster-card{grid-template-rows:minmax(300px,390px) auto}
  .event-poster-panel{border-radius:1.4rem;padding:1rem}
  .event-brand{font-size:clamp(1.9rem,10vw,3rem)!important}
  .event-poster-section.is-single .event-poster-image{height:min(470px,116vw);padding:.65rem}
  .event-poster-section.is-single .event-poster-copy{padding:1.2rem}
  .event-poster-modal{padding:.75rem}
  .event-poster-modal-dialog{border-radius:1.1rem}
  .event-poster-modal-copy{padding:1.35rem}
}

/* Event poster module rebuild */
.event-poster-section{padding:clamp(3rem,5vw,4.25rem) 0!important;background:linear-gradient(135deg,#762bc1 0%,#9c31bb 48%,#c70d69 100%)!important;min-height:0!important}
.event-poster-section .video-hub-bg{background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.18),transparent 27%),radial-gradient(circle at 86% 78%,rgba(255,255,255,.10),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));opacity:1!important}
.event-poster-panel{display:grid!important;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(1.4rem,4vw,3.25rem);min-height:0;padding:clamp(1.35rem,2.8vw,2.4rem)!important;border-radius:1.6rem!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 24px 56px rgba(30,7,50,.18)!important;backdrop-filter:blur(8px)}
.event-poster-panel::before{display:none!important}
.event-poster-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;margin:0!important;gap:0!important}
.event-eyebrow{margin-bottom:.8rem!important;background:rgba(255,255,255,.16)!important;color:rgba(255,255,255,.86)!important}
.event-poster-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.35rem,5.5vw,4.85rem);line-height:.95;letter-spacing:-.065em;color:#fff;margin:0;max-width:8.5ch;text-wrap:balance}
.event-poster-lead{max-width:28rem!important;margin:1rem 0 0!important;color:rgba(255,255,255,.78)!important;font-size:1rem!important;line-height:1.72!important}
.event-carousel-controls{margin-top:1.4rem}
.event-carousel-shell{min-width:0;overflow:hidden!important}
.event-poster-track{grid-auto-columns:minmax(235px,310px)!important;gap:.9rem!important;padding:.1rem .1rem .75rem!important}
.event-poster-card{grid-template-rows:minmax(255px,330px) auto!important;border-radius:1.2rem!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.16)!important;box-shadow:0 16px 36px rgba(18,7,35,.17)!important}
.event-poster-image{background:rgba(18,8,34,.24)!important}
.event-poster-copy{padding:1rem!important}
.event-poster-copy strong{font-size:1.05rem!important;line-height:1.16!important;max-width:none!important}
.event-poster-section.is-single .event-poster-panel{grid-template-columns:minmax(260px,.74fr) minmax(360px,1.26fr)}
.event-poster-section.is-single .event-poster-track{display:block!important;overflow:visible!important;padding:0!important}
.event-poster-section.is-single .event-poster-card{display:grid!important;grid-template-columns:minmax(240px,330px) minmax(0,1fr)!important;grid-template-rows:none!important;min-height:0!important;width:100%;border-radius:1.35rem!important;background:rgba(255,255,255,.13)!important}
.event-poster-section.is-single .event-poster-image{height:clamp(350px,38vw,480px)!important;min-height:0!important;padding:.8rem!important}
.event-poster-section.is-single .event-poster-image img{object-fit:contain!important;border-radius:.9rem!important;box-shadow:0 16px 40px rgba(10,4,24,.22)!important;background:#111}
.event-poster-section.is-single .event-poster-copy{align-content:center!important;padding:clamp(1.35rem,3vw,2.25rem)!important;gap:.75rem!important;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important}
.event-poster-section.is-single .event-poster-copy strong{font-size:clamp(1.75rem,3.1vw,2.7rem)!important;line-height:1.02!important;letter-spacing:-.055em!important}
.event-poster-section.is-single .event-poster-copy span:not(.event-poster-date):not(.event-poster-open){font-size:1rem!important;line-height:1.72!important;max-width:35rem!important;color:rgba(255,255,255,.78)!important}
.event-poster-section.is-single .event-poster-open{margin-top:.35rem!important;background:#fff!important;color:var(--primary)!important;padding:.78rem 1.15rem!important}
@media(max-width:1100px){
  .event-poster-panel,.event-poster-section.is-single .event-poster-panel{grid-template-columns:1fr!important}
  .event-poster-title{max-width:none}
  .event-poster-section.is-single .event-poster-card{grid-template-columns:minmax(240px,330px) minmax(0,1fr)!important}
}
@media(max-width:760px){
  .event-poster-section{padding:2.25rem 0!important}
  .event-poster-panel{padding:1rem!important;border-radius:1.15rem!important}
  .event-poster-title{font-size:clamp(2rem,11vw,3rem)}
  .event-poster-section.is-single .event-poster-card{grid-template-columns:1fr!important}
  .event-poster-section.is-single .event-poster-image{height:min(430px,112vw)!important;padding:.65rem!important}
  .event-carousel-controls{margin-top:1rem}
}

/* Event poster carousel row */
.event-poster-panel{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:clamp(1.25rem,2.6vw,2rem)!important}
.event-poster-head{display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:space-between!important;width:100%!important;gap:1.25rem!important}
.event-poster-head > div:first-child{max-width:min(760px,100%)!important}
.event-poster-title{max-width:none!important;font-size:clamp(2.25rem,4.8vw,4rem)!important;line-height:1.02!important;letter-spacing:-.055em!important}
.event-poster-lead{max-width:44rem!important}
.event-carousel-controls{margin-top:0!important;margin-left:auto!important}
.event-carousel-shell{width:100%!important;min-width:0!important}
.event-poster-track,.event-poster-section.is-single .event-poster-track{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(245px,310px)!important;grid-template-columns:none!important;justify-content:start!important;align-items:stretch!important;gap:1rem!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-padding:.15rem!important;padding:.15rem .15rem 1rem!important}
.event-poster-card,.event-poster-section.is-single .event-poster-card{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(310px,420px) auto!important;width:auto!important;min-height:0!important;border-radius:1.25rem!important;background:rgba(255,255,255,.12)!important}
.event-poster-image,.event-poster-section.is-single .event-poster-image{height:auto!important;min-height:0!important;padding:.55rem!important;background:rgba(18,8,34,.24)!important}
.event-poster-image img,.event-poster-section.is-single .event-poster-image img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:.9rem!important;background:#140b24!important;box-shadow:0 14px 34px rgba(10,4,24,.2)!important}
.event-poster-copy,.event-poster-section.is-single .event-poster-copy{display:grid!important;align-content:start!important;gap:.5rem!important;padding:1rem!important;background:rgba(255,255,255,.06)!important}
.event-poster-copy strong,.event-poster-section.is-single .event-poster-copy strong{font-size:1.12rem!important;line-height:1.14!important;letter-spacing:-.035em!important;max-width:none!important}
.event-poster-copy span:not(.event-poster-date):not(.event-poster-open),.event-poster-section.is-single .event-poster-copy span:not(.event-poster-date):not(.event-poster-open){font-size:.88rem!important;line-height:1.55!important;max-width:none!important;color:rgba(255,255,255,.76)!important}
.event-poster-open,.event-poster-section.is-single .event-poster-open{width:max-content!important;margin-top:.35rem!important;background:#fff!important;color:var(--primary)!important;padding:.64rem .95rem!important}
.event-poster-section.is-single .event-carousel-controls{display:none!important}
@media(max-width:900px){
  .event-poster-head{flex-direction:column!important;align-items:flex-start!important}
  .event-carousel-controls{margin-left:0!important}
  .event-poster-track,.event-poster-section.is-single .event-poster-track{grid-auto-columns:minmax(230px,76vw)!important}
}
@media(max-width:560px){
  .event-poster-track,.event-poster-section.is-single .event-poster-track{grid-auto-columns:minmax(220px,86vw)!important}
  .event-poster-card,.event-poster-section.is-single .event-poster-card{grid-template-rows:minmax(285px,390px) auto!important}
}

/* Event posters: consistent vertical covers and cleaner modal */
.event-poster-track,.event-poster-section.is-single .event-poster-track{grid-auto-columns:minmax(250px,300px)!important}
.event-poster-card,.event-poster-section.is-single .event-poster-card{grid-template-rows:auto auto!important;overflow:hidden!important}
.event-poster-image,.event-poster-section.is-single .event-poster-image{aspect-ratio:2/3!important;height:auto!important;min-height:0!important;padding:0!important;overflow:hidden!important;background:transparent!important}
.event-poster-image::after,.event-poster-section.is-single .event-poster-image::after{display:none!important}
.event-poster-image img,.event-poster-section.is-single .event-poster-image img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.event-poster-date{max-width:100%!important;width:auto!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.2!important}
.event-poster-screenings{display:grid!important;gap:.2rem!important}
.event-poster-modal-dialog{grid-template-columns:minmax(320px,430px) minmax(320px,520px)!important;width:min(1040px,100%)!important;max-height:min(88vh,820px)!important}
.event-poster-modal-media{align-self:stretch!important;min-height:0!important;background:#fff!important;display:block!important;overflow:hidden!important}
.event-poster-modal-media img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important;display:block!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.event-poster-modal-copy{justify-content:flex-start!important}
@media(max-width:1100px){
  .event-poster-modal-dialog{grid-template-columns:minmax(260px,380px) minmax(300px,1fr)!important}
}
@media(max-width:760px){
  .event-poster-track,.event-poster-section.is-single .event-poster-track{grid-auto-columns:minmax(225px,78vw)!important}
  .event-poster-modal-dialog{grid-template-columns:1fr!important;max-height:92vh!important;overflow:auto!important}
  .event-poster-modal-media{aspect-ratio:2/3!important;max-height:68vh!important}
}

.community-voices-section{padding-top:2.5rem;padding-bottom:5rem;background:#fff;overflow:hidden}
.community-voices-head{text-align:center;max-width:980px;margin:0 auto 2.2rem}
.community-voices-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.8rem,7vw,5.9rem);line-height:1.02;color:var(--text);letter-spacing:-.055em;max-width:11ch;margin:1rem auto 0;padding-bottom:.12em;overflow:visible}
.community-voices-title span{display:block;font-family:'Fraunces',serif;font-style:italic;font-weight:700;line-height:1.04;letter-spacing:-.045em;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 55%,var(--tertiary) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;overflow:visible}
.community-voices-stage{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;overflow:hidden;padding:1rem 0 0}
.community-voices-ribbon{overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y}
.community-voices-ribbon.is-dragging{cursor:grabbing}
.community-voice-card img{-webkit-user-drag:none;user-select:none}
.community-voices-ribbon:active{cursor:grabbing}
.community-voices-track{display:flex;gap:0;align-items:stretch;width:max-content;animation:communityScrollRight 95s linear infinite;will-change:transform}
.community-voices-ribbon:hover .community-voices-track{animation-play-state:paused}
.community-voice-card{position:relative;width:min(78vw,820px);height:540px;flex:0 0 auto;overflow:hidden;border-right:1px solid rgba(255,255,255,.08);background:#111}
.community-voice-like{position:absolute;top:1rem;left:1rem;z-index:4;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem .5rem .62rem;border:none;border-radius:999px;background:rgba(15,15,25,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;line-height:1;transition:transform .15s ease,background .2s ease}
.community-voice-like:hover{background:rgba(15,15,25,.62);transform:translateY(-1px)}
.community-voice-like .material-symbols-outlined{font-size:1.35rem;color:#fff;font-variation-settings:'FILL' 0,'wght' 500;transition:color .2s ease,transform .2s ease}
.community-voice-like.is-liked{background:rgba(224,36,94,.2)}
.community-voice-like.is-liked .material-symbols-outlined{color:#ff3b6b;font-variation-settings:'FILL' 1,'wght' 600;animation:cvLikePop .28s ease}
.community-voice-like:active .material-symbols-outlined{transform:scale(1.2)}
.community-voice-like-count{min-width:.7rem;text-align:left;font-variant-numeric:tabular-nums}
@keyframes cvLikePop{0%{transform:scale(.8)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.community-voice-card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transform:scale(1.01);transition:transform .8s ease, filter .8s ease}
.community-voice-card:hover img{filter:grayscale(.1);transform:scale(1.045)}
.community-voice-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,18,.06) 0%,rgba(6,8,18,.14) 30%,rgba(6,8,18,.78) 100%)}
.community-voice-copy{position:absolute;left:0;right:0;bottom:0;padding:2rem 2.2rem 2.2rem;color:#fff;z-index:2;max-width:78%}
.community-voice-eyebrow{font-size:.7rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.85rem}
.community-voice-copy h3{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:clamp(2rem,4vw,4rem);line-height:.95;color:#fff;margin:0 0 .8rem;letter-spacing:-.03em;text-shadow:0 10px 32px rgba(0,0,0,.28)}
.community-voice-text{font-size:1.02rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:34ch}
.community-join-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.8rem;padding:1.1rem 2rem;border:none;border-radius:999px;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.92rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 26px 70px rgba(183,0,77,.22),0 0 0 12px rgba(255,255,255,.08);z-index:4;cursor:pointer}
.community-join-cta .material-symbols-outlined{font-size:1.2rem}
.community-join-cta:hover{transform:translate(-50%,-50%) scale(1.03)}
@keyframes communityScrollRight{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

.featured-grid-modern{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.featured-card-modern{display:block;background:#fff;border-radius:1.35rem;overflow:hidden;box-shadow:var(--card-shadow)}
.featured-card-modern .featured-card-img{height:220px;background:var(--surface-high)}
.featured-card-modern .featured-card-img img{height:100%}
.featured-card-modern .featured-card-body{padding:1.25rem}
.featured-card-modern h3{font-size:1.25rem;line-height:1.12;color:var(--text);margin:.55rem 0}
.featured-card-modern p{font-size:.9rem;color:var(--text-soft)}

.discover-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:2.4rem;align-items:center}
.discover-copy{font-size:1.02rem;color:var(--text-soft);margin:1rem 0 1.4rem;max-width:58ch}
.discover-visual{border-radius:1.6rem;overflow:hidden;box-shadow:var(--card-shadow);min-height:350px;background:var(--surface-high)}
.discover-visual img{height:100%;object-fit:cover}
.discover-visual-map{display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:1.6rem;overflow:hidden;box-shadow:var(--card-shadow);aspect-ratio:1/1;min-height:auto}
.discover-map-image{width:100%;height:100%;max-height:none;object-fit:cover;display:block;filter:none;transition:transform .55s ease;will-change:transform}
.discover-visual-map:hover .discover-map-image{transform:scale(1.035)}

.newsletter-section-home{padding-top:1rem}
.newsletter-panel-home{background:#f0ecef;border-radius:1.6rem;padding:3rem 2rem;text-align:center;box-shadow:var(--card-shadow)}
.newsletter-panel-home h2{font-size:clamp(2rem,4vw,3rem);line-height:1.02;color:var(--text);margin-bottom:.8rem}
.newsletter-panel-home p{max-width:52ch;margin:0 auto 1.5rem;color:var(--text-soft)}
.newsletter-inline-home{display:flex;gap:.75rem;justify-content:center;align-items:center;flex-wrap:wrap}
.newsletter-inline-home input{min-width:280px;padding:1rem 1.2rem;border:none;border-radius:999px;background:#fff;color:var(--text-soft);box-shadow:inset 0 0 0 1px rgba(117,119,120,.08)}
.newsletter-inline-home button{padding:1rem 1.3rem;border:none;border-radius:999px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}
.newsletter-inline-home.sidebar{flex-direction:column;align-items:stretch}
.newsletter-inline-home.sidebar input,.newsletter-inline-home.sidebar button{width:100%}

.page-header{position:relative;padding:5rem 0 4.25rem;background:linear-gradient(180deg,var(--surface-low),var(--surface));overflow:hidden}
.page-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 15%,rgba(137,48,176,.12),transparent 20%),radial-gradient(circle at 12% 35%,rgba(183,0,77,.10),transparent 24%);pointer-events:none}
.page-header .container{position:relative;z-index:1;max-width:1100px}
.page-header-left .container{text-align:left!important}
.page-header h1{font-size:clamp(2.4rem,7vw,5.2rem)!important;line-height:.95;color:var(--text)!important;max-width:13ch}
.page-header p{font-size:1.1rem;color:var(--text-soft);max-width:56ch;margin-top:1rem}
.page-header:not(.page-header-left) .container{text-align:left}
.page-header:not(.page-header-left) h1{max-width:12ch}

.article-hero-modern{padding:3rem 0;background:linear-gradient(180deg,var(--surface-low),#fff)}
.article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:2.5rem;align-items:center}
.article-hero-title{font-size:clamp(2.5rem,5vw,5rem);line-height:.93;color:var(--text);max-width:10ch;margin:.8rem 0 1rem}
.article-hero-intro{font-size:1.08rem;color:var(--text-soft);max-width:56ch;line-height:1.75}
.article-hero-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.article-author-chip,.article-date-block{display:flex;align-items:center;gap:.85rem;background:#fff;border-radius:999px;padding:.75rem 1rem;box-shadow:var(--card-shadow)}
.article-author-avatar{width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif}
.article-author-chip strong,.article-date-block strong{display:block;color:var(--text)}
.article-author-chip span,.article-date-block span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700}
.article-cover-shell{position:relative}
.article-cover-card{border-radius:1.5rem;overflow:hidden;box-shadow:0 28px 70px rgba(44,47,48,.14);transform:rotate(2deg);cursor:zoom-in;background:var(--surface-high)}
.article-cover-card img{width:100%;height:100%;max-height:620px;object-fit:cover;transition:transform .35s ease}
.article-cover-card:hover img{transform:scale(1.03)}
.article-layout-modern{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
.article-share-rail{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.article-share-rail span{font-size:.72rem;writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);font-weight:800}
.article-share-rail button{width:2.8rem;height:2.8rem;border-radius:999px;border:none;background:#fff;box-shadow:var(--card-shadow);cursor:pointer;color:var(--text)}
.article-body-modern{max-width:880px}

/* ── Odnośnik do innego artykułu wstawiony w treść (znacznik [ARTYKUL:ID]) ──
   Pozioma karta — miniaturka po lewej, treść po prawej — zaprojektowana tak,
   by dobrze wtapiać się w środek płynącego tekstu artykułu, w odróżnieniu
   od pionowych kart używanych w bocznym panelu "Powiązane artykuły". */
.inline-article-link{
  display:flex;
  align-items:stretch;
  gap:1.1rem;
  margin:1.9rem 0;
  padding:.85rem;
  border:1.5px solid rgba(183,0,77,.16);
  border-radius:1.15rem;
  background:linear-gradient(135deg,rgba(183,0,77,.04),rgba(137,48,176,.05));
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inline-article-link:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(90,34,232,.14);
  border-color:rgba(183,0,77,.3);
}
.inline-article-link-media{
  flex:0 0 7rem;
  width:7rem;
  height:7rem;
  border-radius:.85rem;
  overflow:hidden;
  background:var(--surface-high,#eceef1);
  display:block;
}
.inline-article-link-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.inline-article-link:hover .inline-article-link-media img{transform:scale(1.07)}
.inline-article-link-media-fallback{display:block;width:100%;height:100%;background:linear-gradient(135deg,#eceef1,#dfe4ea)}
.inline-article-link-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.3rem;
}
.inline-article-link-kicker{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.inline-article-link-badge{display:inline-flex;align-items:center;padding:.22rem .55rem;border-radius:.4rem;font-size:.62rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.inline-article-link-label{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--primary)}
.inline-article-link-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.08rem;
  font-weight:800;
  line-height:1.28;
  color:var(--text);
  transition:color .2s ease;
}
.inline-article-link:hover .inline-article-link-title{color:var(--primary)}
.inline-article-link-excerpt{
  font-size:.86rem;
  color:var(--text-soft,#6b7178);
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}
.inline-article-link-arrow{
  flex:0 0 auto;
  align-self:center;
  font-size:1.3rem;
  font-weight:700;
  color:var(--primary);
  opacity:.55;
  transition:transform .2s ease, opacity .2s ease;
  padding-right:.3rem;
}
.inline-article-link:hover .inline-article-link-arrow{transform:translateX(4px);opacity:1}
@media (max-width:640px){
  .inline-article-link{padding:.7rem;gap:.8rem}
  .inline-article-link-media{flex-basis:5rem;width:5rem;height:5rem}
  .inline-article-link-title{font-size:.98rem}
  .inline-article-link-excerpt{display:none}
  .inline-article-link-arrow{display:none}
}
.article-body-modern p{font-size:1.08rem;color:var(--text-soft);line-height:1.95;margin-bottom:1.4rem}
.article-body-modern > p:first-child{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.65rem;line-height:1.6;color:var(--text)}
.article-body-modern > p:first-child::first-letter{float:left;font-size:4.2rem;line-height:.85;padding-right:.18em;color:var(--primary);font-weight:800}
.article-body-modern h2,.article-body-modern h3{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);margin:2rem 0 .9rem;line-height:1.15}
.article-body-modern blockquote{margin:2rem 0;padding:1.35rem 1.3rem;border-left:3px solid var(--primary);background:var(--surface-low);border-radius:1rem;color:var(--text-soft);font-style:italic}
.article-gallery-modern{margin-top:3rem}
.article-feature-blocks{margin-top:3rem}
.article-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media(max-width:1080px){.article-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.article-feature-card{display:flex;flex-direction:column;padding:0;border:none;border-radius:1.1rem;background:#fff;box-shadow:0 18px 42px rgba(36,42,46,.07);overflow:hidden;text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.article-feature-card:hover{transform:translateY(-3px);box-shadow:0 24px 54px rgba(36,42,46,.11)}
.article-feature-card-image{display:grid;place-items:center;aspect-ratio:1;background:linear-gradient(135deg,#f4eef8,#eef1f5);color:var(--primary);overflow:hidden}
.article-feature-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.article-feature-card:hover .article-feature-card-image img{transform:scale(1.035)}
.article-feature-card-image .material-symbols-outlined{font-size:2.4rem;opacity:.62}
.article-feature-card-copy{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.05rem 1.1rem;background:#fff;flex:1 1 auto}
.article-feature-card-label{display:inline-flex;width:max-content;max-width:100%;margin-bottom:.1rem;padding:.26rem .58rem;border-radius:999px;background:rgba(183,0,77,.1);color:var(--primary);font-size:.62rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-feature-card-copy strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.08rem;line-height:1.12;letter-spacing:-.035em;color:var(--text)}
.article-feature-card-copy span{font-size:.92rem;line-height:1.65;color:var(--text-soft)}
.article-feature-card-copy .article-feature-card-teaser{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-feature-card-copy .article-feature-card-more{margin-top:auto;padding-top:.55rem;color:var(--primary);font-weight:800;font-size:.86rem;letter-spacing:-.01em}
.article-pill{display:inline-flex;align-items:center;vertical-align:baseline;margin:0 .12rem;padding:.16em .6em;border-radius:999px;background:rgba(124,34,156,.12);color:#7c229c;font-weight:800;font-size:.82em;letter-spacing:.04em;text-transform:uppercase;line-height:1.35;white-space:nowrap}
.article-feature-modal{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:1.25rem}
.article-feature-modal.is-open{display:flex}
.article-feature-modal-backdrop{position:absolute;inset:0;background:rgba(11,8,18,.64);backdrop-filter:blur(10px)}
.article-feature-modal-dialog{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,420px) minmax(320px,520px);width:min(960px,100%);max-height:min(86vh,760px);overflow:hidden;border-radius:1.45rem;background:#fff;box-shadow:0 30px 90px rgba(10,6,18,.32)}
.article-feature-modal-dialog.no-image{grid-template-columns:minmax(320px,680px);width:min(720px,100%)}
.article-feature-modal-close{position:absolute;right:1rem;top:1rem;z-index:3;display:grid;place-items:center;width:2.6rem;height:2.6rem;border:none;border-radius:999px;background:rgba(255,255,255,.92);color:var(--text);cursor:pointer;box-shadow:0 10px 24px rgba(10,6,18,.14)}
.article-feature-modal-media{position:relative;min-height:420px;background:#1a1820;overflow:hidden}
.article-feature-modal-blur{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(34px) brightness(.6) saturate(.9);transform:scale(1.2);z-index:0}
.article-feature-modal-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.article-feature-modal-media.is-empty{display:none}
.article-feature-modal-copy{padding:2.1rem;max-height:min(86vh,760px);min-height:0;overflow-y:auto;color:var(--text);scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.16) transparent}
.article-feature-modal-copy::-webkit-scrollbar{width:6px}
.article-feature-modal-copy::-webkit-scrollbar-track{background:transparent}
.article-feature-modal-copy::-webkit-scrollbar-thumb{background:rgba(0,0,0,.13);border-radius:999px}
.article-feature-modal-copy::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.24)}
.article-feature-modal-copy>span{display:inline-flex;width:max-content;margin-bottom:.85rem;padding:.36rem .72rem;border-radius:999px;background:rgba(183,0,77,.1);color:var(--primary);font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.article-feature-modal-copy h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.75rem,3vw,2.55rem);line-height:1.02;letter-spacing:-.055em;margin:0 0 1rem;color:var(--text)}
.article-feature-modal-copy p{margin:0;color:var(--text-soft);font-size:1rem;line-height:1.85;white-space:pre-line}
.gallery-counter{font-size:.8rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}
.article-back-row{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(117,119,120,.12)}
.article-side-modern{display:grid;gap:1rem;position:sticky;top:110px}
.article-side-card h3{font-size:1.3rem;line-height:1.1;color:var(--text);margin-bottom:.75rem}
.article-side-stack{display:grid;gap:.75rem}
.related-mini-card{display:grid;grid-template-columns:92px 1fr;gap:.8rem;align-items:start;background:var(--surface-low);border-radius:1rem;padding:.65rem}
.related-mini-thumb{height:88px;border-radius:.8rem;overflow:hidden;background:var(--surface-high)}
.related-mini-thumb img{height:100%}
.related-mini-title{margin-top:.45rem;font-size:.95rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);line-height:1.25}
.article-newsletter-card{background:var(--grad);color:#fff}
.article-newsletter-card h3,.article-newsletter-card p{color:#fff}
.article-newsletter-card p{opacity:.88}

.article-card,.value-card{border:none!important;border-radius:1.3rem!important;overflow:hidden;background:#fff!important;box-shadow:var(--card-shadow)!important}
.article-card-img{height:240px!important;background:var(--surface-high)}
.article-card-img-sm{height:180px!important;background:var(--surface-high);overflow:hidden}
.article-card-body{padding:1.25rem!important}
.article-card-title{font-family:'Plus Jakarta Sans',sans-serif!important;font-size:1.22rem!important;line-height:1.15!important;color:var(--text)!important}
.article-card-excerpt{font-size:.92rem!important;color:var(--text-soft)!important;line-height:1.7!important}
.article-card-date{font-size:.76rem!important;color:var(--text-muted)!important;font-weight:700!important;letter-spacing:.02em}
.tag{background:rgba(137,48,176,.16)!important;color:var(--secondary)!important;font-family:'Manrope',sans-serif!important;font-size:.69rem!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;padding:.32rem .62rem!important}

.filter-bar{gap:1rem!important;margin-bottom:2rem!important}
.search-box{padding:1rem 3rem 1rem 3rem!important;border:none!important;border-radius:1rem!important;background:#fff!important;box-shadow:var(--card-shadow)!important}
.search-box:focus{box-shadow:0 0 0 3px rgba(183,0,77,.12), var(--card-shadow)!important;border:none!important}
.filter-btn{border:none!important;background:#fff!important;border-radius:999px!important;padding:.62rem 1rem!important;font-family:'Manrope',sans-serif!important;font-weight:700!important;box-shadow:var(--card-shadow)}
.filter-btn.active{background:var(--primary)!important;color:#fff!important;box-shadow:0 14px 26px rgba(183,0,77,.16)!important}
.pagination{gap:.65rem}
.page-btn{border:none!important;background:#fff!important;box-shadow:var(--card-shadow);border-radius:.9rem!important;padding:.65rem 1rem!important;font-weight:700!important}
.page-btn.active{background:var(--primary)!important;color:#fff!important}

.form-label{font-size:.76rem!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:var(--text-muted)!important;font-weight:800!important}
.form-input,.form-select,.form-textarea{border:none!important;background:var(--surface-high)!important;border-radius:1rem!important;padding:1rem 1.05rem!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px rgba(117,119,120,.06)}
.form-input:focus,.form-select:focus,.form-textarea:focus{box-shadow:0 0 0 3px rgba(183,0,77,.14)!important}
.form-textarea{min-height:11rem!important}
.flash.error{background:#fff0f3!important;color:#9b0937!important;border:1px solid rgba(183,0,77,.12)}
.contact-modern-grid{display:grid;grid-template-columns:minmax(0,1.18fr) 380px;gap:1.5rem;align-items:start}
.page-header-contact .container{max-width:1240px;padding:0 1rem}
.page-contact .page-header .container{max-width:1240px;padding:0 1rem}
.contact-form-card{background:#fff;border-radius:1.5rem;box-shadow:var(--card-shadow);padding:1.6rem}
.contact-card-head h2{font-size:1.9rem;line-height:1.04;color:var(--text)}
.contact-card-head p{margin-top:.55rem;color:var(--text-soft)}
.contact-modern-form{margin-top:1.2rem}
.contact-two-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-side-stack{display:grid;gap:1rem}
.contact-map-card{position:relative;overflow:hidden;min-height:300px;padding:0}
.contact-side-map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.contact-side-map-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08)),radial-gradient(circle at center,rgba(255,255,255,.35),transparent 60%),linear-gradient(135deg,#d9dbdd,#eef0f2)}
.contact-location-badge{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:1rem;padding:1rem;box-shadow:var(--card-shadow);pointer-events:none}
.contact-location-badge strong{display:block;color:var(--text)}
.contact-location-badge span{display:block;color:var(--text-soft)}
.contact-highlight-card{background:linear-gradient(135deg,#8e32bb,#8b33cb);color:#fff}
.contact-highlight-card h3,.contact-highlight-card .contact-info-line strong,.contact-highlight-card .contact-info-line span{color:#fff}
.contact-info-line{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.contact-info-line:last-child{border-bottom:none}
.contact-success-state{text-align:center;padding:2.5rem 0}
.contact-success-icon{width:4rem;height:4rem;border-radius:999px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;font-size:1.8rem;font-weight:800}

.tl-wrap{position:relative;padding-left:0}
.tl-wrap::before{left:1.35rem!important;background:linear-gradient(to bottom,rgba(137,48,176,.14),rgba(137,48,176,.5),rgba(183,0,77,.16))!important;width:2px!important}
.tl-item{gap:1rem!important;padding-left:0!important}
.tl-num{width:2.8rem!important;height:2.8rem!important;background:#fff!important;color:var(--primary)!important;box-shadow:var(--card-shadow)!important;border:1px solid rgba(183,0,77,.12)!important}
.tl-body{background:#fff;padding:1.15rem 1.2rem 1rem;border-radius:1.25rem;box-shadow:var(--card-shadow)}
.tl-title{font-family:'Plus Jakarta Sans',sans-serif!important;text-transform:none!important;letter-spacing:-.02em!important;font-size:1.2rem!important}
.tl-desc{font-size:.94rem!important;color:var(--text-soft)!important;line-height:1.78!important}
.tl-body::after{display:none!important}

.attr-filter-btn,.attr-tile,.attr-popup-nav{box-shadow:var(--card-shadow)}
.attr-filter-btn{border:none!important;background:#fff!important;border-radius:999px!important}
.attr-filter-btn.active{box-shadow:0 12px 24px rgba(183,0,77,.18)!important}
#attr-map-wrap{border:none!important;border-radius:1.6rem!important;box-shadow:var(--card-shadow-hover)!important;overflow:hidden}
#attr-map-header{background:#fff!important;border-bottom:none!important}
#attr-map{height:560px!important}

#site-footer{background:#eef1f4!important;color:var(--text-soft)!important;padding:4rem 0 1.5rem!important;border-top:1px solid rgba(117,119,120,.08)}
.footer-modern{max-width:1240px}
.footer-grid{display:grid!important;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem!important;margin-bottom:2.2rem!important}
.footer-brand{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.9rem;font-weight:800;color:var(--text);letter-spacing:-.04em}
.footer-desc{font-size:.95rem!important;color:var(--text-soft)!important;max-width:32ch}
.footer-heading{font-family:'Plus Jakarta Sans',sans-serif!important;font-size:.85rem!important;text-transform:uppercase!important;letter-spacing:.16em!important;color:var(--text)!important;margin-bottom:1rem!important}
.footer-links a,.footer-contact-list li{font-size:.92rem!important;color:var(--text-soft)!important}
.footer-links a:hover{color:var(--primary)!important}
.footer-socials{display:flex;gap:.6rem;margin-top:1rem}
.footer-socials a{width:2.2rem;height:2.2rem;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--card-shadow);color:var(--text)}
.footer-mini-cta{margin-top:1rem;padding:1rem;border-radius:1rem;background:#fff;box-shadow:var(--card-shadow);display:grid;gap:.25rem}
.footer-mini-cta span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:800}
.footer-mini-cta a{font-weight:800;color:var(--primary)}
.footer-bottom{padding-top:1.6rem!important;border-top:1px solid rgba(117,119,120,.1)!important;text-align:left!important;font-size:.82rem!important;color:var(--text-muted)!important}

#site-shell{overflow:hidden}
.empty-state{padding:4rem 1rem;background:#fff;border-radius:1.5rem;box-shadow:var(--card-shadow);color:var(--text-soft)}

@media(max-width:1100px){
  .hero-split-card,.home-top-grid,.video-split-grid,.discover-grid,.article-hero-grid,.article-layout-modern,.contact-modern-grid{grid-template-columns:1fr!important}
  .home-side-rail,.article-side-modern,.contact-side-stack{position:static!important}
  .article-share-rail{display:none}
  .story-lead-card{grid-template-columns:1fr}
  .home-live-card{min-height:auto}
  .home-live-update-badge{right:auto;left:1.25rem;top:3.35rem;font-size:.7rem}
  .home-live-update-badge--solo{top:1.35rem}
  .home-live-scrim{background:linear-gradient(180deg,rgba(9,7,14,.18) 0%,rgba(9,7,14,.42) 32%,rgba(9,7,14,.75) 62%,rgba(9,7,14,.92) 100%)}
  .home-live-overlay{max-width:100%;min-height:auto;padding:1.25rem 1.25rem 1.5rem}
  .home-live-overlay-top{padding-top:4rem}
  .home-live-overlay p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .home-live-divider{margin:.95rem 0 .85rem}
  .home-live-info-row{gap:1.1rem;margin-bottom:1.05rem}
  .discover-visual{min-height:300px}
  .footer-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:760px){
  .section{padding:4rem 0}
  .hero-copy-panel{padding:2rem 1.35rem;min-height:auto}
  .hero-title-split,.hero-excerpt-split{min-height:unset}
  .hero-media-panel,.hero-split-card{min-height:unset}
  .hero-media-panel{min-height:320px}
  .story-list-item{grid-template-columns:1fr}
  .story-list-thumb{height:180px}
  .featured-grid-modern{grid-template-columns:1fr}
  .contact-two-cols{grid-template-columns:1fr}
  .newsletter-inline-home{flex-direction:column}
  .newsletter-inline-home input,.newsletter-inline-home button{width:100%}
  .footer-grid{grid-template-columns:1fr!important}
  .page-header h1,.article-hero-title,.hero-title-split{max-width:none}
}

@media(max-width:900px){
  .nav-logo img{height:2.55rem}
}


/* ── FOOTER LOGO UPDATE ── */
.footer-brand-logo{display:inline-flex;align-items:center;max-width:320px}
.footer-brand-logo img{display:block;width:auto;height:4.2rem;object-fit:contain;object-position:left center}
@media(max-width:768px){
  .footer-brand-logo img{height:3.4rem}
}


/* ── ARTICLE TEMPLATE / EDITORIAL REFERENCE UPDATE ── */
.article-hero-editorial{padding:clamp(2.75rem,5vw,4rem) 0 clamp(3rem,5.5vw,4.25rem);background:var(--surface-low);overflow:hidden}
.article-hero-editorial .article-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(340px,520px);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
/* Grafika okładkowa w tle nagłówka artykułu (przełącznik w panelu).
   Czytelność opiera się na trzech niezależnych warstwach, nie na jednej.
   Rozmycie usuwa drobne detale, które konkurowałyby z krojem tytułu;
   obniżone krycie zbliża zdjęcie do jasnego tła sekcji; biała zasłona
   podnosi jasność niezależnie od tego, jak ciemny jest kadr. Dopiero
   razem dają gwarancję: nawet całkowicie czarne zdjęcie zostawia pod
   tytułem jasne tło, więc redakcja nie musi sprawdzać każdej okładki. */
.article-hero-editorial.has-hero-bg{position:relative;isolation:isolate;background:var(--surface-low)}
.article-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.article-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;
  filter:blur(6px) saturate(.72);opacity:.6;
  transform:scale(1.08)} /* skala zakrywa przezroczyste brzegi po rozmyciu */
.article-hero-bg::after{content:'';position:absolute;inset:0;
  /* Zasłona trzyma się mocno na całej szerokości kolumny z tekstem
     (0–62%) i puszcza dopiero dalej, gdzie leży już tylko karta
     z okładką. Przy słabszym spadku drobny podpis autora schodził
     w najgorszym kadrze do 4,4:1, czyli poniżej progu WCAG AA. */
  background:linear-gradient(100deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.84) 62%,rgba(255,255,255,.66) 100%)}
.article-hero-editorial.has-hero-bg .article-hero-grid{position:relative;z-index:1}
@media (max-width:900px){
  /* Po złożeniu kolumn tekst leży na całej szerokości zdjęcia, więc
     zasłona musi być równomierna i mocniejsza niż na desktopie. */
  .article-hero-bg img{opacity:.5}
  .article-hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.84))}
}
.article-hero-copy{position:relative;z-index:2}
.article-kicker{margin-bottom:1.35rem;background:rgba(137,48,176,.18)!important;color:var(--secondary)!important;font-size:.74rem!important;letter-spacing:.11em!important}
.article-hero-title-editorial{font-size:clamp(2.55rem,5vw,4.75rem)!important;line-height:1.04!important;letter-spacing:-.05em!important;max-width:min(13.2ch,760px)!important;margin:0 0 clamp(1.25rem,2.4vw,1.75rem)!important;color:var(--text)!important;text-wrap:balance}
.article-hero-meta-editorial{display:flex;flex-wrap:wrap;align-items:center;gap:1.35rem;margin-top:0!important}
.article-author-meta-card{display:flex;align-items:center;gap:.85rem;min-width:0}
.article-author-avatar.editorial{width:3rem;height:3rem;border-radius:999px;background:linear-gradient(135deg,#f6c369,#e2a33c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;font-weight:800;letter-spacing:.02em;flex-shrink:0}
/* Wariant ze zdjęciem redaktora. Tło zamiast złotego gradientu jest szare:
   gradient prześwitywałby przez chwilę ładowania portretu i mignąłby złotą
   plamą. overflow:hidden przycina zdjęcie do koła, a object-fit:cover trzyma
   proporcje twarzy przy zdjęciach, które nie są kwadratowe. */
.article-author-avatar.editorial.has-photo{background:#ece9ee;overflow:hidden;padding:0}
.article-author-avatar.editorial.has-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.article-author-copy{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.article-author-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:.98rem;font-weight:800;line-height:1.2;color:var(--text)}
.article-author-role{font-size:.84rem;line-height:1.35;color:var(--text-muted)}
.article-meta-divider{width:1px;height:2.6rem;background:rgba(117,119,120,.18);flex-shrink:0}
.article-date-meta-card{display:flex;flex-direction:column;gap:.15rem}
.article-date-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--primary)}
.article-date-value{font-size:.98rem;font-weight:600;line-height:1.3;color:var(--text)}
.article-cover-shell-editorial{position:relative;align-self:start;justify-self:end;width:100%;max-width:520px;padding:.35rem 0 0}
.article-cover-card-editorial{position:relative;border-radius:1.55rem!important;overflow:hidden;box-shadow:0 26px 54px rgba(27,33,40,.16)!important;transform:rotate(1.2deg)!important;aspect-ratio:4 / 3;background:#dfe4ea}
.article-cover-card-editorial img{width:100%;height:100%;max-height:none!important;object-fit:cover}
.article-cover-orb{display:none}
.article-standfirst{max-width:880px;margin:0 0 2rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.54rem;font-weight:500;line-height:1.68;color:var(--text)}
.hero-update-label,.article-update-mini{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:.34rem .72rem;border-radius:999px;background:linear-gradient(135deg,rgba(183,0,77,.12),rgba(137,48,176,.14));color:var(--primary);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
.hero-update-label{margin:.7rem 0 .65rem}
.hero-update-label[hidden]{display:none!important}
.article-update-mini{margin:0 0 .55rem}
.article-update-box{position:relative;max-width:880px;margin:2.05rem 0 2.85rem;padding:3.65rem 1.55rem 1.55rem;border:3px solid transparent;border-radius:.85rem;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#5a22e8 0%,#8d31d9 40%,#e90073 100%) border-box;box-shadow:none}
.article-update-title{position:absolute;top:-1.1rem;left:clamp(2.6rem,7vw,4.9rem);z-index:2;margin:0;padding:0 1.35rem;background:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.25rem,2.1vw,1.68rem);font-weight:900;line-height:1.25;letter-spacing:-.045em;color:var(--primary)}
.article-update-title span{display:inline-block;background:linear-gradient(100deg,#5a22e8 0%,#e90073 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  /* ten sam powód co przy nagłówku galerii — patrz komentarz wyżej */
  padding-bottom:.18em;margin-bottom:-.18em;overflow:visible}
.article-update-text{position:relative;z-index:1;margin:0 0 2.1rem;color:#111820;font-size:1.03rem;line-height:1.75;white-space:normal}
.article-update-gallery{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-top:1.35rem}
.article-update-gallery-item{width:100%;border:0;padding:0;appearance:none;border-radius:.62rem;overflow:hidden;background:#edf0f2;aspect-ratio:4/3}
.article-update-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.article-live-section{padding-top:3.15rem;background:linear-gradient(180deg,#fff 0%,#fff 64%,#fbf8fd 100%)}
.article-layout-live{align-items:flex-start}
.article-live-main{max-width:880px}
.article-live-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:#241a33;margin:0 0 1.4rem;max-width:880px;text-wrap:balance}
.article-live-standfirst{max-width:880px;margin:0 0 2.65rem;color:var(--text-soft);font-family:'Manrope',sans-serif;font-size:1.08rem;font-weight:500;line-height:1.78}
.article-live-standfirst p{margin:0 0 1.05rem}
.article-live-standfirst p:last-child{margin-bottom:0}
.article-live-day{margin:0 0 2.3rem}
.article-live-day-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1.4rem;padding-left:1.55rem}
.article-live-day-head h2{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.38rem,2.2vw,1.68rem);line-height:1.08;letter-spacing:-.045em;color:#2b2544}
.article-live-fresh{display:inline-flex;align-items:center;gap:.46rem;padding:.48rem .86rem;border-radius:999px;background:rgba(233,0,115,.08);color:var(--primary);font-family:'Plus Jakarta Sans',sans-serif;font-size:.68rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.article-live-fresh i{width:.48rem;height:.48rem;border-radius:999px;background:#ff2766;box-shadow:0 0 0 .24rem rgba(255,39,102,.12)}
.article-live-day-stream{position:relative;display:grid;gap:1.05rem;padding-left:5.45rem}
.article-live-day-stream::before{content:'';position:absolute;left:2.05rem;top:.95rem;bottom:.95rem;width:2px;background:linear-gradient(180deg,rgba(90,34,232,.26),rgba(233,0,115,.22));border-radius:999px}
.article-live-story{position:relative}
.article-live-story::before{content:'';position:absolute;left:-3.7rem;top:4rem;width:.72rem;height:.72rem;border-radius:999px;background:#fff;border:2px solid rgba(137,48,176,.22);box-shadow:0 0 0 .28rem rgba(137,48,176,.06);z-index:2}
.article-live-time-badge{position:absolute;left:-5.45rem;top:.35rem;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:4.1rem;min-height:2.45rem;padding:.56rem .8rem;border-radius:999px;background:linear-gradient(135deg,#5a22e8 0%,#e90073 100%);color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:900;line-height:1;box-shadow:0 12px 24px rgba(137,48,176,.2);white-space:nowrap}
.article-live-card{position:relative;min-width:0;padding:1.25rem 1.35rem 1.18rem;border:1px solid rgba(120,86,168,.18);border-radius:1.08rem;background:rgba(255,255,255,.9);box-shadow:0 12px 32px rgba(42,37,56,.06);backdrop-filter:blur(8px)}
.article-live-card h3{margin:0 0 .48rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.18rem;line-height:1.16;letter-spacing:-.035em;color:#5a22e8}
.article-live-text{margin:0;color:#17202a;font-size:.95rem;line-height:1.55}
.article-live-video{margin-top:1.05rem;border-radius:14px;overflow:hidden;background:#000;max-width:520px}
.article-live-video video{display:block;width:100%;height:auto;max-height:70vh;background:#000}
.article-live-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.05rem}
.article-live-gallery .is-gallery-hidden{display:none}
.article-live-gallery-more{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-top:.9rem;padding:.85rem 1.2rem;border-radius:999px;border:none;background:var(--grad);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.02em;cursor:pointer;box-shadow:0 14px 32px rgba(137,48,176,.28);transition:box-shadow .18s,transform .15s}
.article-live-gallery-more:hover{box-shadow:0 18px 40px rgba(137,48,176,.38);transform:translateY(-2px)}
.article-live-gallery-more:active{transform:translateY(0)}
.article-live-gallery-more::after{content:'↓';font-size:1.05em;line-height:1}
.article-live-gallery-item{width:100%;border:0;padding:0;appearance:none;border-radius:.64rem;overflow:hidden;background:#edf0f2;aspect-ratio:16/9;box-shadow:0 8px 18px rgba(42,37,56,.06);cursor:zoom-in}
.article-live-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.article-live-gallery-item:hover img{transform:scale(1.035)}
.article-body-modern > p:first-child{font-size:1.16rem!important;font-family:'Manrope',sans-serif!important;color:var(--text-soft)!important;line-height:1.95!important}
.article-body-modern > p:first-child::first-letter{float:none!important;font-size:inherit!important;line-height:inherit!important;padding-right:0!important;color:inherit!important;font-weight:inherit!important}
.article-side-modern{gap:1.4rem!important}
.article-related-panel{padding:2rem 2rem 1.75rem!important;border-radius:1.55rem!important;background:#fff!important;box-shadow:0 18px 40px rgba(44,47,48,.07)!important}
.article-related-panel h3{font-size:1.78rem!important;line-height:1.05!important;letter-spacing:-.04em!important;margin-bottom:1.65rem!important}
.article-related-stack{display:grid;gap:1.8rem}
.article-related-story{display:block}
.article-related-story-link{display:flex;flex-direction:column;gap:.9rem}
.article-related-media{position:relative;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;background:var(--surface-high);box-shadow:0 10px 20px rgba(44,47,48,.06)}
.article-related-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.article-related-story-link:hover .article-related-media img{transform:scale(1.06)}
.article-related-media-fallback{width:100%;height:100%;background:linear-gradient(135deg,#eceef1,#dfe4ea)}
.article-related-badge{position:absolute;left:.75rem;top:.75rem;display:inline-flex;align-items:center;padding:.28rem .52rem;border-radius:.38rem;background:var(--primary);color:#fff;font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 18px rgba(183,0,77,.18)}
.article-related-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.12rem;font-weight:800;line-height:1.24;color:var(--text);transition:color .2s ease}
.article-related-story-link:hover .article-related-title{color:var(--primary)}
.article-related-more{display:flex;align-items:center;justify-content:center;width:100%;margin-top:2rem;padding:1rem 1.2rem;border:2px solid rgba(117,119,120,.18);border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.96rem;font-weight:800;color:var(--text-soft);background:#fff;transition:border-color .2s,color .2s,transform .18s ease}
.article-related-more:hover{border-color:rgba(183,0,77,.35);color:var(--primary);transform:translateY(-1px)}
.article-newsletter-card{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:2rem 1.7rem!important;border-radius:1.6rem!important;background:#8d2fb0!important;background-image:url('../img/cta-city-bg.png')!important;background-size:cover!important;background-position:center right!important;color:#fff!important;box-shadow:0 24px 58px rgba(86,23,112,.20)!important}
.article-newsletter-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,12,125,.94) 0%,rgba(145,34,163,.88) 44%,rgba(167,39,90,.72) 72%,rgba(167,39,90,.48) 100%);z-index:-2}
.article-newsletter-card::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 14% 18%,rgba(255,255,255,.18),transparent 30%),radial-gradient(circle at 88% 82%,rgba(255,255,255,.10),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));mix-blend-mode:screen;z-index:-1}
.article-newsletter-card h3{position:relative;z-index:1;font-size:1.7rem!important;line-height:1.05!important;margin:0 0 .65rem!important;color:#fff!important;letter-spacing:-.035em!important}
.article-newsletter-card p{position:relative;z-index:1;margin:0 auto 1.35rem!important;color:rgba(255,255,255,.88)!important;line-height:1.65!important}
.article-newsletter-card .newsletter-inline-home.sidebar{position:relative;z-index:1;gap:.75rem}
.article-newsletter-card .newsletter-inline-home.sidebar input{min-width:0;background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;color:#fff!important;backdrop-filter:blur(8px)}
.article-newsletter-card .newsletter-inline-home.sidebar input::placeholder{color:rgba(255,255,255,.72)!important}
.article-newsletter-card .newsletter-inline-home.sidebar button{background:#fff!important;color:var(--primary)!important;box-shadow:0 18px 35px rgba(34,8,47,.16)}
.article-newsletter-card .newsletter-inline-home.sidebar button:hover{background:#fff!important;color:var(--primary-dim)!important;transform:translateY(-1px)}
.article-newsletter-decor{display:none}
.article-share-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.25rem;padding:1.1rem 1.15rem;border:1px solid rgba(117,119,120,.14);border-radius:1.25rem;background:linear-gradient(135deg,#fff 0%,#fbf7fc 100%);box-shadow:0 14px 30px rgba(44,47,48,.05)}
.article-share-copy{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.article-share-copy span{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--primary)}
.article-share-copy strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;line-height:1.25;color:var(--text)}
.article-share-facebook{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:3rem;padding:.75rem 1.2rem;border-radius:999px;background:#1877f2;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:.95rem;font-weight:900;box-shadow:0 14px 28px rgba(24,119,242,.22);white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.article-share-facebook:hover{color:#fff;background:#0f67d8;transform:translateY(-1px);box-shadow:0 18px 34px rgba(24,119,242,.28)}
.article-share-facebook .material-symbols-outlined{font-size:1.15rem;font-variation-settings:'FILL' 1,'wght' 700,'GRAD' 0,'opsz' 20}
@media(max-width:1024px){
  .article-hero-editorial{padding:3rem 0 3.5rem}
  .article-hero-title-editorial{max-width:none!important}
  .article-hero-meta-editorial{gap:1rem}
  .article-meta-divider{display:none}
  .article-cover-shell-editorial{justify-self:start;max-width:min(100%,560px);padding-top:0}
  .article-cover-card-editorial{aspect-ratio:16 / 10;transform:none!important}
}
@media(max-width:768px){
  .article-hero-title-editorial{font-size:clamp(2.35rem,9vw,3.5rem)!important;max-width:none!important}
  .article-hero-meta-editorial{align-items:flex-start;flex-direction:column}
  .article-author-meta-card,.article-date-meta-card{width:100%}
  .article-standfirst{font-size:1.18rem;line-height:1.72;margin-bottom:1.5rem}
  .article-update-box{margin-top:2rem;padding:3rem 1rem 1rem;border-radius:.85rem}
  .article-update-title{top:-.86rem;left:1rem;right:auto;width:max-content;max-width:calc(100% - 2rem);padding:0 .7rem;font-size:1.08rem;line-height:1.22}
  .article-update-text{font-size:.96rem;line-height:1.7;margin-bottom:1.35rem}
  .article-update-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .article-live-section{padding-top:2.35rem}
  .article-live-standfirst{margin:0 0 2.1rem}
  .article-live-day-head{padding-left:0;gap:.7rem;margin:0 0 1.1rem}
  .article-live-fresh{font-size:.62rem;white-space:normal}
  .article-live-day-stream{gap:.95rem;padding-left:0}
  .article-live-day-stream::before,.article-live-story::before{display:none}
  .article-live-time-badge{position:static;width:max-content;margin:0 0 .55rem;font-size:.76rem;min-height:2.15rem}
  .article-live-card{padding:1rem;border-radius:1rem}
  .article-live-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .article-related-panel,.article-newsletter-card{padding:1.4rem!important}
  .article-share-bar{align-items:stretch;flex-direction:column;padding:1rem}
  .article-share-facebook{width:100%}
}


/* === Homepage: trivia + join redesign === */
.trivia-home-section{background:#f2eef5;padding-top:4.5rem;padding-bottom:4.5rem}
.trivia-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem}
.trivia-head-icon{width:3rem;height:3rem;display:inline-flex;align-items:center;justify-content:center;border-radius:1rem;background:linear-gradient(135deg,var(--secondary),#b555ff);box-shadow:0 12px 24px rgba(137,48,176,.18);font-size:1.15rem}
.trivia-title{margin:0;font-size:clamp(2rem,4vw,3rem)}
.trivia-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.trivia-card{background:rgba(255,255,255,.88);border-radius:1.25rem;padding:1.4rem 1.35rem 1.5rem;box-shadow:0 18px 42px rgba(44,47,48,.05)}
.trivia-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:2.8rem;line-height:1;font-weight:800;letter-spacing:-.04em;color:rgba(183,0,77,.16);margin-bottom:.95rem}
.trivia-card h3{font-size:1.08rem;line-height:1.15;color:var(--text);margin-bottom:.65rem}
.trivia-card p{font-size:.92rem;line-height:1.7;color:var(--text-soft)}

.join-home-section{padding-top:2.25rem;padding-bottom:5.5rem;background:linear-gradient(180deg,#f2eef5 0%,var(--surface) 100%)}
.join-home-panel{position:relative;overflow:hidden;isolation:isolate;border-radius:2rem;min-height:390px;padding:3.25rem 3rem;display:flex;align-items:center;background:#8d2fb0;background-image:url('../img/cta-city-bg.png');background-size:cover;background-position:center center;box-shadow:0 28px 70px rgba(86,23,112,.22)}
.join-home-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(99,12,125,.92) 0%,rgba(145,34,163,.86) 42%,rgba(167,39,90,.66) 72%,rgba(167,39,90,.32) 100%);z-index:-2}
.join-home-panel::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 16% 24%,rgba(255,255,255,.18),transparent 23%),radial-gradient(circle at 78% 78%,rgba(255,255,255,.10),transparent 28%);mix-blend-mode:screen;z-index:-1}
.join-home-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));pointer-events:none}
.join-home-content{position:relative;z-index:1;max-width:34rem;color:#fff}
.join-home-content h2{font-size:clamp(2.3rem,4.5vw,4rem);line-height:.95;color:#fff;margin:.95rem 0 1rem;max-width:10ch}
.join-home-content p{font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.88);max-width:34rem;margin-bottom:1.6rem}
.join-inline-home{justify-content:flex-start}
.join-inline-home input{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.join-inline-home input::-webkit-input-placeholder{color:rgba(255,255,255,.72)}
.join-inline-home button{background:#fff;color:var(--primary);box-shadow:0 18px 35px rgba(34,8,47,.16)}

@media(max-width:1100px){
  .trivia-grid{grid-template-columns:1fr}
  .join-home-panel{min-height:360px;padding:2.5rem 2rem;background-position:center right}
}
@media(max-width:760px){
  .trivia-home-section{padding-top:3.4rem;padding-bottom:3.4rem}
  .trivia-head{align-items:flex-start}
  .trivia-head-icon{width:2.75rem;height:2.75rem}
  .trivia-grid{gap:.85rem}
  .trivia-card{padding:1.2rem 1.1rem 1.25rem}
  .join-home-section{padding-top:1.25rem;padding-bottom:4rem}
  .join-home-panel{padding:2rem 1.2rem 2.1rem;border-radius:1.4rem;min-height:unset}
  .join-home-content h2{max-width:11ch}
  .join-home-content p{font-size:.97rem}
  .join-inline-home{justify-content:stretch}
  .join-inline-home input,.join-inline-home button{width:100%;min-width:0}
}


.article-order-controls {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: nowrap;
}

.article-order-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: .6rem;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.article-order-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 24, 109, .42);
  color: var(--pink);
  box-shadow: 0 10px 22px rgba(232, 24, 109, .12);
}

.article-order-position {
  min-width: 3.1rem;
  text-align: center;
  padding: .42rem .55rem;
  border-radius: .7rem;
  background: rgba(232, 24, 109, .08);
  color: var(--pink);
  font-size: .76rem;
  font-weight: 800;
}

.article-order-muted {
  display: inline-flex;
  padding: .4rem .65rem;
  border-radius: .7rem;
  background: var(--bg2);
  color: var(--text3);
  font-size: .74rem;
  font-weight: 700;
}

/* ── HISTORY PAGE REDESIGN ── */

.history-page{background:#f5f6f7}
/* Uwaga: tu wcześniej była reguła ".history-page .container{max-width:1280px}",
   ale realna zawartość strony jest zagnieżdżona w .history-mag-main, gdzie
   inna reguła (niżej w pliku, ta sama specyficzność selektora) ustawia
   1240px. Dwie reguły o IDENTYCZNEJ specyficzności, walczące o tę samą
   właściwość na tych samych elementach, to krucha konstrukcja — o tym,
   która "wygrywa", decyduje wyłącznie kolejność w pliku, co łatwo
   przypadkiem odwrócić przy kolejnej edycji i co bywa źródłem niespójności
   między przeglądarkami/sesjami. Usunięte, żeby została jedna, jednoznaczna
   wartość (1240px, zgodna z resztą serwisu) zamiast dwóch konkurujących. */

/* HERO */
.history-hero{position:relative;overflow:hidden;padding:8.5rem 0 6.5rem;background:linear-gradient(180deg,#fbfcfd 0%,#f4f5f7 100%)}
.history-hero-bg{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.38) 55%,rgba(245,246,247,.96) 100%),
  url('../img/history-city-bg.jpg') center 28%/cover no-repeat;
  opacity:.78;
  transform:scale(1.03)}
.history-hero::after{content:'';position:absolute;inset:auto 0 0;height:132px;background:linear-gradient(180deg,rgba(245,246,247,0),#f5f6f7 78%)}
.history-hero-inner{position:relative;z-index:1;text-align:center;max-width:900px}
.history-hero-tag{display:inline-flex;align-items:center;justify-content:center;padding:.42rem .9rem;border-radius:999px;background:#edd8fb;color:#8a39b0;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.25rem}
.history-hero h1{font-size:clamp(2.8rem,6.5vw,5.15rem);line-height:.92;letter-spacing:-.06em;color:#15141c;margin:0 0 1rem}
.history-hero h1 span{display:block;color:#c20e63}
.history-hero p{max-width:650px;margin:0 auto;color:#696d74;font-size:1.05rem;line-height:1.75}

/* ERAS */
.history-eras{background:#f5f6f7}
.history-era{position:relative;padding:6.4rem 0;overflow:hidden}
.history-era-base{background:#fbfcfd}
.history-era-alt{background:#eef1f3}
.history-era-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,620px);gap:4rem;align-items:center}
.history-era-grid.history-era-grid-right{grid-template-columns:minmax(340px,620px) minmax(0,1fr)}
.history-era-grid-right .history-era-copy{order:2}
.history-era-grid-right .history-era-media{order:1}
.history-era-copy{max-width:470px}
.history-era-yearline{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.history-era-line{display:block;width:48px;height:2px;background:linear-gradient(90deg,#d51268 0%,rgba(213,18,104,0) 100%)}
.history-era-year{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.04em;color:#c50f65}
.history-era h2{font-size:clamp(2rem,4.4vw,3.55rem);line-height:.96;letter-spacing:-.055em;color:#16141c;margin-bottom:1.35rem}
.history-era-prose{display:grid;gap:.9rem}
.history-era-prose p{color:#6d7078;line-height:1.9;font-size:1rem;max-width:420px}
.history-era-btn{margin-top:1.85rem;display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.28rem;border-radius:999px;font-size:.86rem;font-weight:800;letter-spacing:.02em;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}
.history-era-btn span{font-size:1.02rem;line-height:1}
.history-era-btn:hover{transform:translateY(-2px)}
.history-era-btn-solid{background:#c50f65;color:#fff;box-shadow:0 16px 34px rgba(197,15,101,.2)}
.history-era-btn-solid:hover{background:#b20d5a}
.history-era-btn-outline{background:transparent;color:#c50f65;border:1.5px solid rgba(197,15,101,.34)}
.history-era-btn-outline:hover{background:rgba(197,15,101,.06)}
.history-era-media{position:relative}
.history-era-frame{position:relative;overflow:hidden;border-radius:1rem;background:#d9dee2;box-shadow:0 24px 44px rgba(20,24,34,.14);min-height:430px}
.history-era-frame::after{content:'';position:absolute;inset:0;border-radius:1rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.history-era-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.history-era:hover .history-era-frame img{transform:scale(1.035)}
.history-era-stats{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}
.history-era-stat{padding:.9rem 1rem;border-radius:.95rem;background:#fff;box-shadow:0 12px 26px rgba(20,24,34,.06);min-width:124px}
.history-era-stat-value{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;line-height:1.05;font-weight:800;color:#cf1d67;margin-bottom:.35rem}
.history-era-stat-label{font-size:.71rem;text-transform:uppercase;letter-spacing:.09em;color:#868b94;font-weight:800}
.history-era-divider{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:1px;height:122px;background:linear-gradient(180deg,rgba(213,18,104,.42),rgba(213,18,104,0))}

/* FACTS / BENTO */
.history-facts{padding:5.2rem 0;background:#eef0f2}
.history-facts-head{margin-bottom:2.1rem}
.history-kicker{display:inline-flex;align-items:center;padding:.38rem .82rem;border-radius:999px;background:#edd8fb;color:#8a39b0;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.95rem}
.history-kicker-light{background:rgba(255,255,255,.14);color:#fff}
.history-facts h2{font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.02;letter-spacing:-.045em;color:#17151d}
.history-bento{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:stretch}
.history-bento-card{background:#fff;border-radius:1rem;padding:1.4rem 1.35rem;box-shadow:0 10px 26px rgba(20,24,34,.04)}
.history-bento-card h3{font-size:1.14rem;line-height:1.15;letter-spacing:-.03em;color:#18161f;margin-bottom:.45rem}
.history-bento-card p{font-size:.92rem;line-height:1.7;color:#71747b}
.history-bento-card-wide{display:flex;gap:1rem;align-items:flex-start;min-height:164px}
.history-bento-icon{width:2rem;height:2rem;flex:0 0 2rem;border-radius:999px;display:grid;place-items:center;background:#edd8fb;color:#8a39b0;font-size:.85rem;font-weight:800;margin-top:.1rem}
.history-bento-icon-alt{background:#f8e7ef;color:#c50f65}
.history-bento-card-highlight{position:relative;min-height:164px;background:linear-gradient(135deg,#be0c60 0%,#cf0e64 52%,#b9157d 100%);color:#fff;overflow:hidden}
.history-bento-card-highlight h3,.history-bento-card-highlight p{color:#fff}
.history-bento-card-highlight p{color:rgba(255,255,255,.82)}
.history-bento-highlight-icon{width:2rem;height:2rem;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;font-size:.9rem;font-weight:800;margin-bottom:1rem}
.history-bento-highlight-shape{position:absolute;right:-20px;bottom:-10px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.18),rgba(255,255,255,0) 62%)}
.history-bento-card-standard{min-height:194px}
.history-bento-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;color:#c50f65;font-weight:800;font-size:.88rem}
.history-bento-link:hover{gap:.5rem}
.history-bento-card-media{grid-column:1 / -1;display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.05rem;align-items:center}
.history-bento-media-thumb{border-radius:.85rem;overflow:hidden;min-height:140px;background:#d7dcdf;box-shadow:0 10px 24px rgba(20,24,34,.08)}
.history-bento-media-thumb img{width:100%;height:100%;object-fit:cover}

/* ARCHIVE */
.history-archive{padding:5rem 0 6rem;background:#f5f6f7}
.history-archive-panel{position:relative;overflow:hidden;border-radius:1.9rem;background:linear-gradient(135deg,#7f1bc1 0%,#a016aa 36%,#c70f61 100%);padding:3rem 3rem 3.2rem;box-shadow:0 26px 60px rgba(110,34,167,.18)}
.history-archive-pattern{position:absolute;inset:0;opacity:.18;background:
  linear-gradient(90deg,transparent 0,transparent 8%,rgba(255,255,255,.16) 8.3%,transparent 8.6%,transparent 15%,rgba(255,255,255,.1) 15.3%,transparent 15.6%,transparent 22%,rgba(255,255,255,.08) 22.3%,transparent 22.6%,transparent 100%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px);
  mix-blend-mode:screen;
  transform:scale(1.05)}
.history-archive-copy{position:relative;z-index:1;max-width:760px}
.history-archive-copy h2{font-size:clamp(2.2rem,5vw,4rem);line-height:.93;letter-spacing:-.06em;color:#fff;margin-bottom:1rem}
.history-archive-copy p{max-width:650px;color:rgba(255,255,255,.84);font-size:1rem;line-height:1.85}
.history-archive-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.history-archive-btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.35rem;border-radius:999px;font-size:.88rem;font-weight:800;transition:transform .18s,background .18s,border-color .18s}
.history-archive-btn:hover{transform:translateY(-2px)}
.history-archive-btn-primary{background:#fff;color:#7d1db0}
.history-archive-btn-primary:hover{background:#fff2fb}
.history-archive-btn-secondary{border:1.5px solid rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.07)}
.history-archive-btn-secondary:hover{background:rgba(255,255,255,.12)}

@media (max-width:1100px){
  .history-era-grid,.history-era-grid.history-era-grid-right{grid-template-columns:1fr;gap:1.8rem}
  .history-era-grid-right .history-era-copy,.history-era-grid-right .history-era-media{order:initial}
  .history-era-copy,.history-era-prose p{max-width:none}
  .history-era-frame{min-height:320px}
  .history-bento{grid-template-columns:1fr}
  .history-bento-card-media{grid-template-columns:1fr}
}
@media (max-width:760px){
  .history-hero{padding:7rem 0 5rem}
  .history-hero h1{font-size:2.85rem}
  .history-hero p{font-size:.98rem}
  .history-era{padding:4.1rem 0}
  .history-era-frame{min-height:250px}
  .history-era h2{font-size:2.4rem}
  .history-era-year{font-size:1.65rem}
  .history-bento-card-wide{flex-direction:column}
  .history-archive-panel{padding:2rem 1.35rem 2.2rem;border-radius:1.35rem}
  .history-archive-copy h2{font-size:2.6rem}
}


/* ── PAGE EXPLORE / ODKRYWAJ ───────────────────────────────────────────── */
body.page-explore{background:#f5f6f7;color:#2c2f30}
body.page-explore .explore-hero-zone{position:relative;overflow:hidden}
body.page-explore .explore-hero-zone > .page-header,
body.page-explore .explore-hero-zone > section{position:relative;z-index:1}
body.page-explore .explore-hero-zone > .page-header{background:transparent;padding:7rem 0 4.5rem}
body.page-explore .explore-hero-zone .page-header .container{max-width:1240px}
body.page-explore .explore-hero-zone > .page-header::before{display:none}
body.page-explore .explore-hero-bg{
  position:absolute;left:0;right:0;top:0;height:1080px;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(246,247,248,.82) 0%,
      rgba(246,247,248,.74) 48%,
      rgba(246,247,248,.50) 68%,
      rgba(246,247,248,.16) 90%,
      rgba(246,247,248,.08) 100%),
    linear-gradient(180deg,
      rgba(246,247,248,.12) 0,
      rgba(246,247,248,.12) 280px,
      rgba(246,247,248,.30) 540px,
      rgba(246,247,248,.62) 780px,
      rgba(246,247,248,.95) 940px,
      #f5f6f7 1020px),
    url('../img/discover-city-bg.jpg') center top/cover no-repeat;
  filter:grayscale(1) brightness(1.08) contrast(.92);
}
body.page-explore .explore-hero-zone .page-header h1{text-shadow:0 1px 2px rgba(247,248,249,.5)}
body.page-explore .explore-hero-zone .page-header p{max-width:46ch;color:#3a3d3f;text-shadow:0 1px 2px rgba(247,248,249,.7)}
@media(max-width:760px){
  body.page-explore .explore-hero-bg{
    height:720px;
    background:
      linear-gradient(180deg,
        rgba(246,247,248,.32) 0,
        rgba(246,247,248,.40) 180px,
        rgba(246,247,248,.68) 360px,
        rgba(246,247,248,.95) 520px,
        #f5f6f7 620px),
      url('../img/discover-city-bg.jpg') center top/cover no-repeat;
  }
  body.page-explore .explore-hero-zone > .page-header{padding:4.5rem 0 3.25rem}
  body.page-explore .explore-hero-zone .page-header p{max-width:none}
}

.explore-page-hero{position:relative;min-height:36rem;display:flex;align-items:center;padding:5.8rem 0 5.2rem;overflow:hidden;background:linear-gradient(180deg,#eef0f0 0%,#f4f5f6 100%)}
.explore-page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,245,246,.94) 0%,rgba(244,245,246,.88) 32%,rgba(244,245,246,.62) 55%,rgba(244,245,246,.16) 82%,rgba(244,245,246,.08) 100%),linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 48%,rgba(244,245,246,.82) 100%);z-index:0}
.explore-page-hero::after{content:"";position:absolute;inset:auto 0 0;height:140px;background:linear-gradient(180deg,rgba(244,245,246,0),#f5f6f7 88%);z-index:1}
.explore-page-hero .container{position:relative;z-index:2}
.explore-page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.36;filter:saturate(.72) contrast(.92)}
.explore-page-hero .page-header-tag{background:rgba(137,48,176,.14);color:var(--secondary);opacity:1}
.explore-page-hero h1{max-width:11ch!important;margin-bottom:1rem}
.explore-page-hero h1 span{color:var(--primary)}
.explore-page-hero p{max-width:38rem;margin-bottom:2rem}
.explore-page-hero-btn{box-shadow:0 18px 38px rgba(183,0,77,.22)}

.explore-section{padding:5.25rem 0}
.explore-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem}
.explore-section-head h2,.explore-places-head h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.04em;color:#151719;margin-bottom:.4rem}
.explore-section-head p{font-size:1rem;color:#7a7e7f}
.explore-layer-switch{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem;background:#e6e8ea;border-radius:999px}
.explore-layer-switch button{border:none;background:transparent;color:#7a7e7f;font-weight:700;font-size:.88rem;padding:.8rem 1.25rem;border-radius:999px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.explore-layer-switch button.is-active{background:#fff;color:#b7004d;box-shadow:0 10px 24px rgba(24,28,29,.07)}

.explore-map-shell{position:relative;height:clamp(520px,calc(100vh - 190px),980px);height:clamp(520px,calc(100dvh - 190px),980px);border-radius:1.45rem;overflow:hidden;background:#eceef0;border:1px solid rgba(171,173,174,.18);box-shadow:0 16px 40px rgba(18,22,23,.06)}
#explore-map-canvas{position:absolute;inset:0}
#explore-map-canvas .leaflet-tile-pane{filter:none}
#explore-map-canvas .leaflet-control-attribution{background:rgba(255,255,255,.86)!important;border:none!important;border-radius:.8rem!important;color:#7a7e7f!important;box-shadow:0 8px 20px rgba(0,0,0,.06)!important;padding:.15rem .4rem!important;margin:0 .8rem .8rem 0!important}
#explore-map-canvas .leaflet-control-attribution a{color:#7a7e7f!important}
#explore-map-canvas .leaflet-control-zoom{border:none!important;box-shadow:none!important;margin-top:1rem!important;margin-right:1rem!important}
#explore-map-canvas .leaflet-control-zoom a{width:3rem;height:3rem;border:none!important;border-radius:1rem!important;background:rgba(255,255,255,.95)!important;color:#595c5d!important;display:flex!important;align-items:center;justify-content:center;font-size:1.35rem!important;box-shadow:0 12px 28px rgba(14,18,19,.08)!important;transition:transform .18s,background .18s,color .18s!important}
#explore-map-canvas .leaflet-control-zoom a + a{margin-top:.45rem}
#explore-map-canvas .leaflet-control-zoom a:hover{background:#fff!important;color:#b7004d!important;transform:translateY(-1px)}
#explore-map-canvas .leaflet-top .leaflet-control{margin-top:0}
#explore-map-canvas .leaflet-popup-content-wrapper{padding:0!important;border-radius:1.1rem!important;box-shadow:0 22px 48px rgba(13,17,18,.14)!important;overflow:hidden}
#explore-map-canvas .leaflet-popup-content{margin:0!important;width:260px!important}
#explore-map-canvas .leaflet-popup-tip{background:#fff!important}
.explore-map-pin{position:relative;width:24px;height:24px}
.explore-map-pin span{display:block;width:24px;height:24px;border-radius:999px;background:var(--pin);box-shadow:0 10px 20px color-mix(in srgb, var(--pin) 38%, transparent);border:4px solid rgba(255,255,255,.92);position:relative}
.explore-map-pin span::after{content:"";position:absolute;inset:6px;border-radius:999px;background:#fff;opacity:.18}
.explore-popup-card{background:#fff}
.explore-popup-card img{height:145px;width:100%;object-fit:cover}
.explore-popup-body{padding:1rem}
.explore-popup-tag{display:inline-flex;padding:.25rem .55rem;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.65rem}
.explore-popup-body h4{font-size:1.05rem;line-height:1.18;margin-bottom:.45rem;color:#202225}
.explore-popup-body p{font-size:.84rem;line-height:1.62;color:#707475;margin-bottom:.8rem}
.explore-popup-row{font-size:.78rem;color:#65696a;display:flex;align-items:center;gap:.45rem;margin-top:.3rem}

.explore-places-wrap{background:#eff1f2}
.explore-places-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:3rem}
.explore-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.explore-filters button{border:none;background:#fff;color:#6d7071;font-weight:700;font-size:.92rem;padding:.85rem 1.35rem;border-radius:999px;cursor:pointer;transition:transform .18s,background .18s,color .18s,box-shadow .18s}
.explore-filters button.is-active{background:var(--filter-color);color:#fff;box-shadow:0 12px 28px color-mix(in srgb, var(--filter-color) 28%, transparent)}
.explore-filters button:hover{transform:translateY(-1px)}

.explore-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.explore-card{display:flex;flex-direction:column;min-width:0;background:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:0 14px 30px rgba(18,22,23,.05);border:1px solid rgba(171,173,174,.14);transition:transform .22s,box-shadow .22s}
.explore-card[hidden],.explore-card.is-filtered-out,.explore-card.is-collapsed{display:none!important}
.explore-card:hover{transform:translateY(-5px);box-shadow:0 22px 42px rgba(18,22,23,.08)}
.explore-card-media{position:relative;height:260px;overflow:hidden}
.explore-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.explore-card:hover .explore-card-media img{transform:scale(1.04)}
.explore-card-badge{position:absolute;top:1rem;left:1rem;display:inline-flex;align-items:center;padding:.32rem .7rem;border-radius:999px;background:var(--badge-soft);color:var(--badge-bg);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.explore-card-body{padding:1.5rem}
.explore-card-body h3{font-size:1.9rem;line-height:1.12;letter-spacing:-.03em;margin-bottom:.55rem;color:#202225}
.explore-card-body p{font-size:.94rem;line-height:1.7;color:#707475;margin-bottom:1.1rem;min-height:4.8rem}
.explore-card-meta{display:grid;gap:.5rem;margin-bottom:1.25rem}
.explore-card-meta div{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:#666a6b}
.explore-card-btn{width:100%;padding:.95rem 1rem;border-radius:999px;border:2px solid rgba(183,0,77,.18);background:#fff;color:#b7004d;font-weight:800;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.explore-card-btn:hover{background:#b7004d;color:#fff;border-color:#b7004d}
.explore-more-wrap{display:flex;justify-content:center;margin-top:2.75rem}
.explore-more-wrap[hidden]{display:none!important}
.explore-more-btn{border:none;background:transparent;color:#b7004d;font-weight:800;font-size:.95rem;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.explore-more-btn span{transition:transform .18s}
.explore-more-btn:hover span{transform:translateX(4px)}

.site-footer-explore{background:#eff1f2;border-top:1px solid rgba(171,173,174,.12);padding:4rem 0 1.8rem;color:#595c5d}
.explore-footer-grid{display:grid;grid-template-columns:1.2fr .85fr .85fr .95fr;gap:2rem;padding-bottom:2.75rem}
.explore-footer-brand{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.04em;color:#b7004d;margin-bottom:1rem}
.site-footer-explore p,.site-footer-explore li,.site-footer-explore a{font-size:.93rem;line-height:1.85;color:#6b6f70}
.site-footer-explore h4{font-size:1rem;font-weight:800;color:#202225;margin-bottom:1rem}
.site-footer-explore ul{list-style:none}
.explore-footer-contact li{display:flex;align-items:flex-start;gap:.55rem}
.explore-footer-contact span{color:#b7004d;font-weight:800}
.explore-footer-bottom{padding-top:1.4rem;border-top:1px solid rgba(171,173,174,.18);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.explore-footer-bottom p{font-size:.76rem;color:#8a8e8f}
.explore-footer-icons{display:flex;align-items:center;gap:.7rem}
.explore-footer-icons a{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#4f5354;box-shadow:0 10px 18px rgba(15,18,19,.05)}
.explore-footer-icons a:hover{color:#b7004d}

@media (max-width: 1080px){
  .explore-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .explore-page-hero{min-height:32rem}
  .explore-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .explore-page-hero{min-height:32rem}
  .explore-section-head{flex-direction:column;align-items:flex-start}
  .explore-map-shell{height:clamp(460px,calc(100vh - 165px),860px);height:clamp(460px,calc(100dvh - 165px),860px)}
}
@media (max-width: 720px){
  .explore-page-hero{min-height:30rem;padding:5rem 0 4.4rem}
  .explore-page-hero h1{font-size:3.35rem!important;max-width:9ch!important}
  .explore-page-hero p{font-size:.98rem;max-width:24rem}
  .explore-map-shell{height:clamp(380px,calc(100vh - 140px),760px);height:clamp(380px,calc(100dvh - 140px),760px)}
  .explore-cards{grid-template-columns:1fr}
  .explore-card-body h3{font-size:1.55rem}
  .explore-layer-switch{width:100%;justify-content:space-between}
  .explore-layer-switch button{flex:1}
  .explore-footer-grid{grid-template-columns:1fr}
  .explore-footer-bottom{flex-direction:column;align-items:flex-start}
}


@media(max-width:1024px){
  .explore-page-hero{min-height:32rem;padding:5.2rem 0 4.8rem}
}
@media(max-width:640px){
  .explore-page-hero{min-height:29rem;padding:4.6rem 0 4.1rem}
  .explore-page-hero h1{font-size:clamp(2.8rem,12vw,3.45rem)!important;max-width:9ch!important}
  .explore-page-hero p{max-width:24rem;font-size:.98rem}
}

/* === 2026-03-22: subpage hero unification + softer explore map === */
.history-hero{
  position:relative;
  overflow:hidden;
  padding:5rem 0 4.25rem;
  background:linear-gradient(180deg,var(--surface-low),var(--surface));
}
.history-hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(247,248,249,.95) 0%,rgba(247,248,249,.86) 34%,rgba(247,248,249,.58) 62%,rgba(247,248,249,.20) 100%),
    url('../img/history-city-bg.jpg') center/cover no-repeat;
  opacity:.82;
  filter:saturate(.68) contrast(.94);
}
.history-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 15%,rgba(137,48,176,.10),transparent 20%),
    radial-gradient(circle at 12% 35%,rgba(183,0,77,.08),transparent 24%);
  pointer-events:none;
}
.history-hero::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:136px;
  background:linear-gradient(180deg,rgba(245,246,247,0),#f5f6f7 82%);
}
.history-hero-inner{
  position:relative;
  z-index:1;
  text-align:left;
  max-width:1100px;
}
.history-hero-tag{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.38rem .78rem;
  border-radius:999px;
  background:rgba(137,48,176,.16);
  color:var(--secondary);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.history-hero h1{
  font-size:clamp(2.4rem,7vw,5.2rem);
  line-height:.95;
  letter-spacing:-.055em;
  color:var(--text);
  max-width:12ch;
  margin:0 0 1rem;
}
.history-hero h1 span{display:block;color:var(--primary)}
.history-hero p{
  max-width:56ch;
  margin:0;
  color:var(--text-soft);
  font-size:1.1rem;
  line-height:1.75;
}

.explore-page-hero{
  position:relative;
  display:block;
  min-height:auto;
  padding:5rem 0 4.25rem;
  overflow:hidden;
  background:linear-gradient(180deg,var(--surface-low),var(--surface));
}
.explore-page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 15%,rgba(137,48,176,.10),transparent 20%),
    radial-gradient(circle at 12% 35%,rgba(183,0,77,.08),transparent 24%);
  pointer-events:none;
  z-index:0;
}
.explore-page-hero::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:136px;
  background:linear-gradient(180deg,rgba(245,246,247,0),#f5f6f7 82%);
  z-index:1;
}
.explore-page-hero .container{
  position:relative;
  z-index:2;
  max-width:1100px;
}
.explore-page-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.34;
  filter:saturate(.62) contrast(.92);
}
.explore-page-hero .page-header-tag{
  background:rgba(137,48,176,.16);
  color:var(--secondary);
  opacity:1;
  margin-bottom:1rem;
}
.explore-page-hero h1{
  font-size:clamp(2.4rem,7vw,5.2rem)!important;
  line-height:.95!important;
  color:var(--text)!important;
  max-width:11ch!important;
  margin:0 0 1rem!important;
}
.explore-page-hero h1 span{color:var(--primary)}
.explore-page-hero p{
  font-size:1.1rem;
  color:var(--text-soft);
  max-width:40rem;
  margin:0 0 2rem;
}
.explore-page-hero-btn{box-shadow:none}

#explore-map-canvas .leaflet-tile-pane{
  filter:saturate(.82) brightness(.97) contrast(.94);
}

@media (max-width: 1024px){
  .history-hero,
  .explore-page-hero{padding:4.6rem 0 3.9rem}
}

@media (max-width: 768px){
  .history-hero,
  .explore-page-hero{padding:4.25rem 0 3.55rem}
  .history-hero h1,
  .explore-page-hero h1{font-size:clamp(2.7rem,10vw,3.85rem)!important;max-width:9.2ch!important}
  .history-hero p,
  .explore-page-hero p{font-size:1rem;max-width:24rem}
}

#explore-map-canvas .leaflet-popup-content-wrapper{padding:0!important;border-radius:1.55rem!important;box-shadow:0 20px 48px rgba(13,17,18,.16)!important;overflow:visible!important;background:transparent!important}
#explore-map-canvas .leaflet-popup-content{margin:0!important;width:332px!important}
#explore-map-canvas .leaflet-popup-tip-container{display:none!important}
#explore-map-canvas .leaflet-popup-close-button{display:none!important}
.explore-map-pin{position:relative;width:24px;height:24px}
.explore-map-pin span{display:block;width:24px;height:24px;border-radius:999px;background:var(--pin);box-shadow:0 10px 22px color-mix(in srgb, var(--pin) 40%, transparent);border:4px solid rgba(255,255,255,.94);position:relative}
.explore-map-pin span::after{content:"";position:absolute;inset:6px;border-radius:999px;background:#fff;opacity:.18}
.explore-popup-card-v2{background:#fff;border-radius:1.55rem;overflow:hidden;box-shadow:0 20px 48px rgba(13,17,18,.14)}
.explore-popup-media{position:relative;height:188px;background:#dfe5eb}
.explore-popup-media img{width:100%;height:100%;object-fit:cover;display:block}
.explore-popup-badge-v2{position:absolute;left:.95rem;bottom:.85rem;display:inline-flex;align-items:center;min-height:1.7rem;padding:.32rem .72rem;border-radius:999px;background:linear-gradient(135deg,#8930b0,#b7004d);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:none;box-shadow:0 10px 18px rgba(137,48,176,.2)}
.explore-popup-icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:2.65rem;height:2.65rem;border:none;border-radius:999px;box-shadow:0 12px 22px rgba(16,18,19,.1);cursor:default}
.explore-popup-icon svg{width:1.08rem;height:1.08rem;display:block}
.explore-popup-icon-heart{top:.85rem;right:.85rem;background:#fff;color:#b7004d}
.explore-popup-icon-star{top:.85rem;right:.85rem;background:linear-gradient(135deg,#d20064,#b7004d);color:#fff}
.explore-popup-body-v2{padding:1.35rem 1.2rem 1.1rem}
.explore-popup-eyebrow{font-size:.68rem;line-height:1.1;color:#c03a65;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.72rem}
.explore-popup-body-v2 h4{font-size:1.46rem;line-height:1.1;letter-spacing:-.03em;color:#202225;margin:0 0 .7rem;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800}
.explore-popup-body-v2 p{font-size:.88rem;line-height:1.58;color:#666b6d;margin:0 0 1rem}
.explore-popup-meta-v2{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin:0 0 1.05rem;color:#7a7e7f}
.explore-popup-meta-v2 span{display:inline-flex;align-items:center;gap:.42rem;font-size:.82rem;font-weight:600}
.explore-popup-meta-v2 svg{width:.92rem;height:.92rem;flex:none}
.explore-popup-cta{width:100%;min-height:3.15rem;border:none;border-radius:999px;background:linear-gradient(135deg,#d20064,#b7004d);color:#fff;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:.6rem;box-shadow:0 14px 24px rgba(183,0,77,.18);cursor:pointer}
.explore-popup-cta span{font-size:1.24rem;line-height:1}
.explore-popup-actions{display:grid;gap:.55rem}
.explore-popup-nav-btn{width:100%;min-height:2.8rem;border:1.5px solid rgba(183,0,77,.22);border-radius:999px;background:#fff;color:#8e1b67;font-size:.92rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;box-shadow:0 10px 18px rgba(27,31,32,.06);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease}
.explore-popup-nav-btn:hover{transform:translateY(-1px);box-shadow:0 14px 24px rgba(27,31,32,.08);border-color:rgba(183,0,77,.35);color:#b7004d}
.explore-popup-nav-btn span{font-size:1rem;line-height:1}
.explore-popup-nav-btn-primary{min-height:3.15rem;background:var(--grad);color:#fff;border:none;box-shadow:0 16px 28px rgba(107,33,168,.22)}
.explore-popup-nav-btn-primary:hover{color:#fff;border:none;box-shadow:0 20px 34px rgba(107,33,168,.28);transform:translateY(-1px);filter:saturate(1.04)}


@media (max-width: 767px){
  #explore-map-canvas .leaflet-popup-content{width:292px!important}
  .explore-popup-media{height:168px}
  .explore-popup-body-v2{padding:1.2rem 1rem 1rem}
  .explore-popup-body-v2 h4{font-size:1.28rem}
  .explore-popup-body-v2 p{font-size:.84rem}
}




/* === 2026-03-22: explore detail modal from cards === */
.explore-story-modal{position:fixed;inset:0;z-index:1800;display:none;align-items:center;justify-content:center;padding:1.25rem;background:rgba(7,9,12,.56);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.explore-story-modal.is-open{display:flex}
.explore-story-card{
  position:relative;
  width:min(100%,34rem);
  max-height:min(92vh,54rem);
  border-radius:2rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 32px 64px rgba(0,0,0,.28);
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.22) transparent;
}
.explore-story-scroll{
  max-height:min(92vh,54rem);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.explore-story-scroll::-webkit-scrollbar{
  display:none;
}
/* Scrollbar na poziomie karty — widoczny jako nakładka bez tła */
.explore-story-card::-webkit-scrollbar{
  width:5px;
}
.explore-story-card::-webkit-scrollbar-track{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}
.explore-story-card::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.22);
  border-radius:999px;
  border:none !important;
  box-shadow:none !important;
}
.explore-story-card::-webkit-scrollbar-thumb:hover{
  background:rgba(0,0,0,.38);
}
.explore-story-card::-webkit-scrollbar-corner{
  background:transparent;
}
.explore-story-hero{position:relative;height:30rem;background:#10231d;overflow:hidden}
.explore-story-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(7,9,12,.92) 0%,rgba(7,9,12,.62) 32%,rgba(7,9,12,.16) 68%,rgba(7,9,12,.04) 100%);z-index:1;pointer-events:none}
.explore-story-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.88)}
.explore-story-overlay{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 1.7rem 1.7rem;display:flex;flex-direction:column;align-items:flex-start}
.explore-story-close{position:absolute;top:1.35rem;right:1.35rem;z-index:6;width:3.1rem;height:3.1rem;border:none;border-radius:999px;background:rgba(0,0,0,.20);color:#fff;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:transform .18s ease,background .18s ease}
.explore-story-close:hover{background:rgba(0,0,0,.34);transform:scale(1.03)}
.explore-story-bottom{position:relative;z-index:4;padding:1.45rem 1.7rem 1.65rem;background:#fff;border-top:1px solid rgba(17,24,39,.08)}
.explore-story-chip{display:inline-flex;align-items:center;align-self:flex-start;min-height:1.8rem;padding:.35rem .86rem;border-radius:.65rem;background:linear-gradient(135deg,#d20064,#b7004d);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 22px rgba(183,0,77,.26);margin-bottom:1rem}
.explore-story-overlay h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:3.05rem;line-height:.98;letter-spacing:-.045em;margin:0 0 1rem;font-weight:800;text-wrap:balance;color:#fff;max-width:28rem;text-shadow:0 14px 26px rgba(0,0,0,.34)}
.explore-story-overlay p{font-size:1.08rem;line-height:1.44;margin:0;color:rgba(255,255,255,.92);font-weight:500;max-width:27rem;text-shadow:0 10px 22px rgba(0,0,0,.26)}
.explore-story-place-copy{display:flex;flex-direction:column;gap:.42rem;color:#31353a;padding-bottom:1rem}
.explore-story-place-copy strong{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7a8087}
.explore-story-place-copy p{margin:.65rem 0 0;font-size:1rem;line-height:1.7;color:#363b41}
.explore-story-place-copy p:first-of-type{margin-top:0}
.explore-story-place-copy b,.explore-story-place-copy strong:not(:first-child){font-size:inherit;font-weight:700;letter-spacing:0;text-transform:none;color:inherit}
.explore-story-place-copy h2,.explore-story-place-copy h3,.explore-story-place-copy h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1.2;color:#1a1d20;margin:.9rem 0 .35rem}
.explore-story-place-copy h2{font-size:1.25rem}
.explore-story-place-copy h3{font-size:1.1rem}
.explore-story-place-copy h4{font-size:.97rem}
.explore-story-place-copy ul,.explore-story-place-copy ol{padding-left:1.4rem;margin:.5rem 0;display:flex;flex-direction:column;gap:.3rem}
.explore-story-place-copy ul{list-style:disc}
.explore-story-place-copy ol{list-style:decimal}
.explore-story-place-copy li{font-size:1rem;line-height:1.6;color:#363b41}
.explore-story-place-copy blockquote{border-left:3px solid var(--primary);background:#fff5f9;padding:.7rem 1rem;border-radius:0 .7rem .7rem 0;margin:.6rem 0;font-style:italic;color:#555}
.explore-story-place-copy hr{border:none;border-top:1px solid #e5e7eb;margin:.8rem 0}
.explore-story-place-copy a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
/* Zajawka sformatowana (HTML) na tle hero-zdjęcia */
#explore-story-desc{font-size:.97rem;line-height:1.65;color:rgba(255,255,255,.92)}
#explore-story-desc strong,#explore-story-desc b{font-weight:700;color:#fff}
#explore-story-desc ul,#explore-story-desc ol{padding-left:1.2rem;margin:.3rem 0}
#explore-story-desc li{margin:.15rem 0}
#explore-story-desc p{margin:.4rem 0 0}
.explore-story-actions{display:flex;flex-wrap:wrap;gap:.65rem;padding-top:.2rem}
.explore-story-btn{min-height:2.95rem;padding:.76rem 1.02rem;border-radius:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.9rem;font-weight:800;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;flex:0 0 auto}
.explore-story-btn .material-symbols-outlined{font-size:1.05rem;line-height:1}
.explore-story-btn-primary{background:linear-gradient(135deg,#e8186d,#6b21a8);color:#fff;box-shadow:0 12px 24px rgba(107,33,168,.18)}
.explore-story-btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(107,33,168,.22);color:#fff}
.explore-story-btn-secondary{background:#fff;color:#262a2f;border:1px solid rgba(232,24,109,.18);box-shadow:0 8px 18px rgba(15,23,42,.06)}
.explore-story-btn-secondary:hover{transform:translateY(-1px);background:#fff3f8;color:#1f2328;border-color:rgba(232,24,109,.28)}
@media (max-width: 640px){
  .explore-story-modal{padding:.75rem}
  .explore-story-card{width:100%;max-height:94vh;border-radius:1.45rem}
  .explore-story-scroll{max-height:94vh}
  .explore-story-hero{height:25rem}
  .explore-story-overlay{padding:0 1.1rem 1.2rem}
  .explore-story-close{top:1rem;right:1rem;width:2.8rem;height:2.8rem}
  .explore-story-bottom{padding:1.05rem 1.1rem 1.15rem}
  .explore-story-chip{font-size:.62rem;letter-spacing:.11em;margin-bottom:.82rem}
  .explore-story-overlay h3{font-size:2.08rem}
  .explore-story-overlay p{font-size:.97rem}
  .explore-story-place-copy p{font-size:.94rem}
  .explore-story-actions{display:grid;grid-template-columns:1fr;gap:.65rem}
  .explore-story-btn{min-height:3rem;font-size:.9rem;width:100%}
}

/* === 2026-03-22: explore popup CTA polish labels === */
.explore-popup-nav-btn-primary,
.explore-popup-nav-btn-primary:link,
.explore-popup-nav-btn-primary:visited,
.explore-popup-nav-btn-primary:hover,
.explore-popup-nav-btn-primary:active,
.explore-popup-nav-btn-primary:focus{
  color:#fff !important;
}


/* === 2026-03-22: category palette unification + explore spacing === */
.category-chip{
  background:var(--cat-soft, rgba(137,48,176,.16)) !important;
  color:var(--cat-color, var(--secondary)) !important;
}
.category-chip-solid{
  background:var(--cat-solid, var(--cat-color, var(--primary))) !important;
  color:#fff !important;
}
.story-list-tag.category-chip,
.page-header-tag.article-kicker.category-chip,
.tag.category-chip,
.hero-tag.category-chip{
  box-shadow:none;
}
.filter-btn.category-filter-btn{
  background:var(--cat-soft, #fff);
  color:var(--cat-color, var(--text2));
  border-color:color-mix(in srgb, var(--cat-color, var(--border)) 18%, #ffffff);
}
.filter-btn.category-filter-btn:hover{
  color:var(--cat-color, var(--pink));
  border-color:var(--cat-color, var(--pink));
  background:color-mix(in srgb, var(--cat-soft, #fff) 78%, #ffffff);
}
.filter-btn.category-filter-btn.active{
  background:var(--cat-color, var(--primary)) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 26px color-mix(in srgb, var(--cat-color, var(--primary)) 24%, transparent) !important;
}
/* Pigułka "Z lektorem" na Aktualności — wirtualny filtr (nie prawdziwa
   kategoria), więc celowo ma stały, rozpoznawalny "audio" wygląd zamiast
   koloru wyliczanego z nazwy kategorii. */
.filter-btn.category-filter-btn.audio-filter-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:rgba(90,34,232,.08);
  color:#5a22e8;
  border-color:rgba(90,34,232,.18);
}
.filter-btn.category-filter-btn.audio-filter-btn .material-symbols-outlined{font-size:16px}
.filter-btn.category-filter-btn.audio-filter-btn:hover{
  background:rgba(90,34,232,.14);
  color:#5a22e8;
  border-color:rgba(90,34,232,.3);
}
.filter-btn.category-filter-btn.audio-filter-btn.active{
  background:linear-gradient(135deg,#5a22e8,#e90073) !important;
  color:#fff !important;
  box-shadow:0 14px 26px rgba(90,34,232,.28) !important;
}
.explore-places-head h2{
  margin-bottom:1.15rem;
}
.explore-filters{
  margin-top:.15rem;
}

/* ===== History / Chronicles page v3 ===== */
.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased}
body.history-page{background:#f5f6f7;color:#2c2f30}
body.history-page #site-shell{background:#f5f6f7}
body.history-page #main-nav.chronicles-nav{position:sticky;top:0;background:rgba(255,255,255,.84)!important;border-bottom:1px solid rgba(117,119,120,.14)!important;box-shadow:none!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.history-page #main-nav.chronicles-nav::before{display:none}
body.history-page .chronicles-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:5rem;max-width:1536px;padding:0 1.5rem}
body.history-page .chronicles-brand{flex:0 0 auto;font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.06em;color:#b7004d;line-height:1}
body.history-page .chronicles-brand:hover{color:#9f0444}
body.history-page .chronicles-nav-links{display:flex!important;align-items:center;justify-content:center;gap:2rem;flex:1 1 auto;margin:0;padding:0;list-style:none}
body.history-page .chronicles-nav-links a{position:relative;padding:0 0 .2rem!important;background:none!important;color:#595c5d!important;font-size:1rem!important;font-weight:600!important;letter-spacing:-.02em;border-radius:0!important}
body.history-page .chronicles-nav-links a:hover{color:#b7004d!important;transform:none!important}
body.history-page .chronicles-nav-links a.active{color:#b7004d!important;font-weight:700!important}
body.history-page .chronicles-nav-links a.active::after{content:'';position:absolute;left:50%;bottom:-.5rem;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#b7004d;animation:navActivePulseDark 1.8s ease-in-out infinite}
body.history-page .chronicles-nav-actions{display:flex;align-items:center;gap:.65rem;flex:0 0 auto}
body.history-page .chronicles-icon-btn{width:2.5rem;height:2.5rem;border:none;border-radius:999px;background:transparent;color:#2c2f30;display:grid;place-items:center;transition:background .18s,color .18s}
body.history-page .chronicles-icon-btn:hover{background:#eceef0;color:#b7004d}
body.history-page .chronicles-nav .nav-mobile-toggle{display:none;color:#2c2f30}
body.history-page .chronicles-page-main{background:#f5f6f7}
body.history-page .chronicles-hero{position:relative;height:512px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eff1f2}
body.history-page .chronicles-hero-bg{position:absolute;inset:0}
body.history-page .chronicles-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.4;filter:grayscale(1)}
body.history-page .chronicles-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,#f5f6f7 0%,rgba(245,246,247,.18) 48%,rgba(245,246,247,.08) 100%)}
body.history-page .chronicles-hero-fade{position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,rgba(245,246,247,0),#f5f6f7 82%)}
body.history-page .chronicles-hero-content{position:relative;z-index:1;text-align:center;max-width:64rem;padding:0 1.5rem}
body.history-page .chronicles-hero-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .9rem;border-radius:999px;background:rgba(183,0,77,.1);color:#b7004d;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;margin-bottom:1.5rem}
body.history-page .chronicles-hero-pill .material-symbols-outlined{font-size:16px}
body.history-page .chronicles-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(3rem,6vw,5.2rem);font-weight:800;letter-spacing:-.065em;line-height:.95;color:#2c2f30;margin:0 0 1rem}
body.history-page .chronicles-hero p{max-width:42rem;margin:0 auto;font-size:1.08rem;line-height:1.75;color:#595c5d}
body.history-page .chronicles-timeline-wrap{position:relative;padding:6rem 0 6.5rem;background:#f5f6f7}
body.history-page .chronicles-timeline{position:relative;max-width:1152px}
body.history-page .chronicles-line{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:0;width:4px;background:#b7004d;opacity:.22;display:block}
body.history-page .chronicles-entry{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6rem;align-items:start;padding:0 0 6rem}
body.history-page .chronicles-entry:last-child{padding-bottom:0}
body.history-page .chronicles-entry-reverse .chronicles-col-copy{order:2}
body.history-page .chronicles-entry-reverse .chronicles-col-media{order:1}
body.history-page .chronicles-col{min-width:0}
body.history-page .chronicles-col-copy{padding-top:1rem}
body.history-page .chronicles-col-copy h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.1rem,4vw,4rem);font-weight:800;letter-spacing:-.065em;line-height:.94;color:#2c2f30;margin:0 0 1.5rem;max-width:28rem}
body.history-page .chronicles-prose{display:grid;gap:.9rem;max-width:29rem}
body.history-page .chronicles-prose p{font-size:1rem;line-height:1.85;color:#595c5d;margin:0}
body.history-page .chronicles-year-badge{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .9rem;border-radius:.55rem;background:#e6e8ea;color:#b7004d;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.05em;margin-bottom:1rem}
body.history-page .chronicles-year-badge.secondary{color:#8930b0}
body.history-page .chronicles-note{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.3rem;margin-top:1.7rem;border-radius:.95rem;border-left:4px solid #b7004d;background:rgba(183,0,77,.06);max-width:31rem}
body.history-page .chronicles-note.secondary{background:rgba(137,48,176,.06);border-left-color:#8930b0}
body.history-page .chronicles-note-icon{font-size:1.15rem;color:#b7004d;margin-top:.1rem}
body.history-page .chronicles-note.secondary .chronicles-note-icon{color:#8930b0}
body.history-page .chronicles-note h3{font-size:.98rem;font-weight:800;color:#2c2f30;margin:0 0 .25rem}
body.history-page .chronicles-note p{font-size:.9rem;line-height:1.7;color:#595c5d;margin:0}
body.history-page .chronicles-dark-btn{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;padding:.9rem 1.35rem;border-radius:999px;background:#2c2f30;color:#f5f6f7;font-size:.92rem;font-weight:800;box-shadow:0 14px 28px rgba(12,15,16,.14);transition:transform .18s,background .18s}
body.history-page .chronicles-dark-btn .material-symbols-outlined{font-size:18px}
body.history-page .chronicles-dark-btn:hover{background:#0c0f10;transform:translateY(-2px)}
body.history-page .chronicles-col-media{display:grid;gap:1.3rem}
body.history-page .chronicles-media-card{background:#fff;border-radius:1.25rem;overflow:hidden;border:8px solid #fff;box-shadow:0 18px 40px rgba(12,15,16,.12)}
body.history-page .chronicles-media-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
body.history-page .chronicles-media-card.is-wide img{aspect-ratio:16/9}
body.history-page .chronicles-media-card figcaption{padding:.85rem 1rem;background:#fff;color:#757778;font-size:.75rem;line-height:1.35;text-align:center;font-style:italic}
body.history-page .chronicles-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:23rem}
body.history-page .chronicles-stat-box{background:#fff;border-radius:.95rem;padding:1rem;border:1px solid rgba(171,173,174,.18);text-align:center;box-shadow:0 8px 18px rgba(12,15,16,.04)}
body.history-page .chronicles-stat-box strong{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:-.04em;color:#b7004d}
body.history-page .chronicles-stat-box span{display:block;margin-top:.3rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#757778}
body.history-page .chronicles-marker{position:absolute;left:50%;top:1rem;transform:translate(-50%,0);width:24px;height:24px;border-radius:999px;background:#fff;border:4px solid #b7004d;z-index:2}
body.history-page .chronicles-resources-section{padding:6rem 0;background:#eff1f2;border-top:1px solid rgba(171,173,174,.14);border-bottom:1px solid rgba(171,173,174,.14)}
body.history-page .chronicles-section-head{text-align:center;margin-bottom:3.25rem}
body.history-page .chronicles-section-head span{display:block;margin-bottom:1rem;color:#b7004d;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em}
body.history-page .chronicles-section-head h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2rem,4vw,3.25rem);font-weight:800;letter-spacing:-.055em;color:#2c2f30;margin:0}
body.history-page .chronicles-resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
body.history-page .chronicles-resource-card{background:#fff;border:1px solid rgba(171,173,174,.2);border-radius:1.25rem;padding:2rem;box-shadow:0 8px 20px rgba(12,15,16,.04);transition:transform .18s,box-shadow .18s}
body.history-page .chronicles-resource-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(12,15,16,.08)}
body.history-page .chronicles-resource-icon{width:3rem;height:3rem;border-radius:.95rem;display:grid;place-items:center;margin-bottom:1.25rem}
body.history-page .chronicles-resource-icon .material-symbols-outlined{font-size:20px}
body.history-page .chronicles-resource-icon.tone-primary{background:rgba(183,0,77,.1);color:#b7004d}
body.history-page .chronicles-resource-icon.tone-secondary{background:rgba(137,48,176,.1);color:#8930b0}
body.history-page .chronicles-resource-icon.tone-tertiary{background:rgba(167,41,90,.1);color:#a7295a}
body.history-page .chronicles-resource-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.35rem;font-weight:800;letter-spacing:-.04em;color:#2c2f30;margin:0 0 .7rem}
body.history-page .chronicles-resource-card p{font-size:.96rem;line-height:1.75;color:#595c5d;margin:0}
body.history-page .chronicles-cta-section{padding:6rem 0 6.5rem;background:#f5f6f7}
body.history-page .chronicles-cta-card{position:relative;overflow:hidden;border-radius:2.5rem;background:#b7004d;padding:4rem 4.5rem;color:#fff}
body.history-page .chronicles-cta-pattern{position:absolute;inset:0;opacity:.14;background-image:radial-gradient(circle at 2px 2px,#fff 1px,transparent 0);background-size:40px 40px}
body.history-page .chronicles-cta-copy{position:relative;z-index:1;max-width:44rem}
body.history-page .chronicles-cta-copy h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(2.35rem,4.5vw,4rem);font-weight:800;letter-spacing:-.06em;line-height:.95;color:#fff;margin:0 0 1rem}
body.history-page .chronicles-cta-copy p{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.84);margin:0 0 2rem;max-width:38rem}
body.history-page .chronicles-cta-actions{display:flex;flex-wrap:wrap;gap:1rem}
body.history-page .chronicles-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:1rem 1.45rem;border-radius:999px;font-size:.92rem;font-weight:800;transition:transform .18s,background .18s,border-color .18s}
body.history-page .chronicles-cta-btn:hover{transform:translateY(-2px)}
body.history-page .chronicles-cta-btn.is-light{background:#fff;color:#b7004d}
body.history-page .chronicles-cta-btn.is-light:hover{background:#fff1f5}
body.history-page .chronicles-cta-btn.is-ghost{border:2px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
body.history-page .chronicles-cta-btn.is-ghost:hover{background:rgba(255,255,255,.12)}
body.history-page .chronicles-footer{background:#fff;border-top:1px solid rgba(171,173,174,.18)}
body.history-page .chronicles-footer-top{max-width:1536px;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:3rem 1.5rem}
body.history-page .chronicles-footer-brand{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.55rem;font-weight:800;letter-spacing:-.05em;color:#b7004d;margin-bottom:.55rem}
body.history-page .chronicles-footer p{font-size:.83rem;line-height:1.7;color:#757778;margin:0}
body.history-page .chronicles-footer-links{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
body.history-page .chronicles-footer-links a{font-size:.84rem;font-weight:600;color:#595c5d}
body.history-page .chronicles-footer-links a:hover{color:#b7004d}
body.history-page .chronicles-footer-socials{display:flex;align-items:center;gap:.75rem}
body.history-page .chronicles-footer-socials a{width:2.5rem;height:2.5rem;border-radius:999px;background:#eff1f2;color:#595c5d;display:grid;place-items:center;transition:background .18s,color .18s}
body.history-page .chronicles-footer-socials a:hover{background:rgba(183,0,77,.1);color:#b7004d}
body.history-page .chronicles-footer-socials .material-symbols-outlined{font-size:20px}
body.history-page .chronicles-footer-bottom{text-align:center;padding:1.15rem 1rem;border-top:1px solid rgba(171,173,174,.12);font-size:.63rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#757778}
@media (max-width: 1100px){
  body.history-page .chronicles-entry{grid-template-columns:1fr;gap:2rem;padding-bottom:4.25rem}
  body.history-page .chronicles-entry-reverse .chronicles-col-copy,body.history-page .chronicles-entry-reverse .chronicles-col-media{order:initial}
  body.history-page .chronicles-line,body.history-page .chronicles-marker{display:none}
  body.history-page .chronicles-col-copy h2{max-width:none}
  body.history-page .chronicles-prose{max-width:none}
}
@media (max-width: 900px){
  body.history-page .chronicles-nav-inner{padding:0 1rem}
  body.history-page .chronicles-nav-links{display:none!important}
  body.history-page .chronicles-nav .nav-mobile-toggle{display:grid;place-items:center}
  body.history-page .chronicles-resource-grid{grid-template-columns:1fr}
  body.history-page .chronicles-footer-top{flex-direction:column;align-items:flex-start}
}
@media (max-width: 768px){
  body.history-page .chronicles-hero{height:auto;min-height:430px;padding:5rem 0 4rem}
  body.history-page .chronicles-hero-content{padding:0 1.15rem}
  body.history-page .chronicles-hero h1{font-size:2.8rem}
  body.history-page .chronicles-hero p{font-size:.96rem}
  body.history-page .chronicles-timeline-wrap{padding:4.25rem 0 4.75rem}
  body.history-page .chronicles-col-copy{padding-top:0}
  body.history-page .chronicles-year-badge{font-size:1.2rem}
  body.history-page .chronicles-col-copy h2{font-size:2.35rem}
  body.history-page .chronicles-note{padding:1rem 1rem}
  body.history-page .chronicles-media-card{border-width:6px}
  body.history-page .chronicles-stats-grid{max-width:none}
  body.history-page .chronicles-resources-section{padding:4.5rem 0}
  body.history-page .chronicles-cta-section{padding:4.5rem 0}
  body.history-page .chronicles-cta-card{padding:2.4rem 1.6rem;border-radius:2rem}
  body.history-page .chronicles-cta-copy h2{font-size:2.4rem}
}

/* ── GLOBAL NAV SEARCH ───────────────────────────────────────────────────── */
.nav-search{position:relative;z-index:5;display:flex;align-items:center;justify-content:flex-end;min-width:3rem}
.nav-search-shell{display:flex;align-items:center;justify-content:flex-end;width:3rem;height:3rem;padding:0;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(18,4,34,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:width .42s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s,box-shadow .25s,transform .25s}
/* Rozwinięty panel jest teraz węższy (było clamp do 320px) i ma bardziej
   kryjące tło — przy 8 pozycjach menu kolumna po prawej ma mniej miejsca,
   więc szeroki, półprzezroczysty panel nachodził na „Kontakt”. */
.nav-search.open .nav-search-shell,.nav-search:focus-within .nav-search-shell{width:clamp(200px,20vw,250px);background:rgba(58,17,92,.72);border-color:rgba(255,255,255,.3);box-shadow:0 14px 30px rgba(15,4,28,.28)}
.nav-search-input{width:0;min-width:0;flex:1 1 auto;padding:0;border:none;outline:none;background:transparent;color:#fff;font-size:.94rem;font-weight:600;opacity:0;transform:translateX(16px);transition:opacity .22s ease,transform .34s ease,padding .34s ease;width .42s cubic-bezier(.22,1,.36,1)}
.nav-search-input::placeholder{color:rgba(255,255,255,.72)}
.nav-search.open .nav-search-input,.nav-search:focus-within .nav-search-input{width:100%;padding:0 0 0 1rem;opacity:1;transform:none}
.nav-search-submit{display:grid;place-items:center;flex:0 0 3rem;width:3rem;height:3rem;border:none;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.10));color:#fff;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}
.nav-search-submit:hover{background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.14));transform:scale(1.03)}
.nav-search-submit:active{transform:scale(.97)}
.nav-search.open .nav-search-submit,.nav-search:focus-within .nav-search-submit{background:linear-gradient(135deg,#ff2f87 0%,#7b2cff 100%)}
.nav-search-submit svg{display:block}

@media (max-width:980px){
  .nav-actions{gap:.4rem}
  .nav-search.open .nav-search-shell,.nav-search:focus-within .nav-search-shell{width:min(54vw,230px)}
}

@media (max-width:640px){
  .nav-search.open .nav-search-shell,.nav-search:focus-within .nav-search-shell{width:min(58vw,200px)}
  .nav-search-input{font-size:.88rem}
}



/* === 2026-03-22: explore map popup aligned to provided mockup === */
#explore-map-canvas .leaflet-popup-content-wrapper{
  padding:0 !important;
  border-radius:2rem !important;
  box-shadow:0 25px 60px rgba(44,47,48,.15) !important;
  overflow:visible !important;
  background:transparent !important;
}
#explore-map-canvas .leaflet-popup-content{
  margin:0 !important;
  width:380px !important;
}
#explore-map-canvas .leaflet-popup-tip-container{display:none !important}
#explore-map-canvas .leaflet-popup-close-button{display:none !important}
.explore-popup-card-v3{
  background:#fff;
  border-radius:2rem;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(44,47,48,.15);
  display:flex;
  flex-direction:column;
  transition:transform .45s ease;
}
.explore-popup-card-v3:hover{transform:scale(1.02)}
.explore-popup-media-v3{
  position:relative;
  height:256px;
  overflow:hidden;
  background:#dde3e7;
}
.explore-popup-media-v3 img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s ease;
}
.explore-popup-card-v3:hover .explore-popup-media-v3 img{transform:scale(1.08)}
.explore-popup-heart-v3{
  position:absolute;
  top:1rem;
  right:1rem;
  width:2.55rem;
  height:2.55rem;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#b7004d;
  display:grid;
  place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
}
.explore-popup-heart-v3 .material-symbols-outlined{font-size:1.35rem;font-variation-settings:'FILL' 1}
.explore-popup-badge-v3{
  position:absolute;
  left:1rem;
  bottom:1rem;
  display:inline-flex;
  align-items:center;
  min-height:1.65rem;
  padding:.36rem .9rem;
  border-radius:999px;
  background:#8930b0;
  color:#ffedff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 10px 18px rgba(0,0,0,.16);
}
.explore-popup-body-v3{
  position:relative;
  padding:1.5rem 1.55rem 1.55rem;
}
.explore-popup-star-v3{
  position:absolute;
  top:-1.55rem;
  right:1.75rem;
  width:3.1rem;
  height:3.1rem;
  border-radius:1rem;
  background:#b7004d;
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 14px 24px rgba(183,0,77,.26);
  transform:rotate(12deg);
}
.explore-popup-star-v3 .material-symbols-outlined{font-size:1.35rem;font-variation-settings:'FILL' 1}
.explore-popup-copy-v3{margin-bottom:.75rem}
.explore-popup-eyebrow-v3{
  display:block;
  margin-bottom:.32rem;
  color:#b7004d;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.explore-popup-body-v3 h4{
  margin:0;
  color:#2c2f30;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:2rem;
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:800;
}
.explore-popup-desc-v3{
  margin:0 0 1rem;
  color:#595c5d;
  font-size:1rem;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.explore-popup-meta-v3{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 1.25rem;
  color:#757778;
  padding:.25rem 0 .2rem;
}
.explore-popup-meta-v3 span{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  font-size:.82rem;
  font-weight:600;
}
.explore-popup-meta-v3 .material-symbols-outlined{font-size:1rem;line-height:1}
.explore-popup-actions-v3{padding-top:.85rem}
.explore-popup-cta-v3{
  width:100%;
  min-height:3.55rem;
  border:none;
  border-radius:999px;
  background:#b7004d;
  color:#ffeff0 !important;
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:-.01em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  text-decoration:none;
  box-shadow:0 14px 24px rgba(183,0,77,.18);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.explore-popup-cta-v3:hover{
  background:#a00043;
  color:#ffeff0 !important;
  transform:translateY(-1px);
  box-shadow:0 18px 28px rgba(183,0,77,.24);
}
.explore-popup-cta-v3 .material-symbols-outlined{
  font-size:1.3rem;
  transition:transform .22s ease;
}
.explore-popup-cta-v3:hover .material-symbols-outlined{transform:translateX(3px)}
@media (max-width: 767px){
  #explore-map-canvas .leaflet-popup-content{width:330px !important}
  .explore-popup-media-v3{height:220px}
  .explore-popup-body-v3{padding:1.35rem 1.1rem 1.2rem}
  .explore-popup-body-v3 h4{font-size:1.72rem}
  .explore-popup-desc-v3{font-size:.93rem}
  .explore-popup-cta-v3{min-height:3.25rem;font-size:1rem}
}


@media(max-width:980px){
  .community-voices-title{max-width:9ch}
  .community-voice-card{width:min(88vw,680px);height:460px}
  .community-voice-copy{max-width:82%;padding:1.6rem}
  .community-join-cta{padding:1rem 1.45rem;font-size:.82rem}
}
@media(max-width:700px){
  .community-voices-section{padding-top:1.6rem;padding-bottom:3rem}
  .community-voices-head{margin-bottom:1.4rem}
  .community-voices-title{font-size:clamp(2.3rem,12vw,3.8rem);max-width:8.5ch}
  .community-voice-card{width:92vw;height:360px}
  .community-voice-copy{max-width:100%;padding:1.25rem 1.2rem 1.35rem}
  .community-voice-copy h3{font-size:2rem}
  .community-voice-text{font-size:.92rem;max-width:32ch}
  .community-join-cta{position:relative;left:auto;top:auto;transform:none;display:flex;width:fit-content;margin:1rem auto 0}
  .community-join-cta:hover{transform:scale(1.02)}
}



.community-modal{position:fixed;inset:0;z-index:1200;display:none}
.community-modal.open{display:block}
.community-modal-backdrop{position:absolute;inset:0;background:rgba(9,10,19,.62);backdrop-filter:blur(8px)}
.community-modal-dialog{position:relative;width:min(760px,calc(100vw - 2rem));margin:4.5rem auto 2rem;background:#fff;border-radius:1.6rem;border:1px solid rgba(255,255,255,.16);box-shadow:0 32px 90px rgba(15,15,35,.28);max-height:calc(100vh - 6rem);overflow:hidden}
.community-modal-scroll{max-height:calc(100vh - 6rem);overflow-y:auto;padding:1.55rem 1.55rem 1.4rem;scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.32) transparent}
.community-modal-scroll::-webkit-scrollbar{width:10px}
.community-modal-scroll::-webkit-scrollbar-track{background:transparent;margin:1.2rem 0}
.community-modal-scroll::-webkit-scrollbar-thumb{background:rgba(120,120,120,.3);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.community-modal-scroll::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.5);background-clip:content-box}
.community-terms{margin:.4rem 0 .2rem;border:1px solid rgba(15,23,42,.1);border-radius:1rem;overflow:hidden;background:#fbfbfc}
.community-terms summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.85rem 1.05rem;font-size:.86rem;font-weight:700;color:var(--text)}
.community-terms summary::-webkit-details-marker{display:none}
.community-terms summary:hover{background:rgba(15,23,42,.025)}
.community-terms-summary-text{display:inline-flex;align-items:center;gap:.5rem}
.community-terms-summary-text .material-symbols-outlined{font-size:1.15rem;color:var(--primary)}
.community-terms-chevron{transition:transform .25s ease;color:var(--muted)}
.community-terms[open] .community-terms-chevron{transform:rotate(180deg)}
.community-terms-body{padding:.2rem 1.15rem 1rem;border-top:1px solid rgba(15,23,42,.07)}
.community-terms-intro{font-size:.85rem;color:var(--muted);margin:.75rem 0 .55rem}
.community-terms-list{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.community-terms-list li{font-size:.82rem;line-height:1.55;color:var(--text-soft,#4b5563)}
.community-terms-list li strong{color:var(--text)}
.community-modal-close{position:absolute;right:1rem;top:1rem;width:2.65rem;height:2.65rem;border:none;border-radius:50%;background:#f5f6f8;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.community-modal-head{padding-right:3rem;margin-bottom:1rem}
.community-modal-head h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.65rem,2.8vw,2.4rem);line-height:1.02;letter-spacing:-.045em;margin:.6rem 0;color:var(--text)}
.community-modal-head p{font-size:1rem;line-height:1.7;color:var(--muted);max-width:62ch}
.community-submit-form .form-label{display:block;margin-bottom:.45rem;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.community-submit-form .form-input,.community-submit-form .form-textarea{width:100%;border:1px solid rgba(15,23,42,.1);border-radius:1rem;padding:.95rem 1rem;font-size:1rem;font-family:'Manrope',sans-serif;background:#fff}
.community-submit-form .form-textarea{min-height:9rem;resize:vertical;line-height:1.65}
.community-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.community-upload-shell{position:relative}
.community-upload-shell input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.community-upload-preview{min-height:240px;border:1.5px dashed rgba(183,0,77,.22);background:linear-gradient(180deg,#fff 0%,#fff8fb 100%);border-radius:1.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1.2rem;color:var(--muted)}
.community-upload-preview .material-symbols-outlined{font-size:2.4rem;color:var(--primary)}
.community-upload-preview strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;color:var(--text)}
.community-upload-preview img{width:100%;height:100%;object-fit:cover;border-radius:1rem;min-height:240px}
.community-upload-preview.has-image{padding:.35rem;border-style:solid;background:#fff}
.community-form-note{margin-top:.35rem;padding:.9rem 1rem;border-radius:1rem;background:#fff7fb;border:1px solid rgba(183,0,77,.12);font-size:.92rem;line-height:1.65;color:var(--muted)}
.community-submit-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.35rem}
body.modal-open{overflow:hidden}
@media (max-width:760px){.community-form-grid{grid-template-columns:1fr}.community-modal-dialog{padding:1.1rem 1rem 1rem;margin:3.75rem auto 1rem;width:min(100vw - 1rem,760px)}.community-modal-head{padding-right:2.7rem}.community-submit-actions{flex-direction:column}}

/* Event poster carousel without background frames */
.event-poster-panel{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.event-poster-card,
.event-poster-section.is-single .event-poster-card{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.event-poster-card:hover{transform:none!important;background:transparent!important}
.event-poster-image,
.event-poster-section.is-single .event-poster-image{
  padding:0!important;
  border-radius:1.05rem!important;
  background:transparent!important;
  overflow:hidden!important;
}
.event-poster-image img,
.event-poster-section.is-single .event-poster-image img{
  border-radius:1.05rem!important;
  background:transparent!important;
  box-shadow:0 18px 38px rgba(16,5,30,.18)!important;
}
.event-poster-copy,
.event-poster-section.is-single .event-poster-copy{
  padding:1rem .1rem 0!important;
  background:transparent!important;
}
.event-poster-track,
.event-poster-section.is-single .event-poster-track{
  padding:.15rem .15rem .65rem!important;
}
@media(max-width:760px){
  .event-poster-panel{padding:0!important}
}

/* Home hero text clipping fix */
.hero-title-split{
  line-height:1.07!important;
  padding-bottom:.08em!important;
}
.hero-excerpt-split{
  line-height:1.72!important;
  min-height:calc(3 * 1.72em + .32em)!important;
  max-height:calc(3 * 1.72em + .42em)!important;
  padding-bottom:.32em!important;
}
@media(max-width:1024px){
  .hero-excerpt-split{
    min-height:calc(3 * 1.72em + .28em)!important;
  }
}

/* History page: editorial facts and archive photos */
body.history-magazine-page{
  background:#f3f5f6!important;
  color:#2c2f30!important;
}
body.history-magazine-page #site-shell,
body.history-magazine-page .history-mag-main{
  background:#f3f5f6!important;
}
.history-mag-main{
  overflow:hidden;
}
.history-mag-main .container{
  max-width:1240px;
}
.history-mag-hero{
  position:relative;
  min-height:clamp(560px,72vh,760px);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:clamp(5rem,8vw,7.5rem) 0;
  background:#e9edf0;
}
.history-mag-hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(244,246,247,.96) 0%,rgba(244,246,247,.9) 32%,rgba(244,246,247,.5) 62%,rgba(244,246,247,.18) 100%),
    linear-gradient(180deg,rgba(244,246,247,.12) 0%,rgba(244,246,247,.94) 100%),
    url('../img/history-city-bg.jpg') center bottom/cover no-repeat;
  filter:grayscale(.76) saturate(.78) contrast(.94);
  transform:scale(1.02);
}
.history-mag-hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:150px;
  background:linear-gradient(180deg,rgba(243,245,246,0),#f3f5f6 78%);
}
.history-mag-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.72fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:end;
}
.history-mag-hero-copy{
  max-width:760px;
}
.history-mag-pill,
.history-mag-section-head > span,
.history-photo-head span,
.history-notebook-copy > span,
.history-mag-cta-box span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:2rem;
  padding:.36rem .82rem;
  border-radius:999px;
  background:#eadcf3;
  color:#8d2fb0;
  font-size:.72rem;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.history-mag-pill .material-symbols-outlined{
  font-size:1rem;
}
.history-mag-hero h1{
  max-width:12.4ch;
  margin:1.1rem 0 1.2rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(3.1rem,7vw,6.25rem);
  line-height:.95;
  letter-spacing:-.075em;
  color:#22272a;
  text-wrap:balance;
}
.history-mag-hero p{
  max-width:58ch;
  margin:0;
  color:#555c60;
  font-size:clamp(1rem,1.4vw,1.12rem);
  line-height:1.85;
}
.history-mag-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  margin-top:1.75rem;
}
.history-mag-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:.82rem 1.25rem;
  border-radius:999px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.94rem;
  font-weight:900;
  line-height:1;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.history-mag-btn:hover{
  transform:translateY(-1px);
}
.history-mag-btn.is-primary{
  background:#b7004d;
  color:#fff;
  box-shadow:0 16px 32px rgba(183,0,77,.18);
}
.history-mag-btn.is-primary:hover{
  background:#9f0444;
  color:#fff;
}
.history-mag-btn.is-secondary{
  background:#fff;
  color:#2c2f30;
  box-shadow:0 12px 26px rgba(28,33,36,.08);
}
.history-mag-btn.is-secondary:hover{
  color:#b7004d;
}
.history-mag-btn.is-light{
  background:#fff;
  color:#b7004d;
  box-shadow:0 16px 30px rgba(37,15,46,.16);
}
.history-mag-hero-card{
  justify-self:end;
  width:min(100%,390px);
  display:grid;
  gap:.75rem;
  padding:1rem;
  border-radius:.75rem;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 24px 54px rgba(25,31,36,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.history-mag-hero-card div{
  display:grid;
  gap:.15rem;
  padding:1rem;
  border-radius:.55rem;
  background:#f4f6f7;
}
.history-mag-hero-card strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.7rem,3vw,2.35rem);
  line-height:1;
  letter-spacing:-.05em;
  color:#2c2f30;
}
.history-mag-hero-card span{
  color:#6a7074;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.history-mag-section{
  padding:clamp(4.2rem,7vw,6.75rem) 0;
}
.history-mag-section-head{
  max-width:760px;
  margin:0 auto 2.35rem;
  text-align:center;
}
.history-mag-facts .history-mag-section-head{
  max-width:880px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin:0 auto 2.2rem;
}
.history-mag-facts .history-mag-section-head h2{
  max-width:760px;
  margin:.85rem auto 0;
}
.history-mag-facts .history-mag-section-head p{
  max-width:48rem;
  margin:.85rem auto 0;
}
.history-mag-section-head.is-left{
  margin-left:0;
  text-align:left;
}
.history-mag-section-head h2,
.history-photo-head h2,
.history-notebook-copy h2,
.history-mag-cta-box h2{
  margin:.85rem 0 0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(2.25rem,4.8vw,4rem);
  line-height:1.02;
  letter-spacing:-.06em;
  color:#25292c;
  text-wrap:balance;
}
.history-mag-section-head p{
  max-width:52rem;
  margin:.85rem auto 0;
  color:#666d72;
  font-size:1rem;
  line-height:1.78;
}
.history-mag-fact-grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.history-mag-fact-card{
  position:relative;
  min-height:0;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:1.6rem;
  padding:1.5rem 1.7rem;
  border-radius:1rem;
  background:#fff;
  border:1px solid rgba(117,119,120,.09);
  box-shadow:0 18px 42px rgba(36,42,46,.06);
  overflow:hidden;
}
.history-mag-fact-head{
  flex:0 0 clamp(220px,30%,330px);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.history-mag-fact-body{
  flex:1 1 auto;
  align-self:center;
  min-width:0;
}
.history-mag-fact-card.is-featured{
  min-height:0;
  padding:1.7rem 1.9rem;
  color:#fff;
  background:
    linear-gradient(145deg,rgba(39,61,69,.96),rgba(87,39,100,.9) 56%,rgba(183,0,77,.88)),
    url('../img/history-city-bg.jpg') center/cover no-repeat;
  box-shadow:0 28px 64px rgba(77,34,93,.18);
}
.history-mag-fact-number{
  position:absolute;
  right:1rem;
  bottom:.55rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(3.2rem,6vw,5.2rem);
  line-height:.8;
  font-weight:800;
  letter-spacing:-.08em;
  color:rgba(183,0,77,.07);
  pointer-events:none;
}
.history-mag-fact-card.is-featured .history-mag-fact-number{
  right:1.2rem;
  bottom:.8rem;
  color:rgba(255,255,255,.12);
}
.history-mag-fact-icon{
  width:3rem;
  height:3rem;
  display:grid;
  place-items:center;
  margin-bottom:1.1rem;
  border-radius:.7rem;
  background:#f2e5f8;
  color:#8d2fb0;
}
.history-mag-fact-icon .material-symbols-outlined{
  font-size:1.45rem;
}
.history-mag-fact-card.is-featured .history-mag-fact-icon{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.history-mag-fact-card:nth-child(2n) .history-mag-fact-icon{
  background:#f8e6ef;
  color:#b7004d;
}
.history-mag-fact-card:nth-child(3n) .history-mag-fact-icon{
  background:#e8f1f3;
  color:#276475;
}
.history-mag-fact-head > span,
.history-mag-story-card span,
.history-photo-card span{
  color:#b7004d;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.history-mag-fact-card.is-featured .history-mag-fact-head > span{
  color:rgba(255,255,255,.78);
}
.history-mag-fact-card h3{
  margin:.55rem 0 .8rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.25rem;
  line-height:1.18;
  letter-spacing:-.035em;
  color:#262b2e;
}
.history-mag-fact-card.is-featured h3{
  max-width:none;
  color:#fff;
  font-size:clamp(1.45rem,2vw,1.85rem);
  line-height:1.08;
  letter-spacing:-.04em;
  margin-top:.2rem;
}
.history-mag-fact-preview{
  margin:0;
  color:#62696e;
  font-size:.94rem;
  line-height:1.72;
}
.history-mag-fact-card.is-featured .history-mag-fact-preview{
  max-width:38rem;
  color:rgba(255,255,255,.82);
  font-size:1rem;
  line-height:1.78;
}
.history-mag-fact-sources{
  display:block;
  margin-top:.7rem;
  font-size:.7rem;
  line-height:1.5;
  color:#9aa0a4;
}
.history-mag-fact-card.is-featured .history-mag-fact-sources{
  color:rgba(255,255,255,.6);
}
.history-mag-fact-more{
  position:relative;
  z-index:1;
  margin-top:1rem;
}
.history-mag-fact-more summary{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:.58rem .85rem;
  border-radius:999px;
  background:#f8e6ef;
  color:#b7004d;
  font-size:.78rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  list-style:none;
}
.history-mag-fact-more summary::-webkit-details-marker{
  display:none;
}
.history-mag-fact-more[open] summary{
  margin-bottom:.8rem;
  background:#b7004d;
  color:#fff;
}
.history-mag-fact-more p{
  margin:0;
  color:#62696e;
  font-size:.94rem;
  line-height:1.78;
}
.history-mag-fact-card.is-featured .history-mag-fact-more summary{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.history-mag-fact-card.is-featured .history-mag-fact-more[open] summary{
  background:#fff;
  color:#b7004d;
}
.history-mag-fact-card.is-featured .history-mag-fact-more p{
  color:rgba(255,255,255,.86);
}
.history-mag-stories{
  background:#eef1f3;
}
.history-mag-story-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.history-mag-story-card{
  overflow:hidden;
  border-radius:.9rem;
  background:#fff;
  box-shadow:0 18px 42px rgba(36,42,46,.06);
}
.history-mag-story-card img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  filter:saturate(.9) contrast(.98);
}
.history-mag-story-card div{
  padding:1.35rem;
}
.history-mag-story-card h3{
  margin:.55rem 0 .7rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.45rem;
  line-height:1.1;
  letter-spacing:-.045em;
  color:#25292c;
}
.history-mag-story-card p{
  margin:0;
  color:#62696e;
  font-size:.95rem;
  line-height:1.76;
}
.history-mag-photo-section{
  position:relative;
  padding:clamp(4.6rem,8vw,7rem) 0;
  background:#20262a;
  color:#f7f4ec;
}
.history-mag-photo-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(183,0,77,.18),rgba(137,48,176,.12) 45%,rgba(232,177,82,.08)),
    radial-gradient(circle at 78% 10%,rgba(255,255,255,.08),transparent 28%);
  pointer-events:none;
}
.history-mag-photo-section .container{
  position:relative;
  z-index:1;
}
.history-photo-head{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(280px,.7fr);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:end;
  margin-bottom:2.4rem;
}
.history-photo-head span{
  background:rgba(255,255,255,.13);
  color:#fff;
}
.history-photo-head h2{
  color:#fff;
}
.history-photo-head p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:1rem;
  line-height:1.82;
}
.history-photo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.history-photo-card{
  margin:0;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:.55rem;
  border-radius:.65rem;
  background:#f7f1e6;
  color:#25292c;
  box-shadow:0 24px 46px rgba(0,0,0,.22);
}
.history-photo-card img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:.45rem;
  filter:sepia(.16) saturate(.82) contrast(.98);
}
.history-photo-card figcaption{
  display:grid;
  gap:.35rem;
  padding:.85rem .55rem .55rem;
}
.history-photo-card span{
  color:#7b4a20;
}
.history-photo-card strong{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.05rem;
  line-height:1.18;
  letter-spacing:-.035em;
}
.history-photo-card em{
  color:#63615c;
  font-size:.86rem;
  line-height:1.55;
  font-style:normal;
}
.history-carousel{
  position:relative;
}
.history-carousel-viewport{
  position:relative;
  overflow:hidden;
  border-radius:.85rem;
  box-shadow:0 28px 60px rgba(0,0,0,.34);
  aspect-ratio:3 / 2;
  max-height:82vh;
  max-width:100%;
  /* Na niższych ekranach (mniej pikseli wysokości, np. mniejszy laptop) max-height
     może wymusić zmniejszenie całego pudełka, żeby zachować proporcje 3:2 —
     bez tej linii węższe pudełko zostawało przyklejone do lewej krawędzi
     zamiast się wyśrodkować, dając duży, "urwany" margines po prawej stronie
     na mniejszych ekranach (a poprawnie wyglądało na większych, gdzie
     ograniczenie wysokości w ogóle się nie uruchamiało). */
  margin:0 auto;
}
.history-carousel-updated{position:absolute;top:.85rem;right:.85rem;z-index:5;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .72rem;border-radius:999px;background:rgba(20,12,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:.8rem;font-weight:600;line-height:1;letter-spacing:.01em;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.history-carousel-updated svg{width:15px;height:15px;opacity:.92;flex:0 0 auto}
@media(max-width:560px){.history-carousel-updated{font-size:.72rem;padding:.36rem .6rem;top:.6rem;right:.6rem}}
.history-carousel-track{
  display:flex;
  height:100%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.history-carousel-slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  margin:0;
  overflow:hidden;
}
.history-carousel-blur{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(30px) brightness(.55) saturate(.9);
  transform:scale(1.18);
  z-index:0;
}
.history-carousel-slide img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:sepia(.12) saturate(.86) contrast(.98);
  cursor:zoom-in;
}
.history-carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:2.9rem;
  height:2.9rem;
  display:grid;
  place-items:center;
  border:none;
  border-radius:999px;
  background:rgba(247,241,230,.92);
  color:#25292c;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:background .2s, transform .2s;
  z-index:2;
}
.history-carousel-arrow:hover{
  background:#fff;
}
.history-carousel-arrow svg{
  width:1.25rem;
  height:1.25rem;
}
.history-carousel-arrow.prev{ left:.85rem; }
.history-carousel-arrow.next{ right:.85rem; }
.history-carousel-caption{
  margin:1.15rem auto 0;
  max-width:60rem;
  text-align:center;
  color:rgba(255,255,255,.82);
  font-size:.95rem;
  line-height:1.7;
}
.history-carousel-caption:empty{ display:none; }
.history-carousel-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:1.1rem;
}
.history-carousel-dot{
  width:.6rem;
  height:.6rem;
  padding:0;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.32);
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.history-carousel-dot.is-active{
  background:#fff;
  transform:scale(1.25);
}
.history-lightbox{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:rgba(12,9,18,.93);
  cursor:zoom-out;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.history-lightbox.is-open{display:flex}
.history-lightbox img{
  max-width:96vw;
  max-height:92vh;
  object-fit:contain;
  border-radius:.4rem;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.history-lightbox-close{
  position:absolute;
  top:1.1rem;
  right:1.3rem;
  width:2.9rem;
  height:2.9rem;
  display:grid;
  place-items:center;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  cursor:pointer;
  transition:background .2s;
}
.history-lightbox-close:hover{background:rgba(255,255,255,.28)}
.history-lightbox-close svg{width:1.4rem;height:1.4rem}
@media(max-width:760px){
  .history-carousel-viewport{ aspect-ratio:4 / 3; max-height:72vh; }
  .history-carousel-arrow{ width:2.4rem; height:2.4rem; }
}
.history-notebook-section{
  background:#f3f5f6;
}
.history-notebook-grid{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.2fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.history-notebook-copy p{
  max-width:34rem;
  margin:1rem 0 0;
  color:#62696e;
  font-size:1rem;
  line-height:1.82;
}
.history-notebook-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.history-notebook-list article{
  padding:1.35rem;
  border-radius:.85rem;
  background:#fff;
  border:1px solid rgba(117,119,120,.09);
  box-shadow:0 16px 34px rgba(36,42,46,.05);
}
.history-notebook-list h3{
  margin:0 0 .55rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.16rem;
  line-height:1.15;
  letter-spacing:-.035em;
  color:#25292c;
}
.history-notebook-list p{
  margin:0;
  color:#62696e;
  font-size:.94rem;
  line-height:1.7;
}
.history-mag-cta{
  padding:0 0 clamp(4.6rem,8vw,7rem);
  background:#f3f5f6;
}
.history-mag-cta-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(2rem,5vw,3.3rem);
  border-radius:1rem;
  background:
    linear-gradient(135deg,rgba(39,61,69,.96),rgba(81,37,91,.88) 58%,rgba(183,0,77,.86)),
    url('../img/history-city-bg.jpg') center/cover no-repeat;
  color:#fff;
  box-shadow:0 24px 54px rgba(49,24,66,.16);
}
.history-mag-cta-box span{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.history-mag-cta-box h2{
  max-width:13ch;
  color:#fff;
}
.history-mag-cta-box p{
  max-width:60ch;
  margin:1rem 0 0;
  color:rgba(255,255,255,.8);
  font-size:1rem;
  line-height:1.8;
}
@media(max-width:1100px){
  .history-mag-hero-inner,
  .history-mag-facts .history-mag-section-head,
  .history-photo-head,
  .history-notebook-grid{
    grid-template-columns:1fr;
  }
  .history-mag-hero-card{
    justify-self:start;
  }
  .history-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .history-mag-story-grid{
    grid-template-columns:1fr;
  }
  .history-mag-story-card{
    display:grid;
    grid-template-columns:minmax(260px,.82fr) minmax(0,1fr);
  }
  .history-mag-story-card img{
    height:100%;
    aspect-ratio:auto;
  }
}
@media(max-width:760px){
  .history-mag-hero{
    min-height:auto;
    padding:4.5rem 0 5rem;
  }
  .history-mag-hero-bg{
    background:
      linear-gradient(180deg,rgba(244,246,247,.92) 0%,rgba(244,246,247,.96) 100%),
      url('../img/history-city-bg.jpg') center bottom/cover no-repeat;
  }
  .history-mag-hero h1{
    max-width:10.5ch;
    font-size:clamp(2.65rem,13vw,4rem);
    line-height:.98;
  }
  .history-mag-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .history-mag-btn{
    width:100%;
  }
  .history-mag-hero-card{
    width:100%;
  }
  .history-mag-section-head,
  .history-mag-section-head.is-left{
    text-align:left;
  }
  .history-mag-section-head h2,
  .history-photo-head h2,
  .history-notebook-copy h2,
  .history-mag-cta-box h2{
    font-size:clamp(2.1rem,10vw,3rem);
  }
  .history-photo-grid,
  .history-notebook-list{
    grid-template-columns:1fr;
  }
  .history-mag-fact-card{
    min-height:0;
    flex-direction:column;
    gap:.55rem;
  }
  .history-mag-fact-head{
    flex-basis:auto;
  }
  .history-mag-fact-card.is-featured{
    padding:1.45rem;
  }
  .history-mag-fact-card.is-featured h3{
    max-width:none;
    font-size:1.6rem;
  }
  .history-mag-story-card{
    grid-template-columns:1fr;
  }
  .history-mag-story-card img{
    aspect-ratio:16 / 10;
  }
  .history-mag-cta-box{
    flex-direction:column;
    align-items:flex-start;
    border-radius:.8rem;
  }
}

/* Event poster covers: vertical cards and full modal copy */
.event-poster-track,
.event-poster-section.is-single .event-poster-track{
  grid-auto-columns:minmax(230px,292px)!important;
  align-items:start!important;
}
.event-poster-card,
.event-poster-section.is-single .event-poster-card{
  grid-template-rows:auto auto!important;
}
.event-poster-image,
.event-poster-section.is-single .event-poster-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2 / 3!important;
  padding:0!important;
  border-radius:1.05rem!important;
  overflow:hidden!important;
  background:#150b24!important;
}
.event-poster-image::after,
.event-poster-section.is-single .event-poster-image::after{
  display:none!important;
}
.event-poster-image img,
.event-poster-section.is-single .event-poster-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:1.05rem!important;
  background:#150b24!important;
}
.event-poster-copy,
.event-poster-section.is-single .event-poster-copy{
  padding:1rem .05rem 0!important;
}
.event-poster-date{
  width:auto!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.28!important;
  letter-spacing:.075em!important;
}
.event-poster-screenings{
  white-space:pre-line!important;
  font-weight:800!important;
  color:rgba(255,255,255,.9)!important;
}
.event-poster-screenings + span{
  margin-top:.1rem;
}
.event-poster-modal{
  z-index:2400!important;
  align-items:flex-start!important;
  padding:calc(5.2rem + 1rem) 1rem 1rem!important;
  overflow:auto!important;
}
.event-poster-modal-backdrop{
  position:fixed!important;
  inset:0!important;
}
.event-poster-modal-dialog{
  grid-template-columns:minmax(420px,540px) minmax(360px,1fr)!important;
  align-items:stretch!important;
  width:min(1180px,calc(100vw - 2rem))!important;
  height:min(calc(100vh - 7.2rem),820px)!important;
  max-height:calc(100vh - 7.2rem)!important;
  margin:0 auto!important;
  background:transparent!important;
}
.event-poster-modal-media{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:transparent!important;
  overflow:hidden!important;
}
.event-poster-modal-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  aspect-ratio:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  background:transparent!important;
}
.event-poster-modal-copy{
  justify-content:flex-start!important;
  max-height:min(90vh,840px)!important;
  overflow:auto!important;
  background:#fff!important;
  border-radius:0 1.5rem 1.5rem 0!important;
}
.event-poster-modal-copy > span{
  display:inline-flex!important;
  width:fit-content!important;
  max-width:100%!important;
  white-space:pre-line!important;
  line-height:1.45!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding:.5rem .85rem!important;
  background:rgba(137,48,176,.15)!important;
  color:#8a2eb2!important;
}
.event-modal-screenings[hidden]{
  display:none!important;
}
.event-modal-screenings{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  gap:.55rem!important;
  margin:0 0 1.05rem!important;
}
.event-modal-screening-day{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:.45rem .65rem!important;
  width:fit-content!important;
  max-width:100%!important;
  padding:.55rem .72rem!important;
  border-radius:1rem!important;
  background:linear-gradient(135deg,rgba(137,48,176,.16),rgba(232,24,109,.13))!important;
  color:#7d229f!important;
  border:1px solid rgba(137,48,176,.15)!important;
}
.event-modal-screening-date{
  font-size:.76rem!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
.event-modal-screening-times{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.32rem!important;
}
.event-modal-screening-times span{
  display:inline-flex!important;
  padding:.24rem .5rem!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#9f237f!important;
  font-size:.8rem!important;
  font-weight:900!important;
  line-height:1!important;
}
.event-poster-modal-copy p{
  white-space:pre-line!important;
}
@media(max-width:900px){
  .event-poster-track,
  .event-poster-section.is-single .event-poster-track{
    grid-auto-columns:minmax(218px,70vw)!important;
  }
  .event-poster-modal-dialog{
    grid-template-columns:1fr!important;
    height:auto!important;
    max-height:none!important;
    overflow:auto!important;
  }
  .event-poster-modal-media{
    max-height:58vh!important;
  }
  .event-poster-modal-media img{
    height:100%!important;
    min-height:0!important;
    aspect-ratio:2 / 3!important;
    max-height:58vh!important;
    object-fit:contain!important;
  }
  .event-poster-modal-copy{
    max-height:none!important;
    border-radius:0 0 1.1rem 1.1rem!important;
  }
}
@media(max-width:560px){
  .event-poster-modal{
    padding:calc(4.85rem + .75rem) .65rem .65rem!important;
  }
  .event-poster-track,
  .event-poster-section.is-single .event-poster-track{
    grid-auto-columns:minmax(212px,82vw)!important;
  }
}

/* Event carousel: show exactly four covers and slide one at a time */
.event-carousel-shell{
  --event-visible:4;
  overflow:hidden!important;
}
.event-poster-track,
.event-poster-section.is-single .event-poster-track{
  grid-auto-columns:calc((100% - 3rem) / 4)!important;
  gap:1rem!important;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  scrollbar-width:none!important;
}
.event-poster-track::-webkit-scrollbar{
  display:none!important;
}
@media(max-width:1020px){
  .event-carousel-shell{
    --event-visible:2;
  }
  .event-poster-track,
  .event-poster-section.is-single .event-poster-track{
    grid-auto-columns:calc((100% - 1rem) / 2)!important;
  }
}
@media(max-width:560px){
  .event-carousel-shell{
    --event-visible:1;
  }
  .event-poster-track,
  .event-poster-section.is-single .event-poster-track{
    grid-auto-columns:100%!important;
  }
}

@media(max-width:900px){
  .article-feature-grid{grid-template-columns:1fr}
  .article-feature-modal-dialog{grid-template-columns:1fr;max-height:92vh;overflow:auto}
  .article-feature-modal-media{min-height:0;aspect-ratio:1}
  .article-feature-modal-copy{padding:1.35rem;max-height:none;overflow:visible}
}

/* ============================================= */
/* Lokalna tablica ogłoszeń                       */
/* ============================================= */
.classifieds-wrap{max-width:1180px;margin:0 auto}
.classifieds-banner{padding:1rem 1.25rem;border-radius:1rem;margin-bottom:1.4rem;font-size:.96rem;line-height:1.55}
.classifieds-banner-success{background:rgba(34,139,87,.1);color:#16794a;border:1px solid rgba(34,139,87,.25)}
.classifieds-banner-info{background:rgba(137,48,176,.08);color:var(--secondary-dim);border:1px solid rgba(137,48,176,.2)}
.classifieds-banner-error{background:rgba(183,0,77,.08);color:var(--primary-dim);border:1px solid rgba(183,0,77,.22)}
.classifieds-banner-error div{margin:.1rem 0}

.classifieds-toolbar{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:1.1rem}
.classifieds-add-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--grad);color:#fff;border:none;border-radius:999px;padding:.8rem 1.5rem;font-weight:700;font-size:.98rem;cursor:pointer;box-shadow:0 12px 26px rgba(183,0,77,.22);transition:transform .15s,box-shadow .15s}
.classifieds-add-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(183,0,77,.3)}
.classifieds-add-btn .material-symbols-outlined{font-size:1.3rem}
.classifieds-search{display:flex;align-items:center;background:#fff;border:1px solid var(--outline);border-radius:999px;overflow:hidden;min-width:260px;flex:1;max-width:380px}
.classifieds-search input{border:none;outline:none;padding:.7rem 1rem;flex:1;font-size:.92rem;background:transparent;color:var(--text)}
.classifieds-search button{border:none;background:transparent;padding:0 .9rem;cursor:pointer;color:var(--text-muted);display:flex;align-items:center}
.classifieds-search button:hover{color:var(--primary)}

.classifieds-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.classifieds-chip{display:inline-flex;align-items:center;padding:.5rem 1.05rem;border-radius:999px;background:#fff;border:1px solid var(--outline);color:var(--text-soft);font-size:.88rem;font-weight:600;text-decoration:none;transition:all .15s}
.classifieds-chip:hover{border-color:var(--primary);color:var(--primary)}
.classifieds-chip.is-active{background:var(--grad);border-color:transparent;color:#fff}

.classifieds-empty{text-align:center;padding:4rem 1rem;color:var(--text-muted)}
.classifieds-empty .material-symbols-outlined{font-size:3.2rem;opacity:.4}
.classifieds-empty h3{margin:.8rem 0 .3rem;color:var(--text-soft)}

.classifieds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.classified-card{background:#fff;border:1px solid var(--outline-soft);border-radius:1.1rem;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;box-shadow:var(--card-shadow)}
.classified-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.classified-card-media{position:relative;aspect-ratio:4/3;background:var(--surface-high);overflow:hidden}
.classified-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.classified-card-noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted)}
.classified-card-noimg .material-symbols-outlined{font-size:2.6rem;opacity:.4}
.classified-card-badge{position:absolute;top:.7rem;left:.7rem;background:rgba(255,255,255,.94);color:var(--primary);font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(4px)}
.classified-card-count{position:absolute;bottom:.7rem;right:.7rem;display:inline-flex;align-items:center;gap:.2rem;background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;font-weight:700;padding:.25rem .55rem;border-radius:999px}
.classified-card-share{position:absolute;top:.6rem;right:.6rem;width:2rem;height:2rem;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 3px 10px rgba(0,0,0,.18);transition:background .15s,transform .15s;opacity:0}
.classified-card:hover .classified-card-share{opacity:1}
.classified-card-share:hover{background:#fff;transform:scale(1.08)}
.classified-card-share .material-symbols-outlined{font-size:1.15rem}
.classified-card-count .material-symbols-outlined{font-size:.95rem}
.classified-card-body{padding:.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;flex:1}
.classified-card-title{font-size:1.04rem;font-weight:800;line-height:1.25;margin:0 0 .35rem;color:var(--text)}
.classified-card-price{font-size:1.02rem;font-weight:800;color:var(--primary);margin-bottom:.4rem}
.classified-card-locality{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;color:var(--text-soft);font-weight:600;margin-bottom:.5rem}
.classified-card-locality .material-symbols-outlined{font-size:1rem;color:var(--text-muted)}
.classified-card-desc{font-size:.88rem;line-height:1.55;color:var(--text-soft);margin:0 0 .8rem}
.classified-card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-muted)}
.classified-card-more{color:var(--primary);font-weight:700}

/* Modale ogłoszeń */
.classified-modal{position:fixed;inset:0;z-index:6000;display:none;align-items:center;justify-content:center;padding:1.5rem}
.classified-modal.is-open{display:flex}
.classified-modal-backdrop{position:absolute;inset:0;background:rgba(20,12,28,.62);backdrop-filter:blur(3px)}
.classified-modal-dialog{position:relative;z-index:1;background:#fff;border-radius:1.4rem;width:min(100%,720px);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 80px rgba(0,0,0,.32)}
.classified-modal-close{position:absolute;top:1rem;right:1rem;z-index:3;width:2.4rem;height:2.4rem;border-radius:50%;border:none;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center;color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.classified-modal-close:hover{background:#fff;color:var(--primary)}

.classified-detail-dialog{width:min(100%,1140px);max-height:93vh}
.classified-detail-layout{display:grid;grid-template-columns:1.2fr .8fr;height:min(88vh,720px)}
.classified-detail-layout.no-media{grid-template-columns:1fr;height:auto;max-height:84vh}
.classified-detail-layout.no-media .classified-detail-media{display:none}
.classified-detail-media{position:relative;background:#0e0e12;min-width:0;overflow:hidden}
.classified-detail-slider{position:relative;width:100%;height:100%;overflow:hidden;background:#0e0e12}
.classified-slider-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.classified-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.classified-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.classified-slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#1a1d20;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:2;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:background .15s,transform .15s}
.classified-slider-nav:hover{background:#fff}
.classified-slider-nav.prev{left:.7rem}
.classified-slider-nav.next{right:.7rem}
.classified-detail-slider.has-multi .classified-slider-nav{display:flex}
.classified-slider-dots{position:absolute;bottom:.8rem;left:0;right:0;display:none;justify-content:center;gap:.4rem;z-index:2}
.classified-detail-slider.has-multi .classified-slider-dots{display:flex}
.classified-slider-dots button{width:.55rem;height:.55rem;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:background .15s,transform .15s}
.classified-slider-dots button.is-active{background:#fff;transform:scale(1.25)}
.classified-slider-counter{position:absolute;top:.8rem;left:.8rem;display:none;background:rgba(0,0,0,.55);color:#fff;font-size:.78rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;z-index:2}
.classified-detail-slider.has-multi .classified-slider-counter{display:block}
.classified-detail-body{padding:1.7rem 1.8rem 1.9rem;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(120,120,120,.35) transparent}
.classified-detail-body::-webkit-scrollbar{width:7px}
.classified-detail-body::-webkit-scrollbar-track{background:transparent}
.classified-detail-body::-webkit-scrollbar-thumb{background:rgba(120,120,120,.3);border-radius:99px}
.classified-detail-body::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.5)}
.classified-detail-badge{display:inline-block;align-self:flex-start;background:var(--grad-soft);color:var(--primary);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.3rem .7rem;border-radius:999px;margin-bottom:.6rem}
.classified-detail-body h2{font-size:1.5rem;font-weight:800;margin:0 0 .4rem;color:var(--text)}
.classified-detail-price{font-size:1.3rem;font-weight:800;color:var(--primary);margin-bottom:.75rem}
.classified-detail-desc{font-size:.98rem;line-height:1.7;color:var(--text-soft);margin:.15rem 0 1.2rem}
.classified-detail-desc p{margin:0 0 .9rem}
.classified-detail-desc p:last-child{margin-bottom:0}
.classified-detail-desc ul{margin:.1rem 0 1rem 1.15rem;padding:0}
.classified-detail-desc li{margin:.28rem 0;padding-left:.1rem}
.classified-detail-meta{display:flex;gap:1.8rem;flex-wrap:wrap;padding:1rem 0;border-top:1px solid var(--outline-soft);border-bottom:1px solid var(--outline-soft);margin-bottom:1.1rem}
.classified-detail-meta span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.2rem}
.classified-detail-meta strong{font-size:.96rem;color:var(--text)}
.classified-contact-box{margin:.85rem 0 1.15rem;padding:1rem;border:1px solid rgba(183,0,77,.14);border-radius:1rem;background:#fff;box-shadow:0 16px 38px rgba(24,20,32,.08);display:flex;flex-direction:column;align-items:stretch;gap:.8rem;overflow:visible}
.classified-contact-copy{display:grid;gap:.18rem}
.classified-contact-kicker{display:inline-flex;align-self:flex-start;background:var(--grad-soft);color:var(--primary);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .65rem;border-radius:999px;margin-bottom:.15rem}
.classified-contact-copy strong{font-size:1rem;line-height:1.25;color:var(--text)}
.classified-contact-copy small{font-size:.86rem;line-height:1.45;color:var(--text-soft)}
.classified-contact-reveal{display:inline-flex;width:100%;min-height:3rem;justify-content:center;align-items:center;gap:.55rem;background:var(--grad);color:#fff;border:none;border-radius:.85rem;padding:.78rem 1.2rem;font-weight:800;cursor:pointer;font-size:.95rem;line-height:1.2;text-align:center;box-shadow:0 12px 26px rgba(183,0,77,.24);position:relative;z-index:2;transition:filter .18s ease,transform .18s ease}
.classified-contact-reveal:hover{filter:brightness(1.05);transform:translateY(-1px)}
.classified-contact-reveal .material-symbols-outlined{font-size:1.2rem;color:inherit}
.classified-contact-box.is-revealed .classified-contact-copy small{display:none}
.classified-contact-box.is-revealed .classified-contact-reveal{display:none}
.classified-contact-data{display:flex;flex-direction:column;gap:.5rem;overflow:hidden;transform:translateY(-6px);opacity:0;max-height:0;margin-top:0;visibility:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s ease,max-height .3s cubic-bezier(.22,1,.36,1)}
.classified-contact-box.is-revealed .classified-contact-data{transform:translateY(0);opacity:1;max-height:280px;visibility:visible}
.classified-contact-line{display:flex;align-items:center;gap:.6rem;background:var(--surface-low);border:1px solid var(--outline-soft);border-radius:.8rem;padding:.75rem .9rem;text-decoration:none;color:var(--text);font-weight:700;font-size:.95rem;transform:translateY(-6px);opacity:0;transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .25s ease,background .18s ease,color .18s ease,border-color .18s ease}
.classified-contact-box.is-revealed .classified-contact-line{transform:translateY(0);opacity:1}
.classified-contact-box.is-revealed .classified-contact-line:nth-child(1){transition-delay:.08s}
.classified-contact-box.is-revealed .classified-contact-line:nth-child(2){transition-delay:.16s}
.classified-contact-line:hover{background:#fff;border-color:rgba(183,0,77,.24);color:var(--primary)}
.classified-contact-line .material-symbols-outlined{color:var(--primary);flex:0 0 auto}
.classified-contact-line span:last-child{overflow-wrap:anywhere}
.classified-detail-warn{font-size:.82rem;color:var(--text-muted);line-height:1.5;margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--outline)}
.classified-detail-share{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;flex-wrap:wrap}
.classified-detail-share-label{font-size:.82rem;font-weight:700;color:var(--text-soft)}
.classified-fb-btn{display:inline-flex;align-items:center;gap:.45rem;background:#1877f2;color:#fff;border:none;border-radius:.7rem;padding:.55rem 1rem;font-weight:700;font-size:.9rem;cursor:pointer;transition:filter .15s,transform .15s}
.classified-fb-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.classified-fb-btn svg{display:block}
.classified-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:.7rem;border:1px solid var(--outline);background:#fff;color:var(--text-soft);cursor:pointer;transition:all .15s;position:relative}
.classified-copy-btn:hover{border-color:var(--primary);color:var(--primary)}
.classified-copy-btn.is-copied{border-color:#16794a;color:#16794a}
.classified-copy-btn.is-copied::after{content:"Skopiowano";position:absolute;bottom:calc(100% + .35rem);left:50%;transform:translateX(-50%);background:#16794a;color:#fff;font-size:.7rem;font-weight:700;padding:.2rem .5rem;border-radius:.4rem;white-space:nowrap}

/* Formularz dodawania */
.classified-form-dialog{width:min(100%,640px)}
.classified-form-scroll{overflow-y:auto;padding:1.8rem 1.8rem 2rem}
.classified-form-scroll h2{font-size:1.5rem;font-weight:800;margin:0 0 .35rem}
.classified-form-lead{color:var(--text-soft);font-size:.92rem;margin:0 0 1.3rem}
.classified-field{margin-bottom:1rem;display:flex;flex-direction:column}
.classified-field label{font-weight:700;font-size:.88rem;margin-bottom:.4rem;color:var(--text)}
.classified-opt{font-weight:500;color:var(--text-muted);font-size:.82rem}
.classified-field input,.classified-field select,.classified-field textarea{border:1px solid var(--outline);border-radius:.7rem;padding:.7rem .85rem;font-size:.95rem;font-family:inherit;color:var(--text);background:#fff;outline:none;transition:border-color .15s}
.classified-field input:focus,.classified-field select:focus,.classified-field textarea:focus{border-color:var(--primary)}
.classified-field textarea{resize:vertical;min-height:6rem}
.classified-hint{font-size:.78rem;color:var(--text-muted);margin-top:.35rem}
.classified-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.classified-terms{margin:.5rem 0 1rem;border:1px solid var(--outline-soft);border-radius:.7rem;background:var(--surface-low)}
.classified-terms summary{cursor:pointer;padding:.7rem 1rem;font-weight:700;font-size:.88rem;color:var(--text-soft)}
.classified-terms-body{padding:0 1.1rem 1rem;font-size:.82rem;line-height:1.6;color:var(--text-soft)}
.classified-terms-list{margin:0;padding-left:1.2rem}
.classified-terms-list li{margin-bottom:.5rem}
.classified-check{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.9rem;font-size:.86rem;line-height:1.5;color:var(--text-soft)}
.classified-check input{margin-top:.2rem;flex:0 0 auto;width:1.1rem;height:1.1rem;accent-color:var(--primary)}
.classified-check a{color:var(--primary);text-decoration:underline}
.classified-rodo-note{background:var(--surface-low);border-radius:.7rem;padding:.9rem 1.1rem;font-size:.8rem;line-height:1.55;color:var(--text-soft);margin-bottom:1rem}
.classified-rodo-note ul{padding-left:1.1rem;margin:.4rem 0}
.classified-submit-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--grad);color:#fff;border:none;border-radius:999px;padding:.85rem 1.7rem;font-weight:700;font-size:1rem;cursor:pointer;width:100%;justify-content:center;margin-top:.4rem}
.classified-submit-btn:hover{filter:brightness(1.05)}

.badge-amber{background:#fef3c7;color:#a16207}
.badge-grey{background:#e5e7eb;color:#4b5563}

@media (max-width:980px){
  .classifieds-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .classified-detail-layout{grid-template-columns:1fr;height:auto;max-height:none}
  .classified-detail-media{height:300px}
  .classified-detail-slider{height:300px}
  .classified-detail-dialog{max-height:92vh;overflow-y:auto}
  .classified-detail-body{overflow:visible}
}
@media (max-width:640px){
  .classifieds-grid{grid-template-columns:1fr}
  .classified-form-row{grid-template-columns:1fr}
  .classified-modal{padding:0}
  .classified-modal-dialog{max-height:100vh;height:100%;border-radius:0;width:100%}
  .classified-detail-dialog{max-height:100vh;height:100%;overflow-y:auto}
  .classified-detail-media{height:240px}
  .classified-detail-slider{height:240px}
  .classified-contact-line span:last-child{overflow-wrap:anywhere}
}

/* Newsletter — podstrona publiczna */
.newsletter-page-card{background:#fff;border:1px solid var(--outline-soft);border-radius:1.2rem;padding:2rem;box-shadow:var(--card-shadow)}
.newsletter-page-card h2{margin:0 0 .5rem;font-size:1.5rem;color:var(--text)}
.newsletter-page-card>p{color:var(--text-soft);line-height:1.6;margin:0}
.newsletter-page-form{display:flex;gap:.6rem;margin:1.3rem 0 .8rem;flex-wrap:wrap}
.newsletter-page-form input[type=email]{flex:1;min-width:220px;border:1px solid var(--outline);border-radius:999px;padding:.8rem 1.2rem;font-size:1rem;outline:none;color:var(--text);background:#fff}
.newsletter-page-form input[type=email]:focus{border-color:var(--primary)}
.newsletter-page-form button{background:var(--grad);color:#fff;border:none;border-radius:999px;padding:.8rem 1.7rem;font-weight:700;cursor:pointer;font-size:1rem}
.newsletter-page-form button:hover{filter:brightness(1.05)}
.newsletter-page-note{font-size:.82rem;color:var(--text-muted);line-height:1.5;margin:0}
@media(max-width:540px){.newsletter-page-form button{width:100%}}

/* ── Historia: najnowsze artykuły z kategorii (nad "Najciekawsze tropy") ─── */
.history-latest-section{
  padding:clamp(3.2rem,6vw,5.2rem) 0 clamp(1rem,2vw,1.6rem);
  background:#f3f5f6;
}
.history-latest-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.history-latest-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(24,28,35,.08);
  border-radius:1.4rem;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 30px rgba(24,28,35,.06);
  transition:transform .35s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease;
}
.history-latest-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 50px rgba(24,28,35,.13);
}
.history-latest-media{
  position:relative;
  aspect-ratio:16/10;
  min-height:190px;
  overflow:hidden;
  background:#e9edf0;
}
.history-latest-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.85) saturate(.8) contrast(.96);
  transform:scale(1.06);
  transition:filter .6s ease,transform .6s cubic-bezier(.22,.8,.3,1);
}
.history-latest-card:hover .history-latest-media img{
  filter:grayscale(0) saturate(1) contrast(1);
  transform:scale(1.01);
}
.history-latest-media-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e9edf0,#dfe4e8);
  color:#a9b2ba;
}
.history-latest-media-fallback .material-symbols-outlined{font-size:2.6rem}
.history-latest-number{
  position:absolute;
  right:.9rem;
  bottom:.7rem;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:2.6rem;
  font-weight:900;
  line-height:1;
  color:rgba(255,255,255,.92);
  text-shadow:0 4px 18px rgba(24,28,35,.45);
  letter-spacing:-.02em;
}
.history-latest-body{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:1.15rem 1.25rem 1.3rem;
  flex:1;
}
.history-latest-meta{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.history-latest-tag{
  display:inline-flex;
  align-items:center;
  padding:.28rem .68rem;
  border-radius:999px;
  background:#eadcf3;
  color:#8d2fb0;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.history-latest-meta time{
  font-size:.76rem;
  color:#78828c;
  font-weight:700;
}
.history-latest-body h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.12rem;
  font-weight:800;
  line-height:1.32;
  color:#181c23;
  transition:color .25s ease;
}
.history-latest-card:hover .history-latest-body h3{color:#8d2fb0}
.history-latest-body p{
  font-size:.86rem;
  line-height:1.62;
  color:#5c6670;
}
.history-latest-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding-top:.65rem;
  font-size:.8rem;
  font-weight:800;
  color:#8d2fb0;
}
.history-latest-more .material-symbols-outlined{
  font-size:1rem;
  transition:transform .25s ease;
}
.history-latest-card:hover .history-latest-more .material-symbols-outlined{transform:translateX(4px)}

/* Animacja wejścia przy przewijaniu (kaskadowa, sterowana z JS) */
.hla-card{
  opacity:0;
  transform:translateY(34px) scale(.97);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1),box-shadow .35s ease;
}
.hla-card.hla-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.hla-card .history-latest-media img{clip-path:inset(0 0 14% 0)}
.hla-card.hla-visible .history-latest-media img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  .hla-card{opacity:1;transform:none}
  .hla-card .history-latest-media img{clip-path:none}
}

@media (max-width:900px){
  .history-latest-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
}

/* ── Oznaczenie "Galeria zdjęć" na kafelkach artykułów ──────────────────── */
/* 1) Mała zaokrąglona plakietka osadzona z marginesem w rogu zdjęcia (nie
      pasek na całą szerokość) — ciemne, półprzezroczyste tło, ikona + napis.
   2) Dodatkowy tekstowy tag "Galeria" obok pigułki kategorii w wierszu meta
      pod zdjęciem/tytułem (.gallery-tag). */
.story-lead-media,
.story-list-thumb,
.article-card-img{position:relative}
/* .hero-slide ma już position:absolute (mechanizm przenikania slajdów) —
   wystarcza to jako kontekst pozycjonowania, więc celowo nie dodajemy tu
   position:relative (nadpisałoby to na sztywno i zepsuło slider). */

.gallery-flag{
  position:absolute;
  left:.7rem;
  bottom:.7rem;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .75rem;
  border-radius:.65rem;
  background:rgba(20,10,28,.8);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px) saturate(1.2);
  -webkit-backdrop-filter:blur(6px) saturate(1.2);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  box-shadow:0 4px 14px rgba(10,6,16,.35);
  pointer-events:none;
}
.gallery-flag svg{width:16px;height:16px;flex-shrink:0;will-change:transform}
.gallery-flag > span{line-height:1}

/* wariant kompaktowy — małe miniatury na liście strony głównej: sama
   ikona, mniejsza plakietka */
.gallery-flag--compact{
  padding:.4rem;
  gap:0;
}
.gallery-flag--compact svg{width:14px;height:14px}

/* wariant na dużym kaflu promowanym/specjalnym (home-live-card): tam dół
   zdjęcia po lewej jest zajęty przez tytuł i zajawkę artykułu, więc
   plakietkę trzymamy w prawym dolnym rogu, z dala od tekstu. */
.gallery-flag--tile{
  left:auto;
  right:.9rem;
  bottom:.9rem;
}
.audio-flag--tile{left:auto;right:.9rem;bottom:.9rem}
.gallery-flag--tile + .audio-flag--tile{bottom:calc(.9rem + 2.5rem)}

/* Dodatkowy tag tekstowy obok pigułki kategorii (wiersz meta) */
.gallery-tag{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  margin-left:.45rem;
  padding:.3rem .68rem;
  border-radius:999px;
  border:1.5px solid #8a2be2;
  color:#8a2be2;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  background:#fff;
  vertical-align:middle;
}
.gallery-tag svg{width:12px;height:12px;flex-shrink:0}
/* Znacznik "Lektor" — ten sam kształt co "Galeria", ale w kolorze marki
   (róż zamiast fioletu), żeby dało się je odróżnić, gdy artykuł ma oba. */
.audio-tag{border-color:var(--primary);color:var(--primary)}
.audio-flag{background:rgba(183,0,77,.82)}
/* Gdy artykuł ma jednocześnie galerię i lektora, oba znaczniki "na zdjęciu"
   wylądowałyby w tym samym rogu (position:absolute, ten sam left/bottom).
   Renderujemy je zawsze w kolejności galeria→lektor, więc wystarczy
   przesunąć DRUGI znacznik (audio) o wysokość pierwszego + odstęp. */
.gallery-flag + .audio-flag,
.gallery-flag--compact + .audio-flag--compact{bottom:calc(.7rem + 2.5rem)}



/* ── Nowoczesna galeria zdjęć w artykule (gdy "Galeria zdjęć w artykule"
   jest zaznaczone) — 2 duże zdjęcia + do 4 mniejszych, licznik "+N". ───── */
.gallery-modern{
  margin:2.4rem 0;
  padding:1.5rem;
  background:#fff;
  border-radius:1.3rem;
  box-shadow:0 18px 42px rgba(36,42,46,.07);
}
.gallery-modern-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.2rem;
}
.gallery-modern-title{display:flex;align-items:center;gap:.7rem}
.gallery-modern-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:.8rem;
  background:linear-gradient(135deg,rgba(138,43,226,.14),rgba(208,0,95,.14));
  flex-shrink:0;
}
.gallery-modern-icon svg{width:20px;height:20px}
.gallery-modern-title h2,
.gallery-modern-title-text{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
  background:linear-gradient(120deg,#8a2be2,#d0005f);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
/* Ogonki „ę”, „ą” i ogólnie znaki schodzące pod linię pisma.
   Przy background-clip:text gradient maluje się WYŁĄCZNIE w polu tła
   elementu, a interlinia 1.15 jest ciaśniejsza niż pełna wysokość kroju
   Plus Jakarta Sans — ogonek wypadał poza to pole i po prostu znikał.
   padding-bottom powiększa pole tła w dół, a równy mu ujemny margines
   cofa układ, więc odstępy zostają dokładnie takie jak były. */
  line-height:1.2;
  padding-bottom:.18em;
  margin-bottom:-.18em;
  overflow:visible;
}
.gallery-modern-count{
  display:inline-flex;
  align-items:center;
  padding:.42rem .9rem;
  border-radius:999px;
  background:rgba(137,48,176,.1);
  color:var(--secondary);
  font-size:.82rem;
  font-weight:800;
  white-space:nowrap;
}
.gallery-modern-featured{
  display:grid;
  gap:.85rem;
  margin-bottom:.85rem;
}
.gallery-modern-thumbs{
  display:grid;
  gap:.7rem;
}
.gallery-modern .gallery-item{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  cursor:zoom-in;
  background:#eee;
  aspect-ratio:4/3;
  min-height:190px;
  /* Bez tego kafelek rozpycha kolumnę na telefonie. Element siatki ma
     domyślnie min-width:auto, a przy zadanym aspect-ratio przeglądarka
     przelicza min-height na minimalną SZEROKOŚĆ: 260px × 16/10.5 = 396px,
     czyli więcej, niż ma cały ekran. Zdjęcia wychodziły wtedy poza kartę. */
  min-width:0;
  transition:transform .2s ease;
}
.gallery-modern .gallery-item:hover{transform:scale(1.015)}
.gallery-modern .gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-modern .gallery-item--big{aspect-ratio:16/10.5;min-height:260px}
.gallery-modern .gallery-item--small{aspect-ratio:1/1;min-height:150px}
.gallery-item--overflow img{filter:brightness(.42)}
.gallery-item-overflow-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.5rem;
  font-weight:800;
  font-family:'Plus Jakarta Sans',sans-serif;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
@media (max-width:640px){
  .gallery-modern{padding:1.1rem;border-radius:1.1rem}
  .gallery-modern-featured{grid-template-columns:minmax(0,1fr)!important}
  .gallery-modern-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.55rem}
  /* Minimalne wysokości pilnują, żeby kafelki nie zrobiły się znaczkami
     przy kilku kolumnach na desktopie. Na telefonie kolumny są jedna–dwie,
     więc te wartości już tylko rozciągają kadr i psują proporcje. */
  .gallery-modern .gallery-item,
  .gallery-modern .gallery-item--big,
  .gallery-modern .gallery-item--small{min-height:0}
  .gallery-modern .gallery-item{border-radius:.85rem}
  .gallery-modern-head{gap:.6rem;margin-bottom:.95rem}
  .gallery-modern-title{gap:.55rem;min-width:0}
  .gallery-modern-title-text{font-size:1.15rem}
  .gallery-modern-icon{width:2rem;height:2rem;border-radius:.65rem}
  .gallery-modern-icon svg{width:17px;height:17px}
  .gallery-modern-count{padding:.34rem .7rem;font-size:.74rem}
  /* Powiększenie pod kursor nie ma sensu na dotyku — bez :hover potrafi
     zostać „przyklejone” po tapnięciu. */
  .gallery-modern .gallery-item:hover{transform:none}
}
@media (max-width:380px){
  /* Bardzo wąskie ekrany: dwie kolumny miniatur dają kadry ~150 px,
     na których nic nie widać. Lepiej jedna kolumna. */
  .gallery-modern-thumbs{grid-template-columns:minmax(0,1fr)!important}
}

/* ── Załączniki do artykułu (PDF, DOC, ZIP itp.) ─────────────────────────── */
.article-attachments{
  margin:2.4rem 0;
  padding:1.5rem;
  background:#fff;
  border-radius:1.3rem;
  box-shadow:0 18px 42px rgba(36,42,46,.07);
}
.article-attachments-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1.1rem;
}
.article-attachments-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:.8rem;
  background:linear-gradient(135deg,rgba(138,43,226,.14),rgba(208,0,95,.14));
  flex-shrink:0;
}
.article-attachments-icon svg{width:20px;height:20px;color:var(--secondary)}
.article-attachments-head h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
  color:#181c23;
}
.article-attachments-list{display:flex;flex-direction:column;gap:.7rem}
.article-attachment-item{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.85rem 1rem;
  border:1px solid rgba(24,28,35,.08);
  border-radius:1rem;
  text-decoration:none;
  color:inherit;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.article-attachment-item:hover{
  border-color:rgba(138,43,226,.35);
  background:rgba(138,43,226,.03);
  transform:translateY(-1px);
}
.article-attachment-ext{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.6rem;
  padding:.35rem .5rem;
  border-radius:.6rem;
  background:linear-gradient(135deg,#8a2be2,#d0005f);
  color:#fff;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
}
.article-attachment-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  color:#181c23;
  font-size:.94rem;
}
.article-attachment-size{
  flex-shrink:0;
  color:#78828c;
  font-size:.8rem;
  font-weight:600;
}
.article-attachment-dl{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:rgba(137,48,176,.08);
  color:var(--secondary);
}
.article-attachment-dl svg{width:15px;height:15px}
@media (max-width:640px){
  .article-attachments{padding:1.1rem;border-radius:1.1rem}
  .article-attachment-size{display:none}
}

/* ── Blok "Pliki do pobrania" (znacznik [PLIKI] w treści artykułu) ──────── */
.article-files-box{
  position:relative;
  max-width:880px;
  margin:2.75rem 0 2.85rem;
  padding:2.35rem 1.6rem 1.6rem;
  border:3px solid transparent;
  border-radius:1.3rem;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(110deg,#5a22e8 0%,#8d31d9 40%,#e90073 100%) border-box;
}
/* Tytuł siedzi NA górnej krawędzi ramki i ją przecina — tak jak w projekcie
   (i tak jak napis w ramce „Aktualizacja”). Białe tło za tekstem „wycina”
   fragment gradientowej krawędzi, więc linie po bokach tytułu to po prostu
   sama krawędź ramki, a nie osobne ozdobniki. */
.pfile-head{
  position:absolute;
  top:0;
  left:clamp(2.6rem,7vw,4.9rem);
  transform:translateY(-50%);
  z-index:2;
  display:flex;
  align-items:center;
  padding:0 1.35rem;
  background:#fff;
}
/* Ozdobne linie nie są już potrzebne — ich rolę pełni sama krawędź ramki. */
.pfile-head-line{display:none}
.pfile-head h2{
  margin:0;
  white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(1.3rem,2.4vw,1.7rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.15;
  background:linear-gradient(100deg,#5a22e8,#e90073);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* ten sam powód co przy nagłówku galerii — patrz komentarz wyżej */
  padding-bottom:.18em;
  margin-bottom:-.18em;
  overflow:visible;
}
.pfile-list{display:flex;flex-direction:column;gap:1.15rem}
.pfile-row{
  display:flex;
  align-items:center;
  gap:1.3rem;
  padding:1.15rem 1.35rem;
  border:1px solid rgba(30,20,50,.09);
  border-radius:1.1rem;
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pfile-row:hover{border-color:rgba(208,0,95,.28);box-shadow:0 8px 22px rgba(90,34,232,.08)}
.pfile-icon{
  position:relative;
  width:3.7rem;
  height:4.25rem;
  flex-shrink:0;
  border-radius:.6rem;
  overflow:hidden;
  background:var(--pfile-light);
}
.pfile-icon-fold{
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 .95rem .95rem 0;
  border-color:transparent var(--pfile-fold) transparent transparent;
}
.pfile-icon-ext{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:.34rem 0;
  background:var(--pfile-band);
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.02em;
  text-align:center;
}
.pfile-icon--pdf{--pfile-light:#ffdede;--pfile-fold:#ff9c9c;--pfile-band:#e53e3e}
.pfile-icon--doc{--pfile-light:#dbe8ff;--pfile-fold:#8fb4f7;--pfile-band:#3b6fe0}
.pfile-icon--xls{--pfile-light:#d7f5e6;--pfile-fold:#7fdba8;--pfile-band:#1fa971}
.pfile-icon--ppt{--pfile-light:#ffe1d1;--pfile-fold:#ff9d6e;--pfile-band:#e8622c}
.pfile-icon--zip{--pfile-light:#ffe9bf;--pfile-fold:#ffc266;--pfile-band:#f2994a}
.pfile-icon--generic{--pfile-light:#e7eaee;--pfile-fold:#b8c0cb;--pfile-band:#6b7684}
.pfile-info{flex:1;min-width:0;max-width:100%}
.pfile-name{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  font-size:1.08rem;
  color:#181820;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  /* Nawet przy jednolinijkowym przycinaniu pozwalamy łamać bardzo długie
     nazwy — bez tego niełamliwy tekst tworzy dużą "minimalną szerokość",
     która potrafi rozepchnąć całą stronę w poziomie na wąskich ekranach. */
  overflow-wrap:anywhere;
  word-break:break-word;
}
.pfile-meta{margin-top:.2rem;color:#6b7280;font-size:.92rem}
.pfile-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  padding:.72rem 1.4rem;
  border-radius:999px;
  border:2px solid #d0005f;
  color:#d0005f;
  font-weight:800;
  font-size:.98rem;
  white-space:nowrap;
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.pfile-btn:hover{background:#d0005f;color:#fff}
.pfile-btn svg{width:18px;height:18px;flex-shrink:0}

/* ── Odtwarzacz "Odsłuchaj artykuł" (lektor) ───────────────────────────────
   Box i nagłówek dzielone z "Pliki do pobrania" (.article-files-box,
   .pfile-head) — tylko treść wewnątrz jest inna. */
.audio-player-row{display:flex;align-items:center;gap:1.2rem}
.audio-player-btn{
  flex-shrink:0;
  width:3.6rem;height:3.6rem;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,#5a22e8,#e90073);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(90,34,232,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.audio-player-btn:hover{transform:scale(1.05);box-shadow:0 10px 26px rgba(90,34,232,.38)}
.audio-player-btn:active{transform:scale(.97)}
.audio-player-btn svg{width:22px;height:22px}
.audio-player-btn .audio-icon-play{margin-left:2px}
.audio-player-body{flex:1;min-width:0}
.audio-player-title{font-size:.92rem;font-weight:700;color:#181820;margin-bottom:.55rem}
.audio-player-track{
  position:relative;
  height:6px;
  border-radius:999px;
  background:#ece7f3;
  cursor:pointer;
}
.audio-player-fill{
  position:absolute;top:0;left:0;bottom:0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#5a22e8,#e90073);
}
.audio-player-handle{
  position:absolute;top:50%;left:0%;
  width:14px;height:14px;
  border-radius:50%;
  background:#fff;
  border:2.5px solid #8d31d9;
  transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;
}
.audio-player-time{
  display:flex;
  justify-content:space-between;
  margin-top:.45rem;
  font-size:.76rem;
  color:#8b8f96;
  font-variant-numeric:tabular-nums;
}
.audio-player-error{
  margin-top:.6rem;
  padding:.55rem .8rem;
  border-radius:.6rem;
  background:#fdeaec;
  color:#b7004d;
  font-size:.82rem;
  font-weight:600;
  line-height:1.4;
}
/* Stan "buforowania" — plik jeszcze się ładuje/wczytuje po kliknięciu Play.
   Bez tego duży plik na wolniejszym łączu wyglądał jak martwy przycisk,
   bo nic się nie działo widocznie przez kilka sekund. */
.audio-player-btn.is-buffering{position:relative;color:transparent}
.audio-player-btn.is-buffering svg{opacity:0}
.audio-player-btn.is-buffering::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:1.3rem;height:1.3rem;
  margin:-0.65rem 0 0 -0.65rem;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:audioBtnSpin .7s linear infinite;
}
@keyframes audioBtnSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .audio-player-btn.is-buffering::after{animation:none}
}
@media (max-width:640px){
  .audio-player-btn{width:3.1rem;height:3.1rem}
  .audio-player-btn svg{width:19px;height:19px}
  .audio-player-title{font-size:.86rem}
}

@media (max-width:640px){
  .article-files-box{padding:2rem 1.1rem 1.1rem;border-radius:1.1rem;max-width:100%}
  .pfile-head{left:1rem;padding:0 .7rem;max-width:calc(100% - 2rem)}
  .pfile-head h2{white-space:normal;overflow-wrap:anywhere}
  .pfile-row{padding:.9rem 1rem;gap:.95rem;min-width:0}
  .pfile-icon{width:3.1rem;height:3.55rem}
  .pfile-btn span{display:none}
  .pfile-btn{padding:.68rem .85rem}
  /* Na wąskich ekranach długie nazwy plików ZAWIJAMY na dwie linie zamiast
     przycinać w jednej — jedna niełamliwa linia tworzy dużą minimalną
     szerokość, która potrafi rozepchnąć stronę w poziomie (a wtedy Safari
     na iOS dodatkowo automatycznie powiększa cały tekst artykułu). */
  .pfile-name{
    font-size:1rem;
    white-space:normal;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pfile-meta{font-size:.82rem}
}

/* ── Panel "spotlight" w sidebarze — plansza jako gotowa grafika ──────────── */
/* Uwaga: celowo neutralne nazwy klas (bez "ad"/"reklama") — inaczej filtry
   kosmetyczne blokerów reklam (AdBlock/uBlock) ukrywały ten element.
   Plansza domyślna oraz grafika klienta to po prostu obraz (plakat), dzięki
   czemu wygląda dokładnie tak, jak przygotowany projekt graficzny. */
.rail-poster{
  position:relative;
  display:block;
  border-radius:1.15rem;
  overflow:hidden;
  text-decoration:none;
  margin-bottom:1.5rem;
  line-height:0;
  transition:transform .25s ease;
}
.rail-poster img{width:100%;height:auto;display:block}
.rail-poster:hover{transform:translateY(-3px)}

/* Nakładka realizująca efekt "zmiana koloru podczas scrollowania".
   --hue-shift (0..1) ustawia JS wg pozycji planszy na ekranie; sterujemy
   przezroczystością różowo-fioletowej powłoki w trybie mieszania "overlay",
   więc kolory plakatu subtelnie "przelewają się" w miarę przewijania,
   bez zasłaniania treści. */
.rail-poster-hue{
  position:absolute;
  inset:0;
  pointer-events:none;
  --hue-shift:0;
  background:linear-gradient(150deg,
      rgba(90,34,232,.0) 0%,
      rgba(233,0,115,.45) 55%,
      rgba(255,120,60,.35) 100%);
  mix-blend-mode:overlay;
  opacity:calc(var(--hue-shift) * .7);
  transition:opacity .1s linear;
}

@media (prefers-reduced-motion: reduce){
  .rail-poster{transition:none}
  .rail-poster-hue{display:none}
}

/* Zabezpieczenie: nakładka barwiąca NIGDY nie dotyka grafiki klienta.
   Znacznik emitujemy już tylko dla planszy domyślnej (patrz index.php), ale
   ta reguła chroni też strony zapisane w pamięci przeglądarki oraz każdy
   przyszły kod, który dołożyłby nakładkę bez zastanowienia. Reklama ma
   wyglądać tak, jak ją przygotowano — zmiana barw marki to nie ozdobnik. */
.rail-poster--image:not(.rail-poster--default) .rail-poster-hue{display:none!important}
/* ── Podstrona „Podcast" — siatka albumów (podcast.php) ───────────────────── */
.podcast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem}
.podcast-album-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 6px 22px rgba(20,20,50,.07);transition:transform .18s ease,box-shadow .18s ease}
.podcast-album-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,20,50,.13)}
.podcast-album-cover{position:relative;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#b7004d;display:flex;align-items:center;justify-content:center}
.podcast-album-cover.is-empty{background:linear-gradient(135deg,#5a22e8,#e90073)}
.podcast-album-cover-icon{color:#fff;font-size:54px;opacity:.92}
.podcast-album-cover:not(.is-empty) .podcast-album-cover-icon{display:none}
.podcast-album-play{position:absolute;right:.7rem;bottom:.7rem;width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);transform:translateY(6px);opacity:0;transition:transform .18s ease,opacity .18s ease}
.podcast-album-card:hover .podcast-album-play{transform:translateY(0);opacity:1}
.podcast-album-play .material-symbols-outlined{color:#b7004d;font-size:28px}
.podcast-album-info{padding:.95rem 1.05rem 1.15rem}
.podcast-album-name{margin:0 0 .4rem;font-size:1.05rem;line-height:1.3;font-weight:700;color:#1c1c28}
.podcast-album-count{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#8a8a9a}
.podcast-album-count .material-symbols-outlined{font-size:17px}
.podcast-back-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:#b7004d;text-decoration:none}
.podcast-back-link:hover{text-decoration:underline}
@media(max-width:520px){.podcast-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}}

/* ── Podcast — hero konkretnego albumu (podcast.php, widok serii) ─────────── */
.podcast-album-hero{position:relative;overflow:hidden;padding:2.2rem 0 2.4rem;background:linear-gradient(135deg,#f3e9ff 0%,#fde6f1 55%,#f7f2ff 100%)}
.podcast-album-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(233,0,115,.18),transparent 70%);pointer-events:none}
.podcast-album-hero-back{margin-bottom:1.3rem}
.podcast-album-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:1.8rem}
.podcast-album-hero-cover{flex:0 0 auto;width:180px;height:180px;border-radius:1.1rem;background-size:cover;background-position:center;background-color:#b7004d;box-shadow:0 18px 42px rgba(90,34,232,.28);display:flex;align-items:center;justify-content:center}
.podcast-album-hero-cover.is-empty{background:linear-gradient(135deg,#5a22e8,#e90073)}
.podcast-album-hero-cover .material-symbols-outlined{color:#fff;font-size:64px;opacity:.92}
.podcast-album-hero-cover:not(.is-empty) .material-symbols-outlined{display:none}
.podcast-album-hero-text{flex:1;min-width:0}
.podcast-album-hero-title{margin:.55rem 0 .7rem;font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;font-weight:800;color:#1c1c28;letter-spacing:-.01em}
.podcast-album-hero-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem}
.podcast-album-hero-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .8rem;border-radius:999px;background:#fff;box-shadow:0 3px 12px rgba(20,20,50,.1);font-size:.9rem;font-weight:700;color:#b7004d}
.podcast-album-hero-badge .material-symbols-outlined{font-size:18px}
.podcast-album-hero-flow{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:600;color:#5a22e8}
.podcast-album-hero-flow .material-symbols-outlined{font-size:19px}
.podcast-album-hero-dot{color:#b9a8d8}
.podcast-album-hero-desc{margin:0;max-width:56ch;font-size:1rem;line-height:1.6;color:#5f5b70}
.podcast-album-player-section{padding-top:1.8rem}
@media(max-width:640px){
  .podcast-album-hero-inner{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .podcast-album-hero-cover{width:132px;height:132px}
  .podcast-album-hero-cover .material-symbols-outlined{font-size:48px}
}

/* ── Podcast — hero strony listy albumów (podcast.php, widok siatki) ──────────
   1:1 wg dołączonego projektu graficznego: mikrofon w prawym górnym rogu,
   dwa klastry fal (góra-lewo / dół-prawo) za kartami, wachlarz TRZECH
   okładek (malejących od lewej do prawej, środkowa najwyższa i na wierzchu),
   zakotwiczonych od dołu tak, by rozchylały się u góry. ───────────────────── */
.podcast-index-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#f3ecff 0%,#f8edf6 48%,#fbeaf3 100%)}
/* Ciemniejszy gradient w lewym dolnym rogu hero — czysto dekoracyjny akcent,
   leży pod treścią. Użyty ::before (nie ::after) i BEZ ujemnego z-index: przy
   ujemnym z-index pseudo-element malował się POD własnym tłem `.podcast-
   index-hero` (tym samym elementem), więc był całkowicie niewidoczny.
   ::before renderuje się nad tłem elementu, ale wciąż pod `.podcast-index-
   hero-grid` (prawdziwym dzieckiem, dalej w kolejności malowania). */
.podcast-index-hero::before{content:"";position:absolute;left:-10%;bottom:-18%;width:620px;height:620px;max-width:60%;background:radial-gradient(circle,rgba(43,13,87,.32),transparent 68%);pointer-events:none}
.podcast-index-hero-grid{position:relative;display:grid;grid-template-columns:11fr 9fr;align-items:center;gap:2.4rem;padding:3.4rem 0 3.4rem;min-height:500px}
.podcast-index-hero-left{position:relative;z-index:2}
.podcast-index-hero-title{margin:.6rem 0 .8rem;font-size:4.2rem;line-height:1.02;font-weight:800;letter-spacing:-.02em;color:#2b0d57}
.podcast-index-hero-lead{margin:0 0 1.8rem;max-width:46ch;font-size:1.15rem;line-height:1.65;color:#5f5b70}
.podcast-index-hero-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.podcast-index-feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem}
.podcast-index-feature-icon{width:52px;height:52px;border-radius:50%;background:#f0e6ff;display:flex;align-items:center;justify-content:center;color:#6123b6;box-shadow:0 6px 16px rgba(97,35,182,.16)}
.podcast-index-feature-icon .material-symbols-outlined{font-size:25px}
.podcast-index-feature-text{display:flex;flex-direction:column;line-height:1.25}
.podcast-index-feature-text strong{font-size:.9rem;color:#2b0d57;font-weight:700}
.podcast-index-feature-text small{font-size:.8rem;color:#8a8398}

/* Prawa strona — geometria zdjęta 1:1 z projektu graficznego:
   • duża różowa poświata w prawym górnym rogu całej strefy;
   • duży, GŁADKI mikrofon kapsułowy z koncentrycznymi pierścieniami,
     częściowo schowany ZA trzecią okładką (stojak znika za kartą);
   • fale = symetryczny waveform (paski rosną z osi środkowej, nie od dołu),
     schowane ZA okładkami: lewy klaster wystaje zza lewego górnego rogu
     card-1, prawy wystaje z prawej strony card-3;
   • trzy okładki: -8° / +2° / +10°, środkowa na wierzchu, malejące
     w prawo, zachodzące na siebie. Bez kropek w tle. */
.podcast-index-hero-visual{position:relative;z-index:1;min-height:500px}
.podcast-index-hero-visual::before{content:"";position:absolute;top:-16%;right:-16%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(238,110,215,.20),transparent 65%);pointer-events:none}

/* Mikrofon: duża gładka kapsuła z sheenem, pierścienie dźwięku dookoła.
   Leży pod kartami (z-index 0) — card-3 zasłania jego stojak, jak w
   projekcie. */
/* Mikrofon jako gotowa grafika (assets/img/podcast-mic.png). Obraz zawiera
   już własne tło i pierścienie dźwięku, więc nie dokładamy tu poświaty ani
   pierścieni — jedynie miękko wtapiamy kwadratowe krawędzie w tło hero
   (radialna maska), żeby grafika nie wyglądała jak wklejony prostokąt. */
.podcast-index-hero-mic{position:absolute;top:-24%;right:-22%;width:430px;height:430px;display:flex;align-items:center;justify-content:center;z-index:0;opacity:.6}
.podcast-mic-img{width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 74%);mask-image:radial-gradient(circle at 50% 50%,#000 56%,transparent 74%);filter:drop-shadow(0 14px 28px rgba(120,60,230,.18))}

/* Waveform: paski wyrastają symetrycznie z OSI ŚRODKOWEJ (align-items:center).
   Lewy klaster = crescendo (rośnie w stronę karty), prawy = decrescendo
   (opada od karty) — jak dźwięk „wydobywający się” zza okładek. Klastry
   leżą ZA kartami i tylko częściowo zza nich wystają. */
.podcast-index-hero-waves{position:absolute;display:flex;align-items:center;gap:7px;opacity:.6;z-index:0;pointer-events:none}
.podcast-index-hero-waves-tl{left:-4%;top:20%;height:210px}
.podcast-index-hero-waves-br{right:-100px;top:48%;height:180px}
.podcast-index-hero-waves i{width:6px;border-radius:4px;background:linear-gradient(180deg,#f7b8e2,#ee62b0);animation:podcastWave 1.8s ease-in-out infinite}
.podcast-index-hero-waves i:nth-child(odd){animation-duration:2.2s}
.podcast-index-hero-waves i:nth-child(3n){animation-duration:1.5s}
/* Lewy klaster: crescendo z lekkim jitterem */
.podcast-index-hero-waves-tl i:nth-child(1){height:10%}.podcast-index-hero-waves-tl i:nth-child(2){height:18%}
.podcast-index-hero-waves-tl i:nth-child(3){height:14%}.podcast-index-hero-waves-tl i:nth-child(4){height:26%}
.podcast-index-hero-waves-tl i:nth-child(5){height:22%}.podcast-index-hero-waves-tl i:nth-child(6){height:36%}
.podcast-index-hero-waves-tl i:nth-child(7){height:30%}.podcast-index-hero-waves-tl i:nth-child(8){height:48%}
.podcast-index-hero-waves-tl i:nth-child(9){height:40%}.podcast-index-hero-waves-tl i:nth-child(10){height:62%}
.podcast-index-hero-waves-tl i:nth-child(11){height:52%}.podcast-index-hero-waves-tl i:nth-child(12){height:78%}
.podcast-index-hero-waves-tl i:nth-child(13){height:66%}.podcast-index-hero-waves-tl i:nth-child(14){height:92%}
.podcast-index-hero-waves-tl i:nth-child(15){height:80%}.podcast-index-hero-waves-tl i:nth-child(16){height:100%}
/* Prawy klaster: decrescendo z lekkim jitterem */
.podcast-index-hero-waves-br i:nth-child(1){height:100%}.podcast-index-hero-waves-br i:nth-child(2){height:82%}
.podcast-index-hero-waves-br i:nth-child(3){height:90%}.podcast-index-hero-waves-br i:nth-child(4){height:66%}
.podcast-index-hero-waves-br i:nth-child(5){height:74%}.podcast-index-hero-waves-br i:nth-child(6){height:52%}
.podcast-index-hero-waves-br i:nth-child(7){height:58%}.podcast-index-hero-waves-br i:nth-child(8){height:38%}
.podcast-index-hero-waves-br i:nth-child(9){height:44%}.podcast-index-hero-waves-br i:nth-child(10){height:26%}
.podcast-index-hero-waves-br i:nth-child(11){height:30%}.podcast-index-hero-waves-br i:nth-child(12){height:14%}
@keyframes podcastWave{0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.podcast-index-hero-waves i{animation:none}}

/* Trzy okładki wg projektu: card-1 (lewa) duża, -8°; card-2 (środek) na
   wierzchu, +2°, lekko wyżej; card-3 (prawa) najmniejsza, +10°, nad
   mikrofonem/stojakiem ale pod card-2. */
.podcast-index-hero-cards{position:absolute;inset:0;z-index:1}
.podcast-index-card{position:absolute;border-radius:20px;overflow:hidden;background-size:cover;background-position:center;background-color:#2b0d57;box-shadow:0 26px 50px rgba(43,13,87,.30);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.podcast-index-card.is-empty{background:linear-gradient(135deg,#5a22e8,#e90073)}
.podcast-index-card .material-symbols-outlined{color:#fff;font-size:46px;opacity:.9}
.podcast-index-card.card-1{left:4%;top:26%;width:250px;height:350px;transform:rotate(-8deg);z-index:3}
.podcast-index-card.card-2{left:39%;top:21%;width:235px;height:330px;transform:rotate(2deg);z-index:2}
.podcast-index-card.card-3{left:68%;top:30%;width:210px;height:295px;transform:rotate(10deg);z-index:1}
.podcast-index-card.card-1:hover{transform:rotate(-8deg) scale(1.03);z-index:4}
.podcast-index-card.card-2:hover{transform:rotate(2deg) scale(1.03);z-index:4}
.podcast-index-card.card-3:hover{transform:rotate(10deg) scale(1.03);z-index:4}

@media(max-width:1024px){
  .podcast-index-hero-grid{gap:1.8rem;padding:4.6rem 0 5.2rem;min-height:0}
  .podcast-index-hero-title{font-size:3.3rem}
  .podcast-index-hero-features{gap:1rem}
  .podcast-index-hero-visual{min-height:480px}
  .podcast-index-card.card-1{width:196px;height:274px}
  .podcast-index-card.card-2{width:184px;height:258px}
  .podcast-index-card.card-3{width:164px;height:230px}
  .podcast-index-hero-mic{width:290px;height:290px}
  .podcast-index-hero-waves-tl{height:150px}
  .podcast-index-hero-waves-br{height:130px;right:-60px}
}
@media(max-width:768px){
  /* Poziomy padding kontenera jest tu nadpisywany skrótem `padding` siatki,
     więc jawnie przywracamy boczne odstępy, żeby tekst nie dotykał krawędzi. */
  .podcast-index-hero-grid{grid-template-columns:1fr;gap:1.4rem;min-height:0;padding:2.4rem 1.35rem 3rem}
  .podcast-index-hero-visual{min-height:360px;order:2}
  .podcast-index-hero-left{order:1;margin-top:0}
  .podcast-index-hero-title{font-size:2.4rem}
  .podcast-index-hero-lead{font-size:1.02rem}
  .podcast-index-hero-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
  .podcast-index-card.card-1{width:150px;height:210px}
  .podcast-index-card.card-2{width:140px;height:196px}
  .podcast-index-card.card-3{width:124px;height:174px}
  /* Mikrofon: w prawym górnym rogu bloku wizualnego, mniejszy i wyraźnie
     rozjaśniony (niższe opacity), żeby był tylko subtelnym tłem za kartami. */
  .podcast-index-hero-mic{top:-2%;right:-8%;width:170px;height:170px;opacity:.42}
  .podcast-index-hero-waves-tl{height:100px}
  .podcast-index-hero-waves-br{height:88px;right:-24px}
}


/* ── Źródła pod artykułem ────────────────────────────────────────────────
   Jedna linia, po przecinku, drobnym drukiem. Cienka kreska u góry oddziela
   je od tekstu bez rysowania ramki czy tła — mają być przypisem, nie kolejną
   sekcją konkurującą z treścią. Kolor i rozmiar jak nota o prawach w stopce
   artykułu, żeby drobny druk w serwisie wyglądał spójnie. */
.article-sources{display:block;max-width:820px;margin:1.6rem auto 0;padding-top:.85rem;
  border-top:1px solid rgba(24,28,35,.1);
  font-size:.78rem;line-height:1.6;color:var(--text-soft,#606567)}
.article-sources-label{font-weight:800;color:var(--text,#2c2f30)}
.article-sources a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(24,28,35,.28)}
.article-sources a:hover{color:var(--primary,#b7004d);text-decoration-color:currentColor}
@media(max-width:640px){
  .article-sources{margin-top:1.25rem;font-size:.74rem}
}


/* ── Rotacja reklam w prawym pasku ───────────────────────────────────────
   Slajdy leżą jeden na drugim, przełącza je przezroczystość. Wysokość
   kontenera bierze się z PIERWSZEJ reklamy (pozostałe są pozycjonowane
   absolutnie) — dzięki temu pasek nie skacze przy każdej zmianie, nawet gdy
   grafiki mają różne proporcje. Bez rotacji kontener jest zwykłym blokiem
   i nic się nie zmienia względem poprzedniego układu. */
/* ── Oznaczenie materiału płatnego ───────────────────────────────────────
   Podpis ma być czytelny, ale nie konkurować z samą reklamą: drobny, rozstrzelony
   wersalik w szarości, jaką serwis stosuje dla drobnego druku. Opakowanie
   przejmuje dolny odstęp od kafelka, żeby podpis przylegał do obrazu, a nie
   wisiał w połowie drogi do następnego okienka. */
.rail-spot{margin-bottom:1.5rem}
.rail-spot .rail-poster{margin-bottom:0}
.rail-spot-label{
  margin-top:.3rem;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  /* Pełne krycie, nie przygaszenie. Przy .75 podpis dawał kontrast 3,24:1 —
     poniżej progu czytelności WCAG AA (4,5:1). To oznaczenie wymagane prawem,
     ma nie budzić wątpliwości, więc estetyczne stonowanie nie może odbywać się
     kosztem czytelności. Sam kolor zapewnia 5,4:1 na tle paska i 5,9:1 na bieli. */
  color:var(--text-soft,#606567);
  line-height:1.2;
}

.rail-poster-rotator{position:relative}
.rail-poster-rotator.is-rotating > .rail-poster{
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.rail-poster-rotator.is-rotating > .rail-poster.is-active{opacity:1;pointer-events:auto}
.rail-poster-rotator.is-rotating > .rail-poster:not(:first-child){
  position:absolute;inset:0;width:100%}
.rail-poster-rotator.is-rotating > .rail-poster:not(:first-child) img{
  width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion: reduce){
  /* Skrypt i tak nie przewija, ale gdyby klasa została ustawiona serwerowo,
     nie chcemy dodatkowo animować przejścia. */
  .rail-poster-rotator.is-rotating > .rail-poster{transition:none}
}


/* ── Zdjęcie z podpisem w treści artykułu ────────────────────────────────
   Podpis to nie akapit tekstu, tylko przypis do obrazu — dlatego mniejszy,
   szary i kursywą, wyraźnie odróżnialny od zdania, które czytelnik właśnie
   czytał. Reguły obejmują też starsze zdjęcia wstawione bez klasy, żeby po
   dodaniu podpisu wyglądały tak samo jak nowe. */
.article-body figure,
.article-body .article-figure{margin:1.6rem 0;padding:0}
.article-body figure img{display:block;width:100%;height:auto;border-radius:10px;margin:0}
.article-body figcaption{
  margin-top:.55rem;
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-soft,#606567);
  font-style:italic;
  /* Cienka kreska po lewej zamiast ramki dookoła — sygnalizuje przypisanie
     do obrazu, nie dokłada kolejnego prostokąta do i tak gęstej strony. */
  padding-left:.7rem;
  border-left:2px solid rgba(24,28,35,.14);
}
@media(max-width:640px){
  .article-body figure,
  .article-body .article-figure{margin:1.25rem 0}
  .article-body figcaption{font-size:.78rem;padding-left:.55rem}
}

/* ── Odnośnik prawny w dolnym pasku stopki ────────────────────────────────────
   Kolor bierzemy z --primary (5,94:1 na tle stopki #eef1f4), a nie z koloru
   pozostałego tekstu paska — ten ma kontrast 2,84:1 i na odnośniku, który ma
   być klikany, byłoby to za mało. Podkreślenie zostaje, żeby odnośnik dawało
   się rozpoznać także bez rozróżniania kolorów. */
.footer-legal{margin:0;flex:0 0 auto}
.footer-legal a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:.18em}
.footer-legal a:hover,.footer-legal a:focus-visible{text-decoration-thickness:2px}
@media(max-width:900px){
  .footer-legal{order:3}
}

/* ── Pasek informacji o ciasteczkach ──────────────────────────────────────────
   Świadomie NIE blokuje strony nakładką. Serwis nie używa ciasteczek
   marketingowych ani zewnętrznych systemów śledzących, więc zasłanianie treści
   do czasu kliknięcia byłoby udawaniem zgody, której nie potrzebujemy — a przy
   okazji karą dla czytelnika, który przyszedł przeczytać artykuł.

   Pasek pojawia się dopiero po wczytaniu strony (klasa is-widoczny), żeby nie
   „mrugał" u osób, które już podjęły decyzję. */
.cookie-pasek{
  /* z-index niżej niż okna modalne (community-modal ma 1200): pasek stoi w kodzie
     na końcu strony, więc przy równym z-index przykrywałby otwarte okno. */
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  display:none;
  background:#0f0a1a;color:#fff;
  border-top:3px solid var(--primary,#b7004d);
  box-shadow:0 -12px 32px rgba(15,10,26,.22);
  padding:1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
}
.cookie-pasek.is-widoczny{display:block}
.cookie-pasek-wnetrze{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
}
.cookie-pasek-tresc{flex:1 1 420px;min-width:0;margin:0;font-size:.88rem;line-height:1.65;color:rgba(255,255,255,.88)}
.cookie-pasek-tresc strong{display:block;color:#fff;font-size:.95rem;margin-bottom:.2rem}
/* #ff9ec1 na #0f0a1a = 9,6:1 — biały odnośnik zlewałby się z tekstem obok. */
.cookie-pasek-tresc a{color:#ff9ec1;text-decoration:underline;text-underline-offset:.18em}
.cookie-pasek-akcje{flex:0 0 auto;display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-pasek-btn{
  appearance:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.85rem;font-weight:800;
  padding:.7rem 1.4rem;border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cookie-pasek-btn:hover{transform:translateY(-1px)}
.cookie-pasek-btn:focus-visible{outline:3px solid #ff9ec1;outline-offset:2px}
.cookie-pasek-btn-glowny{background:#fff;color:#8a0039}       /* 8,9:1 */
.cookie-pasek-btn-drugi{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
@media(max-width:760px){
  .cookie-pasek-wnetrze{gap:.9rem}
  .cookie-pasek-akcje{width:100%}
  .cookie-pasek-btn{flex:1 1 auto;text-align:center}
}

/* ══════════════════════════════════════════════════════════════════════════
   „Strzegom w krótkich rolkach” — karuzela pionowych filmów 9:16
   ══════════════════════════════════════════════════════════════════════════ */
.rolki-section{position:relative;overflow:hidden;padding:0 0 4rem;background:#fbf7f6}
.rolki-shell{position:relative;z-index:3;padding-top:3.5rem}

.rolki-tlo{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Różowa poświata schodzi z paska nawigacji i gaśnie w górnej części sekcji —
   w projekcie kolor nie jest rozlany po całym tle, tylko schodzi z góry. */
.rolki-poswiata{position:absolute;left:0;right:0;top:0;height:320px;
  background:linear-gradient(180deg,rgba(183,0,77,.16) 0%,rgba(137,48,176,.10) 42%,transparent 100%)}

/* Archiwalne zdjęcia miasta po obu stronach — w tym projekcie są wyraźniejsze
   niż poprzednio i sięgają całej wysokości nagłówka. Maska wygasza je w stronę
   środka, żeby nie wchodziły pod tekst. */
.rolki-foto{position:absolute;top:0;height:100%;background-size:cover;
  filter:grayscale(1) sepia(.22) contrast(1.02)}
.rolki-foto-l{left:0;width:clamp(220px,23vw,400px);background-image:var(--rolki-foto-l,none);
  background-position:right center;opacity:.30;
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%)}
.rolki-foto-p{right:0;width:clamp(220px,25vw,430px);background-image:var(--rolki-foto-p,none);
  background-position:left center;opacity:.26;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
  mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%)}

/* ── Nagłówek: tekst do lewej, karta licznika po prawej ─────────────────── */
/* Karta licznika stoi TUŻ ZA tytułem, a nie przy prawej krawędzi sekcji.
   Odstęp odpowiada długości kropkowanej nitki, która oba elementy łączy —
   zmierzone na projekcie: tytuł kończy się ~225 px przed kartą przy szerokości
   1672 px, czyli mniej więcej 13,5% szerokości okna. */
/* Tytuł i licznik tworzą JEDNĄ grupę, wyśrodkowaną w sekcji — w projekcie
   nie są dosunięte do krawędzi kolumny, tylko stoją mniej więcej pośrodku.
   Sam tekst wewnątrz pozostaje wyrównany do lewej. */
.rolki-naglowek{display:flex;align-items:center;justify-content:center;
  gap:clamp(2.5rem,13.5vw,14rem);margin:0 0 2.5rem}
.rolki-naglowek-tekst{max-width:none;flex:0 1 auto}

.rolki-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .9rem;
  font-size:.8rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--primary,#b7004d)}
.rolki-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.06;letter-spacing:-.035em;
  color:#15101a;margin:0 0 1rem}
/* Odręczne podkreślenie pod ostatnim słowem. position:relative na rodzicu,
   żeby kreska trzymała się słowa niezależnie od tego, gdzie złamie się wiersz. */
.rolki-title-akcent{position:relative;display:inline-block}
.rolki-podkreslenie{position:absolute;left:0;right:0;bottom:-.24em;width:100%;height:.34em;
  color:var(--primary,#b7004d);overflow:visible}
.rolki-lead{margin:0;font-size:1rem;line-height:1.7;color:#6b6068}

.rolki-licznik-blok{position:relative;flex:0 0 auto}
/* Kropkowana nitka biegnie od tytułu do karty i KOŃCZY SIĘ KROPKĄ dokładnie
   przy jej lewej krawędzi — tak jest w projekcie. Szerokość idzie w parze
   z odstępem w nagłówku, więc linia zawsze wypełnia przerwę między nimi. */
.rolki-nitka{position:absolute;right:100%;top:58%;transform:translateY(-50%);
  width:clamp(110px,13vw,205px);height:auto;
  color:rgba(183,0,77,.55);pointer-events:none}
.rolki-licznik{position:relative;display:flex;align-items:center;gap:1rem;
  padding:1rem 1.6rem;border-radius:1.25rem;background:#fff;
  box-shadow:0 16px 38px -20px rgba(28,17,25,.20)}
/* Kółko, nie kwadrat — sprawdzone na powiększeniu projektu. */
.rolki-licznik-ikona{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:rgba(183,0,77,.10);color:var(--primary,#b7004d);
  display:flex;align-items:center;justify-content:center}
.rolki-licznik-tresc{display:flex;flex-direction:column;line-height:1.2}
.rolki-licznik-tresc strong{font-size:1.6rem;font-weight:800;color:#15101a}
.rolki-licznik-tresc span{font-size:.8rem;color:#6b6068}

/* ── Karuzela ─────────────────────────────────────────────────────────────
   Strzałki i okno są elementami jednego rzędu, więc nie mają jak na siebie
   nachodzić. Tor przesuwamy transformacją, a kolejność kart zmienia skrypt. */
.rolki-karuzela{
  display:flex;align-items:center;justify-content:center;gap:1.1rem}
/* Wysokość okna ustala skrypt i NIE zmienia się w trakcie przesuwania.
   Karty mają stałe proporcje 9:16, więc razem z szerokością animuje się ich
   wysokość — w połowie ruchu najwyższa karta była o ~80 px niższa niż
   w spoczynku i cała strona podskakiwała. Przy ustalonej wysokości okna
   sekcja ma zawsze ten sam rozmiar. Zapas w pionie mieści też cień
   powiększonej karty, który wcześniej był ucinany krawędzią okna. */
.rolki-okno{position:relative;flex:1 1 auto;min-width:0;
  display:flex;align-items:center;padding:0;
  /* clip-path zamiast overflow:hidden — przycina TYLKO po bokach (tam kryjemy
     karty wyjeżdżające poza kadr), a w pionie zostawia zapas, żeby poświata
     powiększonej karty nie kończyła się prostą, poziomą krawędzią. */
  overflow:visible;clip-path:inset(-140px 0)}
.rolki-tor{display:flex;align-items:center;gap:15px;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}

/* Szerokość i krycie nadaje skrypt — zależą od GNIAZDA, w którym karta stoi,
   a tego CSS sam nie wie. Dzięki temu, że różnicę wielkości robi szerokość,
   a nie zmniejszanie, przerwą między kartami jest zwykły odstęp z układu:
   jednakowy między każdą parą, tak jak w projekcie.
   Czas trwania animacji szerokości MUSI być taki sam jak przesuwania toru —
   inaczej karta rosłaby wolniej, niż wjeżdża na środek. */
.rolki-karta{flex:0 0 auto;width:236px;
  transition:width .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease}

.rolki-karta-media{position:relative;display:block;width:100%;aspect-ratio:9/16;
  border-radius:1.25rem;overflow:hidden;background:#141017;cursor:pointer;
  box-shadow:0 16px 36px -18px rgba(21,16,26,.45)}
/* Cienka obwódka tuż przy krawędzi kadru — jak w projekcie. Wcześniej był to
   gruby pierścień z rozmytą poświatą, przez co ramka wyglądała na doklejoną. */
/* Poświata złożona z trzech warstw o rosnącym rozmyciu — pojedyncza dawała
   wyraźnie odciętą plamę pod kartą. Ujemne rozproszenie zostało zdjęte, bo to
   ono ściągało cień w zwarty kształt z widoczną krawędzią. */
.rolki-karta.is-aktywna .rolki-karta-media{
  box-shadow:0 0 0 2px var(--primary,#b7004d),
             0 6px 18px rgba(183,0,77,.16),
             0 16px 44px rgba(183,0,77,.14),
             0 30px 80px rgba(183,0,77,.10)}
.rolki-karta-media img,.rolki-karta-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04)}
.rolki-karta-media:focus-visible{outline:3px solid var(--primary,#b7004d);outline-offset:4px}

/* Przycisk odtwarzania wg projektu: białe koło, w środku pełny różowy trójkąt
   zajmujący 1/5 szerokości koła. Rozmiar podany w procentach szerokości kadru,
   bo karty w karuzeli zmieniają szerokość — dzięki temu przycisk skaluje się
   razem z miniaturą. Zmierzone na projekcie: koło 66 px na karcie 272 px
   (24,5%) w powiększeniu i 53 px na kartach 169–181 px (~30%). */
.rolki-play{position:absolute;left:50%;top:50%;
  width:clamp(34px,30%,56px);aspect-ratio:1;height:auto;border-radius:50%;
  background:#fff;color:#d60f68;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 22px -6px rgba(21,16,26,.38),0 2px 6px rgba(21,16,26,.12);
  transition:transform .2s ease,width .45s cubic-bezier(.22,.61,.36,1)}
.rolki-karta.is-aktywna .rolki-play{width:clamp(40px,24.5%,68px)}
/* Trójkąt wypełnia całą grafikę, więc jego rozmiar to wprost szerokość svg.
   Lekkie przesunięcie w prawo to optyczne wyśrodkowanie — środek ciężkości
   trójkąta leży bliżej podstawy niż wierzchołka. */
.rolki-play svg{width:20%;height:auto;display:block;transform:translateX(10%)}
.rolki-karta-media:hover .rolki-play{transform:translate(-50%,-50%) scale(1.09)}

/* Kapsułka „Najnowsza rolka" — geometria zmierzona na projekcie w miejscu,
   gdzie wcześniej było „Teraz oglądasz": 108x38 px przy karcie 272 px,
   odsunięta 15 px od lewej i 12 px od góry. Uwaga: procent w „top" liczy się
   od wysokości kadru (9:16), nie od szerokości — stąd 2,5%, a nie 4,4%. */
.rolki-plakietka{position:absolute;left:5.5%;top:2.5%;z-index:2;
  display:inline-flex;align-items:center;gap:.42rem;
  padding:.42rem .8rem .42rem .55rem;border-radius:999px;
  background:linear-gradient(100deg,#c9186c 0%,#e6237a 45%,#fa4a74 100%);
  color:#fff;box-shadow:0 6px 16px -6px rgba(183,0,77,.55);
  pointer-events:none}
.rolki-plakietka svg{width:16px;height:16px;flex:0 0 auto}
.rolki-plakietka span{font-size:10px;line-height:1.18;font-weight:800;
  letter-spacing:.055em;text-transform:uppercase;text-align:left;
  max-width:6.4em}

.rolki-karta-stopka{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1rem 1.05rem;
  background:linear-gradient(180deg,transparent,rgba(10,6,12,.55) 40%,rgba(10,6,12,.9) 100%);
  text-align:left}
.rolki-karta-dash{display:block;width:20px;height:3px;border-radius:2px;
  background:var(--primary,#b7004d);margin-bottom:.55rem}
.rolki-karta-tytul{margin:0 0 .3rem;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;line-height:1.22;color:#fff;font-weight:800;letter-spacing:-.01em}
.rolki-karta-data{margin:0;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.8);font-weight:600}

.rolki-strzalka{position:relative;z-index:4;flex:0 0 auto;
  width:48px;height:48px;border-radius:50%;border:0;
  background:#fff;color:#15101a;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -12px rgba(28,17,25,.4);transition:transform .18s ease,color .18s ease}
.rolki-strzalka:hover{color:var(--primary,#b7004d);transform:scale(1.07)}
.rolki-strzalka:focus-visible{outline:3px solid var(--primary,#b7004d);outline-offset:3px}

/* ── Pasek postępu z segmentów ─────────────────────────────────────────── */
.rolki-postep{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin:.5rem auto 0;max-width:860px}
.rolki-segmenty{display:flex;align-items:center;gap:.5rem;flex:1 1 auto}
.rolki-segmenty-l{justify-content:flex-end}
.rolki-segmenty-p{justify-content:flex-start}
.rolki-segmenty i{display:block;flex:1 1 auto;max-width:150px;height:3px;border-radius:999px;
  background:rgba(28,17,25,.13);transition:background .3s ease}
.rolki-segmenty i.jest{background:var(--primary,#b7004d)}
.rolki-postep-liczby{flex:0 0 auto;font-size:.88rem;font-weight:700;color:#57505a;letter-spacing:.04em}

.rolki-cta{margin-top:2.5rem;text-align:center}
.rolki-cta-btn{display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 2.1rem;border-radius:999px;background:#fff;
  border:1.5px solid var(--primary,#b7004d);color:var(--primary,#b7004d);
  font-weight:800;font-size:.95rem;text-decoration:none;
  box-shadow:0 12px 30px -18px rgba(183,0,77,.6);
  transition:background .18s ease,color .18s ease,transform .18s ease}
.rolki-cta-btn:hover{background:var(--primary,#b7004d);color:#fff;transform:translateY(-1px)}
.rolki-cta-btn:focus-visible{outline:3px solid var(--primary,#b7004d);outline-offset:3px}

@media(max-width:1100px){
  .rolki-nitka{display:none}
}
@media(max-width:900px){
  .rolki-shell{padding-top:2.5rem}
  .rolki-naglowek{flex-direction:column;gap:1.5rem}
  .rolki-licznik-blok{padding-top:0}
  .rolki-karta{width:190px}
  .rolki-strzalka{width:42px;height:42px}
  .rolki-foto{opacity:.18}
}
@media(max-width:560px){
  .rolki-karta{width:168px}
  .rolki-plakietka{padding:.28rem .58rem .28rem .42rem;gap:.34rem}
  .rolki-plakietka svg{width:13px;height:13px}
  .rolki-plakietka span{font-size:8.5px}
  .rolki-tor{gap:10px}
  .rolki-karuzela{gap:.5rem}
  .rolki-strzalka{width:38px;height:38px}
  .rolki-postep{gap:.6rem}
  .rolki-segmenty i{max-width:60px}
}
@media(prefers-reduced-motion:reduce){
  .rolki-tor{transition:none}
  .rolki-karta{transition:none}
}

/* Archiwum rolek (/rolki) — siatka; karty dziedziczą wygląd z modułu głównego. */
.rolki-archiwum{padding:3rem 0 4.5rem;background:linear-gradient(180deg,#fdf7f4 0%,#fbf4f1 100%)}
.rolki-archiwum-licznik{margin:0 0 1.75rem;font-size:.88rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--primary,#b7004d)}
.rolki-archiwum-grid{display:grid;gap:1.35rem;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
/* W archiwum karty nie są ani przygaszone, ani powiększane — to nie karuzela,
   więc nie ma tu pojęcia „karty aktywnej". */
.rolki-archiwum-grid .rolki-karta{width:auto;opacity:1;transform:none}
@media(max-width:560px){
  .rolki-archiwum-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
}

/* ══ PASEK INFORMACYJNY ════════════════════════════════════════════════════
   Taśma jak w serwisach telewizyjnych: nieruchoma etykieta przy lewej
   krawędzi i treść przewijająca się bez końca. Ciemne tło jest tu celowe —
   pasek leży między jasnym sliderem a jasną sekcją „Najważniejsze dziś”
   i musi je rozdzielić, a nie wtopić się w jedno z nich.               */
/* Pasek siedzi w tym samym .container co slider, więc jego krawędzie
   wypadają równo z kartą nad nim. Tło i zaokrąglenie idą na .ticker-belka,
   a nie na sekcję — inaczej ciemny prostokąt rozlałby się na całą szerokość
   okna, poza obrys treści. */
.ticker{color:#fff;position:relative;z-index:1;
  background:var(--surface,#f5f6f7);padding:0 0 .9rem}
/* Sekcja pod paskiem ma standardowe 4rem odstępu u góry, co razem z odstępem
   paska dawało prawie 90 px pustki między taśmą a kapsułką „Tematy dnia”.
   Skracamy TYLKO ten jeden styk, zamiast ruszać .section w całym serwisie. */
.ticker + .section{padding-top:2.75rem}
.ticker-belka{display:flex;align-items:stretch;min-height:52px;
  background:#1b1020;border-radius:1rem;overflow:hidden;
  box-shadow:var(--card-shadow,0 20px 40px rgba(44,47,48,.06))}

/* Etykieta NIE przewija się razem z treścią, więc musi być poza oknem
   z animacją. flex:0 0 auto trzyma jej szerokość niezależnie od długości
   taśmy — inaczej przy długiej treści zaczęłaby się zwężać. */
.ticker-etykieta{flex:0 0 auto;display:flex;align-items:center;
  padding:0 1.15rem;background:var(--primary,#b7004d);color:#fff;
  font-weight:800;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap}

.ticker-okno{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center;
  /* maska wygaszająca treść przy obu krawędziach — bez niej zdania
     ucinają się w pół litery na twardej krawędzi kadru */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

.ticker-tasma{display:flex;align-items:center;white-space:nowrap;will-change:transform;
  animation:tkJazda var(--tk-czas,30s) linear infinite}
.ticker-grupa{display:inline-flex;align-items:center;flex:0 0 auto}

/* Domyślne -50% działa dla dwóch kopii wypisanych w HTML, więc pasek jedzie
   nawet przy wyłączonym JavaScripcie. Skrypt podmienia tę wartość na dokładną
   szerokość jednej kopii w pikselach, gdy dołoży kolejne. */
@keyframes tkJazda{
  from{transform:translateX(0)}
  to{transform:translateX(var(--tk-przesuw,-50%))}
}

/* Zatrzymanie przy najechaniu i przy dojściu klawiaturą — bez tego odnośnika
   na ruchomym pasku praktycznie nie da się kliknąć.
   Warunek wisi na .ticker-belka, czyli na samej ciemnej taśmie, a nie na
   sekcji: sekcja rozciąga się na całą szerokość okna razem z marginesami,
   więc pasek stawał też wtedy, gdy kursor był daleko obok niego. */
.ticker-belka:hover .ticker-tasma,
.ticker-belka:focus-within .ticker-tasma{animation-play-state:paused}

.ticker-wpis{display:inline-flex;align-items:center;gap:.5rem;
  color:#f3eef5;text-decoration:none;font-size:.93rem;line-height:1.2}
a.ticker-wpis:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
a.ticker-wpis:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.ticker-wpis.is-wyrozniony .ticker-tekst{font-weight:700;color:#fff}

/* Plakietka wyróżnienia. Żółte tło zamiast różowego: różowy jest kolorem
   etykiety po lewej, więc powtórzony w treści przestałby cokolwiek wyróżniać. */
.ticker-plakietka{flex:0 0 auto;padding:.16rem .5rem;border-radius:4px;
  background:#ffd60a;color:#231a00;
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

.ticker-kropka{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.34);margin:0 1.5rem;flex:0 0 auto}

@media(max-width:640px){
  .ticker{padding-bottom:1rem}
  .ticker-belka{min-height:46px;border-radius:.75rem}
  .ticker-etykieta{padding:0 .8rem;font-size:.7rem;letter-spacing:.06em}
  .ticker-wpis{font-size:.86rem}
  .ticker-kropka{margin:0 1rem}
}

/* Ruch bez końca jest męczący dla osób z nadwrażliwością przedsionkową,
   a dla części po prostu utrudnia czytanie. Przy włączonym ograniczeniu
   animacji pasek staje i daje się przewinąć palcem albo kółkiem myszy. */
@media(prefers-reduced-motion:reduce){
  .ticker-tasma{animation:none}
  .ticker-okno{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ticker-grupa:not(:first-child){display:none}
}

/* ══ ANKIETA NA LIŚCIE „NAJWAŻNIEJSZE DZIŚ" ════════════════════════════════
   Pasek stoi między kartami artykułów i dziedziczy ich szerokość z kolumny,
   więc nie ustawiamy mu własnej - wyróżniamy go kolorem i obramowaniem.   */
.home-poll{
  position:relative;background:linear-gradient(135deg,#fff 0%,#fdf2f7 100%);
  border:1px solid rgba(183,0,77,.22);border-radius:1.1rem;
  padding:1.35rem 1.45rem;box-shadow:0 14px 34px -22px rgba(183,0,77,.45)}
/* Pionowy akcent w barwie marki - ten sam sygnał, co przy wyróżnionych
   kartach w panelu, więc pasek od razu czyta się jako „nie artykuł". */
.home-poll::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:0 3px 3px 0;background:var(--primary,#b7004d)}

.home-poll-head{margin-bottom:1rem}
.home-poll-kicker{display:inline-block;margin-bottom:.4rem;
  font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--primary,#b7004d)}
.home-poll-question{margin:0;font-size:1.12rem;line-height:1.35;
  letter-spacing:-.01em;color:var(--text,#2c2f30)}

.home-poll-options{display:grid;gap:.5rem}
.home-poll-option{display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.72rem .95rem;border:1px solid var(--outline,#cfd3d6);border-radius:.7rem;
  background:#fff;color:var(--text,#2c2f30);font-size:.95rem;text-align:left;
  cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.home-poll-option:hover{border-color:var(--primary,#b7004d);background:#fff6fa}
.home-poll-option:active{transform:translateY(1px)}
.home-poll-option:focus-visible{outline:3px solid var(--primary,#b7004d);outline-offset:2px}
.home-poll-option[disabled]{opacity:.6;cursor:progress}
.home-poll-dot{flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--outline,#cfd3d6)}
.home-poll-option:hover .home-poll-dot{border-color:var(--primary,#b7004d)}

.home-poll-results{display:grid;gap:.75rem}
.home-poll-result-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.home-poll-result-label{font-size:.93rem;color:var(--text,#2c2f30)}
.home-poll-twoj{margin-left:.4rem;padding:.1rem .4rem;border-radius:4px;
  background:var(--primary,#b7004d);color:#fff;font-size:.64rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase}
.home-poll-result-num{font-weight:800;color:var(--primary,#b7004d);font-size:.95rem}
.home-poll-bar{height:9px;margin:.3rem 0 .2rem;border-radius:999px;
  background:var(--surface-high,#e6e8ea);overflow:hidden}
/* Szerokość ustawiana w HTML-u, animacja tylko dla efektu po zagłosowaniu. */
.home-poll-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--primary,#b7004d),var(--secondary,#8930b0));
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.home-poll-result.is-moja .home-poll-bar i{
  background:linear-gradient(90deg,var(--primary,#b7004d),#ff5f9e)}
.home-poll-result-votes{font-size:.78rem;color:var(--text-soft,#606567)}

.home-poll-note{margin:.85rem 0 0;font-size:.78rem;color:var(--text-soft,#606567)}
.home-poll-blad{margin:.7rem 0 0;font-size:.82rem;color:#b91c1c;font-weight:600}

@media(max-width:560px){
  .home-poll{padding:1.15rem 1.1rem;border-radius:.9rem}
  .home-poll-question{font-size:1.02rem}
  .home-poll-option{padding:.65rem .8rem;font-size:.9rem}
}

@media(prefers-reduced-motion:reduce){
  .home-poll-bar i{transition:none}
}

/* ══ NAKŁADKA BUFOROWANIA WIDEO ════════════════════════════════════════════
   Pokazuje się, gdy odtwarzacz czeka na zapas materiału - przy starcie
   i po wyczerpaniu bufora w trakcie. Bez niej krótka pauza wygląda na
   zawieszenie odtwarzacza.                                                */
.hb-bufor{
  position:absolute;inset:0;z-index:4;display:none;
  align-items:center;justify-content:center;gap:.7rem;flex-direction:column;
  background:rgba(10,6,12,.42);color:#fff;pointer-events:none}
.hb-bufor.jest{display:flex}
.hb-bufor-kolko{width:42px;height:42px;border-radius:50%;
  border:3px solid rgba(255,255,255,.28);border-top-color:#fff;
  animation:hbObrot .8s linear infinite}
.hb-bufor-tekst{font-size:.85rem;font-weight:600;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
@keyframes hbObrot{to{transform:rotate(360deg)}}

/* Scena własnego odtwarzacza musi mieć układ względny, żeby nakładka
   pokryła sam film, a nie całą stronę. Przy lightboxie pozycjonowanie
   jest już ustawione. */
.hv-stage{position:relative}

@media(prefers-reduced-motion:reduce){
  .hb-bufor-kolko{animation-duration:2s}
}

/* ── Zdjęcie w tle górnej części strony (Ustawienia w panelu) ──────────────
   Warstwa leży POD całą treścią: z-index -1 w głównym kontekście nakładania
   rysuje się zaraz po tle <html>, a przed wszystkim innym. Żeby to działało,
   <body> nie może mieć własnego tła - inaczej przykryłoby zdjęcie. Kolor
   strony daje wtedy <html> (ten sam --surface), więc zdjęcie, wygaszone
   maską do przezroczystości, łączy się dokładnie z kolorem tła poniżej.

   Przejście ma kilka przystanków zamiast jednego liniowego: zwykły gradient
   od pełnego krycia do zera zostawia na jasnym tle widoczną „krawędź” tam,
   gdzie zaczyna się zanikanie. Krzywa łagodna na obu końcach jej nie ma. */
.page-top-bg{
  position:absolute;top:0;left:0;right:0;z-index:-1;
  height:var(--ptb-h,700px);overflow:hidden;pointer-events:none;
  opacity:var(--ptb-opacity,.35);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.82) 52%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.28) 80%,rgba(0,0,0,.09) 91%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.82) 52%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.28) 80%,rgba(0,0,0,.09) 91%,transparent 100%)}
.page-top-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--ptb-pos,center center)}
@media (max-width:760px){.page-top-bg{height:calc(var(--ptb-h,700px) * .7)}}
@media print{.page-top-bg{display:none}}

/* Wierzchnie sekcje, które dotąd malowały po prostu kolor strony, robią się
   przezroczyste - inaczej zasłoniłyby zdjęcie w całości. Sekcje w INNYM
   kolorze niż strona (białe, jasnoszare) dopasowuje skrypt w footer.php:
   dostają gradient od przezroczystości do własnego koloru. Karty, pasek menu,
   slider i ramki zostają nietknięte: leżą NA zdjęciu, tak jak powinny. */
body.has-top-bg{background:transparent!important}
body.has-top-bg #site-shell,
body.has-top-bg .home-hero-shell,
body.has-top-bg .ticker,
body.has-top-bg .page-header,
body.has-top-bg .article-hero-modern:not(.has-hero-bg),
body.has-top-bg .article-hero-editorial:not(.has-hero-bg),
body.has-top-bg .history-mag-main{background:transparent!important}
/* Historia ma odrobinę inny kolor strony niż reszta serwisu - <html> musi go
   przejąć, żeby przejście nie kończyło się widoczną różnicą odcieni. */
html:has(body.has-top-bg.history-page){background:#f5f6f7}
html:has(body.has-top-bg.history-magazine-page){background:#f3f5f6}

/* ── „Obserwuj nas” pod treścią artykułu ────────────────────────────────────
   Ciemny gradient marki - ten sam ciąg barw co pasek menu (fiolet -> róż),
   żeby moduł wyglądał jak część serwisu, a nie wklejony widżet portalu
   społecznościowego. Dlatego ikony są w barwach HaloStrzegom, nie w
   firmowych kolorach Facebooka i TikToka.

   Animacja wejścia korzysta z osobnych właściwości „translate”, „scale”
   i „rotate”, a NIE z „transform”: animacja z wypełnieniem „both” zostawia
   swoje wartości na stałe i przykryłaby uniesienie przycisku po najechaniu,
   które używa „transform”. Osobne właściwości składają się z nim zamiast go
   nadpisywać. */
.article-follow{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.25rem;margin-top:1rem;padding:1.1rem 1.15rem 1.1rem 1.35rem;border-radius:1.25rem;
  background:linear-gradient(115deg,#240b4a 0%,#4a157e 38%,#8a1f86 70%,#b7004d 100%);color:#fff;box-shadow:0 18px 36px rgba(74,21,126,.22)}
.article-follow-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 88% 0%,rgba(255,255,255,.16),transparent 38%),radial-gradient(circle at 0% 120%,rgba(232,24,109,.42),transparent 46%)}
/* Tekst zawija się pierwszy; przyciski trzymają się jednego rzędu, a gdy
   brakuje miejsca, cały rząd schodzi pod tekst - nigdy jeden pod drugim z boku. */
.article-follow-copy{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1 1 240px}
.article-follow-copy span{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:#ffd1e6}
.article-follow-copy strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;line-height:1.3;color:#fff}
.article-follow-links{display:flex;gap:.6rem;flex:0 0 auto;flex-wrap:nowrap}
.article-follow-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.4rem 1.05rem .4rem .4rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);color:#fff;text-decoration:none;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease}
.article-follow-btn:hover,.article-follow-btn:focus-visible{background:#fff;border-color:#fff;color:#2c2f30;transform:translateY(-2px);box-shadow:0 12px 24px rgba(20,4,40,.3)}
.article-follow-btn:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}
.article-follow-ico{width:2.25rem;height:2.25rem;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#fff;color:#8930b0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .25s ease,color .25s ease}
.article-follow-ico svg{display:block}
.article-follow-btn:hover .article-follow-ico,.article-follow-btn:focus-visible .article-follow-ico{transform:rotate(-10deg) scale(1.08);background:linear-gradient(135deg,#b7004d,#8930b0);color:#fff}
.article-follow-txt{display:flex;flex-direction:column;line-height:1.15}
.article-follow-txt b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.92rem}
.article-follow-txt small{font-size:.72rem;opacity:.85}

/* Wejście - tylko gdy skrypt dodał .js-anim (bez JS moduł widać od razu). */
.article-follow.js-anim:not(.is-in){opacity:0}
.article-follow.js-anim.is-in{animation:afKarta .6s cubic-bezier(.2,.8,.2,1) both}
.article-follow.js-anim.is-in .article-follow-btn{animation:afWjazd .55s cubic-bezier(.2,.8,.2,1) .15s both}
.article-follow.js-anim.is-in .article-follow-btn + .article-follow-btn{animation-delay:.27s}
.article-follow.js-anim.is-in .article-follow-ico{animation:afIkona .65s cubic-bezier(.34,1.56,.64,1) .3s both}
.article-follow.js-anim.is-in .article-follow-btn + .article-follow-btn .article-follow-ico{animation-delay:.42s}
@keyframes afKarta{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes afWjazd{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes afIkona{from{scale:.4;rotate:-25deg}to{scale:1;rotate:0deg}}

@media (max-width:640px){
  .article-follow{flex-direction:column;align-items:stretch;padding:1rem}
  /* W układzie kolumnowym flex-basis działałby na WYSOKOŚĆ - stąd flex:none. */
  .article-follow-copy{flex:none}
  .article-follow-links{display:grid;grid-template-columns:1fr 1fr}
  .article-follow-btn{padding-right:.6rem}
}
@media (max-width:360px){.article-follow-links{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .article-follow-btn,.article-follow-ico{transition:background .2s ease,color .2s ease,border-color .2s ease}
  .article-follow-btn:hover,.article-follow-btn:focus-visible,
  .article-follow-btn:hover .article-follow-ico,.article-follow-btn:focus-visible .article-follow-ico{transform:none}
}

/* ── Slider: kółko odliczające czas do następnego slajdu ────────────────────
   Obwód okręgu o promieniu 15 to 94,25 - o tyle przesuwamy kreskę, żeby
   „narysowała się” w czasie trwania slajdu (--hero-czas ustawia skrypt).
   Środek pokazuje pauzę, a po wstrzymaniu - trójkąt „odtwórz”. */
.hero-nav-row{display:flex;align-items:center;gap:.85rem}
/* Kółko w prawym dolnym rogu okna slidera (na życzenie redakcji), a nie
   w rzędzie kropek. Kotwicą jest cała karta slidera - na telefonie, gdzie
   tekst schodzi pod zdjęcie, to wciąż prawy dolny róg karty. */
.hero-split-card{position:relative}
.hero-split-card .hero-timer{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3}
@media (max-width:760px){.hero-split-card .hero-timer{right:1rem;bottom:1rem}}
.hero-timer{position:relative;flex:0 0 auto;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:none;color:var(--primary,#b7004d);cursor:pointer;transition:transform .2s ease}
.hero-timer:hover{transform:scale(1.08)}
.hero-timer:focus-visible{outline:3px solid var(--primary,#b7004d);outline-offset:3px}
.hero-timer svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.hero-timer-track{fill:none;stroke:rgba(44,47,48,.14);stroke-width:3}
.hero-timer-bar{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25}
.hero-timer.is-run .hero-timer-bar{animation:heroCzas var(--hero-czas,5s) linear forwards}
.hero-timer.is-paused .hero-timer-bar{animation-play-state:paused}
@keyframes heroCzas{to{stroke-dashoffset:0}}
.hero-timer-ico{position:absolute;inset:0;display:grid;place-items:center}
.hero-timer-ico::before{content:"";box-sizing:border-box;width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.hero-timer.is-stopped .hero-timer-ico::before{width:0;height:0;margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
@media (prefers-reduced-motion:reduce){.hero-timer{transition:none}.hero-timer:hover{transform:none}}

/* ── Trzy banery pod paskiem informacyjnym (kampanie 3-5) ───────────────────
   Pas ma szerokość kontenera - dokładnie tę samą co pasek „Ważne” nad nim -
   więc trzy banery razem nigdy go nie przekraczają. Każde miejsce ma stałe
   proporcje 2:1 (zalecany baner 1200x600 px); grafika w innych proporcjach
   jest kadrowana do środka, a nie rozciągana, żeby pas zawsze miał równą
   wysokość. Na telefonie banery stają jeden pod drugim. */
.spot-pasmo{padding:1rem 0 0}
.spot-pasmo-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.spot-pasmo-miejsce{position:relative;aspect-ratio:2/1;border-radius:1rem;overflow:hidden;background:#eff1f2;
  box-shadow:0 10px 24px rgba(44,47,48,.08);transition:transform .22s ease,box-shadow .22s ease}
.spot-pasmo-miejsce:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(44,47,48,.14)}
.spot-pasmo-rotator{position:absolute;inset:0}
.spot-pasmo-rotator > .rail-poster{position:absolute;inset:0;width:100%;margin:0;border-radius:0}
.spot-pasmo-rotator > .rail-poster:hover{transform:none}
.spot-pasmo-rotator > .rail-poster img{width:100%;height:100%;object-fit:cover;object-position:center}
.spot-pasmo-rotator > .rail-poster:focus-visible{outline:3px solid #ffd60a;outline-offset:-4px}
.spot-pasmo-etykieta{position:absolute;top:.5rem;left:.5rem;z-index:2;padding:.18rem .5rem;border-radius:999px;
  background:rgba(255,255,255,.9);color:#3a3d3f;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;pointer-events:none}

@media (max-width:1000px){
  .spot-pasmo-siatka{gap:.75rem}
}
/* Wariant „między artykułami” - pas stoi w kolumnie „Najważniejsze dziś”
   jako jeden z elementów listy (odstępy daje sama lista), a banery są
   wyższe, 3:2, bo kolumna jest węższa niż cała strona. */
.spot-pasmo--articles{padding:0}
.spot-pasmo--articles .spot-pasmo-miejsce{aspect-ratio:3/2;border-radius:1.15rem}

/* Kropki karuzeli - tylko na telefonie i tylko gdy działa skrypt. */
.spot-pasmo-kropki{display:none}
/* Przycisk ma 24x24 px (minimalny cel dotyku), a widoczna kropka jest
   rysowana w środku pseudo-elementem - wygląda drobno, trafia się łatwo. */
.spot-pasmo-kropka{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:999px}
.spot-pasmo-kropka::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(44,47,48,.25);transition:width .25s ease,background .25s ease}
.spot-pasmo-kropka.is-aktywna::before{width:22px;background:var(--primary,#b7004d)}
.spot-pasmo-kropka:focus-visible{outline:3px solid var(--primary,#b7004d);outline-offset:3px}
@media (max-width:700px){
  .spot-pasmo-siatka{grid-template-columns:1fr;gap:.85rem}
  /* Karuzela: wszystkie trzy miejsca w tej samej komórce siatki - wysokość
     wyznacza proporcja 2:1, a widać tylko aktywne. Bez skryptu (brak klasy
     .is-karuzela) banery po prostu stoją jeden pod drugim. */
  /* Schowane banery są przesunięte o 16 px w bok (efekt wjazdu) - przycinamy
     je w poziomie, żeby nie wystawały poza kolumnę i nie dawały poziomego
     przewijania strony. „clip”, a nie „hidden”: cień banera w pionie zostaje. */
  .spot-pasmo.is-karuzela .spot-pasmo-siatka{gap:0;overflow-x:clip}
  .spot-pasmo.is-karuzela .spot-pasmo-miejsce{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(16px);
    transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
  .spot-pasmo.is-karuzela .spot-pasmo-miejsce.is-pasmo-aktywne{opacity:1;visibility:visible;transform:none;
    transition:opacity .45s ease,transform .45s ease,visibility 0s}
  .spot-pasmo.is-karuzela .spot-pasmo-kropki{display:flex;justify-content:center;gap:.15rem;margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .spot-pasmo-miejsce:hover{transform:none}
}

/* ── Atrapa „Miejsce na Twoją reklamę” ─────────────────────────────────────
   Ma wyglądać jak gotowa reklama, a nie makieta: trzy warianty kolorów marki
   z ilustracją (megafon, sklep, rosnący wykres), naklejka z ceną i przycisk.
   Rozmiary liczymy w jednostkach kontenera (cqw = 1% szerokości banera), bo
   ten sam baner ma od 237 do ok. 400 px szerokości - zależnie od ekranu
   i od tego, czy stoi pod paskiem, czy między artykułami. Przeglądarki bez
   obsługi zapytań kontenerowych biorą wartości stałe podane wcześniej. */
.spot-pasmo-miejsce{container-type:inline-size}
.spot-pasmo-atrapa{position:absolute;inset:0;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  padding:0 6%;color:#fff;text-decoration:none;background:var(--spa-bg)}
.spot-pasmo-atrapa--m1{--spa-bg:linear-gradient(125deg,#240b4a 0%,#561894 55%,#a3127a 100%);--spa-glow:rgba(255,77,166,.42);--spa-akcent:#8930b0}
.spot-pasmo-atrapa--m2{--spa-bg:linear-gradient(125deg,#2b0a3d 0%,#860a4c 55%,#c9461c 100%);--spa-glow:rgba(255,160,60,.38);--spa-akcent:#b7004d}
.spot-pasmo-atrapa--m3{--spa-bg:linear-gradient(125deg,#141046 0%,#33269a 55%,#8f36c0 100%);--spa-glow:rgba(120,170,255,.38);--spa-akcent:#33269a}
.spa-tlo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 84% 72%,var(--spa-glow),transparent 42%),
             radial-gradient(circle at 104% -12%,rgba(255,255,255,.2),transparent 38%)}
/* Kropkowana faktura tylko po prawej - pod tekstem tło zostaje spokojne. */
.spa-tlo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.7px) 0 0/14px 14px;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 55%);mask-image:linear-gradient(to left,#000 0%,transparent 55%)}

.spa-ilustracja{position:absolute;right:7%;bottom:11%;width:110px;width:31cqw;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.035)}
.spa-ilustracja svg{width:46%;height:46%;display:block;transition:scale .35s cubic-bezier(.34,1.56,.64,1)}

.spa-cena{position:absolute;top:9%;right:6%;z-index:2;display:flex;flex-direction:column;align-items:center;
  padding:.38em .62em .32em;border-radius:.7rem;background:#ffd60a;color:#2a0b3d;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1;
  font-size:.85rem;font-size:clamp(.66rem,4.1cqw,1.05rem);rotate:-7deg;box-shadow:0 8px 18px rgba(20,4,40,.28);
  transition:rotate .3s cubic-bezier(.34,1.56,.64,1)}
.spa-cena b{font-size:1.12em;white-space:nowrap}
.spa-cena small{margin-top:.18em;font-size:.68em;font-weight:700;white-space:nowrap}

.spa-tresc{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;max-width:58%}
.spa-kicker{font-size:.62rem;font-size:clamp(.55rem,2.5cqw,.7rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffd1e6}
.spa-tytul{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.01em;
  font-size:1.2rem;font-size:clamp(.95rem,6.3cqw,1.6rem)}
.spa-cta{display:inline-flex;align-items:center;gap:.4em;margin-top:.15rem;padding:.5em .95em;border-radius:999px;background:#fff;
  color:var(--spa-akcent);font-weight:800;line-height:1.1;white-space:nowrap;
  font-size:.72rem;font-size:clamp(.64rem,3cqw,.82rem);box-shadow:0 6px 14px rgba(20,4,40,.2);transition:gap .2s ease}

.spot-pasmo-atrapa:hover .spa-cta,.spot-pasmo-atrapa:focus-visible .spa-cta{gap:.75em}
.spot-pasmo-atrapa:hover .spa-cena,.spot-pasmo-atrapa:focus-visible .spa-cena{rotate:-2deg}
.spot-pasmo-atrapa:hover .spa-ilustracja svg,.spot-pasmo-atrapa:focus-visible .spa-ilustracja svg{scale:1.12}
.spot-pasmo-atrapa:focus-visible{outline:3px solid #ffd60a;outline-offset:-4px}

/* Ilustracja lekko unosi się w miejscu - każda w innym rytmie, żeby trzy
   banery nie „oddychały” równo jak metronom. */
@media (prefers-reduced-motion:no-preference){
  .spa-ilustracja svg{animation:spaUnos 4.8s ease-in-out infinite}
  .spot-pasmo-atrapa--m2 .spa-ilustracja svg{animation-delay:-1.6s}
  .spot-pasmo-atrapa--m3 .spa-ilustracja svg{animation-delay:-3.2s}
}
@keyframes spaUnos{0%,100%{translate:0 0}50%{translate:0 -7%}}
@media (prefers-reduced-motion:reduce){.spa-cena,.spa-cta,.spa-ilustracja svg{transition:none}}

/* Wąski baner (tablet, 3 obok siebie): bez ilustracji i nadtytułu - tekst
   i cena dostają całą szerokość. */
@container (max-width:300px){
  /* Na wąskim banerze naklejka z rogu zachodziłaby na tytuł - staje więc
     w kolumnie, nad nim, a całość układa się od góry do dołu. */
  .spot-pasmo-atrapa{flex-direction:column;align-items:flex-start;justify-content:center;gap:.45rem;padding:0 7%}
  .spa-kicker{display:none}
  /* Ilustracja zostaje, ale jako duży, przygaszony znak w rogu - za tekstem,
     bez koła. Baner dalej wygląda graficznie, a nic nie zasłania tytułu. */
  .spa-ilustracja{z-index:-1;right:-7%;bottom:-16%;width:150px;width:50cqw;background:none;border:0;box-shadow:none;opacity:.2}
  .spa-ilustracja svg{width:70%;height:70%}
  .spa-cena{position:static;flex-direction:row;align-items:baseline;gap:.3em;padding:.3em .55em;rotate:-3deg;font-size:.7rem}
  .spa-cena small{margin-top:0}
  .spa-tresc{max-width:84%;gap:.4rem}
  .spa-tytul{font-size:clamp(.9rem,7.2cqw,1.2rem)}
  /* Na wąskim banerze tytuł sięga jaśniejszej, prawej części gradientu -
     zamiast poświaty przyciemniamy ją, żeby biały tekst miał kontrast >= 4,5:1. */
  .spa-tlo{background:linear-gradient(90deg,transparent 30%,rgba(16,4,36,.42) 100%),
                      radial-gradient(circle at 104% -12%,rgba(255,255,255,.12),transparent 38%)}
}

/* ── Podstrona /wspolpraca - oferta reklamowa ───────────────────────────────
   Ten sam język wizualny co atrapy banerów i moduł „Obserwuj nas”: ciemny
   gradient marki, żółta naklejka z ceną, białe karty na jasnym tle. */
.wsp{color:#2c2f30}
.wsp-g1{background:linear-gradient(125deg,#240b4a 0%,#561894 55%,#a3127a 100%)}
.wsp-g2{background:linear-gradient(125deg,#2b0a3d 0%,#860a4c 55%,#c9461c 100%)}
.wsp-g3{background:linear-gradient(125deg,#141046 0%,#33269a 55%,#8f36c0 100%)}
.wsp-ik{width:1.35rem;height:1.35rem;flex:0 0 auto;display:block}
.wsp-kicker{display:inline-block;margin-bottom:.8rem;padding:.35rem .9rem;border-radius:999px;background:#fde3ef;color:#b7004d;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.wsp-kicker--jasny{background:rgba(255,255,255,.14);color:#ffd1e6}
.wsp h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 .7rem}
.wsp h2 em{font-style:normal;color:#b7004d}
.wsp-lead{max-width:46rem;color:#55595c;font-size:1.05rem;line-height:1.6;margin:0 0 1.8rem}
.wsp-sekcja{padding:3.5rem 0}
.wsp-sekcja--jasna{background:#fff}

.wsp-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:.95rem;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.wsp-btn:hover{transform:translateY(-2px)}
.wsp-btn:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}
.wsp-btn--bialy{background:#fff;color:#4a157e;box-shadow:0 10px 24px rgba(20,4,40,.25)}
.wsp-btn--obrys{color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.wsp-btn--obrys:hover{background:rgba(255,255,255,.12)}

/* hero */
.wsp-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:4.5rem 0 4rem;background:#240b4a}
.wsp-hero-tlo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,rgba(36,11,74,.97) 0%,rgba(74,21,126,.86) 45%,rgba(183,0,77,.55) 100%),
             url('../img/cta-city-bg.png') center/cover}
.wsp-hero-siatka{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:center}
.wsp-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;letter-spacing:-.025em;margin:0 0 1rem;max-width:16ch;color:#fff}
.wsp-hero p{max-width:40rem;font-size:1.1rem;line-height:1.6;color:#f3e6f3;margin:0 0 1.6rem}
.wsp-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.wsp-hero-naklejka{display:flex;flex-direction:column;align-items:center;padding:1.1rem 1.6rem .95rem;border-radius:1.2rem;background:#ffd60a;color:#2a0b3d;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1;rotate:-6deg;box-shadow:0 18px 40px rgba(20,4,40,.35);margin-right:1rem}
.wsp-hero-naklejka b{font-size:2.6rem;white-space:nowrap}
.wsp-hero-naklejka small{font-size:1rem;margin-top:.4rem}

/* karty „dlaczego” */
.wsp-siatka3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.wsp-karta,.wsp-usluga,.wsp-baner,.wsp-wcenie,.wsp-rabat,.wsp-pakiet,.wsp-dodatek,.wsp-warunki,.wsp-krok{background:#fff;border-radius:1.25rem;box-shadow:0 10px 28px rgba(44,47,48,.07)}
.wsp-sekcja--jasna .wsp-karta,.wsp-sekcja--jasna .wsp-usluga,.wsp-sekcja--jasna .wsp-baner,.wsp-sekcja--jasna .wsp-wcenie,.wsp-sekcja--jasna .wsp-rabat,
.wsp-sekcja--jasna .wsp-pakiet:not(.is-wyrozniony),.wsp-sekcja--jasna .wsp-dodatek{background:#f7f6f9;box-shadow:none;border:1px solid #ece9f0}
.wsp-karta{padding:1.3rem 1.3rem 1.4rem}
.wsp-ikw{width:2.6rem;height:2.6rem;border-radius:.8rem;display:inline-grid;place-items:center;color:#fff;margin-bottom:.8rem}
.wsp-karta h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.08rem;line-height:1.25;margin:0 0 .4rem}
.wsp-karta p{color:#55595c;font-size:.94rem;line-height:1.55;margin:0}

/* banery */
.wsp-banery{display:grid;gap:1rem}
.wsp-baner{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:1.4rem;align-items:center;padding:1.1rem 1.4rem}
.wsp-baner-podglad{position:relative;justify-self:center;width:100%;max-height:7.5rem;border-radius:.8rem;color:#fff;display:flex;align-items:center;padding:0 .9rem;overflow:hidden}
.wsp-baner:nth-child(3) .wsp-baner-podglad{width:auto;height:7.5rem}
.wsp-baner-podglad span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.85rem;line-height:1.1;max-width:60%}
.wsp-baner-podglad .wsp-ik{position:absolute;right:.6rem;bottom:.5rem;width:2.2rem;height:2.2rem;opacity:.35}
.wsp-znak{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b7004d;margin-bottom:.25rem}
.wsp-baner h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;margin:0 0 .3rem}
.wsp-baner p{color:#55595c;font-size:.95rem;line-height:1.5;margin:0}
.wsp-fmt{display:inline-block;margin-top:.55rem;padding:.25rem .7rem;border-radius:999px;background:#efe7f8;color:#4a157e;font-size:.78rem;font-weight:700}
.wsp-cena{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1;white-space:nowrap;text-align:right}
.wsp-cena b{font-size:2.3rem;letter-spacing:-.02em}
.wsp-cena small{font-size:.85rem;font-weight:700;color:#606567}
.wsp-cena span{display:block;margin-top:.35rem;font-family:'Manrope',sans-serif;font-size:.74rem;font-weight:600;color:#606567}
.wsp-cena--mala{text-align:left}
.wsp-cena--mala b{font-size:1.75rem}
.wsp-wcenie{margin-top:1.2rem;padding:1.3rem 1.4rem}
.wsp-wcenie h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;margin:0 0 .8rem}
.wsp-lista2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.6rem;list-style:none;margin:0;padding:0}
.wsp-lista2 li,.wsp-warunki li,.wsp-pakiet li,.wsp-k360 li{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;line-height:1.45}
.wsp-lista2 .wsp-ik,.wsp-warunki .wsp-ik,.wsp-pakiet .wsp-ik{width:1.15rem;height:1.15rem;color:#b7004d;margin-top:.12rem}
.wsp-rabaty{display:grid;grid-template-columns:minmax(10rem,auto) repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1.2rem}
.wsp-rabaty-tyt{border-radius:1.25rem;padding:1rem 1.3rem;color:#fff;display:flex;flex-direction:column;justify-content:center}
.wsp-rabaty-tyt b{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem}
.wsp-rabaty-tyt span{font-size:.85rem;color:#f3e6f3}
.wsp-rabat{padding:1rem;text-align:center}
.wsp-rabat b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;color:#b7004d;line-height:1.1}
.wsp-rabat span{font-size:.88rem;color:#55595c}

/* usługi */
.wsp-podtyt{display:flex;align-items:center;gap:.7rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.3rem;margin:1.6rem 0 1rem}
.wsp-podtyt .wsp-ikw{margin:0;width:2.2rem;height:2.2rem}
.wsp-uslugi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.wsp-uslugi--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.wsp-usluga{padding:1.25rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.wsp-usluga-glowa{display:flex;align-items:center;gap:.6rem}
.wsp-usluga-glowa .wsp-ik{width:1.6rem;height:1.6rem;color:#8930b0}
.wsp-usluga h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;line-height:1.25;margin:0}
.wsp-usluga p{color:#55595c;font-size:.93rem;line-height:1.5;margin:0;flex:1}

/* pakiety */
.wsp-pakiety{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;align-items:stretch;padding-top:.8rem}
.wsp-pakiet{position:relative;padding:1.6rem 1.4rem;display:flex;flex-direction:column}
.wsp-pakiet.is-wyrozniony{color:#fff;background:linear-gradient(160deg,#240b4a 0%,#4a157e 40%,#8a1f86 75%,#b7004d 100%);box-shadow:0 20px 44px rgba(74,21,126,.32)}
.wsp-pakiet.is-wyrozniony .wsp-cena small,.wsp-pakiet.is-wyrozniony .wsp-cena span{color:#ecdcf0}
.wsp-pakiet.is-wyrozniony .wsp-ik{color:#ffd60a}
.wsp-wstazka{position:absolute;top:-.8rem;right:1.2rem;padding:.35rem .8rem;border-radius:999px;background:#ffd60a;color:#2a0b3d;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.wsp-haslo{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8930b0}
.wsp-pakiet.is-wyrozniony .wsp-haslo,.wsp-haslo--jasne{color:#ffd1e6}
.wsp-pakiet h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.7rem;margin:.2rem 0 .7rem}
.wsp-pakiet .wsp-cena{text-align:left}
.wsp-pakiet ul,.wsp-k360 ul{list-style:none;margin:1.1rem 0 1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.wsp-oszcz{margin-top:auto;align-self:flex-start;padding:.35rem .85rem;border-radius:999px;background:#e3f6ec;color:#0f6b40;font-size:.82rem;font-weight:800}
.wsp-pakiet.is-wyrozniony .wsp-oszcz,.wsp-oszcz--zolte{background:#ffd60a;color:#2a0b3d}
.wsp-k360{margin-top:1.4rem;border-radius:1.5rem;color:#fff;padding:2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
.wsp-k360 h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;margin:.3rem 0 .5rem}
.wsp-k360 p{color:#f3e6f3;margin:0}
.wsp-k360 ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.5rem}
.wsp-k360 .wsp-ik{width:1.15rem;height:1.15rem;color:#ffd60a;margin-top:.12rem}
.wsp-k360-cena{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.wsp-k360-cena s{color:#ecdcf0;font-size:.9rem}
.wsp-k360-cena .wsp-cena b{font-size:2.8rem}
.wsp-k360-cena .wsp-cena small,.wsp-k360-cena .wsp-cena span{color:#ecdcf0}
.wsp-k360-cena .wsp-oszcz{align-self:flex-end;margin-top:.3rem}
.wsp-dodatek{margin-top:1.1rem;padding:1.1rem 1.4rem;display:flex;gap:1rem;align-items:center}
.wsp-dodatek > .wsp-ik{width:2rem;height:2rem;color:#b7004d}
.wsp-dodatek div{flex:1}
.wsp-dodatek b{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem}
.wsp-dodatek p{margin:.15rem 0 0;color:#55595c;font-size:.92rem}
.wsp-dodatek strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.3rem;white-space:nowrap}

/* warunki, kroki, kontakt */
.wsp-warunki{list-style:none;margin:1rem 0 0;padding:1.4rem 1.5rem;display:grid;gap:.65rem}
.wsp-kroki{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.4rem 0}
.wsp-krok{padding:1.3rem}
.wsp-krok span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2rem;line-height:1;color:#b7004d}
.wsp-krok b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;margin:.5rem 0 .25rem}
.wsp-krok p{margin:0;color:#55595c;font-size:.93rem}
.wsp-kontakt{border-radius:1.5rem;color:#fff;padding:2.2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
.wsp-kontakt h2{color:#fff;margin-bottom:.4rem}
.wsp-kontakt p{color:#f3e6f3;margin:0}
.wsp-kontakt-cta{display:flex;flex-direction:column;gap:.7rem;align-items:stretch}

@media (max-width:900px){
  .wsp-hero-siatka{grid-template-columns:1fr}
  .wsp-hero-naklejka{justify-self:start;margin:0 0 0 .4rem}
  .wsp-siatka3,.wsp-uslugi,.wsp-pakiety,.wsp-kroki{grid-template-columns:1fr}
  .wsp-pakiety{gap:1.6rem}
  .wsp-baner{grid-template-columns:7rem minmax(0,1fr)}
  .wsp-baner .wsp-cena{grid-column:1/-1;text-align:left}
  .wsp-rabaty{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wsp-rabaty-tyt{grid-column:1/-1}
  .wsp-k360,.wsp-kontakt{grid-template-columns:1fr;padding:1.6rem}
  .wsp-k360-cena{align-items:flex-start}.wsp-k360-cena .wsp-oszcz{align-self:flex-start}
  .wsp-k360 ul{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wsp-sekcja{padding:2.6rem 0}
  .wsp-hero{padding:3rem 0}
  .wsp-uslugi--4,.wsp-lista2{grid-template-columns:1fr}
  .wsp-baner{grid-template-columns:1fr}
  .wsp-baner-podglad{max-width:14rem;justify-self:start}
  .wsp-rabaty{grid-template-columns:1fr}
  .wsp-dodatek{flex-wrap:wrap;align-items:flex-start}
  .wsp-dodatek div{flex:1 1 calc(100% - 3rem)}
  .wsp-dodatek strong{flex-basis:100%;padding-left:3rem}
  .wsp-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.wsp-btn{transition:none}.wsp-btn:hover{transform:none}}


/* odnośnik do Strefy partnera w kontakcie na /wspolpraca */
.wsp-kontakt .wsp-kontakt-strefa{margin-top:.7rem;font-size:.92rem;color:#f3e6f3}
.wsp-kontakt-strefa a{color:#ffd60a;font-weight:800}

/* ── Strefa partnera (/strefa-partnera) - panel reklamodawcy ───────────────
   Ten sam język co /wspolpraca: ciemny gradient marki w pasie u góry, białe
   karty na jasnym tle. Klasy sp-* - bez słów „ad”/„reklama”, które filtry
   reklam ukrywają po samej nazwie. */
.sp{color:#2c2f30;background:#f4f3f7;min-height:60vh;padding-bottom:3.5rem}
.sp-ik{width:1.2rem;height:1.2rem;flex:0 0 auto;display:inline-block;vertical-align:middle}
.sp-ik--duza{width:2.6rem;height:2.6rem;color:#8930b0}
.sp-kicker{display:inline-block;margin-bottom:.7rem;padding:.32rem .85rem;border-radius:999px;background:#fde3ef;color:#b7004d;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.sp-kicker--jasny{background:#4b2a63;color:#ffd1e6}
.sp h1,.sp h2,.sp h3{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.015em;color:inherit}
.sp h2{font-size:1.3rem;font-weight:800;margin:0 0 .6rem}
.sp h3{font-size:1.05rem;font-weight:800;margin:0 0 .3rem}
.sp a{color:#b7004d}
.sp-szary{color:#5b5f62}
.sp-maly{font-size:.88rem;line-height:1.5}
.sp-ok{color:#0f7a49}
.sp-uwaga{color:#9a4a00}

/* pas z nazwą firmy i zakładkami */
.sp-pas{color:#fff;padding:2.2rem 0 0;background:linear-gradient(115deg,#240b4a 0%,#4a157e 45%,#8a1f86 78%,#b7004d 100%)}
.sp-pas-gora{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.sp-pas .sp-kicker{background:#4b2a63;color:#ffd1e6}
.sp-pas h1{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;line-height:1.1;margin:0;color:#fff}
.sp-pas-firma{margin:.35rem 0 0;color:#f3e6f3;font-weight:600}
.sp-zakladki{display:flex;gap:.3rem;margin-top:1.6rem;overflow-x:auto;scrollbar-width:none}
.sp-zakladki::-webkit-scrollbar{display:none}
.sp-zakladki a{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:1rem 1rem 0 0;color:#f3e6f3;text-decoration:none;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;white-space:nowrap;transition:background .2s ease}
.sp-zakladki a:hover{background:#ffffff1f;color:#fff}
.sp-zakladki a.is-aktywna{background:#f4f3f7;color:#4a157e}
.sp-zakladki a:focus-visible{outline:3px solid #ffd60a;outline-offset:-3px}
.sp-licznik{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;background:#ffd60a;color:#2a0b3d;font-size:.75rem;font-weight:800}

/* przyciski */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.3rem;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(115deg,#4a157e,#b7004d);color:#fff!important;text-decoration:none;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.95rem;
  transition:transform .2s ease,box-shadow .2s ease}
.sp-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px #4a157e40}
.sp-btn:focus-visible{outline:3px solid #ffd60a;outline-offset:3px}
.sp-btn--pelny{width:100%}
.sp-btn--maly{padding:.6rem 1.05rem;font-size:.88rem}
.sp-btn--obrys{background:transparent;border:1.5px solid #ffffff8c}
.sp-btn--obrys:hover{background:#ffffff1f;box-shadow:none}
.sp-btn--obrys-ciemny{background:#fff;color:#4a157e!important;border:1.5px solid #d9cce8}
.sp-btn--obrys-ciemny:hover{border-color:#8930b0;box-shadow:none}
.sp-link-btn{background:none;border:0;padding:0;color:#b7004d;font-weight:700;cursor:pointer;text-decoration:underline;font-size:.88rem}

/* treść */
.sp-tresc{padding-top:1.6rem}
.sp-tresc--waska{max-width:860px}
.sp-karta{background:#fff;border-radius:1.25rem;box-shadow:0 10px 28px #2c2f3012;padding:1.4rem 1.5rem}
.sp-sekcja{margin-top:2rem}
.sp-dwie{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.sp-komunikat{padding:.85rem 1rem;border-radius:.9rem;margin:0 0 1rem;font-size:.94rem;line-height:1.5}
.sp-komunikat--ok{background:#e3f6ec;color:#0b5c37}
.sp-komunikat--blad{background:#fde7ea;color:#9b1027}
.sp-pusto{text-align:center;padding:2.6rem 1.5rem}
.sp-pusto p{max-width:34rem;margin:.4rem auto 0}
.sp-pusto--w-karcie{padding:1.2rem .5rem 1.6rem}

/* formularze */
.sp-form{display:grid;gap:1rem}
.sp-pole{display:grid;gap:.4rem;font-weight:700;font-size:.92rem}
.sp-pole > span{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.sp-pole small{font-weight:500;color:#5b5f62}
.sp-pole input:not([type=radio]):not([type=checkbox]),.sp-pole select,.sp-pole textarea{width:100%;padding:.75rem .9rem;border:1.5px solid #ddd8e4;border-radius:.8rem;
  background:#fff;font:inherit;font-weight:500;color:#2c2f30}
.sp-pole input[type=file]{padding:.6rem}
.sp-pole textarea{resize:vertical;min-height:6rem}
.sp-pole input:focus,.sp-pole select:focus,.sp-pole textarea:focus{outline:none;border-color:#8930b0;box-shadow:0 0 0 3px #8930b033}
.sp-pole--maly input,.sp-pole--maly select{padding:.55rem .7rem!important}

/* logowanie */
.sp--wejscie{position:relative;isolation:isolate;overflow:hidden;background:#240b4a;padding:4rem 0 5rem}
.sp-wejscie-tlo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,#240b4af7 0%,#4a157edb 50%,#b7004d8c 100%),url('../img/cta-city-bg.png') center/cover}
.sp-wejscie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:3rem;align-items:center}
.sp-wejscie--waska{grid-template-columns:minmax(0,30rem);justify-content:center}
.sp-wejscie-opis{color:#fff}
.sp-wejscie-opis h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;line-height:1.05;margin:0 0 1.4rem;max-width:14ch;color:#fff}
.sp-wejscie-lista{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;color:#f3e6f3;font-size:1.05rem}
.sp-wejscie-lista li{display:flex;gap:.7rem;align-items:center}
.sp-wejscie-lista .sp-ik{width:1.6rem;height:1.6rem;color:#ffd60a}
.sp-wejscie-karta{padding:1.8rem}
.sp-wejscie-karta h2{font-size:1.5rem}

/* filtry i liczby */
.sp-filtry{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.2rem;padding:1rem 1.2rem}
.sp-okresy{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.sp-okresy legend{font-weight:700;font-size:.92rem;margin-bottom:.4rem;padding:0}
.sp-okres input{position:absolute;opacity:0;pointer-events:none}
.sp-okres span{display:inline-block;padding:.5rem .9rem;border-radius:999px;border:1.5px solid #ddd8e4;font-weight:700;font-size:.88rem;cursor:pointer;background:#fff}
.sp-okres input:checked + span{background:#4a157e;border-color:#4a157e;color:#fff}
.sp-okres input:focus-visible + span{outline:3px solid #ffd60a;outline-offset:2px}
.sp-filtry-daty{display:flex;gap:.6rem}
.sp-filtry-daty[hidden]{display:none}
.sp-filtry-baner{min-width:14rem;flex:1 1 14rem;max-width:24rem}
.sp-zakres{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;align-items:center;margin:1.1rem .2rem .7rem;color:#5b5f62;font-weight:600}
.sp-csv{display:inline-flex;gap:.4rem;align-items:center;font-weight:800;text-decoration:none}
.sp-kafle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.sp-kafel{background:#fff;border-radius:1.25rem;box-shadow:0 10px 28px #2c2f3012;padding:1.1rem 1.3rem;display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:center}
.sp-kafel-ik{grid-row:span 2;width:2.6rem;height:2.6rem;padding:.6rem;border-radius:.8rem;color:#fff;background:linear-gradient(125deg,#240b4a,#561894 55%,#a3127a)}
.sp-kafel span{color:#5b5f62;font-weight:600;font-size:.9rem}
.sp-kafel b{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.8rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}

/* wykres */
.sp-wykres-karta{margin-top:1rem}
.sp-wykres-gora{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem}
.sp-legenda{display:flex;flex-wrap:wrap;gap:1rem;font-size:.84rem;color:#5b5f62;font-weight:600}
.sp-legenda span::before{content:"";display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;margin-right:.4rem;vertical-align:-1px}
.sp-legenda-i::before{background:#8930b0}
.sp-legenda-c::before{background:#d97706;border-radius:50%!important}
.sp-wykres-ramka{margin-top:.6rem;width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.sp-wykres{width:100%;min-width:600px;max-width:none;height:auto;display:block}
.sp-wykres-siatka{stroke:#ebe7f0;stroke-width:1}
.sp-wykres-os{font-family:'Manrope',sans-serif;font-size:11px;fill:#6b6f72}
.sp-wykres-os--c{fill:#9a4a00}
.sp-wykres-slupek{fill:#8930b0}
.sp-wykres-slupek:hover{fill:#b7004d}
.sp-wykres-linia{fill:none;stroke:#d97706;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sp-wykres-punkt{fill:#fff;stroke:#d97706;stroke-width:2;vector-effect:non-scaling-stroke}
.sp-tabela-dni{margin-top:.8rem}
.sp-tabela-dni summary,.sp-historia summary{cursor:pointer;font-weight:700;color:#4a157e}
.sp-tabela-przewijana{max-height:22rem;overflow:auto;margin-top:.6rem}
.sp-tabela-przewijana table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.sp-tabela-przewijana th,.sp-tabela-przewijana td{padding:.45rem .6rem;border-bottom:1px solid #eee;text-align:right}
.sp-tabela-przewijana th:first-child,.sp-tabela-przewijana td:first-child{text-align:left}
.sp-tabela-przewijana thead th{position:sticky;top:0;background:#f7f6f9}

/* banery */
.sp-banery{display:grid;gap:1rem;margin-top:1rem}
.sp-baner{background:#fff;border-radius:1.25rem;box-shadow:0 10px 28px #2c2f3012;padding:1rem 1.2rem;display:grid;
  grid-template-columns:9rem minmax(0,1fr) auto auto;gap:1.2rem;align-items:center}
.sp-baner--historia{background:#faf9fc;box-shadow:none;border:1px solid #ece9f0}
.sp-baner-podglad{display:grid;place-items:center;height:5.5rem;border-radius:.7rem;background:#f1eef5;overflow:hidden}
.sp-baner-podglad img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sp-baner-opis p{margin:.15rem 0 0}
.sp-baner-link{display:flex;gap:.35rem;align-items:center;font-size:.88rem;min-width:0}
.sp-baner-link a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-baner-liczby{display:flex;gap:1.3rem;margin:0}
.sp-baner-liczby div{text-align:right}
.sp-baner-liczby dt{font-size:.78rem;color:#5b5f62;font-weight:600}
.sp-baner-liczby dd{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums}
.sp-stan{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:800;margin-bottom:.35rem}
.sp-stan--zielony{background:#e3f6ec;color:#0b5c37}
.sp-stan--zolty{background:#fff4d6;color:#7a4b00}
.sp-stan--czerwony{background:#fde7ea;color:#9b1027}
.sp-stan--szary{background:#eceaf0;color:#4d5154}
.sp-historia{margin-top:1.2rem}
.sp-jak-liczymy{margin-top:2rem;padding:1.2rem 1.4rem;border-radius:1.25rem;background:#fff;border:1px dashed #d9cce8}
.sp-jak-liczymy p{margin:.2rem 0 0;color:#5b5f62;font-size:.92rem;line-height:1.6}

/* wiadomości */
.sp-dymki{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.8rem;max-height:60vh;overflow-y:auto;overscroll-behavior:contain}
.sp-dymek{max-width:85%;padding:.8rem 1rem;border-radius:1.1rem 1.1rem 1.1rem .3rem;background:#f4f1f8}
.sp-dymek--moj{justify-self:end;border-radius:1.1rem 1.1rem .3rem 1.1rem;background:linear-gradient(115deg,#4a157e,#8a1f86);color:#fff}
.sp-dymek--system{justify-self:center;max-width:95%;background:#fff8e1;border:1px solid #f5e1a4;border-radius:1rem}
.sp-dymek-meta{display:flex;gap:.8rem;justify-content:space-between;font-size:.78rem;margin-bottom:.3rem;opacity:.85}
.sp-dymek-tresc{line-height:1.55;overflow-wrap:anywhere}
.sp-odpowiedz{border-top:1px solid #eee;padding-top:1rem}
.sp-odpowiedz-dol{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}

/* zmiany */
.sp-wybor-baneru{border:0;margin:0;padding:0;display:grid;gap:.6rem}
.sp-wybor-baneru legend{font-weight:700;font-size:.92rem;margin-bottom:.5rem;padding:0}
.sp-wybor{display:grid;grid-template-columns:auto 6rem minmax(0,1fr);gap:.8rem;align-items:center;padding:.6rem .8rem;border:1.5px solid #ddd8e4;border-radius:1rem;cursor:pointer}
.sp-wybor:has(input:checked){border-color:#8930b0;background:#faf6fd}
.sp-wybor.is-zajety{opacity:.6;cursor:not-allowed}
.sp-wybor input{accent-color:#8930b0;width:1.1rem;height:1.1rem}
.sp-wybor-obraz{height:3.5rem;display:grid;place-items:center;background:#f1eef5;border-radius:.5rem;overflow:hidden}
.sp-wybor-obraz img{max-width:100%;max-height:100%;object-fit:contain}
.sp-wybor-opis{display:grid}
.sp-wybor-opis small{color:#5b5f62}
.sp-podglad-pliku{display:grid;gap:.4rem;padding:.8rem;border-radius:1rem;background:#f7f6f9}
.sp-podglad-pliku[hidden]{display:none}
.sp-wybor-baneru{margin-top:.4rem}
.sp-wejscie-karta .sp-maly{margin:.9rem 0 0}
.sp-wejscie-karta .sp-maly + .sp-maly{margin-top:.5rem}
.sp-karta > h2 + .sp-szary{margin-top:0}
.sp-podglad-pliku img{max-height:10rem;max-width:100%;object-fit:contain;justify-self:start;border-radius:.5rem}
.sp-podglad-pliku p{margin:0}
.sp-prosby{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.sp-prosba{padding:.9rem 1rem;border-radius:1rem;background:#f7f6f9;display:grid;gap:.35rem}
.sp-prosba-gora{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.sp-prosba-gora .sp-stan{margin:0}
.sp-prosba-gora time{font-size:.8rem;color:#5b5f62}
.sp-prosba-zmiana{display:grid;gap:.3rem;overflow-wrap:anywhere}
.sp-prosba-obrazy{display:flex;align-items:center;gap:.6rem}
.sp-prosba-obrazy img{height:3rem;max-width:7rem;object-fit:contain;border-radius:.4rem;background:#fff}

/* konto */
.sp-dane{display:grid;gap:.7rem;margin:0 0 1rem}
.sp-dane dt{font-size:.8rem;color:#5b5f62;font-weight:600}
.sp-dane dd{margin:0;font-weight:700;overflow-wrap:anywhere}

@media (max-width:900px){
  .sp-dwie,.sp-wejscie{grid-template-columns:minmax(0,1fr)}
  .sp-wejscie{gap:2rem}
  .sp-baner{grid-template-columns:7rem minmax(0,1fr)}
  .sp-baner-liczby{grid-column:1 / -1;justify-content:space-between;border-top:1px solid #eee;padding-top:.7rem}
  .sp-baner-liczby div{text-align:left}
  .sp-baner .sp-btn{grid-column:1 / -1;justify-self:start}
}
@media (max-width:600px){
  .sp-pas{padding-top:1.6rem}
  .sp-kafle{grid-template-columns:minmax(0,1fr)}
  .sp-kafel b{font-size:1.5rem}
  .sp-karta{padding:1.1rem}
  .sp-zakladki a{padding:.7rem .85rem;font-size:.88rem}
  .sp-zakladki a span{display:none}
  .sp-zakladki a.is-aktywna span{display:inline}
  .sp-dymek{max-width:94%}
  .sp--wejscie{padding:2.2rem 0 3rem}
  .sp-wejscie-opis h1{font-size:1.9rem}
  .sp-filtry-daty{width:100%}
  .sp-filtry-daty .sp-pole{flex:1}
  /* wykres przewija się w bok - większe podpisy osi, żeby dały się przeczytać */
  .sp-wykres-os{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.sp-btn,.sp-zakladki a{transition:none}.sp-btn:hover{transform:none}}