/* ========================================================================
   Foxfora Blog — blog.css
   Shared styling for /blog/ (index, posts, cluster hubs) + homepage #insights.
   Depends on styles.css tokens: --ink --ink-2 --ink-3 --ember --ember-soft
   --ember-deep --bone --bone-dim --umber --line --display --ui --body --maxw.
   All blog classes are prefixed .fxb- to avoid collisions with the main site.
   ======================================================================== */

/* ---- shell ---- */
.fxb-page{padding-top:76px}
.fxb-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.fxb-article-wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* CRITICAL OVERRIDE: styles.css sets a global `header{position:fixed;top:0;left:0;right:0}`
   for the site nav. Blog hero/title blocks are <header> elements too, so without this
   they inherit position:fixed and pin to the top-left at full width, overlapping the nav
   and body. Reset them to normal document flow (desktop + mobile). */
.fxb-post-head,.fxb-index-hero,.fxb-hub-hero{position:static !important;top:auto;left:auto;right:auto;z-index:auto;border-bottom:0}

/* ---- breadcrumb ---- */
.fxb-crumb{font-family:var(--ui);font-size:.8rem;color:var(--bone-dim);letter-spacing:.01em;padding:26px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fxb-crumb a{color:var(--bone-dim);transition:color .2s}
.fxb-crumb a:hover{color:var(--ember-soft)}
.fxb-crumb .sep{opacity:.4}
.fxb-crumb .here{color:var(--bone-dim);opacity:.7}

/* ---- post header ---- */
.fxb-post-head{padding:14px 0 8px}
.fxb-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:16px}
.fxb-tag::before{content:"";width:22px;height:1px;background:var(--ember)}
.fxb-h1{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em;font-size:clamp(2rem,4.8vw,3.1rem);color:var(--bone);margin:0}
.fxb-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:20px;font-family:var(--ui);font-size:.86rem;color:var(--bone-dim)}
.fxb-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ember);opacity:.8}
.fxb-meta .mono{display:inline-flex;align-items:center;gap:7px}
.fxb-meta .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(150deg,var(--ember),var(--ember-deep));color:#fff;font-family:var(--display);font-weight:700;font-size:.72rem;display:inline-flex;align-items:center;justify-content:center}

/* ---- hero ---- */
.fxb-hero{margin:30px 0 6px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.fxb-hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}

/* ---- article typography ---- */
.fxb-article{font-family:var(--body);color:var(--bone-dim);font-size:1.06rem;line-height:1.78;padding:8px 0 0}
.fxb-article > p:first-of-type{color:var(--bone);font-size:1.16rem;line-height:1.7}
.fxb-article p{margin:0 0 22px}
.fxb-article h2{font-family:var(--display);font-weight:700;color:var(--bone);font-size:clamp(1.5rem,3vw,1.95rem);line-height:1.2;letter-spacing:-.01em;margin:44px 0 16px;scroll-margin-top:92px}
.fxb-article h3{font-family:var(--ui);font-weight:700;color:var(--bone);font-size:1.2rem;margin:30px 0 12px}
.fxb-article a{color:var(--ember-soft);text-decoration:none;border-bottom:1px solid rgba(242,115,74,.34);transition:border-color .2s,color .2s}
.fxb-article a:hover{color:var(--ember);border-bottom-color:var(--ember)}
.fxb-article strong{color:var(--bone);font-weight:600}
.fxb-article em{color:var(--bone);font-style:italic}
.fxb-article ul,.fxb-article ol{margin:0 0 24px;padding-left:24px}
.fxb-article li{margin:0 0 10px;padding-left:6px}
.fxb-article ul li::marker{color:var(--ember)}
.fxb-article ol li::marker{color:var(--ember-soft);font-family:var(--ui);font-weight:700}
.fxb-article blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--ember);color:var(--bone);font-family:var(--ui);font-size:1.12rem;line-height:1.6;font-style:italic}
.fxb-article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--ink-3);color:var(--ember-soft);padding:2px 6px;border-radius:6px}
.fxb-article hr{border:0;border-top:1px solid var(--line);margin:36px 0}

/* real-specifics / data table */
.fxb-article .fxb-table{width:100%;overflow-x:auto;margin:0 0 26px}
.fxb-article table{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:.92rem}
.fxb-article th,.fxb-article td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--bone-dim)}
.fxb-article thead th{color:var(--bone);font-weight:600;background:rgba(244,240,231,.04);border-bottom-color:rgba(234,78,27,.3)}
.fxb-article tbody tr:hover{background:rgba(244,240,231,.02)}

/* callout / key-fact block */
.fxb-note{background:linear-gradient(160deg,var(--ink-2),var(--ink));border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:12px;padding:18px 20px;margin:0 0 26px;font-family:var(--ui);color:var(--bone-dim);font-size:.98rem;line-height:1.6}
.fxb-note b{color:var(--bone)}

/* ---- CTA band (inline + end) ---- */
.fxb-cta{position:relative;overflow:hidden;background:linear-gradient(150deg,#241812,#160f0a);border:1px solid rgba(234,78,27,.28);border-radius:18px;padding:28px 26px;margin:34px 0}
.fxb-cta::after{content:"";position:absolute;right:-40px;bottom:-50px;width:180px;height:180px;background:radial-gradient(circle,rgba(234,78,27,.20),transparent 70%);pointer-events:none}
.fxb-cta .k{position:relative;z-index:1;font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:8px}
.fxb-cta h3{position:relative;z-index:1;font-family:var(--display);font-weight:700;color:var(--bone);font-size:1.32rem;line-height:1.2;margin:0 0 8px}
.fxb-cta p{position:relative;z-index:1;font-family:var(--ui);color:var(--bone-dim);font-size:.96rem;line-height:1.55;margin:0 0 18px;max-width:52ch}
.fxb-cta .btn{position:relative;z-index:1}
.fxb-cta.end{background:linear-gradient(150deg,#2a1a10,#17100b);border-color:rgba(234,78,27,.4)}

/* ---- lead magnet box ---- */
.fxb-magnet{display:flex;gap:18px;align-items:flex-start;background:rgba(244,240,231,.035);border:1px dashed rgba(234,78,27,.45);border-radius:16px;padding:22px 24px;margin:32px 0}
.fxb-magnet .ic{flex:none;width:44px;height:44px;border-radius:11px;background:rgba(234,78,27,.14);display:flex;align-items:center;justify-content:center}
.fxb-magnet .ic svg{width:22px;height:22px;stroke:var(--ember);fill:none;stroke-width:2}
.fxb-magnet .mb{flex:1;min-width:0}
.fxb-magnet h4{font-family:var(--ui);font-weight:700;color:var(--bone);font-size:1.04rem;margin:0 0 5px}
.fxb-magnet p{font-family:var(--ui);color:var(--bone-dim);font-size:.9rem;line-height:1.5;margin:0 0 12px}
.fxb-magnet a{font-family:var(--ui);font-weight:700;font-size:.86rem;color:var(--ember-soft)}
.fxb-magnet a:hover{color:var(--ember)}

/* ---- FAQ ---- */
.fxb-faq{margin:36px 0 8px}
.fxb-faq h2{font-family:var(--display);font-weight:700;color:var(--bone);font-size:clamp(1.5rem,3vw,1.95rem);margin:0 0 16px}
.fxb-faq details{background:rgba(244,240,231,.035);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0 20px;transition:border-color .2s}
.fxb-faq details[open]{border-color:rgba(234,78,27,.4)}
.fxb-faq summary{font-family:var(--ui);font-weight:600;font-size:1.02rem;padding:17px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--bone)}
.fxb-faq summary::-webkit-details-marker{display:none}
.fxb-faq summary::after{content:"+";color:var(--ember);font-size:1.5rem;flex:none;line-height:1}
.fxb-faq details[open] summary::after{content:"\2212"}
.fxb-faq details p{font-family:var(--ui);color:var(--bone-dim);padding:0 0 18px;font-size:.96rem;line-height:1.65;margin:0}

/* ---- author box ---- */
.fxb-author{display:flex;gap:16px;align-items:center;margin:40px 0 8px;padding:22px;background:linear-gradient(160deg,var(--ink-2),var(--ink));border:1px solid var(--line);border-radius:16px}
.fxb-author .av{flex:none;width:56px;height:56px;border-radius:50%;background:linear-gradient(150deg,var(--ember),var(--ember-deep));color:#fff;font-family:var(--display);font-weight:700;font-size:1.3rem;display:flex;align-items:center;justify-content:center}
.fxb-author .ab h4{font-family:var(--ui);font-weight:700;color:var(--bone);font-size:1rem;margin:0 0 3px}
.fxb-author .ab p{font-family:var(--ui);color:var(--bone-dim);font-size:.88rem;line-height:1.5;margin:0}
.fxb-author .ab a{color:var(--ember-soft)}

/* ---- related / siblings ---- */
.fxb-related{margin:44px 0 10px}
.fxb-related h2{font-family:var(--display);font-weight:700;color:var(--bone);font-size:1.5rem;margin:0 0 18px}
.fxb-rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fxb-rel-card{display:block;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:transform .2s,border-color .2s}
.fxb-rel-card:hover{transform:translateY(-3px);border-color:rgba(234,78,27,.4)}
.fxb-rel-card .rc-tag{font-family:var(--ui);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-soft)}
.fxb-rel-card h3{font-family:var(--ui);font-weight:600;color:var(--bone);font-size:1.02rem;line-height:1.35;margin:8px 0 0}
@media(max-width:640px){.fxb-rel-grid{grid-template-columns:1fr}}

/* ======================= INDEX ======================= */
.fxb-index-hero{padding:44px 0 10px}
.fxb-index-hero .fxb-tag{margin-bottom:14px}
.fxb-index-hero h1{font-family:var(--display);font-weight:700;color:var(--bone);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.01em;margin:0;max-width:16ch}
.fxb-index-hero p{font-family:var(--ui);color:var(--bone-dim);font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.6;margin:18px 0 0;max-width:56ch}

/* cluster filter chips */
.fxb-chips{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 4px}
.fxb-chip{font-family:var(--ui);font-weight:600;font-size:.84rem;padding:9px 16px;border-radius:999px;border:1px solid var(--line);color:var(--bone-dim);background:transparent;cursor:pointer;transition:.2s;text-decoration:none;display:inline-block}
.fxb-chip:hover{border-color:var(--ember);color:var(--bone)}
.fxb-chip.on{background:var(--ember);border-color:var(--ember);color:#fff}

/* card grid */
.fxb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 0}
.fxb-card{display:flex;flex-direction:column;background:linear-gradient(165deg,var(--ink-2),var(--ink));border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .22s,border-color .22s}
.fxb-card:hover{transform:translateY(-4px);border-color:rgba(234,78,27,.42)}
.fxb-card .cimg{aspect-ratio:16/9;background:var(--ink-3);overflow:hidden}
.fxb-card .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fxb-card:hover .cimg img{transform:scale(1.05)}
.fxb-card .cbody{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.fxb-card .ctag{font-family:var(--ui);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:10px}
.fxb-card h3{font-family:var(--display);font-weight:600;color:var(--bone);font-size:1.14rem;line-height:1.22;margin:0 0 9px}
.fxb-card p{font-family:var(--ui);color:var(--bone-dim);font-size:.9rem;line-height:1.5;margin:0 0 16px;flex:1}
.fxb-card .cmeta{font-family:var(--ui);font-size:.76rem;color:var(--bone-dim);opacity:.8;display:flex;gap:8px;align-items:center}
.fxb-card .cmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--ember)}
@media(max-width:900px){.fxb-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fxb-grid{grid-template-columns:1fr}}

/* pagination */
.fxb-pager{display:flex;justify-content:center;gap:10px;margin:46px 0 0;flex-wrap:wrap}
.fxb-pager a,.fxb-pager span{font-family:var(--ui);font-weight:600;font-size:.9rem;padding:10px 15px;border-radius:10px;border:1px solid var(--line);color:var(--bone-dim)}
.fxb-pager a:hover{border-color:var(--ember);color:var(--bone)}
.fxb-pager .cur{background:var(--ember);border-color:var(--ember);color:#fff}

/* ======================= CLUSTER HUB ======================= */
.fxb-hub-hero{padding:44px 0 6px}
.fxb-hub-hero h1{font-family:var(--display);font-weight:700;color:var(--bone);font-size:clamp(2rem,4.6vw,3rem);line-height:1.08;margin:0;max-width:18ch}
.fxb-hub-intro{font-family:var(--ui);color:var(--bone-dim);font-size:1.06rem;line-height:1.7;margin:18px 0 0;max-width:62ch}
.fxb-hub-intro p{margin:0 0 16px}
.fxb-hub-list{margin:32px 0 0;display:grid;gap:2px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--line)}
.fxb-hub-item{display:flex;gap:16px;align-items:baseline;background:var(--ink);padding:20px 22px;transition:background .2s}
.fxb-hub-item:hover{background:var(--ink-2)}
.fxb-hub-item .hn{font-family:var(--display);font-weight:700;color:var(--ember);opacity:.5;font-size:1.05rem;flex:none;width:34px}
.fxb-hub-item .hb{flex:1;min-width:0}
.fxb-hub-item h3{font-family:var(--ui);font-weight:600;color:var(--bone);font-size:1.06rem;line-height:1.3;margin:0 0 4px}
.fxb-hub-item p{font-family:var(--ui);color:var(--bone-dim);font-size:.88rem;line-height:1.5;margin:0}

/* ======================= sticky mobile WhatsApp pill (blog only) ======================= */
.fxb-wa{display:none}
@media(max-width:820px){
  .fxb-wa{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:120;align-items:center;justify-content:center;gap:10px;
    background:#25D366;color:#fff;font-family:var(--ui);font-weight:700;font-size:.98rem;padding:15px;border-radius:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.4);cursor:pointer;text-decoration:none}
  .fxb-wa svg{width:22px;height:22px;fill:#fff;flex:none}
  .fxb-article-wrap{padding-bottom:84px}
}

/* ======================= HOMEPAGE #insights ======================= */
.fxb-insights .ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.fxb-insights .ins-card{display:flex;flex-direction:column;background:linear-gradient(165deg,var(--ink-2),var(--ink));border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .22s,border-color .22s}
.fxb-insights .ins-card:hover{transform:translateY(-4px);border-color:rgba(234,78,27,.42)}
.fxb-insights .ins-card .ci{aspect-ratio:16/9;background:var(--ink-3);overflow:hidden}
.fxb-insights .ins-card .ci img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fxb-insights .ins-card:hover .ci img{transform:scale(1.05)}
.fxb-insights .ins-card .cb{padding:20px;display:flex;flex-direction:column;flex:1}
.fxb-insights .ins-card .ctag{font-family:var(--ui);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-soft);margin-bottom:9px}
.fxb-insights .ins-card h3{font-family:var(--display);font-weight:600;color:var(--bone);font-size:1.12rem;line-height:1.22;margin:0 0 8px}
.fxb-insights .ins-card p{font-family:var(--ui);color:var(--bone-dim);font-size:.88rem;line-height:1.5;margin:0}
.fxb-insights .ins-more{margin-top:34px;text-align:center}
@media(max-width:900px){.fxb-insights .ins-grid{grid-template-columns:1fr}.fxb-insights .ins-card{max-width:440px;margin:0 auto;width:100%}}

/* founder avatar photo */
.fxb-meta .av,.fxb-author .av{overflow:hidden}
.fxb-meta .av img,.fxb-author .av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}