/* Blog index (Figma 319:6243). */
.p-blog { padding-bottom: var(--space-12); }
.p-blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.p-blog__count { margin-left: var(--space-1); font-family: var(--font-body); font-size: var(--body-md-size); letter-spacing: 0; vertical-align: top; line-height: 1; color: var(--text-medium); position: relative; top: 0; }
.p-blog__search { width: 100%; max-width: 270px; }
.p-blog__tabs { margin-top: var(--space-8); }
.p-blog__list { margin-top: var(--space-6); }
.p-blog__empty { grid-column: 1 / -1; padding: var(--space-12) 0; text-align: center; color: var(--text-low); }
.p-blog__pagination { margin-top: var(--space-12); }
.p-blog__pagination .pagination__step:first-child { color: var(--text-low); }
@media (max-width: 639px) { .p-blog__pagination .pagination__pages a:nth-child(n+3):not(:last-child) { display: none; } }
@media (min-width: 1024px) { .p-blog__head { align-items: center; } .p-blog__tabs { margin-top: var(--space-6); } }

/* Figma QC: desktop rhythm (title 144, tabs 248, grid 320, cards 400x500, pager 1384, newsletter 1504) */
@media (min-width: 1024px) {
  .p-blog { padding-top: calc(var(--header-h) + var(--space-2) + 72px); padding-bottom: var(--space-20); }
  .p-blog__search .input { height: 48px; }
  .p-blog__tabs { margin-top: 32px; }
  .p-blog__list { margin-top: 32px; row-gap: 32px; }
  .p-blog__list .post-card { min-height: 500px; }
  .p-blog__pagination { margin-top: 32px; }
}

/* Mobile QC: topic tabs scroll sideways on one row instead of wrapping "Performance" onto its own line */
@media (max-width: 639px) {
  .p-blog__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .p-blog__tabs::-webkit-scrollbar { display: none; }
  .p-blog__tabs .tabs__btn { flex: none; }
}

/* ---------- Interactions (motion pass) ----------
   Post cards: slow image zoom, a "read" arrow chip that rises in on the cover, meta + title shift.
   Shared with the Related list on blog-article.html, so the selectors cover both pages. */
.p-blog__list .post-card__media,
.p-article__related-list .post-card__media { position: relative; isolation: isolate; }
.p-blog__list .post-card__media img,
.p-article__related-list .post-card__media img { transition: transform 700ms var(--ease-out), filter var(--dur-slow) var(--ease); }
.p-blog__list .post-card__media::after,
.p-article__related-list .post-card__media::after {
  content: ""; position: absolute; right: var(--space-4); bottom: var(--space-4); width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--base-high) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px) scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-spring);
}
.p-blog__list .post-card__meta,
.p-article__related-list .post-card__meta { transition: transform var(--dur-slow) var(--ease-out); }
.p-blog__list .post-card__title,
.p-article__related-list .post-card__title { transition: color var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out); }
.p-blog__list .post-card__link:focus-visible,
.p-article__related-list .post-card__link:focus-visible { outline: none; }
.p-blog__list .post-card__link:focus-visible .post-card__media,
.p-article__related-list .post-card__link:focus-visible .post-card__media { outline: 2px solid var(--orange-500); outline-offset: 3px; }

@media (hover: hover) {
  .p-blog__list .post-card__link:hover .post-card__media img,
  .p-article__related-list .post-card__link:hover .post-card__media img { transform: scale(1.06); filter: saturate(1.08); }
  .p-blog__list .post-card__link:hover .post-card__media::after,
  .p-article__related-list .post-card__link:hover .post-card__media::after { opacity: 1; transform: none; }
  .p-blog__list .post-card__link:hover .post-card__title,
  .p-article__related-list .post-card__link:hover .post-card__title { transform: translateX(4px); }
}
.p-blog__list .post-card__link:focus-visible .post-card__media::after,
.p-article__related-list .post-card__link:focus-visible .post-card__media::after { opacity: 1; transform: none; }
.p-blog__list .post-card__link:focus-visible .post-card__title,
.p-article__related-list .post-card__link:focus-visible .post-card__title { color: var(--amber-800); }
.p-blog__list .post-card__link:active .post-card__media img,
.p-article__related-list .post-card__link:active .post-card__media img { transform: scale(1.03); transition-duration: var(--dur-fast); }

/* Search: icon picks up the focus colour */
.p-blog__search .search__icon { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.p-blog__search:focus-within .search__icon { color: var(--amber-800); transform: scale(1.1); }

/* Topic tabs + pagination: press feedback */
.p-blog__tabs .tabs__btn, .p-blog__pagination .pagination__page { transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.p-blog__tabs .tabs__btn:active, .p-blog__pagination .pagination__page:active { transform: scale(0.95); }
.p-blog__pagination .pagination__step svg { transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) {
  .p-blog__pagination .pagination__step:hover { color: var(--amber-800); }
  .p-blog__pagination .pagination__step:first-child:hover svg { transform: translateX(-3px); }
  .p-blog__pagination .pagination__step:last-child:hover svg { transform: translateX(3px); }
}
.p-blog__pagination .pagination__step { transition: color var(--dur) var(--ease); }

/* Cards that come back after a filter or search change (class added by js/pages/blog.js) */
@keyframes p-blog-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.p-blog__list .is-filtered-in { animation: p-blog-card-in var(--dur-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .p-blog__list .post-card__media::after, .p-article__related-list .post-card__media::after { transition: opacity var(--dur) linear; transform: none; }
  .p-blog__list .post-card *, .p-article__related-list .post-card *, .p-blog__tabs .tabs__btn, .p-blog__pagination * { transition-duration: 0.01ms !important; }
  .p-blog__list .post-card__link:hover *, .p-article__related-list .post-card__link:hover * { transform: none !important; }
  .p-blog__list .is-filtered-in { animation: none; }
}
.p-blog__list .cms-notice { grid-column: 1 / -1; text-align: center; padding: var(--space-12) 0; color: var(--text-low); }