/* Blog pages. The autoblog writes its own markup (bi-* index, bp-* post); scripts/clean_blog.py
   strips its inline styles and links this file so the blog reads like the rest of the site. */

/* ---- index ----------------------------------------------------------- */
.bi-hero{padding:85px 0 55px}
.bi-hero-in{width:min(1320px,90%);margin:auto}
.bi-k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin:0 0 25px}
.bi-hero h1{margin:0 0 22px;max-width:16ch}
.bi-hero p:not(.bi-k){max-width:56ch;color:var(--muted);font-size:16px;line-height:1.85;margin:0}
.bi-wrap{width:min(1320px,90%);margin:auto;padding:60px 0 95px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:56px 32px}
.bi-card{display:flex;flex-direction:column;color:inherit}
.bi-card:hover{color:inherit}
.bi-img{display:block;overflow:hidden;background:var(--panel)}
.bi-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s}
.bi-card:hover .bi-img img{transform:scale(1.025)}
.bi-b{padding-top:22px;display:flex;flex-direction:column;flex:1}
.bi-d{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.bi-b h2{font-size:25px;line-height:1.2;margin:12px 0 12px}
.bi-card:hover h2{color:var(--accent-text)}
.bi-b p{color:var(--muted);font-size:13px;margin:0 0 20px}
.bi-m{margin-top:auto;align-self:flex-start;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);border-bottom:1px solid var(--accent-text);padding-bottom:4px}

/* ---- post ------------------------------------------------------------ */
.bp-hero{padding:70px 0 0}
.bp-hero-in,.bp-wrap{width:min(760px,90%);margin:auto}
.bp-crumb{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin-bottom:38px}
.bp-crumb a:hover{color:var(--accent-text)}
.bp-kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin:0 0 22px}
.bp-h1{font-size:clamp(36px,4.6vw,60px);margin:0 0 24px}
.bp-dek{color:var(--muted);font-size:17px;line-height:1.8;margin:0}
.bp-date{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:26px;padding-bottom:6px}
.bp-wrap{padding-bottom:85px}
.bp-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--panel);margin:38px 0 46px}
.bp-h2{font-size:clamp(26px,3vw,36px);margin:56px 0 18px}
.bp-p{font-size:16px;line-height:1.85;color:var(--text);margin:0 0 22px}
.bp-p a,.bp-faq a{color:var(--accent-text);border-bottom:1px solid currentColor}
.bp-faqwrap{margin-top:64px;padding-top:6px;border-top:1px solid var(--line)}
.bp-faqwrap .bp-h2{margin:48px 0 26px}
.bp-faq{border-top:1px solid var(--line);padding:24px 0}
.bp-faq:last-child{border-bottom:1px solid var(--line)}
.bp-faq h3{font:600 15px/1.5 Inter,Arial,sans-serif;letter-spacing:0;color:var(--ink);margin:0 0 8px}
.bp-faq p{font-size:14px;color:var(--muted);margin:0}
.bp-rel{display:flex;gap:14px 26px;flex-wrap:wrap;margin-top:44px}
.bp-rel a{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:8px}
.bp-rel a:hover{border-color:var(--accent-text)}
.bp-cta{background:var(--panel);text-align:center;padding:80px 5%}
.bp-cta h2{margin:0 0 16px}
.bp-cta p{color:var(--muted);font-size:16px;margin:0 auto 30px;max-width:46ch}
.bp-cta a{display:inline-flex;align-items:center;justify-content:center;margin:6px;padding:16px 25px;border:1px solid var(--accent-text);background:var(--accent-text);color:var(--bg);font-size:12px;font-weight:600}
.bp-cta a:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--bg)}
.bp-cta a[href^="tel:"]{background:none;color:var(--text);border-color:var(--line)}
.bp-cta a[href^="tel:"]:hover{border-color:var(--accent-text);color:var(--accent-text);background:none}

@media(max-width:520px){
 .bi-hero{padding:55px 0 40px}
 .bi-wrap{padding-top:44px;gap:44px}
 .bp-hero{padding-top:44px}
 .bp-img{margin:30px 0 34px}
 .bp-cta{padding:60px 5%}
 .bp-cta a{display:flex;margin:10px 0}
}