/* ==========================================================================
   MEP Engineering USA — Blog
   Inherits the site design system (assets/css/style.css :root tokens):
   navy/green palette, Space Grotesk / Inter / Space Mono, radii, shadows.
   This file styles ONLY blog-specific components so the blog reads as a
   native part of the site. Loaded AFTER style.css.
   ========================================================================== */

/* ---------- hero additions (page-hero handles the frame) ---------- */
.blog-hero__sub{
  color:#c6d4ec; margin-top:.85rem; max-width:56ch;
  font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.6;
}
.page-hero .eyebrow.on-dark a{color:inherit; text-decoration:none}
.page-hero .eyebrow.on-dark a:hover{color:var(--green-400)}
.post-hero{padding-bottom:clamp(2.4rem,5vw,3.4rem)}

/* post meta row on the dark hero */
.post-meta{
  margin-top:1.15rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.03em; color:#a9bbdb;
}
.post-meta .dot{opacity:.5}

/* ---------- content section rhythm ---------- */
.blog-wrap{padding-block:clamp(3rem,6vw,5rem)}
.related{padding-top:0}

/* ---------- category toolbar / chips ---------- */
.blog-toolbar{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:clamp(2rem,4vw,3rem);
  padding-bottom:1.5rem; border-bottom:1px solid var(--line);
}
.chip{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  padding:.5rem .95rem; border-radius:999px; text-decoration:none;
  color:var(--slate-700); background:var(--bg-soft);
  border:1px solid var(--line); transition:all .25s var(--ease);
  white-space:nowrap;
}
.chip:hover{border-color:var(--green-400); color:var(--green-600); transform:translateY(-1px)}
.chip.is-active{background:var(--navy-900); color:#fff; border-color:var(--navy-900)}

/* ---------- post grid ---------- */
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(1.4rem,2.4vw,2rem);
}

/* ---------- post card ---------- */
.pcard{
  position:relative; display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.pcard__media{
  display:block; aspect-ratio:16/10; overflow:hidden; background:var(--navy-800);
  position:relative;
}
.pcard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease-out);
}
.pcard:hover .pcard__media img{transform:scale(1.05)}

/* image-less placeholder — subtle blueprint motif */
.pcard__ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(135deg,var(--navy-800),var(--navy-600));
}
.pcard__ph span{
  font-family:var(--f-mono); font-size:1.6rem; letter-spacing:.14em;
  color:var(--green-300); opacity:.9;
}

.pcard__body{padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.pcard__meta{
  display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:var(--slate-500);
}
.pcard__cat{
  text-transform:uppercase; color:var(--green-600); text-decoration:none;
  font-weight:400; letter-spacing:.08em;
}
.pcard__cat:hover{text-decoration:underline}
.pcard__title{
  font-family:var(--f-head); font-weight:600; line-height:1.28;
  font-size:1.22rem; margin:0 0 .55rem; letter-spacing:-.01em;
}
.pcard__title a{color:var(--navy-900); text-decoration:none}
.pcard:hover .pcard__title a{color:var(--green-600)}
.pcard__excerpt{color:var(--slate-700); line-height:1.62; font-size:.95rem; margin:0 0 1.1rem}
.pcard__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.03em;
  color:var(--navy-700); font-weight:500;
}
.pcard__more svg{width:16px; height:16px; transition:transform .3s var(--ease-out)}
.pcard:hover .pcard__more{color:var(--green-600)}
.pcard:hover .pcard__more svg{transform:translateX(4px)}
/* whole-card click target */
.pcard__media::after{content:""; position:absolute; inset:0}

/* featured (first) card — full-width, two-column on wide screens */
@media (min-width:820px){
  .pcard--feature{grid-column:1 / -1; flex-direction:row}
  .pcard--feature .pcard__media{aspect-ratio:auto; width:52%; min-height:340px}
  .pcard--feature .pcard__body{width:48%; justify-content:center; padding:clamp(2rem,3vw,2.8rem)}
  .pcard--feature .pcard__title{font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.18}
  .pcard--feature .pcard__excerpt{font-size:1.03rem}
}

/* ---------- pagination ---------- */
.pager{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:clamp(2.4rem,5vw,3.6rem);
}
.pager__btn{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.02em; font-weight:500;
  color:var(--navy-800); padding:.65rem 1.15rem; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--white); transition:all .25s var(--ease);
}
.pager__btn svg{width:16px; height:16px}
.pager__btn:hover{border-color:var(--green-400); color:var(--green-600)}
.pager__btn.is-disabled{opacity:.4; pointer-events:none}
.pager__count{font-family:var(--f-mono); font-size:.8rem; color:var(--slate-500)}
.pager__count span{opacity:.6}

/* ---------- empty / 404 ---------- */
.blog-empty{
  text-align:center; padding:clamp(3rem,7vw,5rem) 1rem; color:var(--slate-700);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.blog-empty svg{width:46px; height:46px; color:var(--slate-400); margin-bottom:.6rem}
.blog-empty__title{font-family:var(--f-head); font-size:1.3rem; color:var(--navy-900); margin:0}
.blog-empty__hint{color:var(--slate-500); margin:0}
.blog-empty .btn{margin-top:1.4rem}

/* ---------- preview flag ---------- */
.preview-flag{
  margin:1.5rem auto 0; max-width:760px; text-align:center;
  background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
  padding:.7rem 1rem; border-radius:var(--r-sm); font-size:.9rem;
  font-family:var(--f-mono); letter-spacing:.02em;
}

/* ==========================================================================
   ARTICLE BODY — reading column, admin-authored HTML
   ========================================================================== */
.article-body{
  max-width:760px; margin-inline:auto;
  padding-block:clamp(2.6rem,5vw,4rem);
  color:var(--slate-700); font-size:1.08rem; line-height:1.78;
}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 1.4rem}
.article-body h2{
  font-family:var(--f-head); font-weight:600; color:var(--navy-900);
  font-size:clamp(1.5rem,2.6vw,1.85rem); line-height:1.25; letter-spacing:-.01em;
  margin:2.6rem 0 1rem; padding-top:.4rem;
}
.article-body h3{
  font-family:var(--f-head); font-weight:600; color:var(--navy-800);
  font-size:1.32rem; line-height:1.3; margin:2rem 0 .8rem;
}
.article-body h4{
  font-family:var(--f-head); font-weight:600; color:var(--navy-800);
  font-size:1.1rem; margin:1.6rem 0 .6rem;
}
.article-body a{color:var(--green-600); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.article-body a:hover{color:var(--green-500)}
.article-body strong{color:var(--ink); font-weight:600}
.article-body ul,.article-body ol{margin:0 0 1.4rem; padding-left:1.35rem}
.article-body li{margin:.4rem 0; padding-left:.25rem}
.article-body li::marker{color:var(--green-500)}
.article-body img{
  max-width:100%; height:auto; border-radius:var(--r); display:block;
  margin:1.8rem auto; box-shadow:var(--shadow-sm);
}
.article-body figure{margin:1.8rem 0}
.article-body figcaption{
  font-family:var(--f-mono); font-size:.78rem; color:var(--slate-500);
  text-align:center; margin-top:.6rem;
}
.article-body blockquote{
  margin:1.8rem 0; padding:1rem 1.4rem; border-left:3px solid var(--green-500);
  background:var(--bg-soft); border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--navy-800); font-size:1.1rem;
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body code{
  font-family:var(--f-mono); font-size:.9em; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:6px; padding:.12em .4em; color:var(--navy-800);
}
.article-body pre{
  background:var(--navy-900); color:#e6edf8; border-radius:var(--r);
  padding:1.1rem 1.25rem; overflow-x:auto; margin:1.6rem 0; font-size:.92rem; line-height:1.6;
}
.article-body pre code{background:none; border:0; padding:0; color:inherit}
.article-body hr{border:0; border-top:1px solid var(--line); margin:2.4rem 0}
.article-body table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.96rem}
.article-body th,.article-body td{border:1px solid var(--line); padding:.6rem .8rem; text-align:left}
.article-body th{background:var(--bg-soft); font-family:var(--f-head); color:var(--navy-800); font-weight:600}

/* ---------- end-of-article CTA ---------- */
.post-cta{
  max-width:760px; margin:0 auto; display:flex; align-items:center; gap:1.5rem;
  flex-wrap:wrap; justify-content:space-between;
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
  border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem);
  position:relative; overflow:hidden; isolation:isolate;
}
.post-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/48px 48px;
  mask-image:radial-gradient(120% 100% at 90% 20%,#000,transparent 70%);
}
.post-cta__text h3{font-family:var(--f-head); color:#fff; margin:0 0 .3rem; font-size:1.3rem}
.post-cta__text p{color:#c6d4ec; margin:0; font-size:.98rem; max-width:44ch}
.post-cta .btn{flex-shrink:0}

/* ---------- related head ---------- */
.related__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:clamp(1.6rem,3vw,2.2rem); flex-wrap:wrap;
}
.related__head h2{font-family:var(--f-head); color:var(--navy-900); font-size:clamp(1.4rem,2.4vw,1.7rem); margin:0}
.related__all{
  font-family:var(--f-mono); font-size:.82rem; color:var(--green-600); text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.related__all svg{width:15px; height:15px; transition:transform .3s var(--ease-out)}
.related__all:hover svg{transform:translateX(4px)}

/* ---------- focus visibility ---------- */
.pcard a:focus-visible,.chip:focus-visible,.pager__btn:focus-visible,
.article-body a:focus-visible,.related__all:focus-visible{
  outline:2px solid var(--green-500); outline-offset:3px; border-radius:4px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard__media img,.pcard__more svg,.chip,.pager__btn,.related__all svg{transition:none}
  .pcard:hover{transform:none}
  .pcard:hover .pcard__media img{transform:none}
}

/* ---------- small screens ---------- */
@media (max-width:520px){
  .post-grid{grid-template-columns:1fr}
  .post-cta{flex-direction:column; align-items:flex-start}
}