/*
 * J&S Anand - Blog/News engine styles.
 * Additive layer for the native WordPress posts index (home.html) and single
 * post (single.html). Uses the design tokens defined in assets/css/main.css
 * (:root --red, --gray-line, --muted, --r, --sh, etc.) and mirrors the .jcard
 * card look from main.css. Nothing here overrides main.css / pages.css; it only
 * styles the core query-loop / post blocks those templates output.
 */

/* ============================ BLOG INDEX ============================ */
.blog-index .sechead{max-width:680px}

/* Post Template <ul> becomes the 3-up card grid (mirrors .jobs from main.css) */
.blogquery .bloglist{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.blogquery .bloglist>li{margin:0;display:flex}

/* Card shell (mirrors .jcard) */
.blogcard{
  border:1px solid var(--gray-line);border-radius:var(--r);overflow:hidden;
  background:#fff;display:flex;flex-direction:column;flex:1;transition:.2s;
}
.blogcard:hover{transform:translateY(-5px);box-shadow:var(--sh)}

/* Featured image (mirrors .jph) */
.blogthumb{margin:0;height:210px;overflow:hidden;background:#ddd}
.blogthumb a,.blogthumb img{display:block;width:100%;height:100%}
.blogthumb img{object-fit:cover;transition:.4s}
.blogcard:hover .blogthumb img{transform:scale(1.05)}

/* Card body (mirrors .jbody) */
.blogcard-body{padding:26px;display:flex;flex-direction:column;flex:1;gap:0}
.blogdate{font-size:12.5px;color:var(--muted);font-weight:600;font-family:'Montserrat',sans-serif;letter-spacing:.02em;margin:0 0 10px}
.blogtitle{font-size:20px;font-weight:800;margin:0 0 10px;line-height:1.2}
.blogtitle a{color:var(--ink);transition:.15s}
.blogtitle a:hover{color:var(--red)}
.blogexcerpt{font-size:14.5px;color:var(--muted);margin:0 0 18px;flex:1}
.blogexcerpt p{margin:0}
.blogmore{align-self:flex-start;text-decoration:none;margin-top:auto}

/* Pagination */
.blogpager{margin-top:46px;gap:8px;flex-wrap:wrap}
.blogpager .wp-block-query-pagination-previous,
.blogpager .wp-block-query-pagination-next,
.blogpager .wp-block-query-pagination-numbers .page-numbers{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
  padding:9px 15px;border:1.5px solid var(--gray-line);border-radius:10px;
  color:var(--charcoal);transition:.15s;text-decoration:none;
}
.blogpager .page-numbers.current{background:var(--red);color:#fff;border-color:var(--red)}
.blogpager a:hover{border-color:var(--red);color:var(--red)}

/* ============================ SINGLE POST ============================ */
.blogsingle{padding-top:56px}
.blogsingle-inner{max-width:800px}
.blogsingle-head{margin-bottom:14px}
.blogsingle-head .eyebrow a{color:var(--red)}
.blogsingle-title{font-size:clamp(30px,4.4vw,46px);font-weight:900;line-height:1.08;margin:0 0 14px}
.blogsingle-date{font-size:13.5px;color:var(--muted);font-weight:600;font-family:'Montserrat',sans-serif;letter-spacing:.02em;margin:0 0 26px}
.blogsingle-hero{margin:0 0 34px}
.blogsingle-hero img{width:100%;height:auto;border-radius:18px;border:1px solid var(--gray-line);box-shadow:var(--sh)}

/* Readable body typography (article content) */
.blogbody{font-size:17px;color:#33343c;line-height:1.7}
.blogbody>*:first-child{margin-top:0}
.blogbody p{margin:0 0 18px}
.blogbody h2{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:800;margin:38px 0 14px;line-height:1.15;color:var(--ink)}
.blogbody h3{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:800;margin:30px 0 12px;line-height:1.2;color:var(--ink)}
.blogbody h4{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;margin:24px 0 10px;color:var(--ink)}
.blogbody a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.blogbody a:hover{color:var(--red-deep)}
.blogbody ul,.blogbody ol{margin:0 0 18px;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.blogbody li{padding-left:4px}
.blogbody img{border-radius:12px;margin:22px 0;height:auto}
.blogbody blockquote{border-left:3px solid var(--red);padding:4px 0 4px 20px;margin:0 0 20px;color:var(--charcoal);font-style:italic}
.blogbody strong{color:var(--ink)}
.blogbody .alsoread{margin-top:30px;padding-top:20px;border-top:1px solid var(--gray-line);font-size:15.5px}
.blogbody .alsoread strong{font-family:'Montserrat',sans-serif}

/* ============================ RESPONSIVE ============================ */
@media(max-width:980px){
  .blogquery .bloglist{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .blogquery .bloglist{grid-template-columns:1fr}
}