/* Theme 3 - baza CSS: fonty, tokeny, reset, layout, komponenty (Zadanie 2) */

/* ===== FONTY (self-hosted, latin-ext) ===== */
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(/theme/3/fonts/barlow-semi-condensed-v16-latin_latin-ext-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(/theme/3/fonts/barlow-semi-condensed-v16-latin_latin-ext-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ===== TOKENS ===== */
:root{--brand:#d43e49;--brand-h:#AA3A43;--brand-l:#ff6b76;--brand-bg:#fbeced;--ok:#2fa26b;
 --dark:#1b1e24;--darker:#0d0f13;--bg:#e9ebef;--band:#eef0f4;--line:#e2e5eb;--hair:#d9dce3;
 --txt:#1d222b;--txt-h:#14171d;--txt-2:#626b79;--txt-3:#8b93a1;--container:1320px;
 --card-sh:0 1px 3px rgba(16,20,28,.07);--card-sh-h:0 6px 18px rgba(16,20,28,.13);
 --f-ui:'IBM Plex Sans',system-ui,sans-serif;--f-lab:'Barlow Semi Condensed',var(--f-ui)}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}

/* ===== LAYOUT ===== */
.tm-in{max-width:var(--container);margin:0 auto;padding:0 16px}
.tm-cols{display:flex;gap:24px;align-items:flex-start}
.tm-mainc{flex:1;min-width:0}
.tm-side{width:300px;flex:none;display:flex;flex-direction:column;gap:18px}
@media(max-width:880px){.tm-cols{flex-direction:column}.tm-mainc{width:100%}.tm-side{width:100%}}

/* ===== KOMPONENTY ===== */
.tm-card{background:#fff;border-radius:8px;box-shadow:var(--card-sh)}
a.tm-card{display:block;transition:box-shadow .15s,transform .15s}
a.tm-card:hover{box-shadow:var(--card-sh-h);transform:translateY(-2px)}
.tm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #dfe2e9;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500}
.tm-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13.5px;padding:10px 17px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(212,62,73,.55)}
.tm-btn:hover{background:var(--brand-h)}
.tm-kat{display:inline-block;background:var(--ac,var(--brand));color:#fff;font:600 11px var(--f-lab);letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:3px}
.tm-shead{display:flex;align-items:center;gap:13px;margin:34px 0 15px}
.tm-stit{display:flex;align-items:center;gap:10px;font:600 21px var(--f-lab);letter-spacing:.05em;text-transform:uppercase;color:var(--dark);white-space:nowrap}
.tm-stit::before{content:"";width:5px;height:22px;background:var(--ac,var(--brand));border-radius:2px}
.tm-sline{flex:1;height:1px;background:var(--hair)}
.tm-morel{font-size:13px;font-weight:600;color:var(--brand)}

/* ===== NAGŁÓWEK SERWISU ===== */
/* pasek górny: miasto, pogoda, jakość powietrza, data - źródło: naglowek-final.html */
.tm-top{background:var(--band);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--txt-2)}
.tm-toprow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:6px;padding-bottom:6px}
.tm-top svg{flex:none}
.tm-city{display:flex;align-items:center;gap:6px;background:none;border:0;font:inherit;color:var(--txt);font-weight:600;font-size:13px;cursor:pointer}
.tm-city svg{color:var(--brand)}
.tm-city:hover span{color:var(--brand-h)}
/* pozycja pogoda/powietrze w pasku górnym - nadpisuje generyczny .tm-chip (pigułkę) w tym kontekście, bo tu to zwykły rządek ikona+tekst */
.tm-top .tm-chip{display:flex;gap:6px;white-space:nowrap;border:0;padding:0;border-radius:0;font-size:inherit;font-weight:400}
.tm-chip b{color:var(--txt);font-weight:600}
.tm-ok{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px rgba(47,162,107,.55);flex:none}
.tm-date{margin-left:auto;letter-spacing:.02em}
/* pasek z logo, wyszukiwarką i logowaniem */
.tm-band{background:linear-gradient(180deg,#ffffff,#fafbfc)}
.tm-main{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:11px}
.tm-logo img{display:block;width:clamp(170px,21vw,215px);height:auto}
.tm-search{flex:1;min-width:150px;max-width:360px;margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--band);border:1px solid #dfe2e9;border-radius:999px;padding:8px 15px;color:#7c8595;transition:border-color .2s,box-shadow .2s,background .2s}
.tm-search:hover,.tm-search:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 4px 16px -6px rgba(212,62,73,.35)}
.tm-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:16px}
.tm-search input::placeholder{color:#7c8595;font-size:13px}
.tm-login{flex:none;display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(212,62,73,.55);transition:background .2s}
.tm-login:hover{background:var(--brand-h)}
/* pasek nawigacji głównej */
.tm-navband{background:#fff;border-top:1px solid #e8eaef}
.tm-nav{display:flex;flex-wrap:wrap;align-items:stretch;font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.tm-nav a{position:relative;display:flex;align-items:center;padding:11px 13px;color:#3a4250;transition:color .15s}
.tm-nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-l));transform:scaleX(0);transform-origin:left;transition:transform .22s}
.tm-nav a:hover,.tm-nav a.tm-act{color:var(--brand)}
.tm-nav a:hover::after,.tm-nav a.tm-act::after{transform:scaleX(1)}
.tm-more{margin-left:auto;gap:5px;color:#7c8595}
/* ticker FLASH */
.tm-ticker{background:var(--dark);border-top:2px solid var(--brand);border-bottom:3px solid var(--brand)}
.tm-tickrow{display:flex;align-items:stretch;overflow:hidden}
.tm-flash{flex:none;display:flex;align-items:center;gap:9px;background:var(--darker);color:#fff;font-family:var(--f-lab);font-weight:600;font-size:13px;letter-spacing:.16em;padding:8px 20px 8px 18px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);text-transform:uppercase}
.tm-flash i{font-style:normal;color:#ff8f97;font-weight:500;letter-spacing:.05em}
.tm-pulse{width:9px;height:9px;border-radius:50%;background:#ff5560;box-shadow:0 0 0 0 rgba(255,85,96,.75);animation:tmPul 1.4s ease-out infinite;flex:none}
@keyframes tmPul{70%{box-shadow:0 0 0 9px rgba(255,85,96,0)}100%{box-shadow:0 0 0 0 rgba(255,85,96,0)}}
/* pasek przewijanych nagłówków (tm-tick-belt); animowany wrapper .tm-belt-run objęty regułą prefers-reduced-motion na końcu pliku */
.tm-tick-belt{flex:1;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* animacja na wspólnym wrapperze dwóch list (.tm-belt-run); druga lista to duplikat dla płynnej pętli
   (w default.tpl oznaczona aria-hidden="true", żeby czytniki ekranu nie czytały tytułów podwójnie) */
.tm-belt-run{display:flex;width:max-content;animation:tmRun 32s linear infinite}
.tm-tick-belt ul{display:flex;width:max-content;list-style:none;margin:0;padding:0}
.tm-tickrow:hover .tm-belt-run{animation-play-state:paused}
@keyframes tmRun{to{transform:translateX(-50%)}}
.tm-tick-belt li{white-space:nowrap;font-size:13px;font-weight:500;color:#f2e9ea}
.tm-sep{margin:0 20px;color:var(--brand);font-weight:600;letter-spacing:2px}

/* ===== KARTY I SEKCJE SG ===== */
/* źródło: modernizacja-sg-polska.html - hero, top5, minisy, karty, pasy sekcji, sidebar SG */
.tm-shead:first-child{margin-top:0}
.tm-morel{white-space:nowrap}
.tm-ad{background:#dfe2e8;border:1px dashed #c3c8d2;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#98a0ad;font:600 12px var(--f-lab);letter-spacing:.28em;text-transform:uppercase;gap:3px}
.tm-ad small{letter-spacing:.1em;font-size:10px}
/* kursy walut w nagłówku sekcji Strefa Biznesu */
.tm-nbp{display:flex;gap:14px;font-size:12.5px;color:var(--txt-2);white-space:nowrap}
.tm-nbp b{color:var(--txt)}
.tm-nbp .up{color:var(--ok)}
.tm-nbp .dn{color:var(--brand)}
/* hero + najnowsze */
.tm-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.tm-hbig{position:relative;display:flex;align-items:flex-end;height:400px;border-radius:8px;overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-hshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,19,0) 42%,rgba(13,15,19,.9))}
.tm-hbody{position:relative;padding:22px 24px}
.tm-htit{display:block;margin:11px 0 8px;font-size:27px;font-weight:600;line-height:1.18;color:#fff}
.tm-hlead{display:block;color:#d7dce4;font-size:14px;line-height:1.5}
.tm-hmeta{display:block;margin-top:9px;font-size:12px;color:#9aa3b1}
.tm-latest{display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:14px 16px 8px}
.tm-lhead{display:flex;align-items:center;gap:9px;font:600 14px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;padding-bottom:9px;border-bottom:2px solid var(--dark)}
.tm-ldot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.tm-li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--band)}
.tm-li:last-child{border-bottom:0}
.tm-lth{flex:none;width:62px;height:46px;border-radius:6px}
.tm-lt{font-size:13px;font-weight:500;line-height:1.3;color:#242a34}
.tm-ltime{display:block;font:600 10.5px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
/* siatka: hero-karta + top5 */
.tm-sgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:16px}
/* .tm-card - dodatkowe właściwości dla kart z obrazkiem (bazowy wygląd w sekcji KOMPONENTY) */
.tm-card{overflow:hidden;display:flex;flex-direction:column}
.tm-cimg{height:250px}
.tm-cb{padding:13px 15px 15px}
.tm-ct{display:block;margin:6px 0 7px;font-size:16.5px;font-weight:600;line-height:1.32}
.tm-cl{font-size:12.5px;color:var(--txt-2);line-height:1.45}
.tm-meta{display:block;margin-top:8px;font-size:11.5px;color:var(--txt-3)}
.tm-top5{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:6px 16px}
.tm-t5{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--band);align-items:baseline}
.tm-t5:last-child{border-bottom:0}
.tm-t5 b{font:600 17px var(--f-lab);color:var(--ac,var(--brand));flex:none;width:18px}
.tm-t5 span{font-size:13px;font-weight:500;line-height:1.35;color:#242a34}
/* minisy (4 w rzędzie) */
.tm-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tm-mini{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--card-sh)}
.tm-mimg{height:96px}
.tm-mb{padding:9px 11px 11px}
.tm-mk{font:600 10px var(--f-lab);letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--brand))}
.tm-mt{display:block;margin-top:4px;font-size:12.5px;font-weight:500;line-height:1.3;color:#242a34}
/* mozaika Fakty: 3 kolumny, pierwsza karta (.tm-mbig) 2x2 z tytułem na gradiencie */
.tm-mozaika{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.tm-mbig{grid-column:span 2;grid-row:span 2;position:relative}
.tm-mbig .tm-mimg{height:100%;min-height:270px}
.tm-mbig .tm-mb{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(13,15,19,.88) 55%);padding:44px 16px 14px}
.tm-mbig .tm-mk{color:#ffb3b9}
.tm-mbig .tm-mt{color:#fff;font-size:17px;font-weight:600;line-height:1.35}
/* skrót wydarzeń - box z nagłówkiem i kompaktową listą .tm-li w 2 kolumnach (pod mozaiką Fakty na SG) */
.tm-skrot{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:14px 18px 8px;margin-top:14px}
.tm-skroth{display:flex;align-items:center;gap:9px;font:600 12px var(--f-lab);letter-spacing:.14em;text-transform:uppercase;color:var(--dark);padding-bottom:10px;border-bottom:2px solid var(--dark)}
.tm-skroth::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.tm-lcols{columns:2;column-gap:36px}
.tm-lcols .tm-li{break-inside:avoid}
/* pasy zapowiedzi kolejnych sekcji */
.tm-band2{display:flex;align-items:center;gap:13px;background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:13px 16px;margin-top:10px;color:var(--txt-2);font-size:12.5px}
.tm-band2 b{font:600 15px var(--f-lab);letter-spacing:.05em;text-transform:uppercase;color:var(--dark);display:flex;align-items:center;gap:9px}
.tm-band2 b::before{content:"";width:5px;height:16px;background:var(--ac,var(--brand));border-radius:2px}
/* sidebar SG (strona główna) */
.tm-w{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:14px 16px}
.tm-wh{display:flex;align-items:center;gap:9px;font:600 13.5px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--dark);margin-bottom:10px}
.tm-wh::before{content:"";width:8px;height:8px;background:var(--brand)}
.tm-cities{display:flex;flex-wrap:wrap;gap:7px}
.tm-cchip{border:1px solid #dfe2e9;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:500;color:#3a4250}
.tm-cchip.tm-hot{background:var(--brand);border-color:var(--brand);color:#fff}
.tm-kurs{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--band)}
.tm-kurs:last-child{border-bottom:0}
.tm-kurs b{font-weight:600}
.tm-r{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--band);align-items:baseline}
.tm-r:last-child{border-bottom:0}
.tm-r b{font:600 16px var(--f-lab);color:var(--brand);flex:none}
.tm-r span{font-size:12.5px;font-weight:500;line-height:1.3;color:#242a34}
.tm-sticky{position:relative}
.tm-stag{position:absolute;top:-7px;right:10px;background:var(--dark);color:#fff;font:600 9px var(--f-lab);letter-spacing:.2em;padding:3px 8px;border-radius:3px}
/* gradienty placeholder pod miniatury (tm-g6 pochodzi z tła hero artykułu - sekcja ARTYKUŁ) */
.tm-g1{background:linear-gradient(135deg,#425063,#8593a8)}
.tm-g2{background:linear-gradient(160deg,#5a6b82,#9fb0c2)}
.tm-g3{background:linear-gradient(115deg,#6e7f94,#b9c4d2)}
.tm-g4{background:linear-gradient(205deg,#4c5a70,#93a1b4)}
.tm-g5{background:linear-gradient(145deg,#61718a,#aab6c6)}
.tm-g6{background:linear-gradient(135deg,#93a3b8 0%,#5f7089 55%,#3c4a5f 100%)}

/* ===== ARTYKUŁ ===== */
/* źródło: artykul-final-v3.html → klasy z przedrostkiem tm-art */
.tm-art-card{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:28px 36px 30px;margin:0 0 30px}
.tm-art-bc{font-size:12.5px;color:#8a93a2;margin:0 0 14px}
.tm-art-bca{color:#8a93a2;text-decoration:none}
.tm-art-bcx{color:#3a4250;font-weight:500}
.tm-art-bcs{color:#9aa2b1;margin:0 7px;font-weight:600}
.tm-art-h1{font-size:40px;line-height:1.14;font-weight:700;letter-spacing:-.015em;color:var(--txt-h);margin:0 0 18px;border-left:5px solid var(--brand);padding-left:18px;margin-left:-23px}
.tm-art-lead{font-size:19.5px;line-height:1.55;font-weight:600;color:#2a303b;margin:0 0 18px}
.tm-art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:12px 0;border-top:1px solid #dfe2e9;border-bottom:1px solid #dfe2e9;font-size:13px;color:var(--txt-2);margin:0 0 14px}
.tm-art-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#e04b56,#a92f3a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12.5px;flex:none}
.tm-art-metb{color:var(--txt);font-weight:600}
.tm-art-upd{color:var(--ok);font-weight:500}
.tm-art-dot{width:3px;height:3px;border-radius:50%;background:#c3c9d4;flex:none}
.tm-art-cat{font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--brand);background:var(--brand-bg);border-radius:4px;padding:4px 9px}
.tm-art-mi{width:14px;height:14px;fill:#9aa2b1;flex:none;vertical-align:-2px}
.tm-art-mit{display:inline-flex;align-items:center;gap:5px}
/* przyciski udostępniania */
.tm-art-shrow{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.tm-art-shb{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe2e9;background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:#3a4250}
.tm-art-shi{width:14px;height:14px}
/* zdjęcie główne + galeria + podpis */
.tm-art-hero{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#93a3b8 0%,#5f7089 55%,#3c4a5f 100%);display:flex;align-items:center;justify-content:center}
.tm-art-heroi{width:66px;height:66px;opacity:.4;fill:#fff}
.tm-art-gnav{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px}
.tm-art-gbtn{width:34px;height:34px;border-radius:50%;background:rgba(13,15,19,.72);display:flex;align-items:center;justify-content:center}
.tm-art-gch{width:16px;height:16px;fill:#fff}
.tm-art-gcnt{background:rgba(13,15,19,.72);color:#fff;font-family:var(--f-lab);font-weight:600;font-size:13px;padding:8px 13px;border-radius:999px;letter-spacing:.1em}
.tm-art-cap{display:flex;gap:10px;font-size:13px;color:#7c8595;line-height:1.5;padding:10px 2px 0;margin:0 0 26px}
.tm-art-capsrc{color:#a3abba;white-space:nowrap;margin-left:auto;padding-left:20px}
/* treść artykułu */
.tm-art-body{max-width:none}
.tm-art-p{font-size:17.5px;line-height:1.75;color:#2c333f;margin:0 0 26px}
.tm-art-lede::first-letter{font-family:var(--f-lab);font-weight:600;font-size:54px;line-height:.85;float:left;padding:7px 11px 0 0;color:var(--brand)}
.tm-art-h2{font-size:24px;font-weight:700;letter-spacing:-.3px;margin:34px 0 16px;color:var(--dark)}
.tm-art-q{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--brand)}
.tm-art-qt{font-size:21px;line-height:1.5;font-weight:600;color:var(--dark);margin:0 0 10px}
.tm-art-qa{font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:#7c8595}
.tm-art-ad{margin:32px 0;background:#f0f1f5;border:1px dashed #cfd4dd;border-radius:8px;padding:36px 0;text-align:center}
.tm-art-adl{font-family:var(--f-lab);font-weight:600;font-size:11px;letter-spacing:.24em;color:#9aa2b1;display:block;margin:0 0 6px}
.tm-art-adt{font-size:13px;color:#aab1bf}
.tm-art-yt{aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#2a3140,#141922);display:flex;align-items:center;justify-content:center;margin:4px 0 10px}
.tm-art-play{width:70px;height:48px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(212,62,73,.45)}
.tm-art-ptr{width:20px;height:20px;fill:#fff}
.tm-art-ytc{font-size:12.5px;color:#8a93a2;margin:0 0 4px}
.tm-art-pap{display:flex;align-items:center;gap:13px;background:#f2f3f6;border-radius:8px;padding:13px 16px;margin:30px 0 26px;font-size:12.5px;color:#7c8595;line-height:1.55}
.tm-art-papb{font-family:var(--f-lab);background:var(--dark);color:#fff;font-weight:600;letter-spacing:.16em;font-size:12px;padding:5px 11px;border-radius:4px;flex:none}
.tm-art-tags{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.tm-art-tag{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;color:#3a4250}
.tm-art-th{color:#9aa2b1;font-weight:600}
/* nagłówek sekcji "przeczytaj jeszcze" + kafle powiązanych */
.tm-art-sec{display:flex;align-items:center;gap:13px;margin:0 0 18px;font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:17px;color:var(--dark)}
.tm-art-secb{width:5px;height:20px;background:var(--brand);border-radius:2px;flex:none}
.tm-art-secl{flex:1;height:1px;background:#dfe2e9}
.tm-art-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 42px}
.tm-art-rc{background:#fff;border-radius:8px;box-shadow:var(--card-sh);overflow:hidden}
.tm-art-rci{aspect-ratio:16/9}
.tm-art-rcb{padding:12px 14px 14px}
.tm-art-rck{font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--brand);display:block;margin:0 0 5px}
.tm-art-rct{font-size:14.5px;font-weight:600;line-height:1.38;color:var(--txt);margin:0 0 8px}
.tm-art-rcm{font-size:12px;color:#9aa2b1}
/* komentarze */
.tm-art-com{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:20px 22px}
.tm-art-comh{font-size:18px;font-weight:700;margin:0 0 16px}
.tm-art-c1{display:flex;gap:12px;padding:0 0 16px;border-bottom:1px solid var(--band);margin:0 0 16px}
.tm-art-ca{width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--txt-2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.tm-art-cn{font-size:13.5px;font-weight:600}
.tm-art-ct{font-size:12px;color:#9aa2b1;margin-left:7px}
.tm-art-cx{font-size:14px;line-height:1.6;color:#3a4250;margin:5px 0 7px}
.tm-art-cr{font-size:12.5px;font-weight:600;color:var(--brand)}
.tm-art-cin{display:flex;gap:10px}
.tm-art-cf{flex:1;background:#f2f3f6;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:13.5px;color:#9aa2b1}
.tm-art-cbtn{background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13.5px;padding:11px 20px;border-radius:999px}

/* ===== SIDEBAR (WIDGETY ARTYKUŁU) ===== */
.tm-art-sad{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:12px 14px 14px}
.tm-art-sadl{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-lab);font-weight:600;font-size:10.5px;letter-spacing:.22em;color:#a3abba;margin:0 0 10px}
.tm-art-stb{background:var(--dark);color:#fff;padding:3px 8px;border-radius:4px;letter-spacing:.18em}
.tm-art-sadi{background:linear-gradient(135deg,var(--band),#e3e6ec);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#9aa2b1;font-size:13px}
.tm-art-wid{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:17px 18px 8px}
/* nagłówek widgetu - używany razem z .tm-art-sec (klasy łączone: class="tm-art-sec tm-art-widh") */
.tm-art-widh{font-size:15px;margin:0 0 6px}
.tm-art-wl{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--band);align-items:baseline}
.tm-art-wl:last-child{border-bottom:0}
.tm-art-wn{font-family:var(--f-lab);font-weight:600;font-size:23px;color:#8a93a2;flex:none;width:22px;line-height:1}
.tm-art-wl:first-child .tm-art-wn{color:var(--brand)}
.tm-art-wt{font-size:13.5px;font-weight:500;line-height:1.4;color:#2a303b}
.tm-art-stick{position:sticky;top:14px}

/* ===== STICKY BAR ===== */
/* źródło: zachowania-mobile.html, sekcja sticky - kompaktowa belka po przewinięciu strony */
.tm-stick{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--brand);box-shadow:0 6px 18px rgba(16,20,28,.14);padding:8px 18px;border-radius:8px 8px 0 0;transform:translateY(-100%);transition:transform .25s ease}
/* klasę tm-stick-show dodaje JS (Zadanie 4) po przewinięciu poniżej nagłówka */
.tm-stick.tm-stick-show{transform:translateY(0)}
.tm-stick img{height:34px;width:auto}
.tm-sticknav{display:flex;gap:2px;font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:13.5px}
.tm-sticknav a{padding:8px 10px;color:#3a4250}
.tm-sticknav a.tm-act{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.tm-stickic{margin-left:auto;display:flex;gap:8px;align-items:center}
/* chip w belce sticky - nadpisuje generyczny .tm-chip (mniejszy padding/font, pogrubiony) */
.tm-stick .tm-chip{gap:5px;padding:5px 11px;font-size:12px;font-weight:600;color:#3a4250}
.tm-chip.tm-red{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===== MOBILE (max-width:880px) ===== */
/* źródło: zachowania-mobile.html, sekcja telefonu - przystosowanie istniejących komponentów nagłówka/tickera/kart, nie nowy zestaw klas */
.tm-icobtn{display:none;width:38px;height:38px;border-radius:10px;background:var(--band);align-items:center;justify-content:center}
.tm-icobtn svg{width:17px;height:17px;stroke:#3a4250;fill:none;stroke-width:2;stroke-linecap:round}
.tm-icobtn.tm-burger{background:var(--brand)}
.tm-icobtn.tm-burger svg{stroke:#fff}
@media(max-width:880px){
 /* pasek górny skrócony */
 .tm-toprow{gap:8px 12px;padding-top:5px;padding-bottom:5px}
 .tm-top{font-size:11px}
 /* elementy zbyt szerokie na wąski ekran: kursy NBP inline w belce sekcji (są w sidebarze) i nav sticky bara */
 .tm-shead .tm-nbp{display:none}
 .tm-sticknav{display:none}
 /* belki sekcji: pozwól łamać długie tytuły (desktop ma nowrap) */
 .tm-shead{flex-wrap:wrap;gap:8px 13px}
 .tm-stit{white-space:normal;font-size:18px}
 /* logo + ikony zamiast pełnej wyszukiwarki i loginu - pełne menu chowa się do hamburgera (details/anchor, Zadanie 4) */
 .tm-main{gap:10px;padding-top:9px;padding-bottom:9px}
 .tm-logo img{width:auto;height:30px}
 .tm-search,.tm-login,.tm-navband{display:none}
 .tm-icobtn{display:flex}
 /* ticker cieńszy */
 .tm-ticker{border-bottom-width:2px}
 .tm-flash{gap:6px;font-size:10.5px;letter-spacing:.14em;padding:6px 12px 6px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
 .tm-pulse{width:7px;height:7px}
 .tm-tick-belt li{font-size:11px}
 /* treść jednokolumnowa: hero niższy, karty listy stają się poziomymi kartami */
 .tm-hero{grid-template-columns:1fr}
 .tm-hbig{height:200px}
 .tm-hbody{padding:12px 14px}
 .tm-kat{font-size:9px;padding:3px 7px}
 .tm-htit{font-size:16.5px;margin:7px 0 0}
 .tm-li{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:10px;margin-top:10px;border-bottom:0}
 .tm-lth{width:92px;height:66px}
 .tm-sgrid{grid-template-columns:1fr}
 .tm-minis{grid-template-columns:repeat(2,1fr)}
 .tm-mozaika{grid-template-columns:repeat(2,1fr)}
 .tm-mbig{grid-column:span 2;grid-row:auto}
 .tm-mbig .tm-mimg{min-height:190px}
 .tm-skrot{background:none;box-shadow:none;padding:0;margin-top:16px}
 .tm-lcols{columns:1}
 .tm-art-rel{grid-template-columns:repeat(2,1fr)}
}

/* ===== POWŁOKA LAYOUTU (Zadanie 4) ===== */
/* style przeniesione z inline <style> w default.tpl - jedno źródło prawdy (review Zadania 4) */
.tm-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.tm-skip:focus{left:0}
.tm-logo{margin:0}
.tm-adtop{text-align:center;margin:14px auto;min-height:0}
/* stopka */
.tm-footer{background:var(--dark);color:#c7ccd6;margin-top:40px;padding:26px 0 30px;font-size:13px}
.tm-footer a{color:#e3e6ec}
.tm-footer a:hover{color:#fff}
.tm-footcols{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
.tm-footh{font:600 13px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.tm-footc{color:#9aa3b1;font-size:12px;margin-top:14px}
/* menu mobilne CSS-only (progressive enhancement, bez JS):
   checkbox #tmMenuToggle jest rodzeństwem .tm-navband w <header> (przed .tm-band),
   hamburger to <label for="tmMenuToggle"> - JS tylko wzbogaca (aria-expanded, ESC) */
.tm-menucb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
#tmMenuToggle:focus-visible ~ .tm-band .tm-burger{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:880px){
 #tmMenuToggle:checked ~ .tm-navband{display:block}
 #tmMenuToggle:checked ~ .tm-navband .tm-nav{flex-direction:column}
 #tmMenuToggle:checked ~ .tm-navband .tm-nav a{padding:12px 16px;border-bottom:1px solid #eef0f4}
 #tmMenuToggle:checked ~ .tm-navband .tm-more{margin-left:0}
}
/* modal wyboru miasta (bez Bootstrapa) */
.tm-modal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;background:rgba(13,15,19,.55);padding:40px 16px;overflow:auto}
.tm-modal.tm-modal-open{display:flex}
.tm-modal-box{background:#fff;border-radius:10px;width:100%;max-width:680px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
.tm-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font:600 18px var(--f-lab);letter-spacing:.04em;text-transform:uppercase}
.tm-modal-x{background:none;border:0;font-size:26px;line-height:1;color:#8b93a1;cursor:pointer}
.tm-modal-b{padding:16px 20px}
.tm-modal-b input[type=search]{width:100%;padding:11px 15px;border:1px solid #dfe2e9;border-radius:999px;font:inherit;font-size:15px;margin-bottom:12px}
#cityList{max-height:56vh;overflow:auto}
#cityList a{display:block;padding:8px 10px;border-bottom:1px solid var(--band);color:var(--txt)}
#cityList a:hover{background:var(--brand-bg);color:var(--brand)}
/* belka sticky - ukryta ma być też poza tab-order: visibility:hidden usuwa z fokusa
   (JS dodatkowo przełącza atrybut inert); visibility animowana dyskretnie z opóźnieniem przy chowaniu */
.tm-stick{visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.tm-stick.tm-stick-show{visibility:visible;transition:transform .25s ease,visibility 0s}

/* ===== PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion:reduce){.tm-belt-run,.tm-pulse{animation:none}}

/* ===== STRONA GŁÓWNA - obrazy w kontenerach + drobne uzupełnienia (Zadanie 5) ===== */
/* odstęp treści SG pod reklamą A (odpowiednik .mp-body z makiety) */
.tm-body{padding-top:22px}
/* hero (.tm-hbig): zdjęcie wypełnia kartę pod przyciemnieniem i treścią */
.tm-hbig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm-hbig .tm-hshade,.tm-hbig .tm-hbody{position:relative}
/* karta/mini/miniatura "najnowsze": kontener przycina, zdjęcie skalowane cover */
.tm-cimg,.tm-mimg,.tm-lth{overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-cimg img,.tm-mimg img,.tm-lth img{display:block;width:100%;height:100%;object-fit:cover}
/* h2 jako tytuł sekcji (SEO §8) - zdejmij domyślny margines UA, layout bez zmian */
.tm-stit{margin:0}

/* ===== STRONA ARTYKUŁU (Zadanie 6) =====
   źródło: makieta artykul-final-v3.html. Karta ".tm-card.tm-artcard" zawiera treść
   współdzielonego site/Artykuly/View.tpl (klasy Bootstrap/legacy) - stylujemy ją
   selektorami POTOMNYMI (View.tpl nie jest modyfikowany). Klasy tm-art-* elementów
   dokładanych przez wrapper (breadcrumb/share/pap/tagi/rel/com) są już w sekcji wyżej. */

/* kontener strony artykułu: odstępy jak w makiecie (.ara-wrap: gap 28, padding 24/46);
   ledger: .tm-side ma domyślnie gap 18px, makieta artykułu 22px - dociągamy tutaj */
.tm-artwrap{padding-top:24px;padding-bottom:46px}
.tm-artwrap .tm-cols{gap:28px}
.tm-artwrap .tm-side{gap:22px}

/* karta artykułu: padding jak .ara-card; blokowy przepływ (nadpisuje flex/overflow z .tm-card,
   by pływające elementy View.tpl i inicjał float działały poprawnie) */
.tm-artcard{display:block;overflow:visible;padding:28px 36px 30px;margin:0 0 24px}
@media(max-width:600px){.tm-artcard{padding:20px 18px 22px}}

/* --- H1 tytułu (View.tpl: <h1> w <div.py-2>) z czerwoną kreską wystającą w lewo --- */
.tm-artcard h1{font-size:40px;line-height:1.14;font-weight:700;letter-spacing:-.015em;color:var(--txt-h);margin:0 0 16px;border-left:5px solid var(--brand);padding-left:18px;margin-left:-23px}
@media(max-width:600px){.tm-artcard h1{font-size:28px;margin-left:0;padding-left:13px}}
/* patronat medialny (View.tpl float .fR) - zachowaj oblewanie */
.tm-artcard .fR{float:right}
.tm-artcard .fL{float:left}

/* --- pasek meta u góry (View.tpl: <div.fsmall.pt-2> z .fL/.fR) --- */
.tm-artcard>.fsmall.pt-2{border-top:1px solid #dfe2e9;border-bottom:1px solid #dfe2e9;padding:11px 0;margin:0 0 4px;overflow:hidden;font-size:13px;color:var(--txt-2)}
.tm-artcard>.fsmall.pt-2 a{color:var(--txt);font-weight:600}
.tm-artcard>.fsmall.pt-2 .cSzary{color:var(--txt-2)}

/* --- zdjęcie główne + nawigator galerii (View.tpl: .position-relative > a > img.img-fluid) --- */
.tm-artcard .position-relative{border-radius:8px;overflow:hidden;margin:0 0 2px}
.tm-artcard .position-relative img.img-fluid{display:block;width:100%;height:auto}
/* nawigator galerii (.ArtViewGal L/R) - kołowe przyciski jak w makiecie (.ara-gbtn) */
.tm-artcard .ArtViewGal{width:64px;background:transparent;display:flex;align-items:center;justify-content:center}
.tm-artcard .ArtViewGal.L{justify-content:flex-start;padding-left:14px}
.tm-artcard .ArtViewGal.R{justify-content:flex-end;padding-right:14px}
.tm-artcard .ArtViewGal i{position:static;color:#fff;filter:drop-shadow(0 2px 6px rgba(13,15,19,.6))}
.tm-artcard .ArtViewGal:hover i{color:#fff;opacity:.85}
/* podpis zdjęcia (View.tpl: <div.fsmall.alL.cSzary>) - "fot. ..." */
.tm-artcard>.fsmall.cSzary{color:#7c8595;padding:10px 2px 0;margin:0 0 18px;line-height:1.5}

/* --- miniatury galerii pod zdjęciem (View.tpl: .container .row .img-thumbnail .artGal1) --- */
.tm-artcard .artGal1{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-artcard .artGal1 img{width:100%;height:100%;object-fit:cover}
.tm-artcard .artGal1 .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(13,15,19,.55);color:#fff;padding:0}

/* --- lead / zajawka (View.tpl: <div.bb.alJ.py-3.lh150>) --- */
.tm-artcard .bb{font-size:19.5px;line-height:1.55;font-weight:600;color:#2a303b;margin:14px 0 16px;padding:0}
/* ukryj legacy mobilny przycisk FB z View.tpl (wrapper daje własny pasek udostępniania) */
.tm-artcard .fb-share-button{display:none}

/* --- pasek udostępniania na <button> kopiuj (reset UA dla .tm-art-shb jako button) --- */
button.tm-art-shb{cursor:pointer;font-family:inherit}

/* --- treść (body) artykułu (View.tpl->wrapper: <div.txt232>, surowy HTML redakcyjny) --- */
.tm-artcard .txt232{font-size:17.5px;line-height:1.75;color:#2c333f}
.tm-artcard .txt232 p{margin:0 0 26px}
.tm-artcard .txt232 h2{font-size:24px;font-weight:700;letter-spacing:-.3px;margin:34px 0 16px;color:var(--dark)}
.tm-artcard .txt232 h3{font-size:20px;font-weight:700;margin:28px 0 12px;color:var(--dark)}
.tm-artcard .txt232 img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
.tm-artcard .txt232 a{color:var(--brand);text-decoration:underline}
.tm-artcard .txt232 ul,.tm-artcard .txt232 ol{margin:0 0 26px;padding-left:22px}
.tm-artcard .txt232 li{margin:0 0 8px}
.tm-artcard .txt232 blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--brand);font-size:21px;line-height:1.5;font-weight:600;color:var(--dark)}
.tm-artcard .txt232 blockquote p{margin:0 0 10px}
.tm-artcard .txt232 iframe{max-width:100%}
/* reklama in-article (modifier TMArtykulyReklamaInsert: <div.mt-2.mb-2><ins.adsbygoogle>) */
.tm-artcard .txt232 .adsbygoogle{display:block;margin:0 auto;text-align:center}
/* inicjał (drop cap) na pierwszym akapicie treści - Barlow SC, czerwień, float */
.tm-artcard .txt232>p:first-child::first-letter{font-family:var(--f-lab);font-weight:600;font-size:54px;line-height:.85;float:left;padding:7px 11px 0 0;color:var(--brand)}

/* --- PRZECZYTAJ JESZCZE: karty jako linki (.tm-art-rc na <a>) --- */
a.tm-art-rc{display:block;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
a.tm-art-rc:hover{box-shadow:var(--card-sh-h);transform:translateY(-2px)}
.tm-art-rc .tm-art-rci{display:block}

/* ===== PODSTRONY - wspólny wzorzec inc/page.tpl (Zadanie 7) =====
   breadcrumb (.tm-bc) + karta z tytułem "z kreską" (.tm-card.tm-pagecard/.tm-h1k) dla
   wrapperów other/pogoda/praca/noclegi/bok/reklama/redakcja/polityka/otm/user/profil/
   wirtualnyspacer. Styl kreski spójny z .tm-artcard h1 (sekcja ARTYKUŁ - Zadanie 6),
   pod nowymi nazwami klas z kontraktu inc/page.tpl. */
.tm-bc{font-size:12.5px;color:#8a93a2;margin:0 0 14px}
.tm-bc a{color:#8a93a2;text-decoration:none;font-weight:500}
.tm-bc a:hover{color:var(--brand)}
.tm-pagecard{display:block;overflow:visible;padding:28px 36px 30px}
.tm-h1k{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--txt-h);margin:0 0 18px;border-left:5px solid var(--brand);padding-left:18px;margin-left:-23px}
@media(max-width:600px){.tm-pagecard{padding:20px 18px 22px}.tm-h1k{font-size:23px;margin-left:0;padding-left:13px}}

/* blok "miasto" (inc/miasto.tpl, Zadanie 7) - pogoda (widget legacy SGPogodaMiasta,
   stylowany przez compat.css) + liczba mieszkańców; wywoływany zwrotnie ze
   współdzielonego S/Artykuly/SGartFaktyMiasta*.tpl niezależnie od aktywnego motywu */
.tm-mw-pog{padding:0 6px}
.tm-mw-pop{text-align:center;padding:12px 6px 14px;margin:8px 0 0;background:var(--dark);color:#fff;border-radius:8px}
.tm-mw-popn{font:600 22px var(--f-lab)}
.tm-mw-popn .fas{margin-right:6px}
.tm-mw-popl{color:#fff;font-size:12.5px;text-decoration:underline;opacity:.85}

/* --- WAIT ("w przygotowaniu") i ADM/ADMINRN (bez sidebara reklamowego - Zadanie 7) --- */
.tm-wait{max-width:900px;margin:40px auto;text-align:center;padding:0 16px}
.tm-wait h1{font-size:30px;margin:18px 0 14px;color:var(--txt-h)}
.tm-wait img{max-width:100%;height:auto;border-radius:8px;margin-top:20px}
.tm-cd{display:flex;gap:14px;justify-content:center;margin:10px 0}
.tm-cd-u{background:var(--dark);color:#fff;border-radius:8px;padding:12px 16px;min-width:64px}
.tm-cd-n{font:700 30px var(--f-lab)}
.tm-cd-l{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#aab0bb}
.tm-adm-side{background:#fff;border-radius:8px;box-shadow:var(--card-sh);padding:18px}
.tm-adm-side h2{font-size:17px;margin:0 0 10px;color:var(--txt-h)}
.tm-adm-side ul{margin:0;padding-left:18px}
.tm-adm-side li{margin:0 0 8px}