/* ─────────────────────────────────────────────────────────────────────────────
   Royaltē Knowledge Hub — blog-specific styles
   Loaded by blog.html and (later) /blog/*.html article pages.
   Reuses CSS variables defined inline on each page (see :root in blog.html).
   Do not redefine colors, fonts, or spacing tokens here.
   ───────────────────────────────────────────────────────────────────────────── */

.blog-main{
  position:relative;
  z-index:2;
  padding-top:96px; /* clear fixed nav */
}

/* ── HERO ── */
.blog-hero{
  max-width:840px;
  margin:0 auto;
  padding:80px 24px 48px;
  text-align:center;
  position:relative;
  z-index:2;
}
.blog-hero-h1{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(36px,5vw,56px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:#ffffff;
  margin-bottom:20px;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.blog-hero-subhead{
  font-size:17px;
  line-height:1.7;
  color:var(--muted2);
  max-width:680px;
  margin:0 auto;
}

/* ── FILTER PILLS ── */
.blog-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  max-width:960px;
  margin:0 auto 48px;
  padding:0 24px;
  position:relative;
  z-index:2;
}
.filter-pill{
  background:transparent;
  border:1px solid var(--border2);
  color:var(--muted2);
  font-family:'Space Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:100px;
  cursor:pointer;
  transition:all 0.2s;
}
.filter-pill:hover{
  border-color:rgba(138,92,255,0.5);
  color:var(--text);
}
.filter-pill.active{
  background:var(--grad);
  color:#fff;
  border-color:transparent;
}

/* ── CARDS GRID ── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px 100px;
  position:relative;
  z-index:2;
}

/* ── CARD ── */
.blog-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover:not([aria-disabled="true"]){
  border-color:var(--border2);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(138,92,255,0.08);
}
.blog-card[aria-disabled="true"]{
  opacity:0.55;
}
.blog-card[aria-disabled="true"] .blog-card-link{
  pointer-events:none;
  color:var(--muted);
}

.blog-card-cat{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--pur);
  background:rgba(138,92,255,0.1);
  padding:5px 11px;
  border-radius:3px;
  align-self:flex-start;
  border:1px solid var(--border2);
}
.blog-card-cat.coming-soon{
  color:var(--muted);
  background:rgba(132,128,168,0.08);
  border-color:var(--border3);
}

.blog-card-title{
  font-family:'Rajdhani',sans-serif;
  font-size:22px;
  font-weight:600;
  color:var(--text);
  line-height:1.25;
  letter-spacing:0;
}

.blog-card-excerpt{
  font-size:14px;
  line-height:1.65;
  color:var(--text2);
  flex:1;
}

.blog-card-meta{
  font-family:'Space Mono',monospace;
  font-size:11px;
  color:var(--muted2);
  letter-spacing:0.04em;
}

.blog-card-link{
  display:inline-block;
  color:var(--pur);
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.04em;
  transition:opacity 0.2s;
}
.blog-card-link:hover{
  opacity:0.78;
}

/* ── MOBILE (landing) ── */
@media (max-width:640px){
  .blog-main{padding-top:64px;}
  .blog-hero{padding:56px 20px 36px;}
  .blog-hero-h1{font-size:36px;}
  .blog-hero-subhead{font-size:15px;}
  .blog-filter{margin-bottom:36px;padding:0 20px;}
  .blog-grid{grid-template-columns:1fr;gap:18px;padding:0 20px 72px;}
  .blog-card{padding:20px;}
  .blog-card-title{font-size:20px;}
}

/* ─────────────────────────────────────────────────────────────────────────────
   ARTICLE PAGE (used by /blog/*.html)
   ───────────────────────────────────────────────────────────────────────────── */

.article-main{
  position:relative;
  z-index:2;
  padding-top:96px; /* clear fixed nav */
  padding-bottom:80px;
}

.article-wrap{
  max-width:820px;
  margin:0 auto;
  padding:56px 24px 0;
}

/* Header */
.article-header{
  margin-bottom:36px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.article-category{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--pur);
  background:rgba(138,92,255,0.1);
  padding:5px 11px;
  border-radius:3px;
  border:1px solid var(--border2);
  margin-bottom:18px;
}
.article-title{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(30px,4.5vw,46px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:#ffffff;
  margin-bottom:14px;
}
.article-subtitle{
  font-size:13px;
  color:var(--muted2);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:8px 0 0;
  line-height:1.5;
  font-family:'Space Mono',monospace;
}
.article-meta{
  font-family:'Space Mono',monospace;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.06em;
}

/* Intro + body shared typography */
.article-intro,
.article-body{
  font-size:17px;
  line-height:1.75;
  color:var(--text2);
}
.article-intro p,
.article-body p{
  margin-bottom:20px;
}
.article-intro p:last-child,
.article-body p:last-child{
  margin-bottom:0;
}
.article-body h2{
  font-family:'Rajdhani',sans-serif;
  font-size:26px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:0;
  margin:48px 0 16px;
  line-height:1.2;
}
.article-body h3{
  font-family:'Rajdhani',sans-serif;
  font-size:20px;
  font-weight:600;
  color:#ffffff;
  margin:32px 0 12px;
}
.article-body ul,
.article-body ol{
  margin:0 0 20px 24px;
}
.article-body li{margin-bottom:6px;}
.article-body a{color:var(--pur);text-decoration:underline;text-underline-offset:3px;}
.article-body a:hover{opacity:0.85;}
.article-body strong{color:#ffffff;}

/* Mid-article CTA (baked in, never edited per article) */
.mid-cta{
  margin:48px 0;
  padding:28px 28px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.mid-cta-headline{
  font-family:'Rajdhani',sans-serif;
  font-size:20px;
  font-weight:600;
  color:#ffffff;
  line-height:1.35;
  letter-spacing:0;
}
.mid-cta-btn{
  align-self:flex-start;
  background:var(--grad);
  color:#fff;
  padding:12px 22px;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-family:'Space Grotesk',sans-serif;
  text-decoration:none;
  transition:opacity 0.2s;
}
.mid-cta-btn:hover{opacity:0.88;}

/* Final CTA (baked in, never edited per article) */
.final-cta{
  margin:64px 0 0;
  padding:40px 32px;
  background:linear-gradient(135deg, rgba(138,92,255,0.08), rgba(224,64,200,0.06));
  border:1px solid var(--border2);
  border-radius:10px;
  box-shadow:var(--glow);
}
.final-cta-headline{
  font-family:'Rajdhani',sans-serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
  color:#ffffff;
  line-height:1.2;
  margin-bottom:14px;
  letter-spacing:0;
}
.final-cta-body{
  font-size:15.5px;
  line-height:1.7;
  color:var(--text2);
  margin-bottom:24px;
}
.final-cta-btn{
  display:inline-block;
  background:var(--grad);
  color:#fff;
  padding:14px 26px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-family:'Space Grotesk',sans-serif;
  text-decoration:none;
  transition:opacity 0.2s, transform 0.2s;
}
.final-cta-btn:hover{opacity:0.92;transform:translateY(-1px);}

/* Related articles */
.related-articles{
  max-width:820px;
  margin:64px auto 0;
  padding:0 24px;
}
.related-h3{
  font-family:'Rajdhani',sans-serif;
  font-size:20px;
  font-weight:700;
  color:#ffffff;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.related-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.related-card:hover:not([aria-disabled="true"]){
  border-color:var(--border2);
  transform:translateY(-1px);
}
.related-card[aria-disabled="true"]{
  opacity:0.55;
  pointer-events:none;
}
.related-cat{
  font-family:'Space Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--pur);
}
.related-card.coming-soon .related-cat{color:var(--muted);}
.related-title{
  font-family:'Rajdhani',sans-serif;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  line-height:1.3;
}

/* ── MOBILE (article) ── */
@media (max-width:640px){
  .article-main{padding-top:64px;padding-bottom:56px;}
  .article-wrap{padding:32px 20px 0;}
  .article-title{font-size:30px;}
  .article-intro,.article-body{font-size:16px;}
  .article-body h2{font-size:22px;margin:36px 0 14px;}
  .mid-cta{padding:22px;margin:36px 0;}
  .mid-cta-headline{font-size:17px;}
  .final-cta{padding:28px 22px;}
  .final-cta-body{font-size:14.5px;}
  .related-articles{padding:0 20px;margin-top:48px;}
  .related-grid{grid-template-columns:1fr;}
}

.article-hero-image {
  width: 100%;
  max-width: 920px;
  margin: 32px auto 48px auto;
  border-radius: 20px;
  display: block;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
@media (max-width: 640px) {
  .article-hero-image {
    margin: 24px auto 32px auto;
    border-radius: 14px;
  }
}
.article-closer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}