/* Blog layout adapted from the supplied template. Tokens come from color-font.css. */
.blog-main{width:100%;line-height:1.6;margin:0;padding:0}
.blog-badge{display:inline-flex;align-items:center;gap:8px;background:var(--lavender);color:var(--blue);font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border-radius:999px}
.blog-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.blog-main h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.08;letter-spacing:-.04em;font-weight:800;margin:22px 0 14px}
.blog-g{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-lead{font-size:1.1rem;color:var(--muted);max-width:60ch;margin:0 0 28px}
.blog-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.blog-chips button{font:inherit;background:var(--lavender);color:var(--navy);border:0;font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:999px;cursor:pointer}
.blog-chips button.on{background:var(--grad-primary);color:var(--surface)}
.blog-featured{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card);margin-bottom:44px}
.blog-featured .blog-img{background:var(--grad-primary);min-height:260px}
.blog-featured .blog-body{padding:32px}
.blog-tag{display:inline-block;background:var(--lavender);color:var(--blue);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:999px;margin-bottom:14px}
.blog-featured h2{font-size:1.6rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
.blog-featured p{color:var(--muted);margin:0 0 18px}
.blog-meta{color:var(--muted);font-size:.85rem}
.blog-read{color:var(--blue);font-weight:700;text-decoration:none}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-post{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
.blog-post .blog-img{height:150px;background:var(--grad-primary)}
.blog-post .blog-body{padding:22px}
.blog-post h3{font-size:1.08rem;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.blog-post p{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.blog-postmeta{display:flex;justify-content:space-between;align-items:center}

.blog-main [hidden] { display: none !important; }
.blog-main :is(a, button):focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.blog-chips button { transition: background .2s ease, color .2s ease; }
.blog-chips button:hover { color: var(--purple-dark); background: var(--lavender-2); }
.blog-chips button.on:hover { background: var(--grad-primary); color: var(--surface); }
.blog-post { display: flex; flex-direction: column; }
.blog-post .blog-body { display: flex; flex-direction: column; flex: 1; }
.blog-postmeta { gap: 12px; margin-top: auto; flex-wrap: wrap; }
.blog-featured > .blog-body > .blog-read { display: inline-block; margin-top: 14px; }
.blog-read { font-size: .85rem; }
.blog-topic { text-align: center; color: var(--muted); font-size: .9rem; padding-top: 32px; border-top: 1px solid var(--line); margin: 56px 0 0; }
.blog-topic a { color: var(--blue); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {

  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-featured .blog-body { padding: 24px; }
  .blog-featured .blog-img { min-height: 200px; }
}

/* Local article cover images keep the existing brand-colored fallback. */
.blog-img { position: relative; overflow: hidden; }
.blog-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.blog-featured .blog-img img { position: absolute; inset: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .blog-featured:hover .blog-img img,
  .blog-post:hover .blog-img img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-img img { transition: none; }
}