/* ═══ BLOG — shared styles ═══ */

/* Breadcrumb */
.blog-breadcrumb{
  padding:100px clamp(24px,4vw,48px) 0;
  font-size:13px;font-weight:300;color:var(--dim);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  max-width:720px;margin:0 auto;
}
.blog-breadcrumb a{transition:color .2s}
.blog-breadcrumb a:hover{color:var(--lime)}
.blog-breadcrumb .current{color:var(--grey)}

/* Article */
.blog-article{
  max-width:720px;margin:0 auto;
  padding:40px clamp(24px,4vw,48px) 80px;
}
.blog-header{margin-bottom:48px}
.blog-header h1{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(28px,4vw,44px);line-height:1.15;
  letter-spacing:-.5px;margin-bottom:16px;
}
.blog-meta{
  font-size:13px;font-weight:300;color:var(--dim);
  display:flex;align-items:center;gap:8px;
}

/* Article body */
.blog-body h2{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,2.5vw,28px);line-height:1.25;
  margin:48px 0 20px;letter-spacing:-.3px;
}
.blog-body h3{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(17px,2vw,22px);line-height:1.3;
  margin:36px 0 16px;
}
.blog-body p{
  font-size:16px;font-weight:300;line-height:1.75;
  color:rgba(255,255,255,.8);margin-bottom:20px;
}
.blog-body ul,.blog-body ol{
  margin:0 0 20px 24px;
  color:rgba(255,255,255,.8);
}
.blog-body li{
  font-size:16px;font-weight:300;line-height:1.75;
  margin-bottom:8px;
}
.blog-body strong{font-weight:600;color:var(--white)}
.blog-body a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;transition:opacity .2s}
.blog-body a:hover{opacity:.8}
.blog-body table{
  width:100%;border-collapse:collapse;margin:24px 0 32px;
  font-size:14px;
}
.blog-body th{
  text-align:left;padding:12px 16px;
  font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid rgba(255,255,255,.1);
}
.blog-body td{
  padding:12px 16px;font-weight:300;
  color:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.blog-body tr:hover td{background:rgba(255,255,255,.02)}

/* CTA block */
.blog-cta{
  background:var(--lime);color:var(--bg);
  border-radius:16px;padding:clamp(32px,4vw,48px);
  margin-top:56px;text-align:center;
}
.blog-cta .cta-headline{
  font-size:clamp(20px,2.5vw,26px);font-weight:500;
  line-height:1.3;margin-bottom:8px;color:var(--bg);
}
.blog-cta .cta-sub{
  font-size:16px;font-weight:300;color:rgba(10,10,10,.7);
  margin-bottom:24px;
}
.blog-cta .btn-f{
  background:var(--bg);color:var(--lime);
  font-size:14px;font-weight:600;
}
.blog-cta .btn-f:hover{
  box-shadow:0 6px 28px rgba(0,0,0,.3);
}

/* ═══ BLOG INDEX ═══ */
.blog-index{
  max-width:900px;margin:0 auto;
  padding:120px clamp(24px,4vw,48px) 80px;
}
.blog-index h1{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(32px,4vw,48px);letter-spacing:-.5px;
  margin-bottom:8px;
}
.blog-index-sub{
  font-size:16px;font-weight:300;color:var(--grey);
  margin-bottom:48px;line-height:1.6;
}
.blog-grid{
  display:flex;flex-direction:column;gap:1px;
}

/* Blog card */
.blog-card{
  border-bottom:1px solid rgba(255,255,255,.08);
}
.blog-card a{
  display:block;padding:32px 0;transition:background .2s;
}
.blog-card a:hover{background:rgba(255,255,255,.02);padding-left:16px;padding-right:16px;margin:0 -16px;border-radius:12px}
.blog-card h2{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(18px,2.5vw,24px);line-height:1.3;
  letter-spacing:-.3px;margin-bottom:8px;
  transition:color .2s;
}
.blog-card a:hover h2{color:var(--lime)}
.blog-card-desc{
  font-size:15px;font-weight:300;color:var(--grey);
  line-height:1.6;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-meta{
  font-size:12px;font-weight:300;color:var(--dim);
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.blog-card-link{
  font-size:13px;font-weight:500;color:var(--lime);
  opacity:0;transition:opacity .2s;
}
.blog-card a:hover .blog-card-link{opacity:1}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .blog-breadcrumb{padding-top:80px}
  .blog-article{padding:24px 24px 60px}
  .blog-index{padding:100px 24px 60px}
  .blog-body h2{margin:36px 0 16px}
  .blog-cta{padding:28px 24px}
}