/* Blog listing. Built on the homepage v2 components (hv-panel, hv-card, hv-ui, hv-tabs,
   hv-head-row); this file only adds what the listing needs on top of them. */

.bz-main { padding: 40px 0 40px; }
.hv-footer { margin-top: 72px; }


/* latest articles */
.bz-list { margin-top: 112px; }
.bz-list.is-first { margin-top: 0; }
.bz-tabs { margin-top: 0; }
.bz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.bz-tabs .hv-tab[aria-current="page"] { color: var(--ink); font-weight: 600; }
.bz-tabs .hv-tab[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }

.bz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.bz-card { padding: 32px 32px 0; transition: transform .35s cubic-bezier(.22, .8, .24, 1), box-shadow .35s ease; }
.bz-card:hover { transform: translateY(-6px); box-shadow: 0 30px 46px -32px rgba(15, 40, 110, .45); }
.bz-card h3 { font-size: 23px; line-height: 1.22; }
.bz-card > p { font-size: 15px; color: var(--muted); }
.bz-card .hv-link { margin-bottom: 26px; }
.bz-card:hover .hv-link svg { transform: translateX(3px); }
.bz-shot { margin-top: auto; padding: 10px 10px 0; min-height: 0; }
.bz-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px 14px 0 0; transition: transform 1s cubic-bezier(.22, .8, .24, 1); }
.bz-card:hover .bz-shot img { transform: scale(1.03); }

.bz-empty { margin-top: 40px; padding: 72px 24px; text-align: center; border-radius: var(--r-lg); background: var(--alt); color: var(--body); font-size: 18px; }

.bz-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 56px; }
.bz-pager a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--alt); font-weight: 600; font-size: 15px; transition: background-color .16s ease, color .16s ease; }
.bz-pager a svg { width: 16px; height: 16px; }
.bz-pager a:hover { background: var(--p-blue); }
.bz-pager a.is-active { background: var(--brand); color: #fff; }

/* motion (content stays visible without JS) */
.bz-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22, .8, .24, 1) var(--d, 0ms), transform .8s cubic-bezier(.22, .8, .24, 1) var(--d, 0ms), box-shadow .35s ease; }
.bz-js [data-reveal].is-in { opacity: 1; transform: none; }
.bz-js [data-reveal].is-in:hover { transition-delay: 0ms; }
.bz-js .bz-card.is-in:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .bz-js [data-reveal] { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1100px) {
  .bz-grid { grid-template-columns: 1fr 1fr; }
  .bz-list { margin-top: 80px; }
}
@media (max-width: 720px) {
  .bz-main { padding: 40px 0 28px; }
  .bz-list { margin-top: 64px; }
  .bz-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .bz-card { padding: 28px 24px 0; }
  .hv-footer { margin-top: 48px; }
}