/* /blog index: card previews with inline Read more (blog-index.js). */
.blog-preview { margin-top: 14px; font-size: 17px; line-height: 1.7; }
.blog-preview p:last-child { margin-bottom: 0; }
.blog-preview.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4em), transparent);
}
.blog-full { margin-top: 14px; font-size: 17px; }
.blog-item-actions { margin: 12px 0 0; display: flex; }
.blog-item-actions [hidden], .blog-preview[hidden], .blog-full[hidden] { display: none; }
.blog-full > h2:first-child { margin-top: 8px; }
.blog-readmore-link, .blog-readmore {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 18px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--amber); background: transparent; border: 1px solid rgba(245, 158, 11, 0.45);
  text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.blog-readmore-link:hover, .blog-readmore:hover { background: rgba(245, 158, 11, 0.12); border-color: var(--amber); color: var(--amber-bright); }
.blog-readmore:focus-visible, .blog-readmore-link:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 3px; }
.blog-readmore::after { content: "▾"; font-size: 13px; transition: transform .2s; }
.blog-readmore[aria-expanded="true"]::after { transform: rotate(180deg); }
.blog-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 32px 0 0; font-size: 15px; }
.blog-pager a { color: var(--teal-bright); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.blog-pager-pos { color: var(--text-muted); }
@media (max-width: 700px) {
  .blog-item { padding: 18px 18px; }
  .blog-preview, .blog-full { font-size: 16px; }
  .blog-full table { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .blog-readmore::after { transition: none; } }
/* The script pins each card in place when it opens or closes; keep the
   browser from re-anchoring the scroll on another card. */
.blog-list { overflow-anchor: none; }