/*
 * Zed Insights — page-type layout CSS.
 *
 * theme.css (loaded before this file) supplies global tokens (--bg, --ink, --brand, etc.)
 * plus the nav/footer partial styles (.zd-*, .zf-*). This file consolidates the CSS that,
 * in the original static mockups, lived inline in each page's own <style> block:
 *   - insights.dc.html                    -> Base reset, animations, cards, index grid
 *   - insights-category-template.dc.html  -> Category hero chips, category grid, pager buttons
 *   - insights-article-template.dc.html   -> Two-column article layout, TOC, prose, related grid
 * Rules that were duplicated verbatim across all three mockups are declared once here.
 */

/* ---- Base reset (shared across all three page types) ---- */
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);}
::selection{background:var(--brand);color:var(--brand-ink);}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* ---- Shared entrance animation + card/chip hover states ---- */
@keyframes zed-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes zed-float{0%,100%{transform:translate(0,0);}50%{transform:translate(0,-20px);}}
.zed-rise{animation:zed-rise 1s cubic-bezier(.22,.61,.36,1) both;}
.zed-card{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.zed-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--hairline-strong);}
.zed-chip{transition:background .15s ease, color .15s ease, border-color .15s ease;}
.zed-chip:hover{background:var(--brand)!important; border-color:var(--brand)!important; color:var(--brand-ink)!important;}
.cm-chip{transition:background .15s ease, color .15s ease, border-color .15s ease;}
.cm-chip:hover{background:var(--brand)!important; color:var(--brand-ink)!important; border-color:var(--brand)!important;}

/* ---- Featured block mobile responsiveness (shared: .zed-feat on the index, .cm-feat on
   category archives) — badge shrinks/repositions, image goes full-width 16:9 instead of the
   fixed 260px square, and the byline/meta row wraps instead of overflowing. ---- */
@media(max-width:720px){
  .feat-pill{white-space:nowrap!important; font-size:9.5px!important; letter-spacing:.5px!important; padding:5px 10px!important; top:12px!important; left:12px!important;}
}
@media(max-width:819px){
  .zed-feat > div:first-child, .cm-feat > div:first-child{width:100%!important; max-width:100%!important; aspect-ratio:16/9!important;}
  .feat-pill{max-width:calc(100% - 24px)!important;}
  .zed-feat > div:last-child, .cm-feat > div:last-child{padding-left:clamp(20px,5vw,28px)!important;}
}
@media(max-width:720px){
  .feat-meta{flex-wrap:wrap!important; gap:6px 10px!important; align-items:baseline!important;}
  .feat-meta > span{white-space:nowrap!important;}
}

@media(prefers-reduced-motion:reduce){
  .zed-rise{animation:none!important;}
  html{scroll-behavior:auto;}
  *{animation:none!important;}
}

/* ---- Newsletter form (shared across all three page types) ---- */
@media(max-width:520px){
  .nl-form > div{min-width:0!important; max-width:none!important; flex:1 1 100%!important;}
  .nl-form > button{width:100%;}
}

/* ==== insights.dc.html — main archive ==== */
.zed-grid{display:grid;gap:18px;grid-template-columns:1fr;}
.zed-feat{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:680px){
  .zed-grid-3{grid-template-columns:1fr 1fr;}
}
@media(min-width:820px){
  .zed-feat{grid-template-columns:auto 1fr;}
}
@media(min-width:1000px){
  .zed-grid-3{grid-template-columns:repeat(4,1fr);} /* 4 columns x 2 rows @ 8 posts/page */
}

/* ==== insights-category-template.dc.html — category archive ==== */
.cm-feat{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:820px){.cm-feat{grid-template-columns:auto 1fr;}}
.cm-grid{display:grid; grid-template-columns:1fr; gap:22px;}
@media(min-width:640px){.cm-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:980px){.cm-grid{grid-template-columns:repeat(4,1fr);}} /* matches index: 4x2 */
.cm-page-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;}
.cm-page-btn:hover{border-color:var(--brand);}
.cm-page-btn.is-active{background:var(--brand); border-color:var(--brand); color:var(--brand-ink);}
.cm-page-btn:disabled,.cm-page-btn.disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}

/* Real server-side pagination (paginate_links()) on both the index and category archives,
   styled to match the .cm-page-btn circular-button look from the mockups rather than
   fighting WP core's default page-numbers/current/dots/prev/next class names. */
.zed-pagination{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:clamp(36px,5vw,52px);}
.zed-pagination .page-numbers{min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink); font-family:var(--font-sans); font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease;}
.zed-pagination a.page-numbers:hover{border-color:var(--brand);}
.zed-pagination .page-numbers.current{background:var(--brand); border-color:var(--brand); color:var(--brand-ink);}
.zed-pagination .page-numbers.dots{border-color:transparent; background:none;}
.zed-pagination .page-numbers.prev,.zed-pagination .page-numbers.next{width:40px; padding:0;}

/* ==== insights-article-template.dc.html — single article ==== */
/* 28 : 72 two-column layout */
.ba-2col{display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,44px);}
@media(min-width:860px){.ba-2col{grid-template-columns:200px 1fr; align-items:start;}}
.ba-toc{position:sticky; top:110px; display:flex; flex-direction:column; gap:2px; width:100%;}
.ba-toc a{text-decoration:none; font-size:14px; color:var(--body); padding:8px 12px; border-left:2px solid var(--hairline); transition:color .15s ease, border-color .15s ease, background .15s ease; white-space:normal; overflow-wrap:break-word; word-break:break-word;}
.ba-toc a:hover{color:var(--ink); border-color:var(--brand); background:var(--surface-2);}
.ba-prose{font-size:clamp(16.5px,1.3vw,18px); line-height:1.75; color:var(--body);}
.ba-prose > *:first-child{margin-top:0;}
.ba-prose p{margin:0 0 20px;}
.ba-prose h2{font-family:var(--font-sans); font-weight:600; font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-0.025em; color:var(--ink); margin:40px 0 14px; scroll-margin-top:110px;}
.ba-prose h3{font-family:var(--font-sans); font-weight:600; font-size:clamp(18px,2vw,21px); line-height:1.25; letter-spacing:-0.02em; color:var(--ink); margin:30px 0 10px;}
.ba-prose ul,.ba-prose ol{margin:0 0 20px; padding-left:24px; display:flex; flex-direction:column; gap:8px;}
.ba-prose strong{color:var(--ink); font-weight:600;}
.ba-prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.ba-prose blockquote{margin:30px 0; padding:6px 0 6px 26px; border-left:3px solid var(--brand); font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:clamp(19px,2.2vw,24px); line-height:1.45; color:var(--ink);}
.ba-prose blockquote p{margin:0;}
.ba-prose figure{margin:30px 0;}
.ba-prose img{width:100%; border-radius:14px; display:block;}
.ba-prose figcaption{font-size:13px; color:var(--mute); text-align:center; margin-top:9px;}
.ba-related{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:560px){.ba-related{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.ba-related{grid-template-columns:repeat(5,1fr);}}