/* ============================================================================
   KINETIX BLOG — COMPONENT STYLES
   Depends on blog-tokens.css (must be linked first).
   ==========================================================================*/

/* Push content below the fixed 68px nav */
.blog-main{padding-top:68px}

/* ─────────────────────────── SHARED HEADS ─────────────────────────── */
.blog-wrap{max-width:var(--maxw-site);margin:0 auto;padding:0 3rem}
.read-wrap{max-width:var(--maxw-read);margin:0 auto;padding:0 1.5rem}

/* ─────────────────────────── INDEX: HERO ─────────────────────────── */
.blog-hero{
  padding:6rem 3rem 3.5rem;
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.blog-hero::after{ /* faint oversized wordmark, echoes site's #cta motif */
  content:'KINETIX IQ';
  position:absolute;right:-2%;bottom:-2.5rem;
  font-family:var(--ff-display);
  font-size:clamp(6rem,16vw,15rem);
  color:rgba(255,255,255,0.025);
  letter-spacing:0.04em;pointer-events:none;user-select:none;white-space:nowrap;
}
.blog-hero-inner{max-width:var(--maxw-site);margin:0 auto;position:relative;z-index:1}
.blog-hero-pre{
  font-size:0.68rem;font-weight:700;letter-spacing:0.35em;text-transform:uppercase;
  color:var(--orange);margin-bottom:1.4rem;
}
.blog-hero h1{
  font-family:var(--ff-display);
  font-size:clamp(3.5rem,10vw,8rem);line-height:0.9;letter-spacing:0.02em;
  margin-bottom:1.4rem;
}
.blog-hero h1 .stroke{display:block;color:transparent;-webkit-text-stroke:1.5px rgba(242,246,250,0.85)}
.blog-hero p{max-width:560px;color:rgba(242,246,250,0.6);font-size:1.05rem;line-height:1.8}

/* ─────────────────────────── INDEX: FILTERS ─────────────────────────── */
.filter-bar{
  position:sticky;top:68px;z-index:900;
  background:rgba(3,8,16,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:1.1rem 3rem;
}
.filter-inner{
  max-width:var(--maxw-site);margin:0 auto;
  display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center;
}
.filter-btn{
  font-family:var(--ff-body);
  font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:20px;
  padding:0.5rem 1.1rem;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.filter-btn:hover{color:var(--white);border-color:rgba(255,255,255,0.25)}
.filter-btn[aria-pressed="true"]{
  color:#fff;background:var(--orange);border-color:var(--orange);
}

/* ─────────────────────────── INDEX: POST GRID ─────────────────────────── */
.post-grid{
  max-width:var(--maxw-site);margin:0 auto;
  padding:3.5rem 3rem 5rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
}
.post-card{
  display:flex;flex-direction:column;
  background:var(--surf);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:border-color .25s,transform .35s,box-shadow .35s;
  will-change:transform;
}
.post-card:hover{
  border-color:rgba(255,122,31,0.35);
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(0,0,0,0.35);
}
.post-card.is-hidden{display:none}
.post-card a.card-cover{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dark)}
.post-card .card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--reveal-ease);filter:grayscale(12%) contrast(1.03)}
.post-card:hover .card-cover img{transform:scale(1.05)}

/* Typographic cover (used instead of a photo) — big Bebas hook, orange glow.
   Swap back to a photo any time: just put an <img> inside .card-cover and drop
   the .cover-gen class + inner .cover-word span. */
.post-card a.card-cover.cover-gen{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.4rem;
  background:
    radial-gradient(135% 95% at 84% 12%, rgba(255,122,31,0.22), transparent 58%),
    linear-gradient(155deg,#0f1a27 0%,var(--black) 80%);
}
.cover-word{
  font-family:var(--ff-display);
  font-size:clamp(2.3rem,6.2vw,3.3rem);line-height:0.82;letter-spacing:0.02em;
  display:block;
}
.cover-word .solid{display:block;color:var(--white)}
.cover-word .stroke{
  display:block;color:transparent;
  -webkit-text-stroke:1.3px rgba(242,246,250,0.5);
  transition:-webkit-text-stroke-color .3s;
}
.cover-word .hi{color:var(--orange);-webkit-text-stroke:0}
.post-card:hover .cover-word .stroke{-webkit-text-stroke-color:var(--orange)}
.card-cat{
  position:absolute;top:0.85rem;left:0.85rem;
  display:flex;gap:0.4rem;flex-wrap:wrap;
}
.card-cat span{
  font-size:0.6rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  background:rgba(3,8,16,0.78);color:var(--orange);
  border:1px solid rgba(255,122,31,0.35);
  padding:0.25rem 0.6rem;border-radius:20px;backdrop-filter:blur(4px);
}
.card-body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.card-meta{
  font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:0.9rem;display:flex;gap:0.6rem;align-items:center;
}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--orange)}
.post-card h2{font-size:1.3rem;font-weight:700;line-height:1.25;margin-bottom:0.7rem}
.post-card h2 a{transition:color .2s}
.post-card:hover h2 a{color:var(--orange)}
.card-excerpt{font-size:0.9rem;color:rgba(242,246,250,0.58);line-height:1.65;margin-bottom:1.25rem;flex:1}
.card-more{
  font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--orange);display:inline-flex;align-items:center;gap:0.45rem;
  transition:gap .2s;align-self:flex-start;
}
.post-card:hover .card-more{gap:0.85rem}

/* Empty-state (shown if a filter matches nothing) */
.filter-empty{
  grid-column:1/-1;text-align:center;color:var(--muted);
  padding:3rem 1rem;font-size:0.95rem;display:none;
}
.filter-empty.is-visible{display:block}

/* ─────────────────────────── INDEX: "MORE COMING" / NEWSLETTER CTA ─────────────────────────── */
.blog-cta{
  border-top:1px solid var(--line);
  background:var(--dark);
  padding:5rem 3rem;
}
.blog-cta-inner{
  max-width:var(--maxw-site);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.blog-cta h3{font-family:var(--ff-display);font-size:clamp(2.5rem,5vw,4rem);line-height:0.95;margin-bottom:1rem}
.blog-cta p{color:rgba(242,246,250,0.6);line-height:1.8;max-width:440px}

/* ─────────────────────────── NEWSLETTER FORM (shared) ─────────────────────────── */
/* Wired to Kit (ConvertKit) form 9646873 — AJAX submit handled in blog.js. */
.newsletter{
  background:var(--surf);border:1px solid var(--line);border-radius:6px;
  padding:2rem;
}
.newsletter-label{
  font-size:0.65rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:0.9rem;
}
.newsletter h4{font-size:1.25rem;font-weight:700;margin-bottom:1.25rem;line-height:1.3}
.newsletter-form{display:flex;gap:0.6rem;flex-wrap:wrap}
.newsletter-form input[type="email"]{
  flex:1;min-width:200px;
  font-family:var(--ff-body);font-size:0.9rem;color:var(--white);
  background:var(--black);border:1px solid var(--line);border-radius:3px;
  padding:0.9rem 1rem;
}
.newsletter-form input::placeholder{color:var(--muted)}
.newsletter-form input:focus{outline:none;border-color:var(--orange)}
.newsletter-form button{
  font-family:var(--ff-body);
  background:var(--orange);color:#fff;border:none;cursor:pointer;
  font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.9rem 1.6rem;border-radius:3px;transition:background .2s,transform .15s;
}
.newsletter-form button:hover{background:var(--orange-hover);transform:translateY(-1px)}
.newsletter-note{font-size:0.72rem;color:var(--muted);margin-top:0.85rem}
.newsletter-status{font-size:0.82rem;font-weight:600;margin-top:0.85rem;min-height:1em}
.newsletter-status.ok{color:var(--orange)}
.newsletter-status.err{color:#ff6b6b}

/* ─────────────────────────── ARTICLE PAGE ─────────────────────────── */
.article-header{
  padding:4rem 1.5rem 2.5rem;border-bottom:1px solid var(--line);
}
.article-header-inner{max-width:var(--maxw-read);margin:0 auto}
.article-back{
  font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:0.45rem;margin-bottom:2rem;
  transition:color .2s,gap .2s;
}
.article-back:hover{color:var(--orange);gap:0.75rem}
.article-cats{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.article-cats span{
  font-size:0.62rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--orange);background:rgba(255,122,31,0.1);
  border:1px solid rgba(255,122,31,0.3);padding:0.3rem 0.8rem;border-radius:20px;
}
.article-title{
  font-size:clamp(2rem,5.5vw,3.4rem);font-weight:700;line-height:1.12;letter-spacing:-0.01em;
  margin-bottom:1.5rem;
}
.article-meta{
  display:flex;gap:0.8rem;align-items:center;flex-wrap:wrap;
  font-size:0.8rem;font-weight:600;letter-spacing:0.04em;color:var(--muted);
}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--orange)}

/* Feature image */
.article-figure{max-width:960px;margin:0 auto;padding:2.5rem 1.5rem 0}
.article-figure img{width:100%;border-radius:6px;border:1px solid var(--line);filter:grayscale(10%) contrast(1.03)}
.article-figure figcaption{font-size:0.72rem;color:var(--muted);margin-top:0.7rem;text-align:center}

/* Body typography */
.article-body{max-width:var(--maxw-read);margin:0 auto;padding:3rem 1.5rem 1rem;font-size:1.075rem;line-height:1.85}
.article-body > *{margin-bottom:1.5rem}
.article-body p{color:rgba(242,246,250,0.82)}
.article-body h2{
  font-size:clamp(1.6rem,3.5vw,2.1rem);font-weight:700;line-height:1.2;letter-spacing:-0.01em;
  margin-top:3rem;margin-bottom:1.1rem;color:var(--white);
}
.article-body h3{
  font-size:1.25rem;font-weight:700;line-height:1.3;
  margin-top:2rem;margin-bottom:0.75rem;color:var(--white);
}
.article-body h2 + p,.article-body h3 + p{margin-top:0}
.article-body strong{color:var(--white);font-weight:700}
.article-body em{color:rgba(242,246,250,0.9)}
.article-body a:not(.btn-primary):not(.btn-ghost){
  color:var(--orange);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,122,31,0.4);transition:text-decoration-color .2s;
}
.article-body a:not(.btn-primary):not(.btn-ghost):hover{text-decoration-color:var(--orange)}
.article-body ul,.article-body ol{padding-left:1.4rem;color:rgba(242,246,250,0.82)}
.article-body li{margin-bottom:0.6rem}
.article-body li::marker{color:var(--orange)}
.article-body blockquote{
  border-left:2px solid var(--orange);padding:0.4rem 0 0.4rem 1.5rem;margin-left:0;
  font-size:1.2rem;line-height:1.5;color:var(--white);font-weight:500;
}

/* TLDR / key-points callout */
.tldr{
  background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:6px;padding:1.5rem 1.75rem;margin:0 auto 1rem;
}
.tldr .tldr-label{
  font-size:0.65rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:0.7rem;
}
.tldr p{color:rgba(242,246,250,0.8);font-size:0.98rem;line-height:1.7;margin:0}

/* Superscript numbered citations */
.cite{
  font-size:0.68em;font-weight:700;color:var(--orange);
  vertical-align:super;line-height:0;padding-left:1px;
}
.cite a{color:var(--orange)}
.cite a:hover{text-decoration:underline}

/* References section */
.references{max-width:var(--maxw-read);margin:0 auto;padding:2.5rem 1.5rem}
.references h2{font-size:1.4rem;font-weight:700;margin-bottom:1.25rem}
.references ol{padding-left:1.4rem;counter-reset:ref}
.references li{
  font-size:0.82rem;line-height:1.6;color:var(--muted);margin-bottom:0.85rem;
  scroll-margin-top:90px;
}
.references li a{color:var(--orange);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.references li:target{color:var(--white)}

/* Medical disclaimer */
.article-disclaimer{
  max-width:var(--maxw-read);margin:0 auto;padding:1.5rem;
  font-size:0.8rem;font-style:italic;color:var(--muted);line-height:1.6;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}

/* ─────────────────────────── SHARE BUTTONS ─────────────────────────── */
.share-bar{
  max-width:var(--maxw-read);margin:0 auto;padding:2rem 1.5rem;
  display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;
}
.share-label{
  font-size:0.65rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--muted);margin-right:0.3rem;
}
.share-btn{
  width:42px;height:42px;border:1px solid var(--line);border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:var(--muted);background:transparent;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.share-btn:hover,.share-btn:focus-visible{border-color:var(--orange);color:var(--orange);background:rgba(255,122,31,0.07)}
.share-btn.copied{border-color:var(--orange);color:var(--orange)}
.copy-feedback{font-size:0.72rem;color:var(--orange);opacity:0;transition:opacity .2s}
.copy-feedback.show{opacity:1}

/* ─────────────────────────── AUTHOR BIO ─────────────────────────── */
.author-bio{
  max-width:var(--maxw-read);margin:2rem auto;padding:2rem;
  background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:6px;
  display:flex;gap:1.5rem;align-items:flex-start;
}
.author-bio img{
  width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,122,31,0.4);filter:grayscale(10%) contrast(1.05);
}
.author-bio-label{
  font-size:0.62rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--orange);margin-bottom:0.4rem;
}
.author-bio h3{font-size:1.2rem;font-weight:700;margin-bottom:0.15rem}
.author-bio .creds{font-size:0.78rem;font-weight:600;letter-spacing:0.06em;color:var(--orange);margin-bottom:0.7rem}
.author-bio p{font-size:0.88rem;color:rgba(242,246,250,0.62);line-height:1.65}

/* ─────────────────────────── RELATED POSTS ─────────────────────────── */
.related{max-width:var(--maxw-site);margin:0 auto;padding:4rem 3rem 2rem;border-top:1px solid var(--line)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}

/* ─────────────────────────── ARTICLE-FOOT CTA ─────────────────────────── */
.article-book-cta{
  background:var(--orange);text-align:center;padding:5rem 1.5rem;position:relative;overflow:hidden;
}
.article-book-cta::before{
  content:'KINETIX';position:absolute;font-family:var(--ff-display);
  font-size:clamp(7rem,20vw,18rem);color:rgba(255,255,255,0.08);white-space:nowrap;
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;letter-spacing:-0.02em;
}
.article-book-cta .inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.article-book-cta h3{font-family:var(--ff-display);font-size:clamp(2.5rem,7vw,5rem);line-height:0.95;color:#fff;margin-bottom:1rem}
.article-book-cta p{color:rgba(255,255,255,0.85);margin-bottom:2rem;font-size:1.02rem;line-height:1.7}
.btn-white{
  display:inline-flex;align-items:center;gap:0.75rem;
  background:#fff;color:var(--orange);
  font-size:0.9rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:1.1rem 2.6rem;border-radius:3px;box-shadow:0 10px 40px rgba(0,0,0,0.15);
  transition:transform .2s,box-shadow .2s;
}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(0,0,0,0.2)}

/* ─────────────────────────── READING PROGRESS BAR ─────────────────────────── */
#read-progress{
  position:fixed;top:68px;left:0;height:2px;width:0;
  background:var(--orange);z-index:1001;transition:width .1s linear;
}

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media(max-width:1024px){
  .post-grid,.related-grid{grid-template-columns:repeat(2,1fr)}
  .blog-cta-inner{grid-template-columns:1fr;gap:2.5rem}
}
@media(max-width:768px){
  .nav-links li.hide-sm{display:none}
  .nav-links{gap:0.4rem}
  .nav-book{padding:0.5rem 1rem;font-size:0.72rem;letter-spacing:0.06em;margin-left:0.25rem}
  .blog-hero{padding:5rem 1.5rem 3rem}
  .filter-bar{padding:0.9rem 1.5rem;overflow-x:auto}
  .filter-inner{flex-wrap:nowrap}
  .post-grid{grid-template-columns:1fr;padding:2.5rem 1.5rem 4rem}
  .related-grid{grid-template-columns:1fr}
  .related,.blog-cta{padding-left:1.5rem;padding-right:1.5rem}
  .author-bio{flex-direction:column;gap:1rem}
  .author-bio img{width:72px;height:72px}
}