/* ==========================================================================
   Best Care Services - Blog archive (bl-*) + single post (bp-*)
   Builds on home.css tokens and pages.css (.pg-head, .pg-crumbs). Plain CSS.
   Radii follow the reduced site-wide scale (cards 13px, large panels 17px, pills 8-10px).
   ========================================================================== */

/* ---------- Shared ---------- */
.bl-tag{
  display:inline-flex; align-items:center; align-self:flex-start;
  padding:.2rem .65rem; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--hm-blue); background:var(--hm-tint); border-radius:7px;
}
a.bl-tag:hover{ background:var(--hm-blue); color:#fff; }
.bl-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .9rem; font-size:.82rem; font-weight:700; color:var(--hm-muted); }
.bl-meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.bl-meta i{ font-size:.8rem; color:var(--hm-blue); }
.bl-thumb{ display:block; position:relative; overflow:hidden; background:var(--hm-cream); }
.bl-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Archive header ---------- */
.pg-head-inner > .bl-head-row{ max-width:none; }
.bl-head-row{ display:grid; grid-template-columns:1fr minmax(260px,380px); gap:2rem; align-items:end; }
.bl-search{ display:flex; gap:.5rem; }
.bl-search input{
  flex:1 1 auto; min-width:0; padding:.8rem 1rem; font:600 .95rem/1.3 var(--bc-font); color:var(--hm-ink);
  background:#fff; border:1.5px solid rgba(16,36,58,.16); border-radius:10px; -webkit-appearance:none; appearance:none;
}
.bl-search input::placeholder{ color:#8a98a8; }
.bl-search input:hover{ border-color:rgba(0,83,156,.4); }
.bl-search input:focus{ outline:0; border-color:var(--hm-blue); box-shadow:0 0 0 4px rgba(0,83,156,.14); }
.bl-search .hm-btn{ padding-left:1.1rem; padding-right:1.1rem; }

/* ---------- Category filter ---------- */
.bl-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.bl-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .95rem;
  font:700 .88rem/1.4 var(--bc-font); color:var(--hm-ink); cursor:pointer;
  background:#fff; border:1px solid var(--hm-line); border-radius:10px;
  transition:border-color .15s,color .15s,background-color .15s;
}
.bl-chip:hover{ border-color:var(--hm-blue); color:var(--hm-blue); background:var(--hm-cream); }
.bl-chip[aria-pressed="true"]{ background:var(--hm-blue); border-color:var(--hm-blue); color:#fff; }
.bl-chip small{ font-size:.74rem; font-weight:800; opacity:.7; }

/* ---------- Featured (latest) post ---------- */
.bl-feature{
  display:grid; grid-template-columns:1.1fr 1fr; margin-bottom:1.2rem; overflow:hidden;
  background:#fff; border:1px solid var(--hm-line); border-radius:17px; box-shadow:var(--hm-shadow);
}
.bl-feature .bl-thumb{ min-height:340px; }
.bl-feature .bl-thumb img{ position:absolute; inset:0; }
.bl-feature-body{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; padding:2.4rem 2.2rem; }
.bl-feature h2{ font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.2; font-weight:800; letter-spacing:-.015em; color:var(--hm-blue); }
.bl-feature h2 a:hover{ text-decoration:underline; text-underline-offset:4px; }
.bl-feature p{ color:var(--hm-muted); font-size:1.02rem; }
.bl-feature .hm-btn{ margin-top:auto; }

/* ---------- Post grid ---------- */
.bl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.bl-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--hm-line); border-radius:var(--hm-r); box-shadow:var(--hm-shadow);
  transition:border-color .15s,box-shadow .15s;
}
.bl-card:hover{ border-color:rgba(0,83,156,.35); box-shadow:0 1px 2px rgba(16,36,58,.04),0 18px 36px -18px rgba(0,83,156,.3); }
.bl-card .bl-thumb{ aspect-ratio:16/10; }
.bl-card-body{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; flex:1 1 auto; padding:1.3rem 1.4rem 1.5rem; }
.bl-card h3{ font-size:1.12rem; line-height:1.3; font-weight:800; letter-spacing:-.005em; color:var(--hm-ink); }
.bl-card h3 a:hover{ color:var(--hm-blue); }
.bl-card p{ font-size:.92rem; color:var(--hm-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bl-card .hm-link{ margin-top:auto; padding-top:.2rem; }
.bl-card[hidden],.bl-feature[hidden]{ display:none; }
.bl-empty{ padding:2rem; text-align:center; color:var(--hm-muted); background:#fff; border:1px dashed var(--hm-dash); border-radius:var(--hm-r); }
.bl-empty[hidden]{ display:none; }

/* ---------- Pagination ---------- */
.bl-pager{ margin-top:2.6rem; }
.bl-pager ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.bl-pager a,.bl-pager span{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-width:42px; height:42px; padding:0 .9rem;
  font-weight:800; font-size:.92rem; color:var(--hm-ink);
  background:#fff; border:1px solid var(--hm-line); border-radius:10px;
  transition:border-color .15s,color .15s,background-color .15s;
}
.bl-pager a:hover{ border-color:var(--hm-blue); color:var(--hm-blue); background:var(--hm-cream); }
.bl-pager [aria-current="page"]{ background:var(--hm-blue); border-color:var(--hm-blue); color:#fff; }
.bl-pager .is-gap{ border-color:transparent; background:transparent; min-width:auto; padding:0 .2rem; }

/* ==========================================================================
   Single post
   ========================================================================== */
.bp-head .bl-tag{ margin-bottom:.2rem; }
.bp-head .hm-h1{ font-size:clamp(1.9rem,3.4vw,2.8rem); }
.bp-head .pg-head-inner > :not(.pg-crumbs){ max-width:860px; }
.bp-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; }
.bp-author-mini{ display:inline-flex; align-items:center; gap:.65rem; font-size:.9rem; font-weight:800; color:var(--hm-ink); }
.bp-avatar{
  flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; color:#fff; background:var(--hm-blue); border-radius:25%;
}

.bp-hero{ margin:2rem auto 0; }
.bp-hero figure{ margin:0; }
.bp-hero img{
  width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:17px;
  border:1px solid var(--hm-line); background:var(--hm-cream); box-shadow:0 30px 60px -34px rgba(0,58,112,.45);
}
.bp-hero figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--hm-muted); }

.bp-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:3.5rem; align-items:start; padding:3rem 0 4.5rem; }

/* article body (the_content) */
.bp-body{ max-width:760px; font-size:1.07rem; line-height:1.85; color:#1d3248; }
.bp-body > * + *{ margin-top:1.15rem; }
.bp-body h2{ margin-top:2.6rem; font-size:clamp(1.45rem,2.4vw,1.85rem); line-height:1.25; font-weight:800; letter-spacing:-.01em; color:var(--hm-blue); scroll-margin-top:96px; }
.bp-body h3{ margin-top:2rem; font-size:1.25rem; line-height:1.3; font-weight:800; color:var(--hm-ink); scroll-margin-top:96px; }
.bp-body h2 + *,.bp-body h3 + *{ margin-top:.8rem; }
.bp-body p{ margin:0; }
.bp-body .bp-lead{ font-size:1.22rem; line-height:1.65; font-weight:600; color:var(--hm-ink); }
.bp-body a{ color:var(--hm-blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.bp-body a:hover{ color:var(--hm-accent); }
.bp-body ul{ list-style:none; padding:0; display:grid; gap:.55rem; }
.bp-body ul li{ position:relative; padding-left:1.4rem; }
.bp-body ul li::before{ content:""; position:absolute; left:.1rem; top:.8em; width:7px; height:7px; border-radius:25%; background:var(--hm-accent); }
.bp-body ol{ list-style:decimal; padding-left:1.5rem; display:grid; gap:.55rem; }
.bp-body ol li::marker{ font-weight:800; color:var(--hm-blue); }
.bp-body strong{ font-weight:800; color:var(--hm-ink); }
.bp-body blockquote{
  margin-left:0; margin-right:0; padding:1.1rem 1.4rem; font-size:1.12rem; font-weight:700; color:var(--hm-blue);
  background:var(--hm-cream); border-left:4px solid var(--hm-accent); border-radius:0 13px 13px 0;
}
.bp-body figure{ margin-left:0; margin-right:0; }
.bp-body figure img{ width:100%; border-radius:13px; border:1px solid var(--hm-line); }
.bp-body figcaption{ margin-top:.6rem; font-size:.86rem; color:var(--hm-muted); }
.bp-body hr{ border:0; border-top:1px dashed var(--hm-dash); margin:2.4rem 0; }

.bp-table-wrap{ overflow-x:auto; border:1px solid var(--hm-line); border-radius:13px; background:#fff; }
.bp-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.95rem; line-height:1.55; }
.bp-table th,.bp-table td{ padding:.85rem 1.1rem; text-align:left; vertical-align:top; border-bottom:1px dashed var(--hm-dash); }
.bp-table thead th{ font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff; background:var(--hm-blue); border-bottom:0; }
.bp-table tbody th{ font-weight:800; color:var(--hm-ink); background:var(--hm-cream); width:22%; }
.bp-table tbody tr:last-child th,.bp-table tbody tr:last-child td{ border-bottom:0; }

.bp-callout{ display:flex; gap:1rem; padding:1.3rem 1.4rem; background:var(--hm-cream); border:1px solid var(--hm-line); border-radius:13px; }
.bp-callout .hm-ic{ width:40px; height:40px; background:var(--hm-blue); color:#fff; }
.bp-callout strong{ display:block; margin-bottom:.2rem; }
.bp-callout p{ font-size:.97rem; line-height:1.65; }

/* tags + share + author */
.bp-foot{ max-width:760px; margin-top:2.8rem; padding-top:1.6rem; border-top:1px dashed var(--hm-dash); display:grid; gap:1.4rem; }
.bp-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.86rem; font-weight:800; color:var(--hm-muted); }
.bp-tags a{ padding:.25rem .7rem; font-size:.82rem; font-weight:700; color:var(--hm-ink); background:#fff; border:1px solid var(--hm-line); border-radius:7px; }
.bp-tags a:hover{ border-color:var(--hm-blue); color:var(--hm-blue); background:var(--hm-cream); }
.bp-share{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.bp-share > span{ margin-right:.3rem; font-size:.86rem; font-weight:800; color:var(--hm-muted); }
.bp-share a,.bp-share button{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; font:800 .85rem/1.2 var(--bc-font); color:var(--hm-ink); cursor:pointer;
  background:#fff; border:1px solid var(--hm-line); border-radius:10px;
  transition:border-color .15s,color .15s,background-color .15s;
}
.bp-share a:hover,.bp-share button:hover{ border-color:var(--hm-blue); color:var(--hm-blue); background:var(--hm-cream); }
.bp-share i{ font-size:.85rem; }
.bp-share [data-copy-link].is-done{ background:var(--hm-blue); border-color:var(--hm-blue); color:#fff; }
.bp-author{ display:flex; gap:1.1rem; align-items:flex-start; padding:1.4rem; background:#fff; border:1px solid var(--hm-line); border-radius:var(--hm-r); box-shadow:var(--hm-shadow); }
.bp-author .bp-avatar{ width:52px; height:52px; font-size:1rem; }
.bp-author h2{ font-size:1.05rem; font-weight:800; color:var(--hm-blue); margin-bottom:.25rem; }
.bp-author p{ font-size:.93rem; line-height:1.6; color:var(--hm-muted); }
.bp-author p + p{ margin-top:.5rem; }

/* previous / next */
.bp-nav{ max-width:760px; display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.2rem; }
.bp-nav a{
  display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.3rem;
  background:#fff; border:1px solid var(--hm-line); border-radius:var(--hm-r);
  transition:border-color .15s,background-color .15s;
}
.bp-nav a:hover{ border-color:var(--hm-blue); background:var(--hm-cream); }
.bp-nav small{ font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--hm-muted); }
.bp-nav strong{ font-size:.97rem; line-height:1.35; font-weight:800; color:var(--hm-ink); }
.bp-nav .is-next{ text-align:right; }

/* sidebar */
.bp-aside{ position:sticky; top:96px; display:grid; gap:1rem; }
.bp-panel{ padding:1.5rem; background:#fff; border:1px solid var(--hm-line); border-radius:var(--hm-r); box-shadow:var(--hm-shadow); }
.bp-panel h2{ margin-bottom:.9rem; font-size:.78rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--hm-blue); }
.bp-toc{ display:grid; gap:.1rem; counter-reset:toc; }
.bp-toc a{
  position:relative; display:block; padding:.5rem .6rem .5rem 2.1rem; font-size:.92rem; font-weight:700; line-height:1.4; color:var(--hm-ink);
  border-radius:8px; counter-increment:toc; transition:background-color .15s,color .15s;
}
.bp-toc a::before{
  content:counter(toc); position:absolute; left:.45rem; top:.5rem; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; color:var(--hm-blue); background:var(--hm-tint); border-radius:25%;
}
.bp-toc a:hover{ background:var(--hm-cream); color:var(--hm-blue); }
.bp-panel--cta{ color:#fff; background:var(--hm-blue-d); border-color:transparent; }
.bp-panel--cta h2{ color:var(--hm-cream); }
.bp-panel--cta p{ margin-bottom:1.1rem; font-size:.95rem; color:rgba(255,255,255,.85); }
.bp-panel--cta .bp-cta-title{ margin-bottom:.4rem; font-size:1.2rem; font-weight:800; line-height:1.25; color:#fff; }
.bp-cta-btns{ display:grid; gap:.6rem; }
.bp-cta-btns .hm-btn{ width:100%; }
.hm-btn--wa{ background:var(--bc-wa,#1a9a4a); color:#fff; box-shadow:0 8px 18px -10px rgba(26,154,74,.8); }
.hm-btn--wa:hover{ background:var(--bc-wa-dark,#14803c); }

/* related posts */
.bp-related .hm-intro{ margin-bottom:2rem; }

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .bl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:960px){
  .bl-head-row{ grid-template-columns:1fr; gap:1.2rem; align-items:start; }
  .bl-feature{ grid-template-columns:1fr; }
  .bl-feature .bl-thumb{ min-height:0; aspect-ratio:16/9; }
  .bl-feature-body{ padding:1.6rem 1.4rem 1.8rem; }
  .bp-layout{ grid-template-columns:1fr; gap:2.2rem; padding:2.2rem 0 3.5rem; }
  .bp-aside{ position:static; }
  .bp-hero img{ aspect-ratio:16/9; }
}
@media (max-width:640px){
  .bl-grid{ grid-template-columns:1fr; }
  .bp-hero img{ border-radius:14px; }
  .bp-body{ font-size:1.02rem; }
  .bp-nav{ grid-template-columns:1fr; }
  .bp-nav .is-next{ text-align:left; }
  .bp-author{ flex-direction:column; }
  .bl-search .hm-btn span{ display:none; }
}