/* Editorial blog cards — shared across the blog homepage and category pages. */
article.card { position: relative; border: 0; border-radius: 0; background: transparent; overflow: visible; box-shadow: none; transition: transform .2s ease; }
article.card:hover { border-color: transparent; box-shadow: none; transform: translateY(-2px); }
article.card .card-img { width: 100%; aspect-ratio: 16 / 10; border-radius: .5rem; object-fit: cover; overflow: hidden; }
.article-save-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  cursor: pointer;
}
.article-save-button svg { position: absolute; width: 24px; height: 24px; }
.article-save-button .save-icon-filled { display: none; }
.article-save-button.saved .save-icon-outline { display: none; }
.article-save-button.saved .save-icon-filled { display: block; }
.article-save-button:focus-visible {
  border-radius: .2rem;
  outline: 2px solid #e05c2a;
  outline-offset: 2px;
}
.article-watchlist-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 13px 18px;
  border-radius: 12px;
  background: #0f1730;
  color: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 48, .28);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition: opacity .25s ease, transform .25s ease;
}
.article-watchlist-toast.above-signin-prompt { bottom: 96px; }
.article-watchlist-toast.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.article-watchlist-toast-icon {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: #e05c2a;
}
.article-watchlist-toast-icon svg { display: block; width: 20px; height: 20px; }
.article-watchlist-toast-text { min-width: 0; }
.article-watchlist-toast-link {
  flex: 0 0 auto;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .12em;
  white-space: nowrap;
}
.article-watchlist-toast-link:hover { color: #fff; }
@media (max-width: 560px) {
  .article-watchlist-toast {
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 12px 14px;
    transform: translateY(1rem);
  }
  .article-watchlist-toast.show { transform: translateY(0); }
}
article.card .card-body,
.latest article.card .card-body { padding: .875rem 0 0; }
article.card .tag,
article.card .tag-outline { display: inline-flex; align-items: center; width: fit-content; margin: 0 0 .625rem; padding: .3rem .55rem .2rem .55rem; border: 0; border-radius: 9999px; background: #C1E6A3; color: #23410A; font-size: .7875rem; font-weight: 500; text-transform: uppercase; }
article.card h3,
.latest article.card h3 { margin-bottom: .5rem; color: #202934; font-size: 1.25rem; font-weight: 700; line-height: 1.28; letter-spacing: -.018em; }
article.card h3 a { font-weight: 500; }
article.card h3 a:hover { color: #d14d1b; }
article.card p { display: none; }
article.card .post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: 0; color: #68717c; font-size: .75rem; line-height: 1.35; }
article.card .author-profile-link { display: inline-flex; align-items: center; gap: .45rem; border-radius: 9999px; }
article.card .author-profile-link:hover .author-name { color: #d14d1b; }
article.card .author-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; margin-right: .1rem; border: 1px solid #c7d4c3; border-radius: 50%; background: #DCE8D8; color: #29452f; font-size: .5625rem; font-weight: 700; letter-spacing: .02em; }
article.card .author-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
article.card .author-name { color: #303944; font-weight: 600; }
article.card .meta-separator { color: #9aa1a9; }
@media (max-width: 720px) { article.card h3, .latest article.card h3 { font-size: 1.125rem; } }