/* ============================================================
   JellyBlue — blog section stylesheet (separate from style.css)
   lunggora.com · prefix: lg-
   Loaded only on /blog/ pages.
   ============================================================ */

.lg-bloghead{
  background:var(--lg-navy-dd);
  border-bottom:1px solid var(--lg-line-soft);
  padding:2.6rem 0 2.2rem;position:relative;overflow:hidden;
}
.lg-bloghead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 82% 20%,rgba(46,125,215,.22),transparent 68%);
}
.lg-bloghead > .container{position:relative;z-index:2}

/* ── Category chips ───────────────────────────────────────── */
.lg-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.lg-cats a{
  font-family:var(--lg-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.5rem 1rem;border-radius:999px;border:1px solid var(--lg-line);
  background:var(--lg-navy-card);color:var(--lg-body);text-decoration:none;
  transition:border-color .16s,color .16s,background .16s;
}
.lg-cats a:hover,.lg-cats a[aria-current="page"]{
  border-color:var(--lg-gold);color:var(--lg-gold-l);background:rgba(200,160,48,.1);
  text-decoration:none;
}

/* ── Post cards ───────────────────────────────────────────── */
.lg-postcard{
  background:var(--lg-navy-card);border:1px solid var(--lg-line);
  border-radius:var(--lg-r);padding:1.5rem 1.4rem;height:100%;
  display:flex;flex-direction:column;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.lg-postcard:hover{transform:translateY(-4px);border-color:var(--lg-blue);box-shadow:var(--lg-sh)}
.lg-postcard__cat{
  font-family:var(--lg-mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.3rem .65rem;border-radius:999px;align-self:flex-start;margin-bottom:.9rem;
  background:rgba(46,125,215,.14);color:var(--lg-blue-l);border:1px solid rgba(46,125,215,.32);
}
.lg-postcard__cat--rev{background:rgba(200,160,48,.14);color:var(--lg-gold-l);border-color:rgba(200,160,48,.35)}
.lg-postcard h3{font-size:1.3rem;line-height:1.18;margin-bottom:.6rem}
.lg-postcard h3 a{color:#fff;text-decoration:none}
.lg-postcard h3 a:hover{color:var(--lg-gold-l);text-decoration:none}
.lg-postcard p{font-size:.9rem;margin:0 0 1rem;color:var(--lg-body)}
.lg-postcard__meta{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--lg-line-soft);
  font-family:var(--lg-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lg-muted);display:flex;justify-content:space-between;gap:.7rem;flex-wrap:wrap;
}

/* ── Pagination ───────────────────────────────────────────── */
.lg-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:2.8rem}
.lg-pager a,.lg-pager span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .8rem;border-radius:10px;border:1px solid var(--lg-line);
  background:var(--lg-navy-card);color:var(--lg-body);text-decoration:none;
  font-family:var(--lg-mono);font-size:.82rem;
}
.lg-pager a:hover{border-color:var(--lg-gold);color:var(--lg-gold-l);text-decoration:none}
.lg-pager .is-current{background:var(--lg-gold);color:#1B1305;border-color:var(--lg-gold);font-weight:700}
.lg-pager .is-gap{border:none;background:transparent;color:var(--lg-muted);min-width:22px;padding:0}

/* ── Post layout ──────────────────────────────────────────── */
.lg-post{padding:2.6rem 0 3.4rem}
.lg-post__head{margin-bottom:2rem}
.lg-post__head h1{font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1.04}
.lg-post__byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  margin-top:1.4rem;padding:1rem 0;
  border-block:1px solid var(--lg-line-soft);
  font-family:var(--lg-mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lg-muted);
}
.lg-post__byline b{color:var(--lg-body);font-weight:500}
.lg-avatar{font-weight:700;
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--lg-blue),var(--lg-navy-l));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--lg-display);font-size:.76rem;font-weight:800;letter-spacing:0;
}

.lg-post__body{font-size:1.04rem;line-height:1.82}
.lg-post__body h2{font-size:clamp(1.7rem,3.6vw,2.25rem);margin-top:2.2em;margin-bottom:.7em}
.lg-post__body h3{font-size:1.4rem;margin-top:1.8em;margin-bottom:.6em}
.lg-post__body ul,.lg-post__body ol{padding-left:1.35rem;margin:0 0 1.3em}
.lg-post__body li{margin-bottom:.55em}
.lg-post__body li::marker{color:var(--lg-gold)}
.lg-post__body a{color:var(--lg-blue-l)}
.lg-post__body a:hover{color:var(--lg-gold-l)}

/* Key-takeaway block inside posts */
.lg-key{
  background:linear-gradient(135deg,rgba(46,125,215,.13),rgba(46,125,215,.03));
  border:1px solid rgba(46,125,215,.35);border-left:4px solid var(--lg-blue);
  border-radius:var(--lg-r);padding:1.3rem 1.5rem;margin:0 0 2rem;
}
.lg-key p{margin:0;font-size:1.02rem;color:var(--lg-ink)}
.lg-key p+p{margin-top:.7rem}
.lg-key__label{
  font-family:var(--lg-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lg-blue-l);display:block;margin-bottom:.6rem;
}

/* In-post CTA */
.lg-cta{
  background:linear-gradient(135deg,rgba(200,160,48,.14),rgba(200,160,48,.03));
  border:1px solid rgba(200,160,48,.4);border-radius:var(--lg-r);
  padding:1.7rem 1.6rem;margin:2.4rem 0;text-align:center;
}
.lg-cta h3{font-size:1.5rem;margin-bottom:.6rem}
.lg-cta p{font-size:.95rem;margin-bottom:1.2rem;color:var(--lg-body)}
.lg-cta .lg-small{margin-top:1rem}

/* TOC */
.lg-toc{
  background:var(--lg-navy-card);border:1px solid var(--lg-line);
  border-radius:var(--lg-r);padding:1.3rem 1.45rem;margin:0 0 2.2rem;
}
.lg-toc h2{
  font-family:var(--lg-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lg-gold);margin:0 0 .9rem;font-weight:500;
}
.lg-toc ol{margin:0;padding-left:1.2rem;font-size:.94rem}
.lg-toc li{margin-bottom:.45rem}
.lg-toc a{color:var(--lg-body)}
.lg-toc a:hover{color:var(--lg-gold-l)}

/* Related posts */
.lg-related{border-top:1px solid var(--lg-line-soft);margin-top:3rem;padding-top:2.2rem}
.lg-related h2{font-size:1.7rem;margin-bottom:1.3rem}
.lg-related ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.lg-related li{
  border:1px solid var(--lg-line-soft);border-radius:var(--lg-r-sm);
  padding:.9rem 1.1rem;background:var(--lg-navy-card);
  transition:border-color .16s,transform .16s;
}
.lg-related li:hover{border-color:var(--lg-gold);transform:translateX(3px)}
.lg-related a{color:var(--lg-ink);text-decoration:none;font-weight:600;font-size:.96rem}
.lg-related a:hover{color:var(--lg-gold-l);text-decoration:none}

/* Post-level FAQ reuses .lg-acc from style.css */
.lg-postfaq{margin-top:2.6rem}
.lg-postfaq > h2{font-size:1.75rem;margin-bottom:1.2rem}

/* Author box */
.lg-authorbox{
  background:var(--lg-navy-card);border:1px solid var(--lg-line);
  border-radius:var(--lg-r);padding:1.5rem;margin-top:2.6rem;
}
.lg-authorbox h3{font-size:1.3rem;margin-bottom:.5rem}
.lg-authorbox p{font-size:.92rem;margin:0}
.lg-authorbox p+p{margin-top:.7rem}

/* Blog-side disclaimer */
.lg-postnote{
  border:1px solid var(--lg-line);border-radius:var(--lg-r);
  padding:1.2rem 1.35rem;margin-top:2.4rem;background:rgba(255,255,255,.02);
  font-size:.83rem;line-height:1.7;color:var(--lg-muted);
}
.lg-postnote strong{color:var(--lg-body)}
.lg-postnote p:last-child{margin-bottom:0}