/* ==========================================================================
   Editorial — posts, archives, search and editor-managed pages.

   Loaded ONLY on pages outside the approved design set, so none of the 21
   ranking pages pays for a byte of it. Every value is a token already defined
   in style.css, so this inherits the site's type scale and palette rather than
   introducing a second one.
   ========================================================================== */

/* ---------- Compact hero for non-designed pages ---------- */
/* Centred: this hero carries no form or media beside it, so a left-aligned
   column leaves half the band empty. Mirrors .section__head--center, which the
   approved design already uses for standalone headings. */
.hero--svc--compact{padding-block:var(--s-10) var(--s-9);text-align:center}
.hero--svc--compact .hero--svc__grid{display:block}
.hero--svc--compact .hero--svc__copy{max-width:64ch;margin-inline:auto}

/* .hero--svc__copy is a flex column with align-items:flex-start, so the
   text-align:center above centres the block but leaves the eyebrow, headline
   and lede pinned to its left edge. Centring the flex items is what actually
   centres them.

   :not(.arthero) keeps the blog article hero left-aligned — that layout was
   changed to left-aligned editorial on purpose and must not be pulled back. */
.hero--svc--compact:not(.arthero) .hero--svc__copy{align-items:center}
.hero--svc--compact .crumbs__list{justify-content:center}
.hero--svc--compact .hero--svc__sub{margin-inline:auto;max-width:60ch}

/* ---------- Long-form body ---------- */
.editorial__body{
  font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--tr-body);color:var(--ink-2);
}
.editorial__body > * + *{margin-top:var(--s-5)}

.editorial__body h2{
  font-family:var(--font-head);font-size:var(--fs-h2);line-height:var(--lh-h2);
  letter-spacing:var(--tr-h2);color:var(--ink);margin-top:var(--s-9);
}
.editorial__body h3{
  font-family:var(--font-head);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:var(--tr-h3);color:var(--ink);margin-top:var(--s-8);
}
.editorial__body h4{
  font-family:var(--font-head);font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:var(--tr-h4);color:var(--ink);margin-top:var(--s-7);
}

/* Buttons are excluded: `.editorial__body a` outranks `.btn--primary` on
   specificity, which would paint a button's label the same green as its own
   background. */
.editorial__body a:not(.btn){color:var(--brand-deep);text-underline-offset:.18em}
.editorial__body a:not(.btn):hover{color:var(--brand-darker)}

.editorial__body ul,.editorial__body ol{padding-left:var(--s-6)}
.editorial__body li + li{margin-top:var(--s-2)}
.editorial__body ul{list-style:disc}
.editorial__body ol{list-style:decimal}

.editorial__body blockquote{
  border-left:4px solid var(--brand-line);padding-left:var(--s-5);
  color:var(--ink-3);font-size:var(--fs-lede);line-height:var(--lh-lede);
}

.editorial__body code,.editorial__body kbd{
  background:var(--surface-2);border-radius:4px;padding:.15em .4em;font-size:.9em;
}
.editorial__body pre{
  background:var(--surface-2);border-radius:var(--r);padding:var(--s-5);
  overflow-x:auto;font-size:var(--fs-xs);line-height:1.6;
}
.editorial__body pre code{background:none;padding:0}

/* Media never pushes the layout around once it loads. */
.editorial__body img,
.editorial__media img{max-width:100%;height:auto;border-radius:var(--r)}
.editorial__media{margin-bottom:var(--s-7)}

.editorial__body table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.editorial__body th,.editorial__body td{
  border-bottom:1px solid var(--line);padding:var(--s-3) var(--s-2);text-align:left;
}

.editorial__meta{color:var(--ink-3);font-size:var(--fs-xs);letter-spacing:var(--tr-ui)}

.editorial__tags{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin-top:var(--s-8)}
.editorial__tags a{
  display:inline-block;background:var(--brand-wash);color:var(--brand-deep);
  border:1px solid var(--brand-line);border-radius:999px;
  padding:var(--s-1) var(--s-3);font-size:var(--fs-xs);text-decoration:none;
}
.editorial__tags a:hover{background:var(--white)}

.editorial__pages{margin-top:var(--s-7);display:flex;gap:var(--s-3);align-items:baseline}

/* ---------- Post listing ---------- */
.elist__grid{
  display:grid;gap:var(--s-6);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.ecard{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
/* Reserve the media box before the image arrives — no shift on load. */
.ecard__media{display:block;aspect-ratio:4/3;background:var(--surface-2)}
.ecard__media img{width:100%;height:100%;object-fit:cover;display:block}
.ecard__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.ecard__t{
  font-family:var(--font-head);font-size:var(--fs-h4);line-height:var(--lh-h4);
  letter-spacing:var(--tr-h4);color:var(--ink);margin:0;
}
.ecard__t a{color:inherit;text-decoration:none}
.ecard__t a:hover{color:var(--brand-deep)}
.ecard__meta{color:var(--ink-3);font-size:var(--fs-xs);margin:0}
.ecard__x{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:var(--lh-body)}
.ecard__more{margin-top:auto;color:var(--brand-deep);font-weight:600;font-size:var(--fs-sm)}

/* ---------- Empty states and 404 ---------- */
.empty{max-width:70ch;margin-inline:auto;text-align:center}
.empty__t{
  font-family:var(--font-head);font-size:var(--fs-h3);line-height:var(--lh-h3);
  letter-spacing:var(--tr-h3);color:var(--ink);
}
.empty > * + *{margin-top:var(--s-5)}
.empty__links{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;
  list-style:none;padding:0;
}
.empty__links a{
  display:inline-block;border:1px solid var(--brand-line);border-radius:999px;
  padding:var(--s-2) var(--s-4);color:var(--brand-deep);
  text-decoration:none;font-size:var(--fs-sm);font-weight:600;
}
.empty__links a:hover{background:var(--brand-wash)}
.empty__call{display:flex;justify-content:center}

/* ---------- Search form ---------- */
.searchform{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap}
.searchform input[type=search]{
  flex:1 1 16rem;max-width:24rem;border:1px solid var(--field-line);
  border-radius:var(--r);padding:var(--s-3) var(--s-4);font:inherit;color:var(--ink);
}
.searchform input[type=search]:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}

/* ---------- Pagination ---------- */
.pagination{margin-top:var(--s-9);display:flex;justify-content:center}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.75rem;min-height:2.75rem;padding:0 var(--s-3);
  border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);text-decoration:none;
}
.pagination .page-numbers:hover{border-color:var(--brand-line);background:var(--brand-wash)}
.pagination .page-numbers.current{
  background:var(--brand-deep);border-color:var(--brand-deep);color:var(--white);font-weight:600;
}

@media (prefers-reduced-motion:reduce){
  .editorial__body *,.ecard *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   Thank-you page.
   ========================================================================== */
.ty{padding-block:var(--s-10) var(--sec-y)}
.ty__inner{max-width:720px;margin-inline:auto;text-align:center}
.ty__inner > * + *{margin-top:var(--s-5)}

.ty__tick{
  width:72px;height:72px;border-radius:50%;margin-inline:auto;
  display:grid;place-content:center;
  background:var(--brand-wash);color:var(--brand-deep);border:2px solid var(--brand-line);
}
.ty__tick svg{width:36px;height:36px}

.ty__t{
  font-family:var(--font-head);font-size:var(--fs-h2);line-height:var(--lh-h2);
  letter-spacing:var(--tr-h2);color:var(--ink);margin:0;
}
.ty__lede{
  font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--ink-3);
  max-width:56ch;margin-inline:auto;
}

.ty__urgent{
  text-align:left;padding:var(--s-6);border-radius:var(--r-lg);
  background:#fdf6ea;border:1px solid #f0c88a;
  display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;
}
.ty__urgent-h{margin:0;font-family:var(--font-head);font-weight:700;color:var(--ink)}
.ty__urgent-x{margin:0;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.6}

.ty__actions{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:center}

.ty__reviews{
  padding:var(--s-6);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.ty__stars{display:inline-flex;gap:2px}
.ty__rating{margin:var(--s-2) 0 0;font-size:var(--fs-h4);font-family:var(--font-head)}
.ty__rating-meta{margin:var(--s-2) 0 0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}

.ty__badges{
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:center;
  list-style:none;padding:0;
}
.ty__badges li{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);
  border:1px solid var(--brand-line);background:var(--brand-wash);
  font-size:var(--fs-xs);font-weight:600;color:var(--brand-deep);
}
.ty__badges svg{width:16px;height:16px}

.ty__extra{text-align:left;margin-top:var(--s-9)}