/* =====================================================================
   BINDAL CLINIC — BLOG STYLES  (uses the design tokens from style.css)
   ===================================================================== */
.bc-blog{--derm:var(--brand,#1c74bd);--derm-tint:var(--brand-light,#e8f2fb);--peds:var(--accent,#e07a3f);--peds-tint:#fdf0e8;background:var(--bg-soft,#f6f9fc);padding:0 0 3rem}
.bc-blog *,.bc-blog *::before,.bc-blog *::after{box-sizing:border-box}

/* ---------- hero ---------- */
.bc-hero{padding:2.2rem 0 2rem!important}
.bc-hero h1{font-size:clamp(1.6rem,4.2vw,2.4rem);line-height:1.15}
.bc-hero p{color:rgba(255,255,255,.88);max-width:640px;margin:.6rem auto 0;font-size:1rem}

/* ---------- category chooser ---------- */
.bc-choose{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:-1.4rem;position:relative;z-index:2}
@media(min-width:768px){.bc-choose{grid-template-columns:1fr 1fr;gap:1.4rem}}
.bc-choice{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius,14px);overflow:hidden;box-shadow:var(--shadow-md);color:var(--ink,#1f2a37);text-decoration:none!important;border:2px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.bc-choice:hover,.bc-choice:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:var(--ink,#1f2a37)}
.bc-choice--dermatology:hover,.bc-choice--dermatology:focus-visible{border-color:var(--derm)}
.bc-choice--pediatrics:hover,.bc-choice--pediatrics:focus-visible{border-color:var(--peds)}
.bc-choice-media{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--derm-tint)}
.bc-choice-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.bc-choice:hover .bc-choice-media img{transform:scale(1.04)}
.bc-choice-count{position:absolute;left:1rem;bottom:.8rem;background:rgba(255,255,255,.95);border-radius:999px;padding:.25rem .8rem;font:600 .78rem/1.4 var(--font-head);letter-spacing:.02em}
.bc-choice--dermatology .bc-choice-count{color:var(--derm)}
.bc-choice--pediatrics .bc-choice-count{color:var(--peds)}
.bc-choice-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.bc-choice-kicker{font:700 .72rem/1 var(--font-head);text-transform:uppercase;letter-spacing:.12em}
.bc-choice--dermatology .bc-choice-kicker{color:var(--derm)}
.bc-choice--pediatrics .bc-choice-kicker{color:var(--peds)}
.bc-choice-title{font:700 1.2rem/1.3 var(--font-head);margin:0;color:var(--ink,#1f2a37)}
.bc-choice-body p{margin:0;color:var(--ink-soft,#4b5a6b);font-size:.93rem}
.bc-choice-cta{margin-top:auto;padding-top:.5rem;font:600 .9rem/1 var(--font-head)}
.bc-choice--dermatology .bc-choice-cta{color:var(--derm)}
.bc-choice--pediatrics .bc-choice-cta{color:var(--peds)}

/* ---------- toolbar: tabs + search ---------- */
.bc-toolbar{display:flex;flex-direction:column;gap:.9rem;margin:2.2rem 0 1.3rem}
@media(min-width:992px){.bc-toolbar{flex-direction:row;align-items:center;justify-content:space-between}}
.bc-tabs{display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.15rem;margin:0 -.15rem}
.bc-tabs::-webkit-scrollbar{display:none}
.bc-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--line,#e2e8f0);color:var(--ink-soft,#4b5a6b);font:600 .9rem/1 var(--font-head);text-decoration:none!important;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.bc-tab:hover{border-color:var(--brand);color:var(--brand)}
.bc-tab span{font-size:.75rem;background:var(--bg-soft,#f6f9fc);border-radius:999px;padding:.2rem .5rem;color:var(--muted,#6b7a8c)}
.bc-tab.is-active{background:var(--brand-darker,#0b3a63);border-color:var(--brand-darker,#0b3a63);color:#fff}
.bc-tab--dermatology.is-active{background:var(--derm);border-color:var(--derm)}
.bc-tab--pediatrics.is-active{background:var(--peds);border-color:var(--peds)}
.bc-tab.is-active span{background:rgba(255,255,255,.22);color:#fff}
.bc-search{display:flex;width:100%;max-width:100%}
@media(min-width:992px){.bc-search{max-width:330px}}
.bc-search input{flex:1;min-width:0;height:44px;border:1px solid var(--line,#e2e8f0);border-right:0;border-radius:999px 0 0 999px;padding:0 1rem;font:inherit;font-size:.92rem;background:#fff;color:var(--ink)}
.bc-search input:focus{outline:none;border-color:var(--brand)}
.bc-search button{height:44px;border:0;border-radius:0 999px 999px 0;padding:0 1.1rem;background:var(--brand,#1c74bd);color:#fff;font:600 .88rem/1 var(--font-head);cursor:pointer}
.bc-search button:hover{background:var(--brand-dark,#0f4c81)}

/* ---------- section heading ---------- */
.bc-head{margin:0 0 1.2rem}
.bc-head h2{font:700 clamp(1.25rem,3vw,1.6rem)/1.25 var(--font-head);margin:0;color:var(--ink,#1f2a37)}
.bc-head p{margin:.35rem 0 0;color:var(--ink-soft,#4b5a6b)}
.bc-head a{font-weight:600}

/* ---------- grid + cards ---------- */
.bc-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:600px){.bc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.bc-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.bc-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius,14px);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line,#e2e8f0);transition:transform .2s ease,box-shadow .2s ease}
.bc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.bc-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--brand-light,#e8f2fb)}
.bc-card-media img{width:100%!important;height:100%!important;object-fit:cover;display:block;transition:transform .4s ease}
.bc-card:hover .bc-card-media img{transform:scale(1.04)}
.bc-card-body{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.15rem 1.2rem;flex:1}
.bc-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;font-size:.8rem;color:var(--muted,#6b7a8c)}
.bc-tag{display:inline-block;padding:.22rem .65rem;border-radius:999px;font:700 .7rem/1.3 var(--font-head);text-transform:uppercase;letter-spacing:.06em;text-decoration:none!important}
.bc-tag--dermatology{background:var(--derm-tint);color:var(--brand-dark,#0f4c81)}
.bc-tag--pediatrics{background:var(--peds-tint);color:#a8501f}
.bc-card-title{font:700 1.05rem/1.35 var(--font-head);margin:0}
.bc-card-title a{color:var(--ink,#1f2a37);text-decoration:none}
.bc-card-title a:hover{color:var(--brand)}
.bc-card-excerpt{margin:0;color:var(--ink-soft,#4b5a6b);font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bc-card-more{margin-top:auto;padding-top:.3rem;font:600 .88rem/1 var(--font-head);color:var(--brand);text-decoration:none}
.bc-card--pediatrics .bc-card-more{color:#c15f28}
.bc-card-more:hover{text-decoration:underline}

.bc-empty{background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:2.5rem 1.2rem;text-align:center;color:var(--ink-soft)}

/* ---------- pagination ---------- */
.bc-pager{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin:2.2rem 0 0;padding:0;list-style:none}
.bc-pager a,.bc-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 .8rem;border-radius:10px;background:#fff;border:1px solid var(--line);font:600 .9rem/1 var(--font-head);color:var(--ink-soft);text-decoration:none}
.bc-pager a:hover{border-color:var(--brand);color:var(--brand)}
.bc-pager .is-current{background:var(--brand-darker,#0b3a63);border-color:var(--brand-darker,#0b3a63);color:#fff}
.bc-pager .is-disabled{opacity:.45}

/* ---------- appointment CTA ---------- */
.bc-cta{margin-top:3rem;border-radius:var(--radius,14px);background:linear-gradient(120deg,var(--brand-darker,#0b3a63),var(--brand,#1c74bd));color:#fff;padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:1rem}
@media(min-width:768px){.bc-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:2rem 2.2rem}}
.bc-cta h2{color:#fff;font:700 1.3rem/1.3 var(--font-head);margin:0}
.bc-cta p{margin:.3rem 0 0;color:rgba(255,255,255,.85)}
.bc-cta-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.bc-cta-actions a{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.1rem;border-radius:999px;font:600 .9rem/1 var(--font-head);text-decoration:none!important;background:#fff;color:var(--brand-darker,#0b3a63)}
.bc-cta-actions a.alt{background:var(--accent,#e07a3f);color:#fff}

/* ---------- sidebar (blog-sidebar.php) ---------- */
.bc-side-cats{list-style:none;margin:0 0 .4rem;padding:0;display:grid;gap:.5rem}
.bc-side-cats a{display:flex;justify-content:space-between;align-items:center;padding:.65rem .9rem;border-radius:10px;font:600 .92rem/1.2 var(--font-head);text-decoration:none!important;border:1px solid var(--line)}
.bc-side-cats .derm{color:var(--brand-dark,#0f4c81);background:var(--brand-light,#e8f2fb)}
.bc-side-cats .peds{color:#a8501f;background:#fdf0e8}
.bc-side-cats a:hover{border-color:currentColor}
.bc-side-cats span{font-size:.75rem;background:#fff;border-radius:999px;padding:.2rem .55rem}
.bc-side-all{display:inline-block;margin-top:.6rem;font:600 .88rem/1 var(--font-head)}

@media(prefers-reduced-motion:reduce){.bc-card,.bc-choice,.bc-card-media img,.bc-choice-media img{transition:none}.bc-card:hover,.bc-choice:hover{transform:none}}

/* Blog dropdown is near the right edge — open it right-aligned on desktop */
@media(min-width:992px){.menu li.menu-right>ul{left:auto;right:0}}

/* Phones: keep all three category tabs visible */
@media(max-width:575px){
  .bc-tabs{flex-wrap:wrap;overflow:visible}
  .bc-tab{padding:.5rem .75rem;font-size:.85rem;gap:.3rem}
  .bc-tab span{padding:.15rem .4rem}
}