/* ==========================================================================
   Blog index (/blog/). Additive to styles.css — reuses its tokens and
   components (.page-hero, .breadcrumb, .btn, .card). To add an article, copy
   one <li class="post"> in the "Latest guides" list; no CSS changes needed.
   ========================================================================== */

.blog-hero .lead{max-width:60ch}

/* ---------- article cards ---------- */
.post-grid{display:grid;gap:24px;grid-template-columns:1fr;margin-top:32px}
.post{display:flex;list-style:none}
.post-card{display:flex;flex-direction:column;width:100%;overflow:hidden}
.post-media{position:relative;display:block;background:var(--bg-soft);overflow:hidden}
.post-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:78% 50%;transition:transform .5s}
.post-card:hover .post-media img{transform:scale(1.03)}
.post-badge{position:absolute;top:14px;left:14px;padding:4px 11px;border-radius:999px;background:rgba(3,8,18,.82);border:1px solid var(--border-hi);color:#7FB6FF;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.post-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 20px 24px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:.8125rem;color:var(--text-subtle)}
.post-cat{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.post-title{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;font-weight:700}
.post-title a{color:var(--text)}
.post-title a:hover{color:var(--accent)}
.post-desc{color:var(--text-muted);font-size:.95rem;line-height:1.6;flex:1}
.post-body .btn{align-self:flex-start;margin-top:8px}

/* the featured post spans the whole row: image beside text on wide screens */
.post.is-featured .post-title{font-size:clamp(1.45rem,3.6vw,2rem);line-height:1.18}
.post.is-featured .post-desc{font-size:1rem}
.post.is-featured .post-card{border-color:var(--border-hi);box-shadow:0 24px 60px -34px rgba(31,121,246,.55)}

/* ---------- resource hub links ---------- */
.hub-grid{display:grid;gap:14px;grid-template-columns:1fr;margin-top:28px}
.hub-link{display:block;padding:18px 20px}
.hub-link b{display:block;font-size:1rem;font-weight:650;color:var(--text)}
.hub-link span{display:block;margin-top:4px;color:var(--text-muted);font-size:.875rem;line-height:1.5}
.hub-link:hover b{color:var(--accent)}
.hub-link:focus-visible,.post-media:focus-visible,.post-title a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(min-width:640px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .post-body{padding:26px 26px 28px}
}
@media(min-width:1024px){
  .post-grid{grid-template-columns:repeat(3,1fr)}
  .post.is-featured{grid-column:1/-1}
  .post.is-featured .post-card{flex-direction:row;align-items:stretch}
  .post.is-featured .post-media{flex:1.25}
  .post.is-featured .post-media img{height:100%;aspect-ratio:auto;min-height:340px}
  .post.is-featured .post-body{flex:1;justify-content:center;padding:40px 44px;gap:14px}
  .hub-grid{grid-template-columns:repeat(3,1fr)}
}