/* QRJ Blog pages - aligned with the main QRJ light theme */
:root{
  --qrj-bg:#f7fbff;
  --qrj-bg-soft:#eef6ff;
  --qrj-card:#ffffff;
  --qrj-card-soft:#f9fcff;
  --qrj-text:#102033;
  --qrj-muted:#63758c;
  --qrj-line:#dbe8f5;
  --qrj-primary:#1d8cf8;
  --qrj-primary-dark:#0f6fd0;
  --qrj-accent:#16c7a7;
  --qrj-accent-soft:#dcfff7;
  --qrj-purple:#7c5cff;
  --qrj-warning:#ffb547;
  --qrj-radius:24px;
  --qrj-radius-sm:16px;
  --qrj-shadow:0 20px 60px rgba(23,72,123,.12);
  --qrj-shadow-sm:0 10px 30px rgba(23,72,123,.09);
  --qrj-max:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.blog-list-page,
body.blog-single-page{
  margin:0;
  color:var(--qrj-text);
  font:16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(700px 420px at 8% 2%, rgba(29,140,248,.14), transparent 60%),
    radial-gradient(760px 460px at 92% 5%, rgba(22,199,167,.15), transparent 60%),
    linear-gradient(180deg, var(--qrj-bg), #ffffff 54%, var(--qrj-bg-soft));
  overflow-x:hidden;
}
body.blog-list-page a,
body.blog-single-page a{color:inherit}
body.blog-list-page img,
body.blog-single-page img{max-width:100%}
.mesh:before,.orbs{display:none!important}
.progress{position:fixed; top:0; left:0; height:4px; width:0; background:linear-gradient(90deg,var(--qrj-primary),var(--qrj-accent)); z-index:1200}

body.blog-list-page main.blog-list-main,
body.blog-single-page main{
  width:min(var(--qrj-max), calc(100% - 36px));
  max-width:var(--qrj-max);
  margin:0 auto;
  padding:36px 0 74px;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--qrj-accent-soft);
  color:#087f6c;
  font-size:13px;
  font-weight:900;
}
.kicker:before{content:""; width:9px; height:9px; border-radius:50%; background:var(--qrj-accent); box-shadow:0 0 0 6px rgba(22,199,167,.14)}

/* Public listing */
.blog-list-hero{
  position:relative;
  overflow:hidden;
  margin:0 0 26px;
  padding:clamp(28px,5vw,56px);
  border:1px solid rgba(219,232,245,.9);
  border-radius:calc(var(--qrj-radius) + 10px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,253,255,.82)),
    radial-gradient(700px 420px at 90% 10%, rgba(22,199,167,.18), transparent 65%);
  box-shadow:var(--qrj-shadow);
}
.blog-list-hero:before{
  content:"";
  position:absolute;
  inset:auto -80px -150px auto;
  width:360px;
  height:360px;
  background:linear-gradient(135deg, rgba(29,140,248,.14), rgba(22,199,167,.14));
  border-radius:50%;
  pointer-events:none;
}
.blog-list-hero h1{
  position:relative;
  z-index:1;
  margin:0;
  max-width:780px;
  font-size:clamp(36px,5.2vw,64px);
  line-height:1.02;
  letter-spacing:-.055em;
  font-weight:950;
}
.blog-list-hero h1:after,
.blog-single-page .title:after{
  content:"";
  display:block;
  width:88px;
  height:5px;
  margin-top:18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--qrj-primary),var(--qrj-accent));
}
.blog-list-hero p{
  position:relative;
  z-index:1;
  margin:22px 0 0;
  max-width:720px;
  color:var(--qrj-muted);
  font-size:clamp(16px,1.4vw,19px);
}
.blog-filter{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,240px) auto auto;
  gap:12px;
  margin-top:28px;
}
.blog-filter input,
.blog-filter select{
  width:100%;
  min-height:48px;
  border:1px solid var(--qrj-line);
  border-radius:16px;
  background:#fff;
  color:var(--qrj-text);
  padding:12px 14px;
  font:inherit;
  outline:none;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.blog-filter input:focus,
.blog-filter select:focus{border-color:#b9dcff; box-shadow:0 0 0 4px rgba(29,140,248,.14)}
.blog-filter button,
.clear-filter{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-filter button{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,var(--qrj-primary),var(--qrj-primary-dark));
  box-shadow:0 14px 28px rgba(29,140,248,.24);
}
.clear-filter{border:1px solid var(--qrj-line); background:#fff; color:var(--qrj-primary-dark)}
.blog-filter button:hover,.clear-filter:hover{transform:translateY(-2px); box-shadow:var(--qrj-shadow-sm)}

.blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:24px}
.blog-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  border:1px solid var(--qrj-line);
  border-radius:var(--qrj-radius);
  background:linear-gradient(180deg,#fff,var(--qrj-card-soft));
  box-shadow:var(--qrj-shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover{transform:translateY(-5px); border-color:#c7d9eb; box-shadow:0 24px 56px rgba(23,72,123,.16)}
.blog-card-image{display:block; height:205px; overflow:hidden; background:linear-gradient(135deg,#e9f5ff,#f4fffc); text-decoration:none}
.blog-card-image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .28s ease}
.blog-card:hover .blog-card-image img{transform:scale(1.04)}
.blog-image-fallback{width:100%; height:100%; display:grid; place-items:center; color:#fff; font-weight:950; font-size:30px; background:linear-gradient(135deg,var(--qrj-primary),var(--qrj-accent))}
.blog-card-body{display:flex; flex:1; flex-direction:column; gap:10px; padding:20px}
.blog-card-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--qrj-muted); font-size:13px; font-weight:800}
.blog-card-meta span{display:inline-flex; padding:6px 9px; border:1px solid var(--qrj-line); border-radius:999px; background:#fff}
.blog-card h2{margin:0; font-size:22px; line-height:1.2; letter-spacing:-.03em; font-weight:950}
.blog-card h2 a{text-decoration:none}
.blog-card h2 a:hover{color:var(--qrj-primary-dark)}
.blog-card p{margin:0; color:var(--qrj-muted)}
.read-more{margin-top:auto; display:inline-flex; align-items:center; width:max-content; color:var(--qrj-primary-dark); font-weight:950; text-decoration:none}
.read-more:hover{text-decoration:underline}
.empty-blog-box{padding:32px; border:1px solid var(--qrj-line); border-radius:var(--qrj-radius); background:#fff; box-shadow:var(--qrj-shadow-sm); text-align:center}
.empty-blog-box h2{margin:0 0 8px; font-size:28px; letter-spacing:-.03em}.empty-blog-box p{margin:0; color:var(--qrj-muted)}
.blog-pagination{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px}
.blog-pagination a{min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--qrj-line); border-radius:999px; background:#fff; color:var(--qrj-text); text-decoration:none; font-weight:900; box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.blog-pagination a.active,.blog-pagination a:hover{border-color:transparent; color:#fff; background:linear-gradient(135deg,var(--qrj-primary),var(--qrj-primary-dark)); box-shadow:0 14px 28px rgba(29,140,248,.2)}

/* Single post */
.blog-single-page .hero{margin:0 0 22px; text-align:left}
.blog-single-page .banner{
  position:relative;
  overflow:hidden;
  min-height:430px;
  border:1px solid rgba(219,232,245,.9);
  border-radius:calc(var(--qrj-radius) + 10px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,253,255,.86)),
    radial-gradient(700px 420px at 90% 10%, rgba(29,140,248,.16), transparent 65%);
  box-shadow:var(--qrj-shadow);
}
.blog-single-page .banner.no-image{min-height:330px}
.blog-single-page .banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.02)}
.blog-single-page .banner:after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 44%,rgba(255,255,255,.22) 100%)}
.blog-single-page .banner.no-image:before{content:""; position:absolute; right:-80px; bottom:-120px; width:360px; height:360px; border-radius:50%; background:linear-gradient(135deg,rgba(29,140,248,.15),rgba(22,199,167,.16))}
.blog-single-page .meta{position:relative; z-index:2; max-width:780px; padding:clamp(28px,5vw,58px)}
.blog-single-page .title{margin:0; max-width:780px; color:var(--qrj-text); font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-.055em; font-weight:950}
.blog-single-page .details{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px; color:var(--qrj-muted); font-weight:800}
.blog-single-page .details span:not(:nth-child(2)):not(:nth-child(4)){display:inline-flex; padding:6px 10px; border:1px solid var(--qrj-line); border-radius:999px; background:rgba(255,255,255,.8)}
.article{width:min(900px,100%); margin:0 auto; padding:clamp(22px,4vw,38px); border:1px solid var(--qrj-line); border-radius:var(--qrj-radius); background:#fff; box-shadow:var(--qrj-shadow-sm)}
.prose{color:#203047; overflow-wrap:anywhere; font-size:18px; line-height:1.78}
.prose h2,.prose h3,.prose h4{margin:30px 0 12px; color:var(--qrj-text); line-height:1.25; letter-spacing:-.03em; font-weight:950}
.prose h2{font-size:clamp(25px,3vw,34px)}.prose h3{font-size:clamp(21px,2.4vw,27px)}.prose h4{font-size:20px}
.prose p{margin:0 0 18px}.prose ul,.prose ol{margin:0 0 20px 24px}.prose li{margin:8px 0}.prose strong{color:var(--qrj-text)}
.prose a{color:var(--qrj-primary-dark); font-weight:800; text-decoration:none; border-bottom:1px dashed rgba(15,111,208,.45)}.prose a:hover{border-bottom-style:solid}
.prose blockquote{margin:22px 0; padding:16px 18px; border-left:4px solid var(--qrj-primary); background:#f4f9ff; color:#24405d; border-radius:14px}
.prose code{background:#f2f7fc; border:1px solid var(--qrj-line); padding:2px 6px; border-radius:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.prose pre{background:#f2f7fc; border:1px solid var(--qrj-line); padding:14px; border-radius:14px; overflow:auto}.prose img{max-width:100%; height:auto; border-radius:18px; border:1px solid var(--qrj-line); box-shadow:var(--qrj-shadow-sm)}
.prose hr{border:0; height:1px; background:linear-gradient(90deg,transparent,var(--qrj-line),transparent); margin:28px 0}
.toolbar{display:flex; gap:12px; justify-content:space-between; align-items:center; margin:28px 0 0; padding-top:22px; border-top:1px solid var(--qrj-line)}
.left{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.blog-single-page .btn{min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border:1px solid var(--qrj-line); border-radius:999px; background:#fff; color:var(--qrj-text); text-decoration:none; font-weight:900; box-shadow:0 1px 0 rgba(255,255,255,.8) inset; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor:pointer; font:inherit; white-space:nowrap}
.blog-single-page .btn:hover{transform:translateY(-2px); border-color:#c7d9eb; box-shadow:var(--qrj-shadow-sm)}
.blog-single-page .btn.primary{color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--qrj-primary),var(--qrj-primary-dark)); box-shadow:0 14px 28px rgba(29,140,248,.24)}
.related-posts{width:min(900px,100%); margin:24px auto 0; padding:24px; border:1px solid var(--qrj-line); border-radius:var(--qrj-radius); background:#fff; box-shadow:var(--qrj-shadow-sm)}
.related-posts h2{margin:0 0 16px; font-size:28px; letter-spacing:-.03em; font-weight:950}.related-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}.related-card{display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--qrj-line); border-radius:18px; background:var(--qrj-card-soft); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}.related-card strong{line-height:1.25}.related-card span{color:var(--qrj-muted); font-size:13px; font-weight:800}.related-card:hover{transform:translateY(-2px); border-color:#c7d9eb; box-shadow:var(--qrj-shadow-sm)}

body.blog-list-page footer,
body.blog-single-page footer{margin-top:0; background:#f7fbff; border-top:1px solid var(--qrj-line); color:var(--qrj-muted)}
body.blog-list-page footer a,
body.blog-single-page footer a{color:var(--qrj-primary-dark); font-weight:800}

/* Legacy AJAX blog block support */
.blog-post{padding:20px; border:1px solid var(--qrj-line); border-radius:var(--qrj-radius-sm); background:#fff; box-shadow:var(--qrj-shadow-sm)}
.blog-post img{width:100%; max-height:260px; object-fit:cover; border-radius:var(--qrj-radius-sm); margin-bottom:14px}.blog-post h3{margin:0 0 8px}.blog-post .meta{color:var(--qrj-muted); font-size:13px; font-weight:800}

@media(max-width:940px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-filter{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr}.blog-single-page .banner:after{background:rgba(255,255,255,.88)}}
@media(max-width:640px){body.blog-list-page main.blog-list-main,body.blog-single-page main{width:min(var(--qrj-max), calc(100% - 24px)); padding:24px 0 56px}.blog-list-hero{padding:26px 20px}.blog-grid{grid-template-columns:1fr}.blog-filter{grid-template-columns:1fr}.blog-single-page .banner{min-height:360px}.blog-single-page .meta{padding:26px 20px}.article,.related-posts{padding:20px}.prose{font-size:16px}.toolbar{flex-direction:column; align-items:stretch}.left{display:grid; grid-template-columns:1fr; width:100%}.blog-single-page .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.blog-card,.blog-card-image img,.related-card,.blog-single-page .btn,.blog-filter button,.clear-filter{transition:none}}

/* Blog title-only listing override */
body.blog-title-list-page .compact-blog-hero{
  padding:clamp(24px,4vw,42px);
  margin-bottom:22px;
}
body.blog-title-list-page .compact-blog-hero h1{
  font-size:clamp(32px,4.4vw,52px);
}
.blog-heading-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}
.blog-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 20px;
  border:1px solid var(--qrj-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(23,72,123,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-heading-row:hover{
  transform:translateY(-2px);
  border-color:#c7d9eb;
  box-shadow:0 14px 34px rgba(23,72,123,.11);
}
.blog-heading-row > a{
  color:var(--qrj-text);
  text-decoration:none;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.02em;
}
.blog-heading-row > a:hover{
  color:var(--qrj-primary-dark);
}
.blog-heading-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  color:var(--qrj-muted);
  font-size:13px;
  font-weight:800;
}
.blog-heading-meta span{
  display:inline-flex;
  padding:6px 10px;
  border:1px solid var(--qrj-line);
  border-radius:999px;
  background:#f9fcff;
  white-space:nowrap;
}
@media(max-width:720px){
  .blog-heading-row{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    padding:16px;
  }
  .blog-heading-meta{
    justify-content:flex-start;
  }
}