/* Kalispell TRT — blog (/blog/ index + article pages)
   Loaded AFTER legal.css, which supplies the @font-face declarations, the base
   body/type tokens, and the .lg-head / .lg-foot chrome. This file only adds what
   the blog needs on top, so the two surfaces can never drift apart visually.
   Design system: charcoal #141922, card #0E1219, amber #E8A435, alert #E05539,
   Oswald headings + Barlow body. */

/* ---------- shared chrome tweaks ---------- */
.lg-head-in{max-width:900px}
.bl-nav{display:flex;align-items:center;gap:6px}
.bl-nav a{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:14px;letter-spacing:.5px;
  text-transform:uppercase;color:#AEB4BD;text-decoration:none;white-space:nowrap;
  padding:7px 12px;border-radius:999px;
  transition:color .15s ease,background-color .15s ease;
}
.bl-nav a:hover{color:#E8A435}
.bl-nav a.is-cta{
  color:#141922;background:#E8A435;font-weight:600;padding:7px 18px;
}
.bl-nav a.is-cta:hover{color:#141922;background:#f3bd6b}

/* ---------- draft banner (never ships on an approved post) ---------- */
.bl-draft{
  background:#2A1712;border-bottom:1px solid rgba(224,85,57,.5);
  color:#F0836C;text-align:center;padding:11px 20px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;
}

/* ---------- index ---------- */
.bl-wrap{max-width:900px;margin:0 auto;padding:48px 24px 64px}
.bl-wrap h1{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(30px,5.4vw,44px);line-height:1.08;
  text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;color:#fff;
}
.bl-lede{color:#AEB4BD;font-size:18px;max-width:640px;margin:0 0 40px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}

.bl-list{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.bl-card{
  background:#0E1219;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  padding:24px 26px;transition:border-color .15s ease,transform .15s ease;
}
.bl-card:hover{border-color:rgba(232,164,53,.45)}
.bl-card h2{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(19px,2.6vw,23px);
  line-height:1.22;letter-spacing:.3px;margin:0 0 9px;
}
.bl-card h2 a{color:#fff;text-decoration:none}
.bl-card h2 a:hover{color:#E8A435}
.bl-card p{margin:0 0 14px;color:#C4C9D0;font-size:16px}
.bl-meta{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.8px;
  text-transform:uppercase;color:#7C828C;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px;
}
.bl-pill{
  display:inline-block;border:1px solid rgba(232,164,53,.4);color:#E8A435;
  border-radius:999px;padding:3px 11px;font-size:11px;letter-spacing:.8px;
}
.bl-pill.is-draft{border-color:rgba(224,85,57,.5);color:#F0836C}

/* ---------- article ---------- */
.bl-article{max-width:760px;margin:0 auto;padding:48px 24px 64px}
.bl-crumb{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.9px;
  text-transform:uppercase;color:#7C828C;margin:0 0 18px;
}
.bl-crumb a{color:#7C828C;text-decoration:none}
.bl-crumb a:hover{color:#E8A435}

/* ---------- article hero ----------
   Optional per post (build_blog.py MANIFEST `hero=`). Card language is lifted
   from .bl-card on purpose -- same radius, same hairline -- so the blog reads as
   one surface rather than an article page with a banner bolted on. width/height
   are set on the <img> so the space is reserved before the file lands and the
   headline does not jump. */
.bl-hero{margin:0 0 26px}
.bl-hero img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
}

/* In-body figure. Same frame as the hero so the two read as one system, but it
   sits inside the prose column and gets its own vertical air. */
.bl-fig{margin:30px 0 30px}
.bl-fig img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
}
.bl-article h1{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(28px,5vw,42px);line-height:1.1;
  text-transform:uppercase;letter-spacing:.4px;margin:0 0 16px;color:#fff;
}
.bl-byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  color:#7C828C;font-size:14px;margin:0 0 34px;padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bl-byline .bl-review{color:#AEB4BD}
.bl-byline .bl-review strong{color:#E7EAED;font-weight:600}

.bl-article h2{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(20px,3.2vw,25px);line-height:1.2;text-transform:uppercase;
  letter-spacing:.6px;color:#E8A435;margin:42px 0 14px;
}
.bl-article h3{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:18px;
  letter-spacing:.4px;color:#fff;margin:28px 0 8px;
}
.bl-article p{margin:0 0 18px}
.bl-article ul,.bl-article ol{margin:0 0 20px;padding-left:22px}
.bl-article li{margin-bottom:11px}
.bl-article strong{color:#fff;font-weight:600}
.bl-article em{color:#C4C9D0}
.bl-article a{color:#E8A435;text-decoration:underline;text-underline-offset:2px}
.bl-article a:hover{color:#f3bd6b}
.bl-article hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:38px 0}

/* CTA card — every post ends in one */
.bl-cta{
  background:#0E1219;border:1px solid rgba(232,164,53,.35);border-radius:14px;
  padding:26px 28px;margin:38px 0 26px;
}
.bl-cta p{margin:0 0 16px}
.bl-cta p:last-child{margin-bottom:0}
.bl-cta .bl-btn{
  display:inline-block;background:#E8A435;color:#141922;text-decoration:none;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;letter-spacing:.6px;
  text-transform:uppercase;border-radius:999px;padding:12px 26px;margin-right:10px;
}
.bl-cta .bl-btn:hover{background:#f3bd6b;color:#141922}
.bl-cta .bl-tel{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;letter-spacing:.5px;
  text-transform:uppercase;color:#E8A435;text-decoration:none;white-space:nowrap;
}

/* medical disclaimer — deliberately quiet, deliberately always present */
.bl-disclaimer{
  color:#7C828C;font-size:14px;line-height:1.6;
  border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:30px;
}
.bl-disclaimer p{margin:0}

/* related reading */
.bl-related{margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.bl-related h2{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:.8px;
  text-transform:uppercase;color:#AEB4BD;margin:0 0 14px;
}
.bl-related ul{list-style:none;margin:0;padding:0}
.bl-related li{margin-bottom:10px}
.bl-related a{color:#E8A435;text-decoration:none;font-weight:600}
.bl-related a:hover{text-decoration:underline}

/* Below ~430px the three nav items plus the brand lockup overflow the header by a
   few pixels (measured: 336px of content in a 331px row at a 371px viewport). The
   brand lockup already links home, so the redundant Home item is the one to drop. */
@media (max-width:430px){
  .bl-nav .bl-home{display:none}
}

/* 320px devices: the brand lockup itself is the remaining 19px. */
@media (max-width:360px){
  .lg-head{padding:14px 16px}
  .lg-brand{font-size:15px}
  .lg-brand img{width:28px;height:28px}
  .bl-nav a{padding:6px 7px;font-size:12px}
  .bl-nav a.is-cta{padding:6px 12px}
}

@media (max-width:640px){
  .bl-wrap{padding:34px 20px 52px}
  .bl-article{padding:34px 20px 52px}
  .bl-card{padding:20px 20px}
  .bl-cta{padding:22px 20px}
  .bl-cta .bl-btn{display:block;text-align:center;margin:0 0 12px}
  .bl-cta .bl-tel{display:block;text-align:center}
  .bl-article h2{font-size:20px;margin-top:34px}
  .bl-nav a{padding:6px 9px;font-size:13px}
  .bl-nav a.is-cta{padding:6px 14px}
}