/* =========================================================
   blog-all-posts.css — shared blog listing styles
   Used by: blog-home.html (.page-blog-listing)
            show-all-posts.html (.page-blog-all-posts)
   Load with core.css (header/footer chrome from core.css).
   ========================================================= */

/* ----- show-all-posts (.page-blog-all-posts) ----- */
.page-blog-all-posts{
    --page:#f3f5f8;--card:#fff;--ink:#192333;--ink-soft:#303b4a;--muted:#657082;--muted-2:#9aa4b4;
    --border:#e4e8ef;--border-2:#eef0f5;--indigo:#4338e0;--indigo-h:#372cc9;--soft:#ecebff;
    --purple:#7b2ba0;--green:#0e9f6e;--gold:#dca00f;
    --serif:system-ui,"Georgia","Times New Roman",serif;--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --shadow-sm:0 3px 9px rgba(22,31,43,.06),0 1px 2px rgba(22,31,43,.04);
    --shadow-md:0 10px 26px rgba(22,31,43,.09),0 2px 6px rgba(22,31,43,.05);
  }
  .page-blog-all-posts, .page-blog-all-posts *{box-sizing:border-box;}
  .page-blog-all-posts{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
  .page-blog-all-posts a{color:inherit;text-decoration:none;}
  .page-blog-all-posts .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
  .page-blog-all-posts .ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .page-blog-all-posts input, .page-blog-all-posts button, .page-blog-all-posts select{font-family:inherit;}

  .page-blog-all-posts .crumb-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 0 0;flex-wrap:wrap;}
  .page-blog-all-posts .back-link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);}
  .page-blog-all-posts .back-link:hover{color:var(--indigo);}
  .page-blog-all-posts .back-link .ico{width:15px;height:15px;}

  .page-blog-all-posts .hero{padding:16px 0 24px;}
  .page-blog-all-posts .hero h1{font-family:var(--serif);font-size:34px;font-weight:800;color:#1b2440;margin:0;letter-spacing:-.01em;}
  .page-blog-all-posts .hero .sub{font-size:14.5px;color:var(--muted);margin:9px 0 0;max-width:600px;}

  .page-blog-all-posts .cat-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px;}
  .page-blog-all-posts .cat-tab{font-size:13px;font-weight:700;color:var(--ink-soft);background:var(--card);border:1px solid var(--border);border-radius:30px;padding:9px 17px;cursor:pointer;}
  .page-blog-all-posts .cat-tab:hover{border-color:#c9cdfa;color:var(--indigo);}
  .page-blog-all-posts .cat-tab.active{background:var(--indigo);border-color:var(--indigo);color:#fff;}

  .page-blog-all-posts .toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
  .page-blog-all-posts .res-count{font-size:13.5px;color:var(--muted);}
  .page-blog-all-posts .res-count b{color:var(--ink);}
  .page-blog-all-posts .pagesize-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);}
  .page-blog-all-posts .pagesize-row select{font-size:13px;color:var(--ink-soft);border:1px solid var(--border);border-radius:9px;padding:8px 12px;background:#fff;outline:none;cursor:pointer;}

  .page-blog-all-posts .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:16px;}
  .page-blog-all-posts .post-card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .12s;}
  .page-blog-all-posts .post-card:hover{border-color:#c9cdfa;box-shadow:var(--shadow-md);transform:translateY(-3px);}
  .page-blog-all-posts .post-media{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:44px;}
  .page-blog-all-posts .post-body{padding:17px 19px 19px;display:flex;flex-direction:column;flex:1;}
  .page-blog-all-posts .post-cat{display:inline-flex;align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:30px;padding:4px 11px;margin-bottom:11px;}
  .page-blog-all-posts .post-title{font-size:16px;font-weight:800;color:var(--ink);margin:0;line-height:1.35;flex:1;}
  .page-blog-all-posts .post-title:hover{color:var(--indigo);}
  .page-blog-all-posts .post-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border-2);padding-top:13px;margin-top:14px;}
  .page-blog-all-posts .post-date{font-size:12px;color:var(--muted-2);}
  .page-blog-all-posts .post-read{font-size:12.5px;font-weight:700;color:var(--indigo);display:inline-flex;align-items:center;gap:4px;}
  .page-blog-all-posts .post-read .ico{width:13px;height:13px;transition:transform .15s;}
  .page-blog-all-posts .post-card:hover .post-read .ico{transform:translateX(3px);}

  .page-blog-all-posts .empty-posts{text-align:center;color:var(--muted);font-size:14px;padding:50px 0;grid-column:1/-1;}

  .page-blog-all-posts .pager{display:flex;justify-content:center;align-items:center;gap:6px;margin:30px 0 50px;flex-wrap:nowrap;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 4px;}
  .page-blog-all-posts .pager::-webkit-scrollbar{display:none;}
  .page-blog-all-posts .pager .pg-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:38px;color:var(--muted);font-size:15px;font-weight:700;letter-spacing:.02em;user-select:none;flex:0 0 auto;}
  .page-blog-all-posts .pager button{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--border);background:#fff;color:var(--ink-soft);border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-family:inherit;flex:0 0 auto;}
  .page-blog-all-posts .pager button:hover:not(:disabled){border-color:#c9cdfa;color:var(--indigo);}
  .page-blog-all-posts .pager button.active{background:var(--indigo);border-color:var(--indigo);color:#fff;}
  .page-blog-all-posts .pager button:disabled{opacity:.4;cursor:default;}
  .page-blog-all-posts .pager .pg-ico{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

  @media(max-width:860px){.page-blog-all-posts .post-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:560px){
    .page-blog-all-posts .hero h1{font-size:26px;}
    .page-blog-all-posts .post-grid{grid-template-columns:1fr;}
    .page-blog-all-posts .pager{justify-content:flex-start;gap:4px;margin-left:-4px;margin-right:-4px;}
    .page-blog-all-posts .pager .pg-nav{min-width:0;padding:0 8px;font-size:12px;}
    .page-blog-all-posts .pager .pg-nav-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
    .page-blog-all-posts .pager .pg-num{min-width:34px;padding:0 6px;}
    .page-blog-all-posts .pager .pg-ellipsis{min-width:22px;height:34px;font-size:14px;}
  }


/* Live page extras (images + anchor tabs) — scoped to this page only */
body:has(.page-blog-all-posts){background:var(--page,#f3f5f8);margin:0;}
.page-blog-all-posts{min-height:100%;}
.page-blog-all-posts main.wrap{padding-bottom:24px;}
.page-blog-all-posts a.cat-tab{display:inline-flex;align-items:center;text-decoration:none;}
.page-blog-all-posts .post-media{overflow:hidden;background:#eef0f5;}
.page-blog-all-posts .post-media img{width:100%;height:100%;object-fit:cover;display:block;}
.page-blog-all-posts .post-media.has-img{font-size:0;}

/* ----- blog-home (.page-blog-listing) ----- */
.page-blog-listing {
  --shadow-lg: 0 16px 40px rgba(21, 31, 43, .12), 0 4px 10px rgba(21, 31, 43, .06);
  background: linear-gradient(180deg, #f5f7fb 0%, #f1f4f8 44%, #eef2f7 100%);
  overflow-x: hidden;
}

.page-blog-listing,
.page-blog-listing * {
  box-sizing: border-box;
}

.page-blog-listing .home-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.page-blog-listing .serif {
  font-family: var(--serif);
}

.page-blog-listing .blog-wrap {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

.page-blog-listing .blog-hero {
  padding: 48px 0 30px;
}

.page-blog-listing .blog-hero .hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.page-blog-listing .blog-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(79, 70, 229, .22);
  border-radius: 999px;
  padding: 7px 13px;
}

.page-blog-listing .blog-hero h1 {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 16px 0 14px;
  font-weight: 800;
}

.page-blog-listing .blog-hero p {
  max-width: 580px;
  font-size: 16px;
  color: #556276;
  line-height: 1.62;
  margin: 0;
}

.page-blog-listing .blog-stats {
  display: flex;
  gap: 30px;
  padding-bottom: 6px;
}

.page-blog-listing .blog-stat .n {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 800;
  color: var(--teal-h);
  line-height: 1;
}

.page-blog-listing .blog-stat .l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 7px;
}

.page-blog-listing .filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 40px;
}

.page-blog-listing .chip-f {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #475367;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color .15s, border-color .15s, background .15s, transform .05s;
}

.page-blog-listing .chip-f:hover {
  border-color: #cdd5e0;
  color: var(--teal-h);
}

.page-blog-listing .chip-f:active {
  transform: translateY(1px);
}

.page-blog-listing .chip-f.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 8px 18px rgba(23, 35, 55, .16);
}

.page-blog-listing .chip-f .d {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}

.page-blog-listing .chip-f.active .d {
  opacity: 1;
}

.page-blog-listing .feature-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 54px;
  text-decoration: none;
  color: var(--ink);
  max-width: 100%;
  min-width: 0;
}

.page-blog-listing #featured-post-root {
  max-width: 100%;
  min-width: 0;
}

.page-blog-listing .feature-card .f-media {
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
}

.page-blog-listing .feature-card .f-media::after {
  content: "Featured";
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(23, 35, 55, .62);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 7px 13px;
}

.page-blog-listing .feature-card .f-body {
  padding: 40px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background: #fff;
  color: var(--ink);
}

.page-blog-listing .feature-card h2 {
  font-family: var(--serif);
  font-size: 33px;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 16px 0 14px;
  font-weight: 800;
}

.page-blog-listing .feature-card .f-ex {
  display: block;
  font-size: 15.5px;
  color: #556276;
  line-height: 1.66;
  margin: 0 0 24px;
}

.page-blog-listing .f-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 24px;
}

.page-blog-listing .f-meta .dotsep,
.page-blog-listing .p-meta .dotsep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-2);
}

.page-blog-listing .p-meta .dotsep {
  width: 3px;
  height: 3px;
}

.page-blog-listing .read-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  color: var(--teal);
  width: max-content;
}

.page-blog-listing .read-link .ico {
  width: 17px;
  height: 17px;
  transition: transform .15s;
}

.page-blog-listing .feature-card:hover .read-link .ico,
.page-blog-listing .post-card:hover .read-link .ico {
  transform: translateX(4px);
}

.page-blog-listing .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  min-width: 0;
}

.page-blog-listing .sec-head-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-width: 0;
}

.page-blog-listing .sec-head h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  min-width: 0;
}

.page-blog-listing .sec-head .see-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
  white-space: nowrap;
}

.page-blog-listing .sec-head .see-all:hover {
  color: var(--teal-h);
}

.page-blog-listing .sec-head .see-all .ico {
  width: 16px;
  height: 16px;
}

.page-blog-listing .post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
  min-width: 0;
}

.page-blog-listing .post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  max-width: 100%;
}

.page-blog-listing .post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: #d3dae4;
}

.page-blog-listing .post-card .p-media {
  height: 174px;
  background-size: cover;
  background-position: center;
}

.page-blog-listing .post-card .p-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
  min-width: 0;
}

.page-blog-listing .post-card h4 {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 9px;
  overflow-wrap: anywhere;
}

.page-blog-listing .post-card:hover h4 {
  color: var(--teal-h);
}

.page-blog-listing .p-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-2);
}

.page-blog-listing .tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 13px;
}

.page-blog-listing .t-orange {
  background: rgba(243, 154, 18, .13);
  color: #b9690a;
}

.page-blog-listing .t-blue {
  background: rgba(40, 100, 230, .12);
  color: #2452c4;
}

.page-blog-listing .t-green {
  background: rgba(21, 168, 90, .13);
  color: #0f7d44;
}

.page-blog-listing .t-purple {
  background: rgba(123, 53, 240, .12);
  color: #6b27d4;
}

.page-blog-listing .t-teal {
  background: var(--teal-soft);
  color: var(--teal-h);
}

.page-blog-listing .blog-loading,
.page-blog-listing .blog-empty {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  padding: 24px 0;
}

.page-blog-listing .blog-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 48px;
}

.page-blog-listing .blog-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--teal, #0e9f6e);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  transition: transform .05s, filter .15s;
}

.page-blog-listing .blog-load-more-btn:hover {
  filter: brightness(1.05);
}

.page-blog-listing .pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 48px 0 6px;
  flex-wrap: wrap;
}

.page-blog-listing .pager a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: #475367;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-sm);
  transition: color .15s, border-color .15s, background .15s, transform .05s;
}

.page-blog-listing .pager a:hover {
  border-color: #cdd5e0;
  color: var(--teal-h);
}

.page-blog-listing .pager a:active {
  transform: translateY(1px);
}

.page-blog-listing .pager a.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 8px 18px rgba(79, 70, 229, .2);
}

.page-blog-listing .pager a.disabled {
  opacity: .45;
  pointer-events: none;
}

.page-blog-listing .pager .ico {
  width: 16px;
  height: 16px;
}

.page-blog-listing .pager-ellipsis {
  color: var(--muted-2);
  font-weight: 700;
  padding: 0 4px;
}

/* Featured card: image + body equal height (JS-rendered) */
.page-blog-listing #featured-post-root .feature-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
}

.page-blog-listing #featured-post-root .f-media {
  display: block;
  min-height: 360px;
  height: 100%;
  overflow: hidden;
}

.page-blog-listing #featured-post-root .f-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.page-blog-listing #featured-post-root .f-body {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.page-blog-listing #featured-post-root .f-body .f-meta {
  display: flex;
}

.page-blog-listing #featured-post-root .f-body .read-link {
  color: var(--teal);
}

@media (max-width: 1040px) {
  .page-blog-listing .blog-wrap {
    padding: 0 24px;
  }

  .page-blog-listing .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-blog-listing .feature-card,
  .page-blog-listing #featured-post-root .feature-card {
    grid-template-columns: 1fr;
  }

  .page-blog-listing .feature-card .f-media,
  .page-blog-listing #featured-post-root .f-media,
  .page-blog-listing #featured-post-root .f-media img {
    min-height: 240px;
  }

  .page-blog-listing #featured-post-root .f-body {
    padding: 26px 22px;
  }
}

@media (max-width: 768px) {
  .page-blog-listing .blog-wrap {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 640px) {
  .page-blog-listing .blog-hero {
    padding: 30px 0 22px;
  }

  .page-blog-listing .blog-hero h1 {
    font-size: 33px;
  }

  .page-blog-listing .blog-stats {
    gap: 22px;
  }

  .page-blog-listing .sec-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  .page-blog-listing .sec-head-actions {
    gap: 12px;
  }

  .page-blog-listing .post-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .page-blog-listing .post-card:hover {
    transform: none;
  }

  .page-blog-listing .feature-card {
    margin-bottom: 32px;
    max-width: 100%;
  }

  .page-blog-listing .feature-card .f-body {
    padding: 26px 22px;
  }

  .page-blog-listing .feature-card h2 {
    font-size: 26px;
  }

  .page-blog-listing .blog-load-more-wrap {
    padding-bottom: 8px;
  }
}