/**
 * MHM2-712 — blog listing/category/tag masonry redesign (approved Claude
 * Design mockup "Mediband Blog Listing Masonry"). Scoped under .bl712.
 * Same tokens as MHM2-711. Applies to every post-list page (index, category,
 * tag, author, search, archive) via the shared blog_post_list handle.
 */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../../fonts/newsreader/Newsreader-var.woff2') format('woff2');
}

/* page chrome — the design masthead replaces the default title/breadcrumbs */
body.blog-page-list { background: #f7f4ee; }
body.blog-page-list .breadcrumbs,
body.blog-page-list .page-title-wrapper { display: none; }

.bl712-progress { position: fixed; top: 0; left: 0; height: 3px; background: #ef7622; z-index: 60; width: 0; transition: width .15s linear; border-radius: 0 3px 3px 0; }

.bl712 .inner { max-width: 1180px; margin: 0 auto; }
.bl712 a { text-decoration: none; color: inherit; }

/* ---- masthead ---- */
.bl712 .mast { padding: 34px 0 30px; border-bottom: 1px solid #e7e0d4; }
.bl712 .mast-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bl712 .crumb { font: 600 12px Manrope, sans-serif; color: #a7aeb5; display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.bl712 .crumb a { color: #828b93; font-weight: 600; }
.bl712 .kick { font: 800 11px Manrope, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #c85a17; margin: 0 0 10px; }
.bl712 .mast h1 { margin: 0; font: 500 46px/1.05 Newsreader, Georgia, serif; color: #16202b; letter-spacing: -.02em; }
.bl712 .mast h1 em { font-style: italic; color: #ef7622; }
.bl712 .mast-sub { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #67707a; max-width: 460px; }
.bl712 .mast-stat { text-align: right; font-size: 12.5px; color: #a7aeb5; font-weight: 600; line-height: 1.7; flex: none; }
.bl712 .mast-stat b { color: #16202b; font-weight: 800; }

/* ---- sticky filter chip bar ---- */
.bl712 .filters { position: sticky; top: 0; z-index: 20; background: rgba(247, 244, 238, .94); backdrop-filter: blur(8px); border-bottom: 1px solid #e7e0d4; }
.bl712 .filters .inner { display: flex; gap: 8px; padding-top: 14px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.bl712 .filters .inner::-webkit-scrollbar { display: none; }
.bl712 .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9d3c8; background: #fff; color: #4c565f; font: 700 13px Manrope, sans-serif; border-radius: 30px; padding: 9px 17px; min-height: 40px; box-sizing: border-box; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.bl712 .chip:hover { border-color: #16202b; color: #16202b; text-decoration: none; }
.bl712 .chip.on { background: #16202b; border-color: #16202b; color: #fff; }
.bl712 .chip .n { font-weight: 600; font-size: 11px; color: #a7aeb5; }
.bl712 .chip.on .n { color: #ef9a5c; }

/* ---- masonry feed — independent column buckets (flex), NOT CSS multicol.
   Multicol rebalances every column when items are appended (the whole feed
   visibly shakes during infinite scroll); with buckets, new cards go to the
   shortest column and existing cards never move. ---- */
.bl712 .masonry { display: flex; align-items: flex-start; gap: 18px; margin-top: 34px; }
.bl712 .mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bl712 .mitem { opacity: 0; transform: translateY(26px); animation: bl712rise .6s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes bl712rise { to { opacity: 1; transform: none; } }
/* reserve image space before load — no layout shift when images arrive */
.bl712 .pcard .im img { aspect-ratio: 640 / 427; object-fit: cover; height: auto; }

/* post card (image variant) */
.bl712 .pcard { background: #fff; border: 1px solid #e7e0d4; border-radius: 16px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.bl712 .pcard:hover { box-shadow: 0 12px 30px -12px rgba(20, 32, 43, .2); transform: translateY(-3px); }
.bl712 .pcard .im { position: relative; background: #efe9df; }
.bl712 .pcard .im img { width: 100%; display: block; }
.bl712 .imfall { background: linear-gradient(135deg, #f3ede3, #e9e2d5); min-height: 120px; }
.bl712 .pill { position: absolute; left: 12px; top: 12px; display: inline-flex; font: 800 10.5px Manrope, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #c85a17; background: rgba(255, 255, 255, .93); border-radius: 20px; padding: 5px 11px; transition: background .15s, color .15s; }
.bl712 .pill:hover { background: #ef7622; color: #fff; text-decoration: none; }
.bl712 .pcard .bd { padding: 18px 20px 20px; }
.bl712 .pcard h4 { margin: 0 0 8px; font: 700 16px/1.4 Manrope, sans-serif; color: #16202b; letter-spacing: -.01em; }
.bl712 .pcard.big h4 { font: 500 22px/1.3 Newsreader, Georgia, serif; }
.bl712 .pcard p.ex { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: #67707a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl712 .meta { display: flex; align-items: center; gap: 9px; font: 600 12px Manrope, sans-serif; color: #a7aeb5; }
.bl712 .dotsep { width: 3px; height: 3px; border-radius: 50%; background: #c9c2b4; }

/* text-only card (no featured image) */
.bl712 .pcard.txt .bd { padding: 22px 22px 20px; }
.bl712 .pcard.txt .pill { position: static; background: #fbe7d6; margin-bottom: 13px; }
.bl712 .pcard.txt h4 { font: 500 20px/1.35 Newsreader, Georgia, serif; }
.bl712 .pcard.txt p.ex { -webkit-line-clamp: 3; }

/* ---- skeleton shimmer cards (while loading a batch) ---- */
.bl712 .skel { background: #fff; border: 1px solid #e7e0d4; border-radius: 16px; overflow: hidden; }
.bl712 .sk { background: linear-gradient(90deg, #efe9df 25%, #f7f2ea 50%, #efe9df 75%); background-size: 200% 100%; animation: bl712shim 1.2s linear infinite; }
@keyframes bl712shim { to { background-position: -200% 0; } }
.bl712 .skel .sk.im { height: 160px; }
.bl712 .skel .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; }
.bl712 .skel .sk.l1 { height: 15px; border-radius: 6px; width: 90%; }
.bl712 .skel .sk.l2 { height: 15px; border-radius: 6px; width: 65%; }
.bl712 .skel .sk.l3 { height: 11px; border-radius: 6px; width: 40%; }

/* ---- sentinel / SEO next link / end-cap / count pill ---- */
.bl712 .sentinel { height: 1px; }
.bl712 .mb-next-link { display: block; margin: 26px auto 0; width: max-content; background: #fff; border: 1px solid #d9d3c8; color: #16202b; font: 800 13px Manrope, sans-serif; border-radius: 30px; padding: 11px 22px; }
.bl712.js .mb-next-link { display: none; } /* JS infinite scroll takes over; link stays for crawlers/no-JS */
.bl712 .endcap { margin: 30px 0 0; text-align: center; padding: 44px 20px 10px; opacity: 0; animation: bl712rise .6s .1s forwards; }
.bl712 .endcap .ic { width: 52px; height: 52px; border-radius: 50%; background: #e7f5ed; color: #1f9d63; display: inline-flex; align-items: center; justify-content: center; animation: bl712pop .5s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes bl712pop { from { transform: scale(.4); opacity: 0; } }
.bl712 .endcap .ic svg { width: 24px; height: 24px; }
.bl712 .endcap h4 { margin: 14px 0 4px; font: 500 22px Newsreader, Georgia, serif; color: #16202b; }
.bl712 .endcap p { margin: 0; font-size: 13px; color: #a7aeb5; }
.bl712 .totop { margin-top: 18px; background: #fff; border: 1px solid #d9d3c8; color: #16202b; font: 800 13px Manrope, sans-serif; border-radius: 30px; padding: 11px 22px; cursor: pointer; }
.bl712 .totop:hover { background: #16202b; border-color: #16202b; color: #fff; }
.bl712 .count-note { position: sticky; bottom: 18px; display: flex; justify-content: center; pointer-events: none; z-index: 15; }
.bl712 .count-note span { background: rgba(22, 32, 43, .88); backdrop-filter: blur(6px); color: #fff; font: 700 12px Manrope, sans-serif; border-radius: 30px; padding: 9px 16px; box-shadow: 0 8px 22px -8px rgba(20, 32, 43, .4); }
.bl712 .count-note b { color: #ef9a5c; }

/* empty result (search/category with no posts) */
.bl712 .bl-empty { margin: 44px 0 60px; text-align: center; color: #67707a; font-size: 15px; }

@media (max-width: 760px) {
  .bl712 .mast { padding: 30px 0 24px; }
  .bl712 .mast h1 { font-size: 34px; }
  .bl712 .chip { min-height: 44px; } /* touch target */
}
/* column COUNT per breakpoint is handled by the JS (it rebuilds the buckets
   preserving data-idx order); no-JS fallback keeps the server's 3 columns. */