/* ============================================================
   VERTEX BLOG — shared styles for /blog/index.html and every post.
   Loaded alongside style.css + theme-cyber.css. IMPORTANT: theme-cyber.css
   remaps every "light section" token (--paper-0, --paper-50, --slate-500,
   --line-on-light) onto the dark navy scale, because the whole site (this
   blog included) renders as ONE consistent dark surface — .section-light
   and .section-tint are dark navy panels, not white ones. So every text
   color in this file is chosen for readability against that dark surface
   (--on-dark-100 / --on-dark-300 / --teal-400), the same tokens the rest
   of the dark theme already uses — never --navy-900 (near-black, meant
   for text on an actually-white background) and never a hardcoded dark
   fallback, both of which read as invisible dark-on-dark here. */

/* ---------- Tag / category pill ---------- */
.tag-pill{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-head);font-weight:700;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-400);background:rgba(23,195,189,.14);
  border:1px solid rgba(23,195,189,.35);border-radius:999px;
  padding:.35em .9em;
}

/* ---------- Blog index grid ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);}
@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.blog-grid{grid-template-columns:1fr;}}
.blog-grid.featured{grid-template-columns:1.3fr 1fr;margin-bottom:clamp(1.5rem,3vw,2.5rem);}
@media (max-width:760px){.blog-grid.featured{grid-template-columns:1fr;}}

.blog-card{
  display:flex;flex-direction:column;background:var(--paper-0);
  border:1px solid var(--line-on-light);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 14px 30px -18px rgba(0,0,0,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(23,195,189,.4);box-shadow:0 22px 44px -18px rgba(0,0,0,.6);}
.blog-card .blog-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--navy-800);}
.blog-card .blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease);}
.blog-card:hover .blog-card-img img{transform:scale(1.04);}
.blog-card .blog-card-body{padding:clamp(1.1rem,2vw,1.6rem);display:flex;flex-direction:column;gap:.6rem;flex:1;}
.blog-card h3{font-size:1.08rem;line-height:1.3;color:var(--on-dark-100);}
.blog-card:hover h3{color:var(--teal-400);}
.blog-card p{font-size:.88rem;color:var(--on-dark-300);flex:1;}
.blog-card .blog-card-meta{font-family:var(--font-head);font-size:.72rem;letter-spacing:.03em;color:var(--on-dark-300);text-transform:uppercase;display:flex;gap:.6em;align-items:center;opacity:.85;}
.blog-card.featured{flex-direction:row;align-items:stretch;}
.blog-card.featured .blog-card-img{flex:1 1 48%;aspect-ratio:auto;}
.blog-card.featured .blog-card-body{flex:1 1 52%;justify-content:center;}
.blog-card.featured h3{font-size:1.4rem;}
@media (max-width:760px){.blog-card.featured{flex-direction:column;}.blog-card.featured .blog-card-img{aspect-ratio:16/10;}}

/* ---------- Post byline / meta row ---------- */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75em;
  font-family:var(--font-head);font-size:.78rem;color:var(--on-dark-300);
  margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-on-dark);
}
.post-meta .dot{opacity:.5;}

/* ---------- Post hero image ---------- */
.post-hero-img{border-radius:var(--radius);overflow:hidden;margin-top:clamp(1.5rem,3vw,2.5rem);box-shadow:0 20px 44px -22px rgba(0,0,0,.6);}
.post-hero-img img{width:100%;height:auto;display:block;}
.post-hero-caption{font-size:.78rem;color:var(--on-dark-300);margin-top:.6rem;text-align:center;}

/* ---------- Article body prose ---------- */
.post-body{max-width:70ch;margin-inline:auto;}
.post-body > * + *{margin-top:1.3em;}
.post-body h2{font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem);margin-top:2.2em;color:var(--on-dark-100);}
.post-body h3{font-size:1.1rem;margin-top:1.8em;color:var(--on-dark-100);}
.post-body p{color:var(--on-dark-300);font-size:1.02rem;line-height:1.75;}
.post-body ul,.post-body ol{padding-left:1.3em;display:grid;gap:.55em;color:var(--on-dark-300);}
.post-body li{line-height:1.6;}
/* :not(.btn):not(.blog-card):not(.blog-card *) keeps this plain-prose-link
   style off two bigger components that end up nested inside .post-body
   (.post-cta's button, and the .blog-card links in "Related reading"):
   without it, this rule's higher specificity overrode .btn-primary's own
   on-brand text color (making the CTA button's label nearly invisible)
   and painted a stray underline across every related-post card's tag
   and title. */
.post-body a:not(.btn):not(.blog-card):not(.blog-card *){color:var(--teal-400);text-decoration:underline;}
.post-body figure{margin:0;}
.post-body figure img{width:100%;border-radius:var(--radius-sm);display:block;}
.post-body figcaption{font-size:.8rem;color:var(--on-dark-300);margin-top:.5rem;}
.post-body blockquote{
  border-left:3px solid var(--teal-500);padding:.2em 0 .2em 1.3em;margin:1.6em 0;
  font-family:var(--font-head);font-weight:600;font-size:1.1rem;color:var(--on-dark-100);
}
.post-pullquote{
  font-family:var(--font-head);font-weight:700;font-size:clamp(1.3rem,1.1rem+.9vw,1.7rem);
  line-height:1.35;color:var(--on-dark-100);max-width:60ch;margin:2.4em auto;text-align:center;
}

/* ---------- Post footer CTA ---------- */
.post-cta{
  margin-top:clamp(2.5rem,4vw,3.5rem);padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--radius);background:var(--navy-950);border:1px solid var(--line-on-dark);color:#fff;text-align:center;
}
.post-cta h3{color:#fff;margin-bottom:.5em;}
.post-cta p{color:var(--on-dark-300);max-width:52ch;margin-inline:auto;margin-bottom:1.3em;}

/* ---------- Related posts ---------- */
.post-related{margin-top:clamp(2rem,4vw,3rem);}
.post-related h3{font-family:var(--font-head);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-400);margin-bottom:1rem;}

/* ---------- FAQ items inside a post body (re-themed for dark surface;
   the sitewide .faq-item/.faq-q/.faq-a rules in style.css assume a light
   background, same issue as everything else on this page) ---------- */
.post-body .faq-item{border-bottom:1px solid var(--line-on-dark);}
.post-body .faq-q{color:var(--on-dark-100);}
.post-body .faq-a{color:var(--on-dark-300);}