/* ============================================================
   NG-BLOG - the Guides surfaces (single post, /guides/ index,
   post-category archives) in the Port of Entry language.
   Loads after port-of-entry.css and reads ONLY its tokens:
   --paper, --card, --concrete, --ink, --muted, the stamp inks
   via the shared .ink-g/t/m/k classes, --hairline, --paper-press,
   the micro type scale and the three font vars. The .ng-toc nav
   inside posts is styled by ng-toc.css and is NOT touched here.
   Enqueued by mu-plugins/nomadgear-assets.php on blog contexts.
   ============================================================ */

/* ---------- shared content column ----------
   Full site content width: .post-col sits nested inside the
   template's own .wrap (port-of-entry.css: max-width:var(--wrap),
   1440px, padding:var(--pad)), so leaving max-width unset here
   lets the article fill that same .wrap, identical to every
   other page (was 75ch, which double-narrowed the column). */
.post-col{max-width:none}

/* ---------- single post: back link + hero ---------- */
.post-back{margin:0 0 34px}
.post-hero{margin-bottom:clamp(30px,4vw,44px)}
.post-cats{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:18px}
.post-cats .cat-tag{margin-top:0;text-decoration:none}
.post-cats .cat-tag:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.post-hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-0.02em;
  margin-bottom:18px;
}
.post-meta{
  font-family:var(--font-mono);font-size:var(--micro-s);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.post-figure{margin:28px 0 0;border:var(--hairline);background:var(--card)}
.post-figure img{width:100%;height:auto}
.post-figure figcaption{
  font-family:var(--font-mono);font-size:var(--micro-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:10px 14px;border-top:var(--hairline);
}

/* ---------- post body rhythm ---------- */
.post-body{counter-reset:ng-h2}
.post-body p{margin:0 0 1.15em}
.post-body ul,.post-body ol{margin:0 0 1.3em;padding-left:1.35em}
.post-body li{margin-bottom:.45em}
.post-body li::marker{color:var(--green)}
.post-body h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(25px,3vw,32px);line-height:1.12;letter-spacing:-0.015em;
  margin:1.9em 0 .65em;counter-increment:ng-h2;
}
.post-body h2:first-child{margin-top:0}
/* mono section number above each H2, mirroring the numbered TOC
   (the TOC lists every H2 in order, so the counters line up 1:1) */
.post-body h2::before{
  content:counter(ng-h2,decimal-leading-zero);
  display:block;font-family:var(--font-mono);font-weight:700;
  font-size:var(--micro-s);letter-spacing:.22em;color:var(--muted);
  margin-bottom:8px;
}
.post-body h3{
  font-family:var(--font-display);font-weight:700;font-size:21px;
  line-height:1.2;letter-spacing:-0.01em;margin:1.6em 0 .5em;
}
.post-body a{
  color:inherit;text-decoration:underline;text-decoration-color:var(--green);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color .15s ease;
}
.post-body a:hover{color:var(--green)}
.post-body blockquote{
  border-left:3px solid var(--concrete);padding:4px 0 4px 20px;
  margin:0 0 1.3em;color:var(--muted);
}
.post-body hr{border:0;border-top:var(--hairline);margin:2.2em 0}
.post-body img{border:var(--hairline)}
.post-body .ng-toc{margin:0 0 2.2em}

/* ---------- TL;DR answer box ---------- */
.ng-tldr{
  position:relative;background:var(--card);border:2px solid var(--green);
  padding:22px 24px 18px;margin:0 0 1.6em;
}
/* stamped corner pill, echoing .mini-approved / the chit code pill */
.ng-tldr::after{
  content:"TL;DR";position:absolute;top:-11px;right:14px;
  font-family:var(--font-mono);font-weight:700;font-size:var(--micro-2xs);
  letter-spacing:.1em;color:var(--green);background:var(--paper);
  border:1px solid var(--green);padding:2px 7px;transform:rotate(2deg);
}
.ng-tldr p{margin:0 0 .8em}
.ng-tldr ul,.ng-tldr ol{margin:0;padding-left:1.25em}
.ng-tldr li{margin-bottom:.5em}
.ng-tldr li:last-child,.ng-tldr p:last-child{margin-bottom:0}

/* ---------- affiliate disclosure line ---------- */
.ng-disclosure{
  font-family:var(--font-mono);font-size:var(--micro-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.8em;
}
.post-body .ng-disclosure a{text-decoration-color:currentColor}
.post-body .ng-disclosure a:hover{color:var(--green)}

/* ---------- comparison tables ---------- */
.ng-table-wrap{
  overflow-x:auto;border:1px solid var(--concrete);background:var(--card);
  margin:0 0 1.6em;
}
.post-body table{
  width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;
  min-width:600px;
}
.post-body th{
  font-family:var(--font-mono);font-size:var(--micro-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:12px 16px;border-bottom:2px solid var(--ink);
}
.post-body td{padding:12px 16px;border-bottom:var(--hairline);vertical-align:top}
.post-body tr:last-child td{border-bottom:0}
.post-body td:first-child{font-weight:600}

/* ---------- /go/ affiliate CTA ----------
   Writers emit a plain paragraph whose ONLY child is the /go/ link
   (per content/blog-post-spec.md), so it can be dressed as the
   GRANTED button without touching inline /go/ mentions. Mirrors
   .btn-granted from port-of-entry.css. */
.post-body p>a[href*="/go/"]:only-child{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-weight:700;font-size:var(--micro-s);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  color:var(--green);border:2px solid var(--green);padding:13px 22px;
  background:transparent;
  transition:background-color .25s ease,color .25s ease,transform .12s ease;
}
.post-body p>a[href*="/go/"]:only-child::after{content:"\2192"}
.post-body p>a[href*="/go/"]:only-child:hover{background:var(--green);color:var(--card)}
.post-body p>a[href*="/go/"]:only-child:active{transform:scale(.95)}

/* ---------- prev / next navigation ---------- */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:clamp(40px,6vw,64px);
}
.pn-card{
  display:flex;flex-direction:column;gap:10px;padding:18px 20px;
  background:var(--card);border:1px solid var(--concrete);text-decoration:none;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease;
}
.pn-card:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:4px 4px 0 rgba(26,26,23,.07)}
.pn-card:active{transform:scale(.985)}
.pn-label{
  font-family:var(--font-mono);font-size:var(--micro-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.pn-title{font-family:var(--font-display);font-weight:700;font-size:17.5px;line-height:1.25;color:var(--ink)}
.pn-next{text-align:right;align-items:flex-end}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}.pn-next{text-align:left;align-items:flex-start}}

/* ---------- related guides ---------- */
.post-rel{
  margin-top:clamp(48px,7vw,80px);padding-top:clamp(36px,5vw,56px);
  border-top:var(--hairline);
}

/* ---------- archive: header, filter chips, card grid ---------- */
/* .blog-head rides on .sec-head; the h1 mirrors .sec-head h2 */
.sec-head.blog-head{margin-bottom:18px}
.blog-head h1{
  grid-area:h;font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,4.2vw,46px);letter-spacing:-0.015em;line-height:1.05;
}
.blog-lead{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:38em;margin:0 0 30px}

.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 clamp(28px,4vw,40px)}
.fchip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-weight:700;font-size:var(--micro-xs);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--muted);border:1.5px solid var(--concrete);padding:7px 12px;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease,transform .12s ease;
}
.fchip .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.fchip:hover{color:var(--ink);border-color:var(--ink)}
.fchip:active{transform:scale(.95)}
.fchip.is-active{background:var(--ink);border-color:var(--ink);color:var(--card)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1080px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.blog-grid{grid-template-columns:1fr}}

/* whole-card clickable post card, same recipe as .chit / .pick */
.bcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--concrete);text-decoration:none;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease;
}
.bcard:hover{transform:translateY(-3px);border-color:currentColor;box-shadow:4px 4px 0 rgba(26,26,23,.07)}
.bcard:active{transform:scale(.985)}
.bcard-media{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--paper-press);border-bottom:var(--hairline);
}
.bcard-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:filter .25s ease}
.bcard:hover .bcard-media img{filter:none}
.bcard-noimg{display:flex;align-items:center;justify-content:center}
.bcard-noimg .mono-mark{font-size:15px}
.bcard-body{display:flex;flex-direction:column;flex:1;gap:10px;padding:20px 20px 18px}
.bcard .cat-tag{margin-top:0}
.bcard-title{
  font-family:var(--font-display);font-weight:700;font-size:21px;
  line-height:1.18;letter-spacing:-0.01em;color:var(--ink);
}
.bcard-ex{
  font-size:15px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bcard-meta{
  margin-top:auto;padding-top:12px;
  font-family:var(--font-mono);font-size:var(--micro-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.bcard-meta::after{content:" \2192";opacity:0;transition:opacity .15s}
.bcard:hover .bcard-meta::after{opacity:1}

/* ---------- pagination ---------- */
.blog-pagination{margin-top:clamp(36px,5vw,52px)}
.blog-pagination ul.page-numbers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.blog-pagination .page-numbers{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-weight:700;font-size:var(--micro-s);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);border:1.5px solid var(--concrete);padding:9px 14px;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
.blog-pagination a.page-numbers:hover{border-color:var(--ink)}
.blog-pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--card)}
.blog-pagination .page-numbers.dots{border-color:transparent;color:var(--muted)}