/* =====================================================================
   blog.html only — the article index.
   Shared rules live in assets/css/styles.css. Tokens only: no new
   colours, radii, shadows or type sizes are defined here.
   ===================================================================== */

/* ---------- 0. Local fix for [hidden] ----------------------------
   `.form-success` and `.btn` set an explicit `display`, which beats the
   browser's [hidden] rule, so a hidden success panel or a hidden Clear
   button still paints. Scoped to this page until the shared sheet gets
   a global `[hidden]{display:none!important}`. See sharedRequests. */
[hidden]{display:none !important}

/* ---------- 1. Hero extras --------------------------------------- */
.blog-hero__topics{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.blog-hero__topics>span{
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  display:inline-flex;align-items:center;min-height:34px;margin-right:var(--sp-1);
}
.blog-hero__media{position:relative}
.blog-hero__media .float-chip{position:absolute;left:-10px;bottom:20px}
@media (max-width:520px){
  .blog-hero__media .float-chip{left:0;bottom:12px;scale:.94;transform-origin:left bottom}
}

/* ---------- 2. Editor's pick ------------------------------------- */
.feat-grid{display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){ .feat-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }

.feat-post{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;
  padding:0;height:100%;
}
@media (min-width:640px){ .feat-post{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} }
.feat-post__media{position:relative;overflow:hidden;background:var(--ink-100);aspect-ratio:4/3}
/* Beside the copy the media fills the card instead of keeping its own ratio,
   so the two columns end level. */
@media (min-width:640px){
  .feat-post__media{aspect-ratio:auto;height:100%;min-height:clamp(300px,26vw,420px)}
}
.feat-post__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.feat-post:hover .feat-post__media img{transform:scale(1.04)}
.feat-post__flag{
  position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:2;
  background:var(--saffron-500);color:var(--ink-900);box-shadow:var(--sh-sm);
}
.feat-post__body{
  display:flex;flex-direction:column;gap:var(--sp-3);
  padding:clamp(20px,2.4vw,30px);
}
.feat-post__title{
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);margin:0;line-height:1.24;
}
.feat-post__title a{color:inherit;text-decoration:none}
.feat-post__title a::after{content:"";position:absolute;inset:0;z-index:1}
.feat-post__title a:hover{color:var(--saffron-700)}
.feat-post__excerpt{color:var(--text-muted);margin:0;font-size:var(--fs-sm);line-height:1.65}
.feat-post__meta{
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:6px var(--sp-3);align-items:center;
  font-size:var(--fs-xs);color:var(--text-subtle);
}
.feat-post .link-arrow{position:relative;z-index:2}

/* Compact "also new" rail beside the pick */
.feat-side{display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
.feat-side__head{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-subtle);margin:0;
}
.mini-list{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0}
.mini-list li{margin:0}
.mini-post{
  position:relative;display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-4) 0;border-top:1px solid var(--line-soft);
}
.mini-list li:first-child .mini-post{border-top:0;padding-top:0}
.mini-post__thumb{
  width:76px;height:58px;border-radius:var(--r-md);object-fit:cover;flex:none;background:var(--ink-100);
}
.mini-post__body{min-width:0}
.mini-post__title{
  font-family:var(--font-head);font-size:14.5px;font-weight:600;color:var(--heading);
  line-height:1.35;margin:0 0 4px;
}
.mini-post__title a{color:inherit;text-decoration:none}
.mini-post__title a::after{content:"";position:absolute;inset:0}
.mini-post__title a:hover{color:var(--saffron-700)}
.mini-post__meta{font-size:var(--fs-xs);color:var(--text-subtle);margin:0}

/* ---------- 3. Toolbar: search + category chips -------------------- */
.blog-toolbar{
  display:flex;flex-direction:column;gap:var(--sp-4);
  padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-sm);margin-bottom:clamp(24px,3vw,40px);
}
.blog-toolbar__row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between}
.blog-search{display:flex;align-items:center;gap:10px;flex:1 1 260px;min-width:0}
.blog-search .field{flex:1;min-width:0}
.blog-search .field__control{display:flex;align-items:center}
.blog-search .input{padding-left:42px}
.blog-search__icon{
  position:absolute;left:14px;top:50%;translate:0 -50%;width:18px;height:18px;
  color:var(--ink-400);pointer-events:none;
}
.blog-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.blog-count{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.blog-count b{color:var(--ink-800);font-weight:600}

/* ---------- 4. Index layout: cards + rail -------------------------- */
.blog-layout{display:grid;gap:clamp(28px,3.4vw,52px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .blog-layout{grid-template-columns:minmax(0,1fr) minmax(0,300px)} }
.blog-main{min-width:0}

.post-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

.blog-empty{
  border:1px dashed var(--line-strong);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(28px,4vw,48px);text-align:center;
}
.blog-empty h3{margin-bottom:var(--sp-2)}
.blog-empty p{color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--sp-5)}

.blog-pager{margin-top:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}
.blog-pager[hidden]{display:none}
.pagination [aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ---------- 5. Side rail ------------------------------------------- */
.blog-aside{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);min-width:0}
@media (min-width:1024px){
  .blog-aside{position:sticky;top:calc(var(--header-h) + 20px)}
}
.rail-card{padding:var(--sp-5)}
.rail-card h3{
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-subtle);margin:0 0 var(--sp-4);
}
.rail-card p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.rail-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.rail-links li{margin:0;border-top:1px solid var(--line-soft)}
.rail-links li:first-child{border-top:0}
.rail-links a{
  display:flex;gap:10px;align-items:flex-start;padding:11px 0;
  font-size:13.5px;line-height:1.45;color:var(--ink-700);text-decoration:none;font-weight:500;
}
.rail-links a:hover{color:var(--saffron-700)}
.rail-links b{
  font-family:var(--font-head);font-size:13px;color:var(--saffron-700);flex:none;
  font-variant-numeric:tabular-nums;width:18px;
}
.rail-card .cluster .chip{min-height:32px;font-size:13px}
.rail-wa{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---------- 6. Newsletter band (the page's single dark section) ----- */
.news-grid{display:grid;gap:clamp(28px,3.6vw,56px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){ .news-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)} }
.news-points{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.news-points li{display:flex;gap:11px;margin:0;font-size:var(--fs-sm);color:var(--text-on-dark-muted);line-height:1.55}
.news-points svg{width:19px;height:19px;color:var(--saffron-300);flex:none;margin-top:1px}
.news-points b{color:#fff;font-weight:600}
.news-card{padding:clamp(22px,2.6vw,32px)}
.news-card__title{font-size:var(--fs-h4);margin:0 0 var(--sp-5)}
.news-card .form-success .cluster{justify-content:flex-start}
.news-card .field__label{color:#fff}
.news-card .field__hint,.news-card .form-consent{color:var(--text-on-dark-muted)}
.news-card .check{color:var(--text-on-dark-muted)}
.news-card .check input{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.news-card .form-demo-note{
  background:rgba(245,151,61,.12);border-color:rgba(245,151,61,.34);color:var(--text-on-dark-muted);
}
.news-card .form-success{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.news-card .form-success p{color:var(--text-on-dark-muted)}

/* ---------- 7. Editorial promise ----------------------------------- */
.promise-grid{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .promise-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.promise-foot{
  margin-top:clamp(24px,3vw,40px);padding-top:var(--sp-6);border-top:1px dashed var(--line-strong);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
}
.promise-foot p{margin:0;max-width:62ch;font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------- 8. CTA band art ---------------------------------------
   Copied verbatim from assets/css/pages/home.css: the two positioning
   rules for the CTA band illustration are not in the shared sheet, so
   every page that uses the band has to repeat them. The ridges stretch
   horizontally, and the climbers sit in their own uniformly scaled SVG
   parked on the crest via --ridge-h and --crest (both set on .cta-band
   in styles.css), so there is no rectangular seam at 390px. */
.cta-band__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ridge-h);z-index:-1;display:block}
.cta-band__figs{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--ridge-h) * var(--crest));
  width:clamp(158px,23vw,300px);height:auto;z-index:-1;display:block;
}