/* ============================================================
   SOCRAT ROAD STAR — Blog (listing + article)
   Extends style.css. Reuses tokens: --bg, --gold, --serif, etc.
   ============================================================ */

/* Page sits below the fixed header */
.blog-top{ padding-top:clamp(130px,16vh,180px); }

/* ---------- Listing header band ---------- */
.blog-head{ max-width:760px; margin-inline:auto; text-align:center; }
.blog-head .title{ margin-top:18px; }
.blog-head .lead{ margin-top:18px; }

/* ---------- Post grid ---------- */
.posts__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px); margin-top:clamp(44px,5vw,68px);
}

.post-card{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:.45s var(--ease);
}
.post-card:hover{
  border-color:rgba(201,165,92,.45); transform:translateY(-5px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.post-card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:#000; }
.post-card__media img{
  width:100%; height:100%; object-fit:cover; filter:saturate(.92);
  transition:transform .9s var(--ease), filter .5s;
}
.post-card:hover .post-card__media img{ transform:scale(1.06); filter:saturate(1.04); }
.post-card__cat{
  position:absolute; top:14px; left:14px;
  background:rgba(10,10,11,.78); backdrop-filter:blur(6px);
  border:1px solid rgba(201,165,92,.4); border-radius:99px; padding:6px 13px;
  font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt);
}
.post-card__body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.post-card__date{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.post-card__title{
  font-family:var(--serif); font-weight:500; font-size:1.5rem; line-height:1.16;
  color:var(--ink); margin-top:12px;
}
.post-card:hover .post-card__title{ color:var(--gold-lt); }
.post-card__excerpt{ margin-top:14px; font-size:.95rem; line-height:1.7; color:var(--muted); }
.post-card__link{ margin-top:22px; padding-top:0; }
.post-card__link.link-arrow{ align-self:flex-start; }

/* ---------- Article ---------- */
.article{ padding-top:clamp(130px,16vh,180px); }
.article__head{ max-width:820px; margin-inline:auto; text-align:center; }
.article__meta{
  display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.article__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.7; }
.article__meta .cat{ color:var(--gold); }
.article__title{
  font-family:var(--serif); font-weight:500; line-height:1.06;
  font-size:clamp(2.1rem,4.6vw,3.6rem); color:var(--ink); margin-top:20px;
}
.article__hero{
  margin:clamp(40px,5vw,64px) auto 0; max-width:1080px;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#000;
}
.article__hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.article__body{ max-width:720px; margin:clamp(40px,5vw,60px) auto 0; }
.article__body .lead{
  font-size:clamp(1.16rem,1.8vw,1.34rem); line-height:1.7; color:var(--ink-soft);
  font-weight:300; font-family:var(--serif); font-style:italic;
}
.article__body p{ margin-top:22px; font-size:1.04rem; line-height:1.85; color:var(--ink-soft); }
.article__body h2{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--ink); margin-top:clamp(40px,4vw,54px); line-height:1.12;
}
.article__body h2 + p{ margin-top:16px; }
.article__body ul{ margin:22px 0 0; padding:0; list-style:none; }
.article__body ul li{
  position:relative; padding-left:26px; margin-top:12px;
  font-size:1.02rem; line-height:1.7; color:var(--ink-soft);
}
.article__body ul li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--gold);
}
.article__body strong{ color:var(--ink); font-weight:600; }
.article__body a{ color:var(--gold); border-bottom:1px solid rgba(201,165,92,.35); transition:.3s; }
.article__body a:hover{ color:var(--gold-lt); border-color:var(--gold-lt); }

/* Back link + closing CTA */
.article__nav{ max-width:720px; margin:clamp(36px,4vw,48px) auto 0; }
.back-link{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.back-link:hover{ color:var(--gold); }

.article__cta{
  max-width:720px; margin:clamp(48px,6vw,72px) auto 0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  padding:clamp(34px,4vw,52px); text-align:center;
}
.article__cta h3{ font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); }
.article__cta p{ margin-top:14px; color:var(--muted); max-width:480px; margin-inline:auto; }
.article__cta .btn{ margin-top:26px; }
.article__cta .cta-phone{
  display:block; margin-top:18px; font-size:.84rem; letter-spacing:.06em; color:var(--muted);
}
.article__cta .cta-phone a{ color:var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .posts__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .posts__grid{ grid-template-columns:1fr; }
}