/* =========================================================
   FORGROWTH ACADEMY — Blog
   Editorial layer on top of styles.css. Loaded only on /blog routes,
   so the homepage never pays for CSS it does not use.
   ========================================================= */

/* ---------- Blog hero ---------- */
.blog-hero{padding:76px 0 54px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.blog-hero .container{position:relative;z-index:1}
.blog-hero h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(38px,6vw,74px);margin:14px 0 0;max-width:15ch;
}
.blog-hero h1 em{font-style:normal;color:var(--accent)}
.blog-hero-note{color:var(--grey);font-size:clamp(15.5px,1.5vw,18px);max-width:56ch;margin:20px 0 0;line-height:1.65}
.blog-hero-bg{position:absolute;inset:0;opacity:.05;pointer-events:none}

/* ---------- Featured article ---------- */
.feat{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);
  background:var(--white);overflow:hidden;
  transition:box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.feat:hover{box-shadow:var(--shadow-soft);border-color:var(--accent)}
.feat-visual{position:relative;min-height:340px;background:var(--off-white-2);overflow:hidden}
.feat-visual svg{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .8s var(--ease)}
.feat:hover .feat-visual svg{transform:scale(1.04)}
.feat-body{padding:clamp(26px,4vw,46px);display:flex;flex-direction:column;justify-content:center}
.feat-body h2{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(24px,3.2vw,38px);margin:14px 0 14px;
}
.feat-body h2 a{transition:color .3s}
.feat-body h2 a:hover{color:var(--accent)}
.feat-body p{color:var(--grey);font-size:16px;line-height:1.65;margin:0 0 22px;max-width:46ch}
@media(max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat-visual{min-height:200px}
}

/* ---------- Meta line ---------- */
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
}
.art-meta .cat{color:var(--accent)}
.art-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--line);display:block}

/* ---------- Category filter ---------- */
.cat-bar{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cat-bar::-webkit-scrollbar{display:none}
.cat-chip{
  flex:none;border:1px solid var(--line);background:var(--white);color:var(--grey);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 15px;white-space:nowrap;border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.cat-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.cat-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- Search ---------- */
.blog-search{position:relative;max-width:320px;width:100%}
.blog-search input{
  width:100%;border:1px solid var(--line);background:var(--white);
  padding:11px 14px 11px 38px;font-family:inherit;font-size:14.5px;border-radius:999px;
  transition:border-color .3s,box-shadow .3s;
}
.blog-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.blog-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--grey-light);pointer-events:none}
.blog-toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:30px}
@media(max-width:700px){.blog-toolbar{flex-direction:column;align-items:stretch}.blog-search{max-width:none}}

/* ---------- Article grid ---------- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.art-grid{grid-template-columns:1fr}}

.art-card{
  border:1px solid var(--line);background:var(--white);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.art-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--accent)}
.art-card-visual{height:168px;position:relative;overflow:hidden;background:var(--off-white-2);border-bottom:1px solid var(--line)}
.art-card-visual svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .75s var(--ease)}
.art-card:hover .art-card-visual svg{transform:scale(1.06)}
.art-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.art-card h3{
  font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.015em;
  line-height:1.28;margin:12px 0 9px;
}
.art-card h3 a{transition:color .3s}
.art-card h3 a::after{content:"";position:absolute;inset:0}
.art-card:hover h3 a{color:var(--accent)}
.art-card p{font-size:14px;line-height:1.6;color:var(--grey);margin:0 0 18px}
.art-card-foot{
  margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-light);
}
.art-card-arrow{color:var(--accent);transition:transform .35s var(--ease);font-size:14px}
.art-card:hover .art-card-arrow{transform:translateX(5px)}
.art-empty{
  grid-column:1/-1;border:1px dashed var(--line);padding:52px 24px;text-align:center;color:var(--grey);
}

/* ---------- Article page ---------- */
.crumbs{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--accent)}

.art-head{padding:44px 0 34px;border-bottom:1px solid var(--line)}
.art-head h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(30px,4.6vw,54px);margin:20px 0 0;max-width:20ch;
}
.art-lede{font-size:clamp(16.5px,1.7vw,19.5px);line-height:1.6;color:var(--grey);max-width:60ch;margin:20px 0 0}

.art-cover{height:clamp(200px,32vw,380px);background:var(--off-white-2);border:1px solid var(--line);position:relative;overflow:hidden;margin:0 0 46px}
.art-cover svg{position:absolute;inset:0;width:100%;height:100%}

/* Article body — 66ch measure keeps lines readable without going narrow */
.prose{max-width:68ch;min-width:0;font-size:17px;line-height:1.75;color:#2A2A2D}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-family:var(--font-display);font-size:clamp(23px,2.6vw,30px);font-weight:700;
  letter-spacing:-.02em;line-height:1.2;color:var(--black);margin-top:2.1em;
  padding-top:.55em;border-top:1px solid var(--line);
}
.prose h3{font-family:var(--font-display);font-size:19.5px;font-weight:600;letter-spacing:-.01em;color:var(--black);margin-top:1.8em}
.prose p{margin:0}
.prose strong{font-weight:650;color:var(--black)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent-deep)}
.prose ul,.prose ol{padding-left:1.25em;margin:0}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--accent)}
.prose blockquote,.prose .callout{
  border-left:2px solid var(--accent);background:var(--off-white-2);
  padding:20px 24px;margin-left:0;margin-right:0;font-size:16px;color:var(--black);
}
.prose .callout p{margin:0}
.prose .callout p + p{margin-top:.8em}
.prose .callout-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px;
}
.prose figure{margin:2em 0}
.prose figcaption{font-family:var(--font-mono);font-size:11.5px;color:var(--grey);margin-top:10px;letter-spacing:.03em}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--off-white-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}

.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;align-items:start}
.art-aside{position:sticky;top:104px}
@media(max-width:960px){
  .art-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .art-aside{position:static}
}
.toc{border:1px solid var(--line);background:var(--white);padding:20px}
.toc h2{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0 0 14px;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin-bottom:10px;font-size:13.8px;line-height:1.45;display:flex;gap:9px}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:10.5px;color:var(--accent);flex:none;padding-top:2px}
.toc a{color:var(--grey);transition:color .25s}
.toc a:hover,.toc a.active{color:var(--black)}

/* Inline article CTA — used sparingly, never stacked */
.art-cta{
  border:1px solid var(--line-dark);background:var(--ink);color:var(--off-white);
  padding:clamp(24px,3.5vw,34px);margin:2.4em 0;
}
.art-cta h3{font-family:var(--font-display);font-size:clamp(19px,2.3vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--white);margin:0 0 10px;max-width:24ch;line-height:1.25}
.art-cta p{color:var(--grey-light);font-size:15px;margin:0 0 20px;max-width:46ch;line-height:1.6}

/* Keep calls to action readable when they appear inside article copy. The
   generic .prose link rule is more specific than .btn-primary otherwise. */
.prose a.btn{
  display:inline-flex;
  text-decoration:none;
}
.prose a.btn-primary{color:var(--white)}
.prose a.btn-primary:hover{color:var(--white)}

/* The blog index closes with a dark section, so its outline CTA needs the
   light variant rather than the site's default dark-on-light outline style. */
.section-dark .btn-outline{
  color:var(--white);
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.04);
}
.section-dark .btn-outline:hover{
  color:var(--black);
  border-color:var(--white);
  background:var(--white);
}

.art-share{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:26px;margin-top:38px;border-top:1px solid var(--line)}
.art-share span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.art-share a,.art-share button{
  border:1px solid var(--line);background:var(--white);width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--grey);
  transition:border-color .3s,color .3s,transform .3s var(--ease);
}
.art-share a:hover,.art-share button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}


/* =========================================================
   RESPONSIVE — mobile and tablet
   The category bar scrolls horizontally, but nothing signalled that, so on
   narrow screens the last chips looked clipped rather than scrollable.
   These rules add the affordance and tighten the rest of the blog for phones.
   ========================================================= */

/* Fade the right edge so it reads as "more to scroll", not "cut off". */
.cat-bar-wrap{position:relative;min-width:0;width:100%;flex:1 1 0%}
.cat-bar-wrap::after{
  content:"";position:absolute;top:0;bottom:6px;right:0;width:44px;
  background:linear-gradient(90deg,transparent,var(--off-white-2,#F1EDE4));
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
.cat-bar-wrap.is-scrollable::after{opacity:1}

.cat-bar{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cat-chip{scroll-snap-align:start}

@media(max-width:900px){
  .blog-hero{padding:56px 0 40px}
  .feat-body{padding:26px 22px}
  .feat-visual{min-height:180px}
}

@media(max-width:700px){
  /* Toolbar already stacks; give the pieces breathing room. */
  .blog-toolbar{gap:14px}
  .cat-bar{gap:7px;padding-bottom:8px}
  .cat-chip{font-size:11px;padding:8px 13px}

  .art-card-visual{height:150px}
  .art-card-body{padding:18px}
  .art-card h3{font-size:17px}

  /* Article pages: the sticky table of contents has nowhere to stick on a
     phone, and the cover eats the fold. */
  .art-head{padding:32px 0 26px}
  .art-cover{margin-bottom:30px}
  .prose{font-size:16.5px}
  .prose h2{margin-top:1.8em}
  .art-cta{padding:22px 20px}
  .art-share{margin-top:30px}
}

@media(max-width:520px){
  .blog-hero h1{font-size:clamp(30px,9vw,42px)}
  .blog-hero-note{font-size:15px}
  .feat-body h2{font-size:clamp(21px,6vw,27px)}
  .art-meta{font-size:10px;gap:8px}

  /* Tables in articles overflow on phones — the .table-scroll wrapper (not
     the table itself) handles the scrolling so the page never widens. */
  .prose table{white-space:nowrap}
  .prose th,.prose td{padding:9px 11px}
}

/* Long words and URLs in article copy must never widen the page. */
.prose{overflow-wrap:break-word;word-break:break-word}
.prose pre,.prose code{white-space:pre-wrap;word-break:break-word}