/* ===================================================================
   CuraFlow — blog / article template layer
   Design layer on top of cf-pages.css tokens (--cf-*) and the shared
   components in cf-site.css (.btn / .cta-rakna buttons, .rs-bullets,
   the .cta closing band, the .ft footer). Reuses the REAL components —
   no bespoke buttons, no bespoke bullets, no shadows.
   Loaded AFTER cf-site.css (so overrides win) and only on blog pages.
   Lift into the section library once approved.
   =================================================================== */

:root{ --cf-ease:cubic-bezier(.2,.85,.25,1); }

/* overflow-x:clip (not hidden) clips horizontally WITHOUT turning the body
   into a scroll container — which is what lets position:sticky (the CTA rail)
   travel with the scroll. Overrides cf-site.css on blog pages. */
html,body{ overflow-x:clip; }

/* --- reading progress bar (fixed, above the header) --- */
.cf-readbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:70;
        background:linear-gradient(90deg,var(--cf-mint-2),var(--cf-mint));
        transition:width .12s linear;pointer-events:none;}

/* --- shell (widened) --- */
.cf-post{max-width:1160px;margin:0 auto;padding:clamp(104px,13vh,132px) 24px 0;}

/* --- header: centred tags + title + reading-time meta --- */
.cf-post__head{max-width:820px;margin:0 auto;text-align:center;}
.cf-post__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 20px;}
.cf-tag{font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--cf-emerald);
        background:var(--cf-mint-bg);border:1px solid var(--cf-line);padding:5px 13px;border-radius:999px;}
.cf-post__title{margin:0;font-family:var(--sans,"Instrument Sans");font-weight:400;
        font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.025em;
        color:var(--cf-emerald);text-wrap:balance;}
.cf-post__meta{margin:22px 0 0;display:flex;justify-content:center;align-items:center;gap:13px;
        flex-wrap:wrap;font-size:13.5px;color:var(--cf-muted);}
.cf-post__meta .cf-read{display:inline-flex;align-items:center;gap:7px;color:var(--cf-emerald);font-weight:500;}
.cf-post__meta .cf-read i{width:15px;height:15px;color:var(--cf-mint-2);}
.cf-post__meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;}

/* --- hero image (swap the src per article; branded placeholder for now) --- */
.cf-post__hero{max-width:1160px;margin:clamp(28px,4vw,40px) auto 0;border-radius:22px;overflow:hidden;
        aspect-ratio:16/6.5;max-height:460px;background:var(--cf-mint-bg);border:1px solid var(--cf-line);}
.cf-post__hero img{width:100%;height:100%;object-fit:cover;display:block;}

/* --- two-column reading layout: wide body + compact sticky rail --- */
.cf-post__layout{max-width:1160px;margin:clamp(32px,4vw,48px) auto 0;
        display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(40px,4.6vw,64px);align-items:start;}
.cf-post__body{min-width:0;}
.cf-post__lead{margin:0 0 26px;font-family:var(--sans,"Instrument Sans");font-weight:500;
        font-size:clamp(19px,2.05vw,22px);line-height:1.5;color:var(--cf-emerald);text-wrap:pretty;}

/* --- sticky calc-CTA rail: compact, LIGHT, on-brand card (no shadow) --- */
.cf-post__rail{position:sticky;top:100px;}
.cf-rail{background:#fff;border:1px solid var(--cf-line);border-radius:16px;padding:22px 20px 20px;}
.cf-rail__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
        color:var(--cf-emerald);background:var(--cf-mint-bg);
        border:1px solid var(--cf-line);padding:5px 11px;border-radius:999px;margin:0 0 14px;}
.cf-rail__eyebrow i{width:13px;height:13px;color:var(--cf-mint-2);}
.cf-rail__title{margin:0;font-family:var(--sans,"Instrument Sans");font-weight:500;font-size:18px;
        line-height:1.24;letter-spacing:-.015em;color:var(--cf-emerald);text-wrap:balance;}
.cf-rail__text{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:var(--cf-emerald-2);}
.cf-rail .btn{width:100%;height:50px;padding:0 16px;font-size:16px;margin-top:16px;}
.cf-rail__link{display:block;text-align:center;margin-top:11px;font-size:13px;color:var(--cf-muted);text-decoration:none;}
.cf-rail__link:hover{color:var(--cf-emerald);text-decoration:underline;}

/* --- inline mid-article CTA (brand dark band + image + real buttons) --- */
.cf-cta-inline{margin:46px 0;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.2);
        background:var(--cf-deep,#0E3229);color:#EAF7F0;display:grid;grid-template-columns:1.1fr .9fr;}
.cf-cta-inline__body{padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;justify-content:center;}
.cf-cta-inline__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
        color:var(--cf-mint);margin:0 0 12px;}
.cf-cta-inline__eyebrow i{width:15px;height:15px;}
.cf-cta-inline h3{margin:0;font-family:var(--sans,"Instrument Sans");font-weight:500;
        font-size:clamp(22px,2.5vw,27px);line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
.cf-cta-inline p{margin:12px 0 0;font-size:15px;line-height:1.55;color:rgba(234,247,240,.85);}
/* facts use the standardized .rs-bullets component (mint badge + Lucide icon);
   scope beats .cf-prose ul/li since the CTA lives inside .cf-prose */
.cf-cta-inline .rs-bullets{margin:18px 0 0;padding:0;}
.cf-cta-inline .rs-bullets li{margin:0;color:rgba(234,247,240,.92);}
.cf-cta-inline__actions{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:12px;}
.cf-cta-inline .btn{height:50px;padding:0 22px;font-size:16px;}
.cf-cta-inline__media{position:relative;min-height:220px;overflow:hidden;background:#0a3020;}
.cf-cta-inline__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;}
.cf-cta-inline__media::after{content:"";position:absolute;inset:0;
        background:linear-gradient(90deg,var(--cf-deep,#0E3229),transparent 46%);}

/* the mid CTA sits inside .cf-prose, so its links inherit the prose link color +
   underline — neutralise that so the real .btn component styling shows (incl. hover) */
.cf-prose a.btn{text-decoration:none;}
.cf-prose a.btn--dark{color:#00FFA2;}
.cf-prose a.btn--mint{color:#005134;}
.cf-prose a.btn--dark:hover{color:#005134;}
.cf-prose a.btn--mint:hover{color:#00FFA2;}

/* --- pull quote (overrides the default .cf-prose blockquote box) --- */
.cf-prose .cf-pull{margin:38px 0;padding:4px 0 4px 28px;background:none;border:0;
        border-left:4px solid var(--cf-mint-2);border-radius:0;}
.cf-prose .cf-pull p{margin:0;font-family:var(--sans,"Instrument Sans");font-weight:500;
        font-size:clamp(21px,2.7vw,28px);line-height:1.34;letter-spacing:-.015em;color:var(--cf-emerald);}
.cf-prose .cf-pull cite{display:block;margin-top:15px;font-style:normal;font-size:14px;color:var(--cf-muted);}

/* --- prev / next pager --- */
.cf-pager{margin:44px 0 0;display:flex;justify-content:space-between;gap:16px;
        border-top:1px solid var(--cf-line);padding-top:26px;}
.cf-pager__a{display:inline-flex;flex-direction:column;gap:5px;max-width:47%;text-decoration:none;
        transition:transform .16s var(--cf-ease);}
.cf-pager__a:hover{transform:translateY(-2px);}
.cf-pager__a.next{margin-left:auto;text-align:right;align-items:flex-end;}
.cf-pager__dir{font-size:12.5px;letter-spacing:.01em;color:var(--cf-muted);}
.cf-pager__t{font-size:15px;font-weight:500;line-height:1.3;color:var(--cf-emerald);}
.cf-pager__a[hidden]{display:none;}

/* --- related articles grid (no shadow) --- */
.cf-related{max-width:1180px;margin:0 auto;padding:clamp(52px,7vh,72px) 24px;}
.cf-related__head{max-width:640px;margin:0 auto clamp(32px,4vw,44px);text-align:center;}
.cf-related__eyebrow{display:inline-block;font-size:12.5px;font-weight:500;letter-spacing:.02em;
        color:var(--cf-emerald);background:var(--cf-mint-bg);border:1px solid var(--cf-line);
        padding:5px 13px;border-radius:999px;margin:0 0 16px;}
.cf-related__head h2{margin:0;font-family:var(--sans,"Instrument Sans");font-weight:400;
        font-size:clamp(26px,3.3vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--cf-emerald);text-wrap:balance;}
.cf-related__head p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--cf-emerald-2);text-wrap:pretty;}
.cf-rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.cf-rcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cf-line);
        border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
        transition:border-color .18s ease,transform .18s var(--cf-ease);}
.cf-rcard:hover{border-color:var(--cf-emerald);transform:translateY(-3px);}
.cf-rcard__img{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cf-rcard__img i{width:34px;height:34px;color:rgba(255,255,255,.9);}
.cf-rcard__img--1{background:linear-gradient(135deg,#063a27 0%,#12855a 100%);}
.cf-rcard__img--2{background:linear-gradient(135deg,#0E3229 0%,#00A468 100%);}
.cf-rcard__img--3{background:linear-gradient(135deg,#005134 0%,#00E793 100%);}
.cf-rcard__b{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px;}
.cf-rcard__tags{display:flex;gap:6px;flex-wrap:wrap;}
.cf-rcard__tags span{font-size:11.5px;font-weight:500;letter-spacing:.01em;
        color:var(--cf-emerald);background:var(--cf-mint-bg);border:1px solid var(--cf-line);padding:3px 10px;border-radius:999px;}
.cf-rcard h3{margin:13px 0 0;font-family:var(--sans,"Instrument Sans");font-weight:500;
        font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--cf-emerald);text-wrap:balance;}
.cf-rcard p{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--cf-emerald-2);flex:1;text-wrap:pretty;}
.cf-rcard__more{margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--cf-emerald);}
.cf-rcard__more i{width:15px;height:15px;transition:transform .18s var(--cf-ease);}
.cf-rcard:hover .cf-rcard__more i{transform:translate(3px,-3px);}

/* --- scroll-reveal (matches the homepage motion feel) --- */
.cf-reveal{opacity:0;transform:translateY(20px);
        transition:opacity .62s var(--cf-ease),transform .62s var(--cf-ease);will-change:opacity,transform;}
.cf-reveal.is-in{opacity:1;transform:none;}
.cf-rgrid .cf-rcard.cf-reveal{transition-delay:var(--d,0s);}

@media(prefers-reduced-motion:reduce){
  .cf-reveal{opacity:1;transform:none;transition:none;}
  .cf-readbar{transition:none;}
  .cf-rcard,.cf-pager__a{transition:none;}
}

/* --- responsive --- */
@media(max-width:1000px){
  .cf-post__layout{grid-template-columns:1fr;}
  /* no sidebar on narrow screens — the inline mid CTA + closing CTA carry the same call to action */
  .cf-post__rail{display:none;}
}
@media(max-width:760px){
  .cf-cta-inline{grid-template-columns:1fr;}
  .cf-cta-inline__media{order:-1;min-height:180px;aspect-ratio:16/9;}
  .cf-cta-inline__media::after{background:linear-gradient(0deg,var(--cf-deep,#0E3229),transparent 42%);}
}
@media(max-width:920px){ .cf-rgrid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){
  .cf-pager__a{max-width:100%;}
  .cf-rgrid{grid-template-columns:1fr;}
}