/* IlonInfo – arkusz stylów magazynu informacyjnego */
:root{
  --teal:#0f766e; --teal-600:#0d6259; --indigo:#4338ca; --amber:#f59e0b;
  --ink:#0f172a; --body:#334155; --muted:#64748b;
  --bg:#f4f7f8; --card:#ffffff; --line:#e3e9ec; --soft:#eef4f4;
  --r:18px; --r-sm:12px; --r-lg:26px; --max:1180px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -12px rgba(15,23,42,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);
  font:16.5px/1.68 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-600)}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.22;letter-spacing:-.022em;margin:0 0 .5em}
p{margin:0 0 1em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:6px}

/* ---------- Nagłówek ---------- */
.skip{position:absolute;left:-9999px}
.head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-inner{max-width:var(--max);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.brand img{height:52px;width:auto;max-width:240px;object-fit:contain}
.nav{margin-left:auto}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:600;color:#475569}
.nav a:hover{background:var(--soft);color:var(--teal)}
.nav a[aria-current=page]{background:var(--teal);color:#fff}
.head-tools{display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 14px}
.search input{border:0;background:transparent;font:inherit;font-size:14px;padding:8px 0;width:170px;min-width:0}
.search input:focus{outline:none}
.search button{border:0;background:var(--teal);color:#fff;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.search button:hover{background:var(--teal-600)}
.burger{display:none;flex-direction:column;gap:5px;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;padding:0 11px}
.burger span{height:2px;background:var(--ink);border-radius:2px}

/* pasek najnowszych – poziomy przewijany */
.newsbar{background:linear-gradient(90deg,var(--teal),var(--indigo));color:#fff}
.newsbar-inner{max-width:var(--max);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.newsbar b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.18);padding:5px 11px;border-radius:999px;flex:0 0 auto}
.newsbar ul{display:flex;gap:10px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.newsbar ul::-webkit-scrollbar{display:none}
.newsbar li{flex:0 0 auto}
.newsbar a{color:#fff;font-size:13.5px;white-space:nowrap;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px}
.newsbar a:hover{background:rgba(255,255,255,.26);color:#fff}

/* ---------- Sekcje ---------- */
main{padding-bottom:10px}
.shead{display:flex;align-items:center;gap:14px;margin:44px 0 18px}
.shead h2{margin:0;font-size:26px}
.shead .tagline{color:var(--muted);font-size:14px;flex:1}
.shead a.link{font-weight:600;font-size:14px;white-space:nowrap}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--amber);border-radius:2px}

/* hero */
.hero-wrap{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;margin-top:26px}
.hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:430px;background:#0b1220;box-shadow:var(--shadow)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66}
.hero-in{position:relative;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;min-height:430px;
  background:linear-gradient(to top,rgba(6,12,20,.92) 12%,rgba(6,12,20,.35) 55%,rgba(6,12,20,.1))}
.hero-in .eyebrow{color:#7dd3cf}
.hero h1{color:#fff;font-size:clamp(26px,3.4vw,42px);margin-bottom:.4em}
.hero h1 a{color:#fff}
.hero p{color:#dbe4ea;font-size:16.5px;max-width:62ch;margin-bottom:14px}
.hero .meta{color:#a9b6c2;font-size:13px}
.hero .meta .post-author{color:#fff;font-weight:600}
.side-stack{display:grid;gap:22px;align-content:start}
.mini{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-columns:118px minmax(0,1fr)}
.mini img{width:118px;height:100%;min-height:118px;object-fit:cover}
.mini div{padding:14px 16px}
.mini h3{font-size:16.5px;margin-bottom:6px}
.mini .meta{font-size:12.5px;color:var(--muted)}
.side-cta{background:var(--ink);color:#cbd5e1;border-radius:var(--r);padding:20px}
.side-cta h3{color:#fff;font-size:17px}
.side-cta p{font-size:14px;margin-bottom:12px}
.side-cta a{display:inline-block;background:var(--amber);color:#1c1917;font-weight:700;padding:9px 16px;border-radius:999px;font-size:13.5px}

/* karty */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(15,23,42,.3)}
.card figure{margin:0;aspect-ratio:16/10;overflow:hidden;position:relative}
.card img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);color:var(--teal);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.card-in{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:19px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--body);margin-bottom:14px}
.card .meta{margin-top:auto;font-size:12.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dot{width:4px;height:4px;border-radius:50%;background:#cbd5e1;display:inline-block}

/* najnowsze – lista numerowana */
.two-col{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:34px;align-items:start;margin-top:10px}
.stream{list-style:none;margin:0;padding:0;counter-reset:s}
.stream li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr) 148px;gap:18px;align-items:center;
  background:var(--card);border-radius:var(--r);padding:14px 18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.stream li::before{content:"0" counter(s);font-size:17px;font-weight:800;color:#cbd5e1;letter-spacing:-.03em}
.stream h3{font-size:17.5px;margin:0 0 4px}
.stream .meta{font-size:12.5px;color:var(--muted)}
.stream img{width:148px;height:96px;object-fit:cover;border-radius:var(--r-sm)}
.aside-card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:22px}
.aside-card h2{font-size:17px;display:flex;align-items:center;gap:9px}
.aside-card h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{counter-increment:r;display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}
.rank li:last-child{border-bottom:0;padding-bottom:0}
.rank li::before{content:counter(r);flex:0 0 26px;height:26px;border-radius:8px;background:var(--soft);color:var(--teal);font-weight:800;font-size:13px;display:grid;place-items:center}
.rank a{color:var(--ink);font-weight:600;font-size:15px;line-height:1.4}
.rank span{display:block;color:var(--muted);font-size:12px;margin-top:3px;font-weight:400}
.taglist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.taglist a{background:var(--soft);color:#0f5f58;padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:600}
.taglist a:hover{background:var(--teal);color:#fff}

/* sekcja regionalna – szerokie karty */
.wide{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);overflow:hidden;margin-bottom:20px}
.wide img{width:100%;height:100%;min-height:190px;object-fit:cover}
.wide-in{padding:22px 26px}
.wide h3{font-size:21px}
.wide p{font-size:15px;margin-bottom:10px}

/* pas tematyczny */
.band{background:linear-gradient(160deg,#0f172a,#134e4a);color:#dbe7e6;border-radius:var(--r-lg);padding:34px;margin-top:46px}
.band .shead{margin-top:0}
.band .shead h2{color:#fff}
.band .shead .tagline{color:#93b4b1}
.band .shead a.link{color:#7dd3cf}
.band-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.band-item{background:rgba(255,255,255,.06);border-radius:var(--r);padding:16px;border:1px solid rgba(255,255,255,.09)}
.band-item img{border-radius:var(--r-sm);aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:12px}
.band-item h3{color:#fff;font-size:16.5px;margin-bottom:6px}
.band-item h3 a{color:#fff}
.band-item p{font-size:13.5px;color:#a7c1bf;margin:0}

/* newsletter */
.newsletter{margin:48px 0 40px}
.newsletter-inner{max-width:var(--max);margin:0 auto;padding:34px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;border:1px solid var(--line)}
.newsletter h2{font-size:25px}
.newsletter p{margin:0;color:var(--muted);font-size:15px}
.newsletter-form{display:flex;flex-wrap:wrap;gap:10px}
.newsletter-form input{flex:1 1 220px;padding:14px 18px;border:1px solid var(--line);border-radius:999px;font:inherit;background:var(--soft)}
.newsletter-form button{padding:14px 26px;border:0;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;cursor:pointer;font-size:15px}
.newsletter-form button:hover{background:var(--teal-600)}
.newsletter-msg{flex:1 0 100%;margin:0;font-size:13.5px;padding-left:6px;min-height:1.2em}
.newsletter-msg.is-ok{color:#0f766e}.newsletter-msg.is-err{color:#b91c1c}

/* stopka */
footer.site{background:var(--ink);color:#94a3b8;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:44px 0 24px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px}
.foot-brand img{height:54px;width:auto;max-width:230px;object-fit:contain;background:#fff;padding:9px 12px;border-radius:14px}
.foot-brand p{margin-top:14px;font-size:14px;color:#94a3b8}
footer.site h3{color:#fff;font-size:15px;margin-bottom:14px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px}
footer.site a{color:#cbd5e1}
footer.site a:hover{color:#5eead4}
.foot-bottom{border-top:1px solid #1e293b;margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;color:#64748b}

/* ---------- Artykuł ---------- */
.progress-track{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:80;pointer-events:none}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--indigo));transition:width .1s linear}
.crumbs{font-size:13.5px;color:var(--muted);padding:20px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:#cbd5e1}
/* Układ odwrotny niż w pozostałych serwisach: spis treści po lewej, tekst po prawej */
.post-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:38px;align-items:start;margin-top:8px}
.toc{position:sticky;top:96px;background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.toc h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{list-style:none;counter-reset:t;margin:0;padding:0}
.toc li{counter-increment:t;margin-bottom:10px;display:flex;gap:10px}
.toc li::before{content:counter(t);color:#cbd5e1;font-weight:800;font-size:12px;min-width:14px;padding-top:2px}
.toc a{color:#475569;font-size:14px;line-height:1.4;border-left:2px solid transparent;padding-left:0}
.toc a:hover{color:var(--teal)}
.toc a.is-current{color:var(--teal);font-weight:700}
.post-more{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-top:22px}
.post-more h2{font-size:15px;display:flex;align-items:center;gap:9px}
.post-more h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}
.post{background:var(--card);border-radius:var(--r-lg);padding:34px 40px 40px;box-shadow:var(--shadow)}
.post h1{font-size:clamp(28px,3.7vw,42px);margin-bottom:.4em}
.post-lead{font-size:19px;line-height:1.6;color:#1e293b;margin-bottom:20px}
.post-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:10px 18px;margin-bottom:24px}
.post-meta .post-author{color:var(--ink);font-weight:700}
.post-hero{margin:0 0 26px}
.post-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.post-hero figcaption{font-size:13px;color:var(--muted);padding-top:9px}
.post-body{font-size:17.5px;line-height:1.75;color:#293548}
.post-body h2{font-size:25px;margin:1.6em 0 .5em}
.inline-figure{margin:30px 0}
.inline-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.inline-figure figcaption{font-size:13px;color:var(--muted);padding-top:9px}
.post-box{background:var(--soft);border-radius:var(--r);padding:22px 24px;margin:30px 0;border-left:5px solid var(--teal)}
.post-box h3{font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.post-box ul{margin:0;padding-left:20px;font-size:15.5px}
.post-box li{margin-bottom:8px}
.post-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.btn-back{display:inline-block;background:var(--soft);color:var(--teal);font-weight:700;padding:11px 20px;border-radius:999px;font-size:14px}
.btn-back:hover{background:var(--teal);color:#fff}
.related{margin-top:38px}
.related h2{font-size:23px;margin-bottom:18px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.related-item{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.related-item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.related-cat{display:block;padding:14px 16px 0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.related-item h3{font-size:16.5px;padding:6px 16px 0;margin:0}
.related-item p{font-size:13.5px;padding:8px 16px 16px;margin:0;color:var(--muted)}

/* ---------- Kategoria ---------- */
.cat-hero{background:linear-gradient(140deg,#ecfeff,#eef2ff);border-radius:0 0 var(--r-lg) var(--r-lg);padding:8px 0 36px;margin-bottom:8px}
.cat-hero h1{font-size:clamp(30px,4.4vw,46px);margin-bottom:.3em}
.cat-hero p{max-width:74ch;font-size:16.5px;color:#334155;margin:0}
.cat-count{display:inline-block;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--teal)}
.cat-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin-top:28px}
.cat-feature img{width:100%;height:100%;min-height:300px;object-fit:cover}
.cat-feature .cf-in{padding:30px 34px}
.cat-feature h2{font-size:clamp(22px,2.8vw,32px)}
.more-wrap{text-align:center;margin:30px 0 6px}
.btn-more{border:0;background:var(--indigo);color:#fff;border-radius:999px;padding:14px 34px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 12px 24px -12px rgba(67,56,202,.8)}
.btn-more:hover{background:#3730a3}

/* ---------- Wyszukiwarka ---------- */
.search-page{background:var(--card);border-radius:var(--r-lg);padding:32px 36px;box-shadow:var(--shadow);margin-top:18px}
.search-big{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 8px}
.search-big input{flex:1 1 280px;padding:16px 22px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:16.5px;background:var(--soft)}
.search-big button{padding:16px 30px;border:0;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;cursor:pointer;font-size:15px}
#search-summary{color:var(--muted);font-size:14.5px;margin:8px 0 20px}
.sr-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.sr-thumb img{width:200px;height:126px;object-fit:cover;border-radius:var(--r-sm)}
.sr-cat{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.sr-body h2{font-size:20px;margin:7px 0}
.sr-body p{font-size:15px;margin:0 0 6px}
.sr-meta{font-size:13px;color:var(--muted)}
mark{background:#ccfbf1;color:inherit;border-radius:3px;padding:0 3px}

/* ---------- Strona statyczna ---------- */
.page{background:var(--card);border-radius:var(--r-lg);padding:34px 40px;box-shadow:var(--shadow);margin-top:18px}
.page h1{font-size:34px}
.page h2{font-size:22px;margin-top:1.5em}
.page ul{padding-left:22px}

/* ---------- RWD ---------- */
@media (max-width:1080px){
  .hero-wrap,.two-col,.post-wrap,.cat-feature,.wide{grid-template-columns:1fr}
  .post-wrap{gap:24px}
  .toc{position:static;order:-1}
  .wide img{min-height:0;aspect-ratio:16/9}
  .grid-4,.band-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-feature img{min-height:0;aspect-ratio:16/9}
}
@media (max-width:940px){
  .nav{margin-left:auto;position:static}
  .nav ul#main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 16px;box-shadow:var(--shadow);flex-direction:column;gap:2px;z-index:60}
  .nav ul#main-nav.is-open{display:flex}
  .nav a{padding:12px 14px;border-radius:12px}
  .burger{display:flex}
  .head-inner{position:relative}
  .grid-3,.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newsletter-inner{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .search{display:none}
  .stream li{grid-template-columns:36px minmax(0,1fr) 110px;gap:12px}
  .stream img{width:110px;height:74px}
}
@media (max-width:640px){
  .grid-3,.grid-4,.related-grid,.band-grid{grid-template-columns:1fr}
  .hero,.hero-in{min-height:340px}
  .post{padding:22px 20px 28px;border-radius:var(--r)}
  .post-body{font-size:16.5px}
  .band{padding:22px;border-radius:var(--r)}
  .newsletter-inner{padding:24px 20px}
  .page{padding:24px 20px}
  .stream li{grid-template-columns:minmax(0,1fr) 96px;padding:12px 14px}
  .stream li::before{display:none}
  .stream img{width:96px;height:70px}
  .mini{grid-template-columns:96px minmax(0,1fr)}
  .mini img{width:96px;min-height:96px}
  .sr-item{grid-template-columns:112px minmax(0,1fr);gap:14px}
  .sr-thumb img{width:112px;height:78px}
  .shead{margin:30px 0 14px;flex-wrap:wrap;gap:8px}
  .shead h2{font-size:22px}
}