/* ==========================================================================
   ElevNext - content.css  (blog and case-study pages)
   --------------------------------------------------------------------------
   Loaded only by the pages the ElevNext Publisher plugin writes (/blog/ and
   /case-studies/), after style.css and layouts.css. Uses the same tokens, so
   a colour or type change in style.css reaches these pages too. Selectors
   are scoped (.post-grid, .article-*, .prose) so load order never matters.
   Hover effects sit inside @media (hover:hover), with a focus twin outside.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIST PAGES  (/blog/, /case-studies/)
   -------------------------------------------------------------------------- */
.post-grid{display:grid;gap:clamp(16px,1.8vw,28px);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .post-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

.post-grid .post{
  position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;
  border-radius:var(--r-xl);box-shadow:var(--sh-xs);
}
.post-grid .post h3{font-size:var(--fs-h4)}
.post-grid .post h3 a{color:inherit}
/* the whole card is the link */
.post-grid .post h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.post-grid .post:has(h3 a:focus-visible){outline:2px solid var(--blue-500);outline-offset:3px}
.post-grid .post h3 a:focus-visible{outline:none}
.post-img{
  display:block;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);
  margin:calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-5);
}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
@media (hover:hover){
.post-grid .post:hover{border-color:var(--blue-300);box-shadow:var(--sh-md);transform:translateY(-3px)}
.post-grid .post:hover .post-img img{transform:scale(1.04)}
.post-grid .post:hover h3 a{color:var(--navy-600)}
}

.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-4);margin-top:var(--s-9)}
.pager ol{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pager li{margin:0}
.pager li a,.pager li span{
  display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-pill);
  font-weight:650;font-size:var(--fs-sm);border:1px solid var(--line);background:#fff;color:var(--ink);
}
.pager li span[aria-current]{background:var(--navy-600);border-color:var(--navy-600);color:#fff}
.pager-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r-pill);
  border:1px solid var(--line);font-weight:650;font-size:var(--fs-sm);color:var(--navy-600);background:#fff;
}
.pager li a:focus-visible,.pager-link:focus-visible{border-color:var(--navy-600);color:var(--navy-800)}
@media (hover:hover){
.pager li a:hover,.pager-link:hover{border-color:var(--navy-600);color:var(--navy-800);background:var(--surface)}
}

/* --------------------------------------------------------------------------
   2. ARTICLE HERO
   -------------------------------------------------------------------------- */
.article-hero h1{max-width:26ch}
.article-hero .lead{max-width:64ch;margin-top:0}
.article-meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin:var(--s-6) 0 0;
  font-size:var(--fs-sm);color:#A9C4E4;
}
/* dots between the facts only where they all fit on one line */
@media (min-width:640px){
  .article-meta{gap:6px 0}
  .article-meta span + span::before{content:"\00B7";margin:0 14px;opacity:.7}
}
/* a long title in the breadcrumb must never push the page sideways */
.article-hero .crumbs ol{flex-wrap:nowrap;min-width:0}
.article-hero .crumbs li{flex:none}
.article-hero .crumbs li:last-child{flex:0 1 auto;min-width:0}
.article-hero .crumbs li:last-child span{
  display:block;max-width:min(54vw,44ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --------------------------------------------------------------------------
   3. ARTICLE BODY
   -------------------------------------------------------------------------- */
.article-grid{display:grid;gap:var(--s-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .article-grid{grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(40px,5vw,104px);align-items:start}
  .article-aside{position:sticky;top:calc(var(--stick,86px) + 24px)}
}
.article-aside{display:grid;gap:var(--s-7)}
.aside-title{
  margin:0 0 var(--s-3);font-family:var(--font-display);font-size:var(--fs-xs);font-weight:650;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.article-figure{margin:0 0 var(--s-7)}
.article-figure img{width:100%;height:auto;border-radius:var(--r-lg);background:var(--surface-2)}

.prose{max-width:74ch;min-width:0;font-size:var(--fs-body)}
.prose > * + *{margin-top:1.15em}
.prose p,.prose li{line-height:1.78}
.prose h2{font-size:var(--fs-h3);margin-top:2.1em;margin-bottom:.5em}
.prose h3{font-size:var(--fs-h4);margin-top:1.7em;margin-bottom:.4em}
.prose h2,.prose h3{scroll-margin-top:calc(var(--header-h) + 24px)}
.prose h2 + *,.prose h3 + *{margin-top:0}
.prose a{color:var(--navy-600);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:focus-visible{color:var(--orange-700)}
@media (hover:hover){ .prose a:hover{color:var(--orange-700)} }
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.45em}
.prose blockquote{
  margin-left:0;margin-right:0;padding:var(--s-3) var(--s-6);border-left:3px solid var(--orange-500);
  background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-soft);
}
.prose blockquote p{margin:0}
.prose img,.prose video{max-width:100%;height:auto;border-radius:var(--r-md)}
.prose figure{margin-left:0;margin-right:0}
.prose figcaption{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--muted)}
.prose hr{margin:var(--s-8) 0}
.prose table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--fs-sm)}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--surface);color:var(--ink);font-weight:650}
.prose code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-2);padding:.12em .4em;border-radius:6px}
.prose pre{overflow-x:auto;padding:var(--s-5);background:var(--navy-950);color:#DCE8F8;border-radius:var(--r-md)}
.prose pre code{background:none;padding:0;color:inherit}
.prose details{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4) var(--s-5)}
.prose summary{cursor:pointer;font-weight:650;color:var(--ink)}

/* --------------------------------------------------------------------------
   4. ASIDE: contents, at-a-glance, call to action
   -------------------------------------------------------------------------- */
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{
  display:block;padding:8px 0 8px 16px;border-left:2px solid var(--line);
  font-size:var(--fs-sm);font-weight:600;line-height:1.45;color:var(--body);
}
.toc a:focus-visible{border-color:var(--orange-500);color:var(--navy-600)}
@media (hover:hover){ .toc a:hover{border-color:var(--orange-500);color:var(--navy-600)} }
.facts{padding:var(--s-5) var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.facts dl{margin:0;display:grid;gap:var(--s-4)}
.facts dt{font-size:var(--fs-xs);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:2px 0 0;font-size:var(--fs-sm);color:var(--ink);font-weight:550}
.aside-cta{padding:var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg)}
.aside-cta .aside-title{margin-bottom:var(--s-4);color:var(--ink-soft)}

@media print{
  .article-aside,.pager{display:none}
}