/* =====================================================================
   Kranti Chemicals — Blog styles (loaded only on /blog/ pages)
   ===================================================================== */

/* ---------- Hero meta ---------- */
.page-hero .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:6px;color:var(--slate-300);font-size:14px;}
.page-hero .post-meta span{display:inline-flex;align-items:center;}
.page-hero .post-meta span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--slate-500);margin-right:18px;}
.page-hero .post-meta .post-cat + span::before{display:none;}
.post-cat{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-600);background:var(--teal-100);padding:5px 10px;border-radius:999px;}
.page-hero .post-cat{background:rgba(95,208,209,.16);color:var(--teal-300);}

/* ---------- Filters ---------- */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.blog-filter{border:1px solid var(--slate-200);background:var(--white);color:var(--slate-700);font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;cursor:pointer;transition:all .2s;}
.blog-filter:hover{border-color:var(--teal-500);color:var(--teal-600);}
.blog-filter.active{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);}

/* ---------- Cards ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--slate-300);}
.post-card-img{aspect-ratio:16/9;background:var(--slate-100);overflow:hidden;}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-card:hover .post-card-img img{transform:scale(1.04);}
.post-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px;}
.post-card-body .post-cat{align-self:flex-start;margin-bottom:14px;}
.post-card h3{font-size:19px;line-height:1.3;margin-bottom:10px;}
.post-card p{font-size:14.5px;margin-bottom:18px;}
.post-card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--slate-500);border-top:1px solid var(--slate-100);padding-top:16px;}
.post-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--amber-600);}
.post-link svg{width:14px;height:14px;transition:transform .2s;}
.post-card:hover .post-link svg{transform:translateX(3px);}

.post-card.featured{grid-column:1 / -1;flex-direction:row;}
.post-card.featured .post-card-img{flex:0 0 52%;aspect-ratio:auto;min-height:340px;}
.post-card.featured .post-card-body{padding:40px 44px;justify-content:center;}
.post-card.featured h3{font-size:clamp(24px,2.4vw,30px);}
.post-card.featured p{font-size:16px;}

@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){
  .blog-grid{grid-template-columns:1fr;}
  .post-card.featured{flex-direction:column;}
  .post-card.featured .post-card-img{flex:none;min-height:0;aspect-ratio:16/9;}
  .post-card.featured .post-card-body{padding:22px 24px 24px;}
}

/* ---------- Article ---------- */
.article-section{padding-top:56px;}
.article-figure{margin:0 0 40px;border-radius:var(--radius-lg);overflow:hidden;background:var(--slate-100);aspect-ratio:860/400;box-shadow:var(--shadow-md);}
.article-figure img{width:100%;height:100%;object-fit:cover;}
.article-body{max-width:720px;margin:0 auto;}
.article-body .lead{font-size:18.5px;line-height:1.7;color:var(--slate-700);margin-bottom:1.6em;}
.article-body p{font-size:16.5px;line-height:1.8;}
.article-body h2{font-size:clamp(22px,2.4vw,27px);margin:1.9em 0 .6em;}
.article-body a{color:var(--teal-600);font-weight:600;text-decoration:underline;text-decoration-color:rgba(10,129,130,.35);text-underline-offset:3px;}
.article-body a:hover{text-decoration-color:var(--teal-500);}
.article-body ul{margin:0 0 1.4em;padding:0;}
.article-body ul li{position:relative;padding-left:26px;margin-bottom:.7em;line-height:1.75;color:var(--slate-600);font-size:16.5px;}
.article-body ul li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:2px;background:var(--amber-500);transform:rotate(45deg);}
.article-body strong{color:var(--navy-950);}
.article-body .spec-table{margin:1.4em 0 1.6em;}
.article-body .spec-table th,.article-body .spec-table td{padding:12px 16px;text-align:left;font-size:14.5px;vertical-align:top;}
.article-body .spec-table th{background:var(--slate-50);color:var(--navy-950);font-weight:600;width:38%;}
.article-body .spec-table td{color:var(--slate-600);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.compare{min-width:560px;}
.compare thead th{background:var(--navy-900) !important;color:var(--white) !important;width:auto !important;font-size:13.5px;}
.compare tbody th{width:auto !important;white-space:nowrap;}
.callout{margin:1.6em 0;padding:18px 22px;border-left:4px solid var(--teal-500);background:var(--teal-100);border-radius:0 var(--radius) var(--radius) 0;color:var(--slate-700);font-size:15.5px;line-height:1.7;}
.callout strong{color:var(--navy-950);}
.article-related{max-width:720px;margin:48px auto 0;padding-top:32px;border-top:1px solid var(--slate-200);}
.article-related h3{font-size:18px;margin-bottom:14px;}
@media(max-width:760px){
  .article-body .lead{font-size:17px;}
  .article-body p,.article-body ul li{font-size:16px;}
}

/* ---------- Index layout: featured + 2-column horizontal cards ---------- */
.post-card.featured .post-card-foot{margin-top:28px;}
.blog-list{grid-template-columns:repeat(2,minmax(0,1fr));}
.blog-list .post-card:not(.featured){flex-direction:row;}
.blog-list .post-card:not(.featured) .post-card-img{flex:0 0 40%;aspect-ratio:auto;min-height:250px;}
@media(max-width:1000px){
  .blog-list .post-card:not(.featured){flex-direction:column;}
  .blog-list .post-card:not(.featured) .post-card-img{flex:none;min-height:0;aspect-ratio:16/9;}
}
@media(max-width:760px){.blog-list{grid-template-columns:1fr;}}