/* Boston Concierge Orthopedics — blog.css */
/* Uses only design tokens from site.css */

/* ── Blog hero ─────────────────────────────────────────────── */
.blog-post-hero{background:var(--ink);padding:60px 0 48px}
.blog-post-hero .bc{display:flex;gap:6px;align-items:center;margin-bottom:24px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.blog-post-hero .bc a{color:var(--muted)}
.blog-post-hero .bc a:hover{color:var(--teal)}
.blog-post-hero .bc span:not([aria-hidden]){color:var(--text)}
.blog-post-hero .bc span[aria-hidden]{color:rgba(255,255,255,.3);margin:0 3px}
.blog-post-hero h1{font-size:clamp(28px,3.8vw,50px);color:#fff;max-width:820px;margin:0 0 18px}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;color:var(--muted);margin-bottom:22px}
.post-meta .post-author{font-weight:500}
.blog-abstract{background:var(--char-2);border-left:3px solid var(--teal);padding:16px 20px;max-width:680px}
.blog-abstract p{margin:0;font-size:16px;color:var(--muted);line-height:1.65}

/* ── Blog hero image ────────────────────────────────────────── */
.blog-hero-img{background:var(--char);padding:0 0 0}
.blog-hero-img .wrap{padding:0 24px}
.blog-hero-img img{width:100%;max-height:480px;object-fit:cover;object-position:center;display:block}

/* ── Blog layout: article + sidebar ────────────────────────── */
.blog-layout{background:var(--char);padding:56px 0 80px}
.blog-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media(min-width:900px){.blog-wrap{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}}

.blog-article{min-width:0}
.blog-article h2{font-size:clamp(22px,2.6vw,32px);margin:36px 0 14px;color:#fff}
.blog-article h3{font-size:clamp(18px,2vw,24px);margin:28px 0 10px;color:#fff}
.blog-article p{color:var(--muted);font-size:17px;margin:0 0 18px;line-height:1.7}
.blog-article ul,.blog-article ol{color:var(--muted);font-size:17px;margin:0 0 18px;padding-left:24px}
.blog-article li{margin-bottom:8px;line-height:1.65}
.blog-article strong{color:var(--text);font-weight:600}
.blog-article a{color:var(--teal);text-decoration:underline}
.blog-article a:hover{color:var(--teal-2)}
.blog-article table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.blog-article th{background:var(--char-2);color:#fff;padding:10px 14px;text-align:left;border:1px solid var(--line)}
.blog-article td{padding:9px 14px;border:1px solid var(--line);color:var(--muted)}

/* ── FAQs inside article ────────────────────────────────────── */
.blog-faqs{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.blog-faqs h2{font-size:clamp(20px,2.4vw,28px);margin:0 0 20px;color:#fff}

/* ── Related service block ──────────────────────────────────── */
.blog-related{margin-top:44px;padding:26px 28px;background:var(--char-2);border-top:3px solid var(--teal)}
.blog-related h3{font-size:20px;margin:0 0 12px;color:#fff}
.blog-related p{margin:0 0 10px;color:var(--muted);font-size:16px}
.blog-related a{color:var(--teal);font-weight:600}
.blog-related a:hover{color:var(--teal-2)}
.blog-cta-line{font-size:15px;color:var(--muted);margin-top:8px!important}

/* ── Sidebar ────────────────────────────────────────────────── */
.blog-sidebar{min-width:0}
.sb-search,.sb-cats{background:var(--char-2);padding:22px 20px;margin-bottom:24px}
.sb-search h3,.sb-cats h3{font-size:16px;font-weight:600;color:#fff;margin:0 0 14px}
.blog-search-form{display:flex;gap:8px;flex-wrap:wrap}
.blog-search-form input{flex:1;min-width:0;padding:10px 14px;background:var(--char-3);border:1px solid var(--line);color:var(--text);font-size:15px;border-radius:4px}
.blog-search-form input::placeholder{color:var(--muted)}
.blog-search-form .btn{padding:0 18px;min-height:42px;font-size:13px}
.search-results{margin-top:14px;font-size:14px;color:var(--muted)}
.search-results ul{list-style:none;padding:0;margin:0}
.search-results li{padding:7px 0;border-top:1px solid var(--line)}
.search-results li a{color:var(--teal)}
.search-results li a:hover{color:var(--teal-2)}
.sb-cats nav{display:flex;flex-direction:column;gap:8px}
.sb-cat-btn{font-size:12.5px;min-height:40px;padding:0 14px;letter-spacing:.14em}

/* ── Post grid (index + category) ──────────────────────────── */
.blog-index-section,.blog-cat-section{background:var(--char-2);padding:72px 0 80px}
.blog-cats-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:44px}
.blog-cats-label{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.cat-others{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:36px}
.cat-others span{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px}

/* ── Post card ──────────────────────────────────────────────── */
.post-card{background:var(--char-3);display:flex;flex-direction:column;overflow:hidden}
.post-card-img{display:block;height:200px;overflow:hidden}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:8px}
.post-cat{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.post-card-body h3{font-size:18px;margin:0;line-height:1.25;color:#fff}
.post-card-body h3 a{color:#fff}
.post-card-body h3 a:hover{color:var(--teal)}
.post-date{font-size:12.5px;color:var(--muted)}
.post-excerpt{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.post-more{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-top:4px}
.post-more:hover{color:var(--teal-2)}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.page-hero .bc{display:flex;gap:6px;align-items:center;margin-bottom:24px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.page-hero .bc a{color:var(--muted)}
.page-hero .bc a:hover{color:var(--teal)}
.page-hero .bc span[aria-hidden]{color:rgba(255,255,255,.3);margin:0 3px}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:640px){
  .blog-index-section,.blog-cat-section{padding:44px 0 56px}
  .blog-layout{padding:36px 0 56px}
  .blog-abstract{padding:12px 16px}
  .sb-search,.sb-cats{padding:16px}
}