/* ============ BLOG ============ */

.blog-header{padding:170px 0 60px;}
.blog-header .eyebrow{display:block;margin-bottom:16px;}
.blog-header h1{font-size:clamp(32px,5vw,54px);line-height:1.1;font-weight:700;max-width:760px;}
.blog-header p.sub{color:var(--gray-1);font-size:clamp(15px,1.6vw,18px);margin-top:18px;max-width:600px;}

/* ---- listing grid ---- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
  margin:0 0 120px;
}
.blog-card{
  padding:28px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.blog-card .tag{font-size:12px;color:var(--gray-1);letter-spacing:0.06em;text-transform:uppercase;}
.blog-card h3{font-family:var(--display);font-size:19px;line-height:1.35;font-weight:600;margin-top:12px;}
.blog-card p{color:var(--gray-1);font-size:14.5px;line-height:1.55;margin-top:12px;flex-grow:1;}
.blog-card .blog-read{margin-top:20px;font-size:14px;color:var(--white);font-weight:500;}
.blog-card .blog-read::after{content:" →";}

.blog-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.like-btn{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  padding:5px 10px;border:1px solid var(--line-strong);border-radius:100px;
  background:rgba(255,255,255,0.03);color:var(--gray-1);font-size:12px;font-weight:500;
  cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;
  position:relative;z-index:2;
}
.like-btn:hover:not(:disabled){border-color:var(--white);color:var(--white);}
.like-btn .like-icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0;}
.like-btn.liked{color:#ffffff;border-color:#ffffff;background:rgba(255,92,114,0.08);}
.like-btn.liked .like-icon{fill:#ffffff;stroke:#ffffff;}
.like-btn:disabled{cursor:default;}

/* ---- article ---- */
.article-wrap{max-width:720px;margin:0 auto;padding:170px 28px 40px;position:relative;z-index:2;}
.article-wrap .eyebrow{display:block;}
.article-wrap h1{font-family:var(--display);font-size:clamp(28px,4.4vw,44px);line-height:1.15;font-weight:700;margin-top:16px;}
.article-meta{color:var(--gray-2);font-size:13.5px;margin-top:18px;}
.article-body{margin-top:44px;font-size:16.5px;line-height:1.75;color:#dcdcdb;}
.article-body p{margin-bottom:22px;}
.article-body h2{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);font-weight:600;margin:44px 0 16px;color:var(--white);}
.article-body ul,.article-body ol{margin:0 0 22px 22px;}
.article-body li{margin-bottom:10px;}
.article-body strong{color:var(--white);font-weight:600;}

.article-cta{
  margin:52px 0 8px;
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.article-cta p{color:var(--gray-1);font-size:14.5px;line-height:1.6;margin:0;}
.article-cta .btn{align-self:flex-start;}

.article-back{display:inline-block;margin-top:52px;color:var(--gray-1);font-size:14px;}
.article-back:hover{color:var(--white);}

@media(max-width:640px){
  .article-wrap{padding:150px 20px 30px;}
}