/* ============================================================
   TMS Digital — Blog styles (loaded only on /blog pages)
   Uses the design tokens (--brand, --ink, etc.) from style.css
   ============================================================ */

/* ---- Blog index ---- */
.blog-head{padding:56px 0 8px}
.blog-head .eyebrow{display:block;margin-bottom:10px}
.blog-head h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin-bottom:12px}
.blog-head p{color:var(--muted);font-size:17.5px;max-width:640px}

.post-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding:34px 0 20px;
}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}

.post-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(15,23,42,.18);
  transition:transform .18s ease,box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(91,45,145,.32)}
.post-card .thumb{
  aspect-ratio:16/10;background:var(--grad);position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-card .thumb .ph{color:#fff;font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.post-card .body{display:flex;flex-direction:column;gap:9px;padding:20px 20px 22px;flex:1}
.post-card .date{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-ink,#4A2278)}
.post-card h3{font-size:19px;line-height:1.28;color:var(--ink)}
.post-card p{color:var(--muted);font-size:14.5px;line-height:1.55;flex:1}
.post-card .read-more{
  align-self:flex-start;margin-top:4px;font-weight:800;font-size:14.5px;color:var(--brand);
  text-decoration:none;
}
.post-card .read-more:hover{text-decoration:underline}
.post-card a.card-link{position:absolute;inset:0;z-index:1}
.post-card{position:relative}
.post-card .read-more{position:relative;z-index:2}

/* ---- Single post ---- */
.post-wrap{max-width:760px;margin:0 auto;padding:0 22px}
.post-article{padding:44px 0 20px}
.post-article .crumb{margin-bottom:18px}
.post-article h1{font-size:clamp(28px,4.2vw,42px);line-height:1.14;margin:8px 0 16px}
.post-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14.5px;margin-bottom:26px}
.post-meta .author{font-weight:700;color:var(--ink)}
.post-meta .dot{opacity:.5}
.post-hero-img{width:100%;border-radius:16px;margin:0 0 30px;box-shadow:0 14px 40px -20px rgba(15,23,42,.3);display:block}
.post-body{font-size:17.5px;line-height:1.75;color:var(--ink-2,#0F172A)}
.post-body p{margin:0 0 20px}
.post-body h2{font-size:26px;line-height:1.25;margin:36px 0 12px;color:var(--ink)}
.post-body h3{font-size:21px;line-height:1.3;margin:28px 0 10px;color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:24px}
.post-body li{margin:0 0 8px}
.post-body a{color:var(--brand);font-weight:600}
.post-body blockquote{margin:24px 0;padding:14px 20px;border-left:4px solid var(--brand-2);background:var(--grad-soft,rgba(168,85,247,.08));border-radius:8px;color:var(--slate,#334155);font-style:italic}
.post-body img{max-width:100%;height:auto;border-radius:12px;margin:22px 0}

.post-foot{margin:40px 0 8px;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--grad-soft,rgba(168,85,247,.06));text-align:center}
.post-foot h3{font-size:22px;margin-bottom:8px}
.post-foot p{color:var(--muted);margin-bottom:16px}
.back-link{display:inline-block;margin:24px 0 0;font-weight:700;color:var(--brand);text-decoration:none}
.back-link:hover{text-decoration:underline}