/*
Theme Name: BondingPro
Theme URI: https://bondingpro.pl
Author: Redakcja BondingPro
Description: Elegancki, redakcyjny motyw dla portalu estetyki stomatologicznej. Kość słoniowa + glina, Cormorant Garamond + Jost. Dynamiczne pętle.
Version: 1.0.0
Text Domain: bondingpro
*/

:root{
  --ink:#232020; --ink-soft:#4a4440; --paper:#faf7f3; --paper-2:#f2ece4; --paper-3:#ece4d9;
  --line:#e3dace; --line-dk:#d3c7b6; --clay:#b5654a; --clay-dk:#974c34; --clay-wash:#f3e7e0;
  --muted:#857a6e; --gold:#a98a56;
  --disp:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.7;font-size:16px;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.1;font-weight:600}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.32em;font-size:11px;font-weight:500;color:var(--clay)}
.ph{position:relative;background:repeating-linear-gradient(135deg,#e7ddce 0 12px,#efe7da 12px 24px);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#9b8e7d}
.ph span{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;background:rgba(250,247,243,.86);padding:6px 12px;color:#7d7163;font-weight:400}
.ph img{width:100%;height:100%;object-fit:cover}

header.site{background:var(--paper);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--line)}
.head-top{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand svg{height:48px;width:auto}
.head-tools{display:flex;align-items:center;gap:24px}
.head-tools .search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-dk);padding:8px 14px;background:transparent;width:220px}
.head-tools .search input{border:0;background:transparent;font-family:var(--sans);font-size:13px;font-weight:300;width:100%;outline:none}
.btn{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:13px 26px;border:0;cursor:pointer;transition:.2s;display:inline-block;text-align:center}
.btn-clay{background:var(--clay);color:#fff}.btn-clay:hover{background:var(--clay-dk)}
.btn-out{background:transparent;border:1px solid var(--ink);color:var(--ink)}.btn-out:hover{background:var(--ink);color:var(--paper)}

nav.cats{border-top:1px solid var(--line)}
nav.cats .wrap{display:flex;align-items:center;justify-content:center;gap:38px;height:54px;overflow-x:auto}
nav.cats ul{display:flex;gap:38px;list-style:none;align-items:center}
nav.cats a{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:.18s;display:inline-block;white-space:nowrap}
nav.cats a:hover,nav.cats .current-menu-item a{color:var(--clay)}

.hero{padding:64px 0 60px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero .eyebrow{margin-bottom:22px}
.hero h1,.hero h2{font-size:60px;line-height:1.02;font-weight:500;letter-spacing:-.01em;margin-bottom:24px}
.hero h1 em,.hero h2 em{font-style:italic;color:var(--clay)}
.hero h2 a:hover,.hero h1 a:hover{color:var(--clay)}
.hero p{font-size:18px;color:var(--ink-soft);max-width:46ch;margin-bottom:30px;font-weight:300}
.hero .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-img{position:relative}
.hero-img .ph{height:480px}
.hero-img .badge{position:absolute;bottom:-26px;left:-26px;background:var(--paper);border:1px solid var(--line);padding:22px 26px;max-width:230px}
.hero-img .badge .n{font-family:var(--disp);font-size:46px;font-weight:600;color:var(--clay);line-height:1}
.hero-img .badge .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}

.section{padding:70px 0}
.shead{text-align:center;max-width:640px;margin:0 auto 46px}
.shead .eyebrow{margin-bottom:16px}
.shead h2{font-size:44px;font-weight:500}
.shead .sub{color:var(--ink-soft);font-size:17px;margin-top:14px;font-weight:300}
.shead.left{text-align:left;margin:0 0 40px;max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.shead.left h2{font-size:38px}
.shead.left a{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);border-bottom:1px solid var(--clay);padding-bottom:4px}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.fcard{background:var(--paper);transition:.2s}
.fcard .ph{height:300px;margin-bottom:22px}
.fcard:hover .ph{filter:brightness(.97)}
.fcard .eyebrow{font-size:10.5px;margin-bottom:10px}
.fcard h3{font-size:26px;font-weight:500;line-height:1.16;margin-bottom:10px}
.fcard h3 a:hover{color:var(--clay)}
.fcard p{font-size:14.5px;color:var(--ink-soft);font-weight:300}
.fcard .more{margin-top:16px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);display:inline-flex;align-items:center;gap:8px}

.band{background:var(--ink);color:var(--paper)}
.band-grid{display:grid;grid-template-columns:1fr 1fr}
.band-img .ph{height:100%;min-height:440px;background:repeating-linear-gradient(135deg,#2e2a27 0 12px,#363230 12px 24px);color:#6b6258}
.band-img .ph span{background:rgba(35,32,32,.7);color:#a89b8c}
.band-text{padding:72px 64px}
.band-text .eyebrow{color:var(--clay);margin-bottom:20px}
.band-text h2{font-size:42px;font-weight:500;line-height:1.08;margin-bottom:20px;color:#fff}
.band-text p{color:#c9beb0;font-size:16px;margin-bottom:18px;font-weight:300}
.band-text ul{list-style:none;margin:8px 0 26px}
.band-text li{padding:11px 0;border-bottom:1px solid #3a3531;display:flex;align-items:center;gap:14px;font-size:15px;color:#e3dace}
.band-text li .d{width:8px;height:8px;transform:rotate(45deg);background:var(--clay);flex-shrink:0}

.layout{display:grid;grid-template-columns:1fr 320px;gap:60px}
.feed article{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:32px 0;border-bottom:1px solid var(--line)}
.feed article:first-child{padding-top:0}
.feed .ph{height:160px}
.feed h3{font-size:28px;font-weight:500;line-height:1.12;margin:10px 0}
.feed article h3 a:hover{color:var(--clay)}
.feed p{font-size:14.5px;color:var(--ink-soft);font-weight:300}
.feed .meta{margin-top:14px;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}

.pagination,.nav-links{display:flex;gap:10px;margin-top:30px;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination span,.nav-links a,.nav-links span{min-width:44px;height:44px;padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-dk);font-family:var(--disp);font-size:18px;font-weight:600}
.pagination .current,.nav-links .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}

aside{display:flex;flex-direction:column;gap:42px}
.widget .whead,.widget-title,.widget h2{font-family:var(--disp);font-size:24px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.widget.sticky{position:static;top:120px}

.nlbox{background:var(--clay-wash);padding:32px 28px;text-align:center}
.nlbox h3{font-size:26px;font-weight:500;margin-bottom:10px}
.nlbox p{font-size:14px;color:var(--ink-soft);margin-bottom:18px;font-weight:300}
.nlf{display:flex;flex-direction:column;gap:10px}
.nlf input{padding:13px 16px;border:1px solid var(--line-dk);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:300;text-align:center}
.nlf .note{font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:4px;text-transform:uppercase}

.pop{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.pop:first-child{padding-top:0}.pop:last-child{border-bottom:0;padding-bottom:0}
.pop .num{font-family:var(--disp);font-size:30px;font-weight:600;color:var(--line-dk);line-height:.9;flex-shrink:0}
.pop h4{font-family:var(--disp);font-size:18px;line-height:1.2;font-weight:600}
.pop:hover h4{color:var(--clay)}
.pop .m{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}

.cat-list a,.widget ul li a{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--disp);font-size:20px;font-weight:500;color:inherit}
.cat-list a:last-child,.widget ul li:last-child a{border-bottom:0}
.cat-list a:hover,.widget ul li a:hover{color:var(--clay)}
.cat-list .c,.widget .post-count{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.widget ul{list-style:none}

.tags{display:flex;flex-wrap:wrap;gap:9px}
.tag{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-dk);padding:6px 13px;font-weight:400;background:transparent;display:inline-block}
.tag:hover{border-color:var(--clay);color:var(--clay)}

.crumb{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:30px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.crumb a:hover{color:var(--clay)}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:60px;padding:24px 0 80px}
.art-head{max-width:780px;margin:30px 0 30px}
.art-head .eyebrow{margin-bottom:18px}
.art-head h1{font-size:54px;line-height:1.05;font-weight:500;margin-bottom:18px;letter-spacing:-.005em}
.art-head .dek{font-size:20px;color:var(--ink-soft);font-style:italic;font-family:var(--disp);font-weight:500;line-height:1.4}
.byline{display:flex;align-items:center;gap:16px;margin:28px 0 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.byline .av{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:18px;flex-shrink:0}
.byline .who b{font-family:var(--disp);font-size:17px;font-weight:600;display:block}
.byline .who .m{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.byline .share{margin-left:auto;display:flex;gap:8px}
.byline .share a{width:36px;height:36px;border:1px solid var(--line-dk);display:flex;align-items:center;justify-content:center;color:var(--ink-soft)}
.byline .share a:hover{border-color:var(--clay);color:var(--clay)}
.hero-img-art{height:480px;margin-bottom:40px;width:100%;object-fit:cover}

.prose{max-width:760px;font-size:17.5px;line-height:1.8;color:#363330;font-weight:300}
.prose p{margin-bottom:24px}
.prose p:first-of-type::first-letter{font-family:var(--disp);font-size:78px;font-weight:600;float:left;line-height:.85;padding:6px 14px 0 0;color:var(--clay)}
.prose h2{font-size:34px;margin:48px 0 18px;font-weight:500}
.prose h3{font-size:24px;margin:36px 0 14px;font-weight:500}
.prose ul{margin:0 0 24px 0;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:24px;margin-bottom:12px;font-weight:300}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;background:var(--clay);transform:rotate(45deg)}
.prose ol{margin:0 0 24px 24px}
.prose a{color:var(--clay);font-weight:500;border-bottom:1px solid var(--clay)}
.prose strong{font-weight:500;color:var(--ink)}
.prose blockquote{margin:36px auto;padding:24px 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--disp);font-size:26px;font-weight:500;font-style:italic;line-height:1.35;max-width:600px}
.prose table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.prose table th,.prose table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
.prose table thead th{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--paper-2);border-bottom:1px solid var(--ink);font-weight:500}
.prose img{margin:30px 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}

.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin:36px 0;max-width:760px}
.author-box{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;border:1px solid var(--line);padding:34px;margin:48px 0 0;max-width:760px;background:var(--paper-2)}
.author-box .av{width:84px;height:84px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:600;font-size:28px;flex-shrink:0}
.author-box .eyebrow{margin-bottom:6px}
.author-box h4{font-family:var(--disp);font-size:24px;margin:0 0 10px;font-weight:600}
.author-box p{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px;font-weight:300;line-height:1.6}
.author-box .links{display:flex;gap:14px;font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap}
.author-box .links a{color:var(--clay)}

.toc a{display:block;padding:9px 0;font-size:14.5px;font-family:var(--disp);color:var(--ink-soft);border-left:1px solid var(--line);padding-left:14px;font-weight:500}
.toc a:hover{color:var(--clay);border-color:var(--clay)}
.toc ul{list-style:none;padding:0;margin:0}

.related{border-top:1px solid var(--line);padding:60px 0 20px;margin-top:40px}

.page-content{max-width:820px;margin:50px auto;padding:50px;background:var(--paper);border:1px solid var(--line)}
.page-content h1{font-family:var(--disp);font-size:42px;margin-bottom:28px;font-weight:500}
.page-content h2{font-family:var(--disp);font-size:28px;margin:36px 0 16px;font-weight:500}
.page-content h3{font-family:var(--disp);font-size:21px;margin:24px 0 12px;font-weight:500}
.page-content p{margin-bottom:16px;font-size:16.5px;line-height:1.7;font-weight:300}
.page-content ul,.page-content ol{margin:0 0 18px 24px;font-weight:300}
.page-content a{color:var(--clay);border-bottom:1px solid var(--clay)}

footer.site{background:var(--ink);color:#c9beb0;padding:64px 0 32px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;padding-bottom:38px;border-bottom:1px solid #3a3531}
.foot-grid h5{font-family:var(--sans);color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;font-weight:500}
.foot-grid a{display:block;padding:7px 0;font-size:14px;font-weight:300;color:#c9beb0}
.foot-grid a:hover{color:var(--clay)}
.foot-grid ul{list-style:none}
.foot-brand svg{height:46px;margin-bottom:16px}
.foot-brand p{font-size:18px;max-width:300px;color:#9b8e7d;font-family:var(--disp);font-style:italic;line-height:1.4}
.foot-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7d7163;flex-wrap:wrap;gap:12px}
.foot-bottom a{color:#c9beb0}.foot-bottom a:hover{color:var(--clay)}

.entry-meta .author,.byline-author,.posted-by{display:none !important}

@media(max-width:980px){
  .hero-grid,.feat,.band-grid,.layout,.foot-grid,.art-layout{grid-template-columns:1fr}
  .feed article{grid-template-columns:1fr}
  .band-text{padding:48px 32px}
  .hero h1,.hero h2{font-size:42px}
  .art-head h1{font-size:36px}
  nav.cats .wrap{gap:20px;overflow-x:auto;justify-content:flex-start}
  .widget.sticky{position:static}
  .head-tools .search{display:none}
}