/* CyberRanking: szablon artykułu (recenzje, poradniki), kierunek 5a.
   Ładowany po stylach strony, reskin.css i shell.css. Treść bez zmian, tylko wygląd. */

/* nagłówek artykułu */
.article-hero{background:var(--paper)!important;border:0!important;padding-bottom:8px}
.article-hero-inner{max-width:none;margin:0;padding-left:0;padding-right:0}
.article-hero-inner>*{max-width:860px}
.article-category{display:none}
.article-hero h1{font-size:clamp(34px,4.6vw,56px)!important;line-height:1.06!important;font-weight:700!important;letter-spacing:-.04em!important;color:var(--ink)!important;text-wrap:balance;margin:8px 0 16px!important}
.article-meta{gap:6px 18px!important;font-size:15px!important;color:var(--ink2)!important}
.article-meta svg{color:var(--ink2);opacity:.8}
.article-meta a{color:var(--ink)!important;font-weight:500}
.article-intro{font-size:20px!important;line-height:1.5!important;color:var(--ink2)!important;max-width:62ch!important}
.breadcrumbs{font-size:14px!important;color:var(--ink2)!important}
.breadcrumbs a{color:var(--ink2)!important;font-weight:400!important}
.breadcrumbs a:hover{color:var(--blue)!important}

/* spis treści z boku */
.toc-sidebar h4{font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;margin-bottom:10px!important}
.toc-sidebar a{font-size:15px!important;color:var(--ink2)!important;border-left:1px solid var(--rule)!important;padding:6px 0 6px 12px!important}
.toc-sidebar a:hover{color:var(--blue)!important}
.toc-sidebar a.toc-active,.toc-sidebar a.active,.toc-sidebar a[aria-current]{color:var(--ink)!important;font-weight:500!important;border-left-color:var(--ink)!important;background:none!important}

/* tekst artykułu */
.article-content{font-size:17px;line-height:1.7;color:var(--ink)}
.article-content p,.article-content li{color:var(--ink)}
.article-content h2{font-size:28px!important;font-weight:600!important;letter-spacing:-.025em!important;line-height:1.2!important;color:var(--ink)!important;border-bottom:1px solid var(--rule2);padding-bottom:10px;margin-top:56px!important;margin-bottom:16px!important}
.article-content h3{font-size:20px!important;font-weight:600!important;letter-spacing:-.015em!important;color:var(--ink)!important;margin-top:32px!important}
.article-content a:not([class]){color:var(--blue)}
.article-content strong,.article-content b{font-weight:500;color:var(--ink)}

/* ramki informacyjne */
.tip-box,.info-box,.success-box,.green-box,.analogy-box,.disclosure-box{background:var(--wash)!important;border:0!important;border-radius:var(--r2)!important;box-shadow:none!important;padding:16px 18px!important;color:var(--ink)!important;font-size:16px!important}
.tip-box strong:first-of-type,.info-box strong:first-of-type{display:inline!important;font-size:inherit!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;font-family:var(--sans)!important;margin-right:4px}
.tip-box strong:first-of-type::after,.info-box strong:first-of-type::after{content:":"}
.tip-box strong:first-of-type::before,.info-box strong:first-of-type::before{content:none!important}
.danger-box,.warning-box{background:rgba(185,28,28,.04)!important;border:1px solid rgba(185,28,28,.25)!important;border-radius:var(--r2)!important;box-shadow:none!important}

/* etykiety komponentów: bez wersalików i rozstrzelonych liter (zostają jako zwykłe pogrubione etykiety) */
.related-card-label,.decision-card-title,.tool-tag,.pick-item-label,.rank-badge,.verdict-card h4,.verdict-card-title,
.related-section h3,.danger-box strong,.product-card-rank,.topic-tag,.analogy-box strong,.pick-tag,.tier-badge,
.green-box strong,.category-header-label,.related-label,.answer-label,.cta-border-hover>div:first-child,
.scam-cat,.label,.cl-group-title,.rules-box h3,.lbl{
  text-transform:none!important;letter-spacing:0!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:600!important}
.decision-card-title,.verdict-card-title,.verdict-card h4,.product-card-rank,.related-card-label,.related-label,.answer-label,.category-header-label{color:var(--ink)!important}
.tool-tag,.topic-tag,.pick-tag,.tier-badge,.rank-badge{font-weight:500!important;border-radius:var(--r1)!important}
.answer-block{background:var(--wash)!important;border:0!important;border-radius:var(--r2)!important}
.section-divider{background:var(--rule)!important}

.hero-badge{display:none!important}
/* baza oszustw: karta bez kostiumu terminala */
.scam-card{background:#fff!important;border:1px solid var(--rule)!important;border-radius:var(--r3)!important;box-shadow:none!important}
.scam-card::before,.scam-card::after{content:none!important;display:none!important}
.scam-id{display:none!important}
.scam-cat{font:600 14px var(--sans)!important;color:var(--down)!important;background:none!important;border:0!important;padding:0!important}
.scam-cat::before{content:none!important}
.scam-row dt{font:400 14px var(--sans)!important;letter-spacing:0!important;color:var(--ink2)!important}
.scam-row dd{font-size:15px!important;color:var(--ink)!important}
.scam-card h3{font-size:18px!important;font-weight:600!important}
.scam-link{font:500 15px var(--sans)!important;color:var(--blue)!important}
.scam-filter-btn{border-radius:var(--r2)!important;font:500 14px var(--sans)!important}
.cl-group-title,.rules-box h3{color:var(--ink)!important}

/* szybki werdykt */
.verdict-box{background:#fff!important;border:1px solid var(--rule)!important;border-radius:var(--r3)!important;box-shadow:none!important;padding:22px 24px!important}
.verdict-box-title{font-size:20px!important;font-weight:600!important;color:var(--ink)!important}
.verdict-badge{background:var(--blue)!important;color:#fff!important;border:0!important;border-radius:var(--r1)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;padding:3px 9px!important}
.verdict-scores{gap:0!important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:14px 0!important}
.verdict-score{background:none!important;border:0!important;border-radius:0!important;padding:12px 16px!important;text-align:left!important}
.verdict-score+.verdict-score{border-left:1px solid var(--rule)!important}
.verdict-score-val{font:500 24px var(--mono)!important;color:var(--ink)!important;letter-spacing:-.02em}
.verdict-score-label{font-size:13px!important;color:var(--ink2)!important;text-transform:none!important;letter-spacing:0!important}
.verdict-summary{font-size:17px!important;color:var(--ink)!important;line-height:1.6!important}

/* chipy wyników testów */
.score-chip,.score-chip.good,.score-chip.ok,.score-chip.info{background:#fff!important;border:1.5px solid var(--rule2)!important;border-radius:var(--r1)!important;color:var(--ink)!important;font:500 14px var(--mono)!important;padding:3px 9px!important}

/* tabele */
.comparison-table{font-size:16px!important}
.comparison-table th{background:none!important;color:var(--ink2)!important;font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;border-bottom:1px solid var(--rule2)!important}
.comparison-table td{color:var(--ink)!important;border-bottom:1px solid var(--rule)!important;background:none!important}
.comparison-table tr:hover td{background:var(--wash)!important}
.comparison-table td:first-child{font-weight:500}
.comparison-table td a{color:var(--blue);font-weight:500}
.comparison-table td a.why{color:var(--flag)}
.comparison-table td .mark{display:block;font-size:12px;color:var(--ink2);font-weight:300}
.table-wrapper{border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important}

/* plusy i minusy */
.pros-cons{gap:24px!important}
.pros,.cons{background:#fff!important;border:1px solid var(--rule)!important;border-radius:var(--r3)!important;box-shadow:none!important;padding:18px 20px!important}
.pros-title,.cons-title{font-size:15px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.pros ul li,.cons ul li{font-size:16px!important;color:var(--ink)!important}
.pros ul li::before{color:var(--up)!important}
.cons ul li::before{color:var(--ink2)!important}

/* przyciski ofert w treści */
a.product-link,a.cta-btn{display:inline-flex!important;align-items:center;gap:8px;min-height:48px;padding:0 20px!important;border-radius:var(--r2)!important;background:var(--blue)!important;color:#fff!important;font:500 16px var(--sans)!important;text-decoration:none!important;box-shadow:none!important;border:0!important}
a.product-link:hover,a.cta-btn:hover{background:var(--blue2)!important}
a.product-link.why,a.product-link.why:hover{background:none!important;color:var(--flag)!important;padding:0!important;min-height:44px;text-decoration:underline!important;text-underline-offset:.2em}
a.pick-item.is-no .pick-item-label{color:var(--flag)!important}
a.pick-item.is-no .pick-item-cta{background:none!important;color:var(--flag)!important;padding:0!important;text-decoration:underline}
.aff-note{display:block;font-size:13px!important;color:var(--ink2)!important;margin-top:6px}
.cta-box{background:var(--wash)!important;border:0!important;border-radius:var(--r2)!important}
.cta-box>div>div{font-family:var(--sans)!important;font-weight:600!important;font-size:18px}
.cta-box a{border-radius:var(--r2)!important;font-family:var(--sans)!important;font-weight:500!important;background:#fff!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--rule2)!important;border:0!important}
.cta-box a:hover{color:var(--blue)!important;box-shadow:inset 0 0 0 1.5px var(--blue)!important}

/* FAQ */
.faq-item{border:0!important;border-bottom:1px solid var(--rule)!important;border-radius:0!important;background:none!important;box-shadow:none!important;margin:0!important}
.faq-question{font:500 17px/1.4 var(--sans)!important;color:var(--ink)!important;background:none!important;padding:16px 0!important;min-height:44px;text-align:left}
.faq-question:hover{color:var(--blue)!important}
.faq-answer p{color:var(--ink2)!important;font-size:16px!important}

/* źródła, udostępnianie, powiązane */
.sources-box{background:none!important;border:0!important;border-top:1px solid var(--rule)!important;border-radius:0!important;padding:16px 0 0!important;font-size:14px!important;color:var(--ink2)!important}
.share-label{font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important}
.share-btn{border-color:var(--rule2)!important;border-radius:var(--r2)!important;color:var(--ink)!important;min-height:40px}
.share-btn:hover{border-color:var(--blue)!important;color:var(--blue)!important}
.related-section h2{border-bottom:1px solid var(--rule2)}
.related-grid{gap:0 32px!important}
.related-card{display:flex!important;flex-direction:column;gap:4px;background:none!important;border:0!important;border-bottom:1px solid var(--rule)!important;border-radius:0!important;box-shadow:none!important;padding:14px 0!important;transform:none!important}
.related-card h3{order:1;font-size:17px!important;font-weight:500!important;color:var(--ink)!important;margin:0!important}
.related-card-cat{order:2;font-size:14px!important;font-weight:400!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink2)!important;margin:0!important}
.related-card:hover h3{color:var(--blue)!important}
.affiliate-note{font-size:14px!important;color:var(--ink2)!important;border-top:1px solid var(--rule)!important}

/* karta wyniku (recenzje): pomiar, opinia, oferta */
.scard{border:1.5px solid var(--ink);border-radius:var(--r3);padding:24px;margin:28px 0 8px;background:#fff}
.scard-top{display:flex;align-items:center;gap:16px}
.scard-top .plogo{flex:0 0 56px;width:56px;height:56px;border:1px solid var(--rule);border-radius:var(--r3);display:grid;place-items:center;background:#fff}
.scard-top .plogo img{width:34px;height:34px;object-fit:contain}
.scard-top .plogo.mono{font:600 20px var(--sans);color:var(--ink2)}
.article-content .scard h2.scard-h,.scard-h{font-size:22px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.2!important;border:0!important;padding:0!important;margin:0!important}
.scard-pos{margin:4px 0 0!important;font-size:15px!important;color:var(--ink2)!important}
.scard-pos a{color:var(--blue)}
.scard .status{display:inline-block;font-size:13px;font-weight:500;color:#fff;background:var(--blue);padding:2px 8px;border-radius:var(--r1);margin-left:6px;vertical-align:.25em;letter-spacing:0}
.scard .status.no{background:#fff;color:var(--flag);box-shadow:inset 0 0 0 1.5px var(--flag)}
.scard-m{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.scard-m>div{padding:14px 16px}
.scard-m>div:first-child{padding-left:0}
.scard-m>div+div{border-left:1px solid var(--rule)}
.scard-m dt{font-size:14px;color:var(--ink2);font-weight:400}
.scard-m dd{margin:2px 0 0;font:500 26px/1.15 var(--mono);color:var(--ink);letter-spacing:-.02em}
.scard-m dd small{font:400 16px var(--sans);color:var(--ink2);letter-spacing:0;margin-left:.15em}
.scard-m dd .na{font:400 17px var(--sans);color:var(--ink2)}
.scard-m .src{display:block;font-size:13px;color:var(--ink2);margin-top:2px;line-height:1.35}
.scard-m .n .sep{margin:0 -.22em}
.scard-op{margin:16px 0 0!important;font-size:17px!important;color:var(--ink)!important;max-width:70ch}
.scard-op .who{display:block;font-size:14px;color:var(--ink2);margin-top:4px}
.scard-cta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.scard-cta .btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;background:var(--blue);color:#fff;border-radius:var(--r2);font:500 17px var(--sans);text-decoration:none}
.scard-cta .btn:hover{background:var(--blue2);color:#fff}
.scard-cta .btn.why{background:none;color:var(--flag);padding:0;min-height:44px;text-decoration:underline;text-underline-offset:.2em}
.scard-cta .mark{font-size:13px;color:var(--ink2)}
.scard-cta .more{font-size:15px;font-weight:500;color:var(--blue)}
@media(max-width:860px){
  .article-content table.comparison-table,.article-body table.comparison-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article-body [style*="grid-template-columns"],.article-content [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .verdict-score{min-width:0;padding:10px 8px!important;overflow-wrap:anywhere}
  .verdict-score:first-child{padding-left:0!important}
  .verdict-score-val{font-size:19px!important}
  .scard{padding:18px}
  .scard-top{align-items:flex-start}
  .scard-top .plogo{flex-basis:48px;width:48px;height:48px}
  .scard-m{grid-template-columns:1fr 1fr}
  .scard-m>div:nth-child(3){padding-left:0;border-left:0}
  .scard-m>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .scard-cta .btn{width:100%;justify-content:center}
}
/* a11y (Lighthouse 14.10): linki w tekscie nie tylko kolorem, zrodla liczb czytelne, drugi dd w karcie wyniku */
.article-content :is(p,li,td,.tip-box,.term-body)>a:not([class]),.sources-box a{text-decoration:underline}
.stat-source{opacity:1!important;color:var(--ink2)!important}
.scard-m dd.src{font:400 13px/1.35 var(--sans);letter-spacing:0;color:var(--ink2);margin-top:2px}
.sources-box{opacity:1!important}.sources-box a{color:var(--blue)!important}
.product-badge.badge-best{background:var(--wash)!important;color:var(--up)!important}
/* stare kolory z ciemnego motywu w pojedynczych poradnikach: kontrast 4.5:1 */
.green-box>strong{color:var(--up)!important}
.danger-box>strong{color:var(--down)!important}
.topic-tag{color:var(--ink2)!important}
.term-body a{color:var(--blue)!important}
.share-label{opacity:1!important;color:var(--ink2)!important}
/* tekst treści poradników i recenzji wg DESIGN.md: 17 px (16 px na telefonie), grubość 300, granat (ink).
   Trzy układy: div.article-body w .article-layout, main.article-body, article.article-content.
   Tylko bezpośrednie akapity i punkty list - komponenty (karty, tabele, ramki) mają własne rozmiary.
   Kafelki na /poradniki też mają .article-body, ale są poza .article-layout, więc ich to nie dotyczy. */
:is(.article-layout .article-body,main.article-body,.article-content)>p,
:is(.article-layout .article-body,main.article-body,.article-content)>:is(ul,ol)>li{font-size:17px!important;font-weight:300!important;color:var(--ink)!important;line-height:1.65!important}
@media(max-width:860px){
:is(.article-layout .article-body,main.article-body,.article-content)>p,
:is(.article-layout .article-body,main.article-body,.article-content)>:is(ul,ol)>li{font-size:16px!important}
}
:is(.article-layout .article-body,main.article-body)>:is(h2,h3){color:var(--ink)!important}
:is(.article-layout .article-body,main.article-body) h2{font-size:28px!important;font-weight:600!important;letter-spacing:-.025em!important;line-height:1.2!important}
:is(.article-layout .article-body,main.article-body) :is(strong,b){font-weight:500;color:var(--ink)}
:is(.article-layout .article-body,main.article-body) .comparison-table th{text-align:left!important}
/* nagłówek artykułu wyrównany do treści także na szerokich ekranach */
section.article-hero{max-width:1200px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
/* komponenty w artykułach: czytelna skala (DESIGN.md: body 17/300; karty 16; najmniejszy tekst ciągły 15) */
:is(.article-layout .article-body,main.article-body,.article-content) .answer-block p{font-size:17px!important;color:var(--ink)!important;line-height:1.6!important}
:is(.article-layout .article-body,main.article-body,.article-content) :is(.product-card,.tool-card,.glossary-term,.term-body,.cta-box-text,.verdict-card) :is(p,li){font-size:16px!important;color:var(--ink)!important;line-height:1.6!important}
:is(.article-layout .article-body,main.article-body,.article-content) :is(.decision-card,.category-header) p{font-size:15px!important;color:var(--ink2)!important}
.glossary-term p{font-size:16px!important;color:var(--ink)!important}
/* stare kafelki w poradnikach: opisy min. 15 px; przypisy i źródła min. 14 px */
:is(.attack-type-content,.platform-block,.pick-card,.method-card,.topic-card,.phishing-type-content,.upgrade-card,.related-card,.decision-card,.product-card) :is(p,li){font-size:15px!important;line-height:1.55!important}
.article-card .article-body p{font-size:15px!important}
:is(.srcnote,.hf-src,.sources-box,.aff-note,.affiliate-note){font-size:14px!important}
:is(.article-layout .article-body,main.article-body,.article-content) div:not([class])>p{font-size:max(15px,1em)}
:is(.article-layout .article-body,main.article-body,.article-content) div:not([class])>ul>li,:is(.article-layout .article-body,main.article-body,.article-content) ul:not([class])>li{font-size:max(15px,1em)}
.cta-box p,.protection-card :is(p,li),.step-content :is(p,li){font-size:15px!important}
:is(.article-layout .article-body,main.article-body,.article-content) :is(p,li):is([style*="0.85rem"],[style*="0.8rem"],[style*="0.82rem"],[style*="0.875rem"],[style*="13px"],[style*="0.84rem"],[style*="0.86rem"]){font-size:15px!important}