/* =========================================================
   AjansLabs — Blog Post Page
   ========================================================= */

/* HERO */
.blog-hero{
  padding:160px var(--gutter) 60px;
  border-bottom:1px solid var(--ink-3);
}
.blog-hero .eyebrow{ margin-bottom:24px; }
.blog-hero h1{
  font-size:clamp(2.6rem,7vw,5.6rem);
  text-transform:uppercase; max-width:20ch;
  line-height:.96; margin-bottom:28px;
}
.blog-meta{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  color:var(--paper-dim); font-size:14px;
}
.blog-meta span{ display:inline-flex; align-items:center; gap:6px; }

/* COVER IMAGE */
.blog-cover{
  width:100%; max-width:900px; margin:0 auto;
  padding:clamp(30px,5vw,60px) var(--gutter) 0;
}
.blog-cover img{
  width:100%; border-radius:var(--radius);
  border:1px solid var(--ink-3);
}

/* ARTICLE BODY */
.blog-article{
  max-width:760px; margin:0 auto;
  padding:clamp(40px,6vw,80px) var(--gutter) clamp(60px,8vw,120px);
}
.blog-article h2{
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  text-transform:uppercase; margin:56px 0 20px;
  padding-top:40px; border-top:1px solid var(--ink-3);
}
.blog-article h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.blog-article h3{
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  text-transform:uppercase; margin:36px 0 14px;
  color:var(--acid);
}
.blog-article p{
  color:var(--paper-dim); font-size:18px; line-height:1.75;
  margin-bottom:22px;
}
.blog-article strong{ color:var(--paper); }
.blog-article em{ color:var(--acid); font-style:normal; }

/* highlight box */
.blog-highlight{
  background:var(--ink-2); border-left:3px solid var(--acid);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:24px 30px; margin:32px 0;
}
.blog-highlight p{ color:var(--paper); margin-bottom:0; font-size:17px; }

/* list */
.blog-article ul{
  list-style:none; margin:20px 0 28px; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.blog-article ul li{
  display:flex; align-items:flex-start; gap:12px;
  color:var(--paper-dim); font-size:17px; line-height:1.6;
}
.blog-article ul li::before{
  content:"→"; color:var(--acid); font-weight:700; flex-shrink:0; margin-top:1px;
}

/* CTA bar */
.blog-cta{
  background:var(--acid); border-radius:20px;
  padding:clamp(30px,4vw,50px); margin:48px 0;
  text-align:center;
}
.blog-cta h3{ color:var(--ink); margin:0 0 12px; text-transform:uppercase; }
.blog-cta p{ color:rgba(12,12,10,.7); margin-bottom:20px; font-size:17px; }
.blog-cta a{
  display:inline-block; background:var(--ink); color:var(--acid);
  padding:14px 34px; border-radius:100px;
  font-family:var(--display); font-weight:600; font-size:16px;
  transition:transform .3s var(--ease);
}
.blog-cta a:hover{ transform:translateY(-2px); }

/* share row */
.blog-share{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:40px; border-top:1px solid var(--ink-3); margin-top:48px;
}
.blog-share span{ font-size:14px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); }
.blog-share a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--ink-3); color:var(--paper); font-size:18px;
  transition:background .3s, color .3s, border-color .3s;
}
.blog-share a:hover{ background:var(--acid); color:var(--ink); border-color:var(--acid); }

/* nav active */
.nav-links a.active{ color:var(--acid) !important; }
.nav-links a.active::after{ width:100%; background:var(--acid) !important; }

@media(max-width:860px){
  .blog-cover{ padding-top:30px; }
}