/* article.css — styl artykułów blogowych blogslubny.pl */
:root {
  --art-accent: #B8925A;
  --art-accent-dk: #8A6830;
}
/* Reading progress */
#reading-bar{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--art-accent);z-index:9999;transition:width .1s linear}

/* Article layout */
.art-layout{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start;padding:0 clamp(1.2rem,3vw,2.5rem) clamp(4rem,6vw,6rem)}
.art-main{min-width:0}
.art-sidebar{position:sticky;top:86px}
@media(max-width:1100px){.art-layout{grid-template-columns:1fr}.art-sidebar{display:none}}

/* Article header */
.art-hero{background:var(--ink);padding:clamp(5rem,9vw,8rem) clamp(1.2rem,3vw,2.5rem) clamp(3rem,5vw,4rem);position:relative;overflow:hidden}
.art-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(184,146,90,.15),transparent 60%);pointer-events:none}
.art-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:500;letter-spacing:.1em;color:rgba(250,247,242,.28);margin-bottom:1.4rem;flex-wrap:wrap;position:relative}
.art-breadcrumb a{color:rgba(250,247,242,.28);transition:color var(--dur)}
.art-breadcrumb a:hover{color:var(--gold-lt)}
.art-breadcrumb-sep{color:rgba(250,247,242,.15)}
.art-breadcrumb-cur{color:#B8925A}
.art-hero-inner{max-width:780px;position:relative}
.art-cat-chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#B8925A;border:1px solid rgba(184,146,90,.35);padding:.28rem .8rem;margin-bottom:1.2rem}
.art-hero h1{font-family:var(--f-serif);font-weight:300;font-size:clamp(2rem,4.5vw,3.8rem);line-height:1.08;color:var(--ivory);margin-bottom:1.2rem}
.art-hero h1 em{font-style:italic;color:#B8925A}
.art-hero-lead{font-family:var(--f-serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.18rem);color:rgba(250,247,242,.5);line-height:1.75;max-width:640px;margin-bottom:1.8rem}
.art-meta-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;font-size:.65rem;color:rgba(250,247,242,.3);font-weight:500;letter-spacing:.06em}
.art-meta-row span{display:flex;align-items:center;gap:.35rem}
.art-meta-row strong{color:rgba(250,247,242,.55)}

/* Cover image */
.art-cover{width:100%;height:clamp(220px,35vw,460px);background:linear-gradient(145deg,#e8d8c0,#B8925A66);display:flex;align-items:center;justify-content:center;font-size:clamp(5rem,12vw,11rem);margin-bottom:2.5rem}

/* TOC */
.toc-box{background:var(--cream);border:1px solid var(--brd-md);border-left:3px solid #B8925A;padding:1.6rem 2rem;margin-bottom:2.5rem}
.toc-box h4{font-family:var(--f-sans);font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A6830;margin-bottom:1rem}
.toc-box ol{padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.toc-box ol li a{font-size:.82rem;color:var(--muted);transition:color var(--dur)}
.toc-box ol li a:hover{color:#B8925A}

/* Article body */
.art-body{font-size:1rem;line-height:1.82;color:var(--ink-s)}
.art-body h2{font-family:var(--f-serif);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;color:var(--ink);margin:2.8rem 0 1.1rem;padding-top:.5rem;border-top:1px solid var(--brd)}
.art-body h3{font-family:var(--f-serif);font-size:1.25rem;font-weight:400;color:var(--ink-s);margin:2rem 0 .8rem}
.art-body p{margin-bottom:1.1rem}
.art-body p:last-child{margin-bottom:0}
.art-body strong{font-weight:600;color:var(--ink)}
.art-body em{font-style:italic;color:var(--rose-dk)}
.art-body a{color:#B8925A;border-bottom:1px solid rgba(184,146,90,.3);padding-bottom:1px;transition:all var(--dur)}
.art-body a:hover{color:#8A6830;border-color:#8A6830}
.art-body ul,.art-body ol{margin:1rem 0 1.4rem 1.4rem}
.art-body li{margin-bottom:.5rem}
.art-body ul li::marker{color:#B8925A}
.art-body ol li::marker{color:#B8925A;font-weight:600}
.art-body blockquote{border-left:3px solid #B8925A;padding:1rem 1.5rem;margin:1.8rem 0;background:var(--cream);font-family:var(--f-serif);font-style:italic;font-size:1.08rem;color:var(--ink-s)}
.art-body blockquote cite{font-size:.72rem;font-style:normal;color:var(--lt-muted);display:block;margin-top:.5rem}

/* Info boxes */
.tip-box{background:rgba(184,146,90,.07);border:1px solid rgba(184,146,90,.2);border-left:3px solid #B8925A;padding:1.2rem 1.6rem;margin:1.8rem 0;border-radius:0}
.tip-box-title{font-family:var(--f-sans);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8A6830;margin-bottom:.6rem}
.warn-box{background:rgba(192,123,108,.07);border:1px solid rgba(192,123,108,.2);border-left:3px solid var(--rose);padding:1.2rem 1.6rem;margin:1.8rem 0}
.warn-box-title{font-family:var(--f-sans);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-dk);margin-bottom:.6rem}
.key-box{background:var(--ink);padding:1.8rem 2rem;margin:2rem 0;color:var(--ivory)}
.key-box h4{font-family:var(--f-serif);font-size:1.1rem;color:#B8925A;margin-bottom:.8rem}
.key-box ul{margin:0 0 0 1.2rem}
.key-box li{color:rgba(250,247,242,.65);font-size:.88rem;margin-bottom:.4rem}
.key-box li::marker{color:#B8925A}

/* Table */
.art-table-wrap{overflow-x:auto;margin:1.8rem 0}
.art-table{width:100%;border-collapse:collapse;font-size:.88rem}
.art-table th{font-family:var(--f-sans);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--ink-s);color:var(--ivory);padding:.8rem 1.1rem;text-align:left}
.art-table td{padding:.7rem 1.1rem;border-bottom:1px solid var(--brd);color:var(--ink-s)}
.art-table tr:hover td{background:var(--cream)}
.art-table td.hi{font-weight:600;color:#8A6830}

/* Checklist */
.checklist{list-style:none;padding:0;margin:1rem 0 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.checklist li{display:flex;align-items:flex-start;gap:.7rem;font-size:.9rem;line-height:1.6}
.checklist li::before{content:'✓';color:#B8925A;font-weight:700;flex-shrink:0;margin-top:.1rem}
.checklist li.warn::before{content:'⚠';color:var(--rose)}

/* Article CTA */
.art-cta{background:#B8925A;padding:2rem 2.4rem;margin:2.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.art-cta p{font-family:var(--f-serif);font-style:italic;font-size:1.05rem;color:var(--ivory);margin:0;flex:1}
.art-cta a{font-family:var(--f-sans);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--ivory);color:#8A6830;padding:.8rem 1.8rem;white-space:nowrap;transition:all .28s}
.art-cta a:hover{background:var(--ink);color:var(--ivory)}

/* Related articles */
.related-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--brd)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--sand);border:1.5px solid var(--sand);margin-top:1.5rem}
.rel-card{background:var(--ivory);padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;transition:background var(--dur)}
.rel-card:hover{background:var(--cream)}
.rel-cat{font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#B8925A}
.rel-title{font-family:var(--f-serif);font-size:.95rem;color:var(--ink);line-height:1.28;transition:color var(--dur)}
.rel-card:hover .rel-title{color:#8A6830}
.rel-meta{font-size:.65rem;color:var(--lt-muted);margin-top:auto;padding-top:.6rem;border-top:1px solid var(--brd)}
@media(max-width:640px){.related-grid{grid-template-columns:1fr}}

/* Sidebar widgets */
.sb-widget{background:var(--ivory);border:1px solid var(--brd-md);padding:1.4rem 1.5rem;margin-bottom:1.2rem}
.sb-widget-title{font-family:var(--f-sans);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--lt-muted);margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--brd)}
.sb-links{display:flex;flex-direction:column;gap:0}
.sb-links a{font-size:.78rem;color:var(--muted);padding:.5rem 0;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:.6rem;transition:color var(--dur)}
.sb-links a:hover{color:#B8925A}
.sb-links a:last-child{border-bottom:none}
.sb-cta{background:#B8925A;padding:1.4rem 1.5rem;text-align:center}
.sb-cta p{font-family:var(--f-serif);font-style:italic;font-size:.9rem;color:var(--ivory);line-height:1.6;margin-bottom:1rem}
.sb-cta a{font-family:var(--f-sans);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--ivory);color:#8A6830;padding:.65rem 1.4rem;display:inline-block;transition:all .28s}
.sb-cta a:hover{background:var(--ink);color:var(--ivory)}