/* JF Insights Article Template — styles unified with the Joyous Future main-site
   visual system (real tokens read from the live site :root). */
:root{
  /* Brand tokens mirror the site's actual --jf-* system for perfect consistency */
  --jf-navy:#0b1f3a;       /* site --jf-navy */
  --jf-navy-2:#172033;      /* site --jf-ink  */
  --jf-gold:#c9a24d;        /* site --jf-gold */
  --jf-gold-dark:#9a7420;   /* site --jf-gold-dark */
  --jf-gold-soft:#F5EDD9;   /* light gold tint derived from --jf-gold */
  --jf-gold-line:#E4D3A8;
  --jf-cream:#FFFDF7;       /* site --jf-cream */
  --jf-card:#FFFFFF;
  --jf-text:#334155;        /* matches --ast-global-color-3 */
  --jf-muted:#64748b;
  --jf-border:#ECE6DA;
  --jf-radius:14px;
}
/* CENTERING FIX — Astra's .ast-container is display:flex, so .jf-insight-wrap
   became a non-stretching flex item pinned to flex-start. Its width was capped by
   the inner max-width, leaving the surplus space on the RIGHT (the whole article
   block looked shifted left). We neutralise the flex context for this template
   only, then centre the inner container with margin-inline:auto — no transform,
   no negative margins, no arbitrary margin-left. */
body.jf-insight-detail .ast-container{ display:block; }
/* overflow-x:clip (not hidden): hidden turns the wrap into a scroll container,
   which silently disables the sticky TOC / right modules. clip keeps the
   horizontal clipping without creating a scroll container. */
.jf-insight-wrap{ display:block; width:100%; flex:1 1 100%; min-width:0; background:var(--jf-cream); overflow-x:clip; }
/* Sticky needs room to travel: the grid uses align-items:start, so each side
   column was only as tall as its own content. Stretch the side columns to the
   row height so their sticky children can stick for the length of the article. */
.jf-insight-body .jf-col-left,
.jf-insight-body .jf-col-right{ align-self:stretch; }
/* Widened to the site's widescreen (1480, same as Degree Programs ast-container).
   Horizontally centred relative to the viewport via symmetric auto margins. */
.jf-insight-container{ width:100%; max-width:1480px; margin-inline:auto; padding:40px 32px 80px; }
.jf-art-header{ margin-bottom:36px; }
.jf-art-cat{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--jf-gold-dark); margin-bottom:12px; }
.jf-art-cat a{ color:var(--jf-gold-dark); text-decoration:none; }
.jf-art-title{ font-size:40px; line-height:1.18; font-weight:800; color:var(--jf-navy); margin:0 0 14px; letter-spacing:-.01em; }
.jf-art-meta{ font-size:13.5px; color:var(--jf-muted); margin-bottom:16px; }
.jf-art-excerpt{ font-size:18px; line-height:1.65; color:var(--jf-text); max-width:820px; margin:0; }
/* 3-column grid: TOC | content | dynamic modules. Sidebars barely changed;
   the wider 1480 container is what widens the reading column. */
.jf-insight-body{ display:grid; grid-template-columns:190px minmax(0,1fr) 270px; gap:32px; align-items:start; }
.jf-col-left{ position:relative; }
.jf-toc{ position:sticky; top:96px; max-height:calc(100vh - 120px); overflow:auto; border-left:2px solid var(--jf-gold-soft); padding:4px 0 4px 18px; }
.jf-toc-title{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--jf-muted); margin:0 0 14px; font-weight:700; }
.jf-toc-toggle{ display:none; }
.jf-toc ul{ list-style:none; margin:0; padding:0; }
/* more breathing room between TOC entries */
.jf-toc li{ margin:0 0 14px; }
.jf-toc a{ display:block; font-size:13.5px; line-height:1.45; color:var(--jf-text); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:color .15s; }
.jf-toc a:hover{ color:var(--jf-gold-dark); }
.jf-toc a.active{ color:var(--jf-gold-dark); font-weight:700; border-bottom-color:var(--jf-gold-line); }
.jf-col-center{ min-width:0; background:var(--jf-card); border:1px solid var(--jf-border); border-radius:var(--jf-radius); padding:48px 52px; box-shadow:0 1px 3px rgba(23,32,51,.04); }
.jf-article-content{ font-size:17px; line-height:1.78; color:var(--jf-text); }
/* larger vertical rhythm between H2 sections */
.jf-article-content h2{ font-size:27px !important; line-height:1.3 !important; color:var(--jf-navy) !important; font-weight:800 !important; margin:52px 0 18px !important; padding-top:6px; scroll-margin-top:90px; }
.jf-article-content h3{ font-size:21px !important; color:var(--jf-navy-2) !important; font-weight:700 !important; margin:32px 0 12px !important; scroll-margin-top:90px; }
.jf-article-content p{ margin:0 0 20px !important; }
.jf-article-content ul, .jf-article-content ol{ margin:0 0 20px !important; padding-left:24px !important; }
.jf-article-content li{ margin:0 0 10px !important; }
.jf-article-content table{ width:100%; border-collapse:collapse; margin:0 0 24px !important; font-size:15px; }
.jf-article-content th, .jf-article-content td{ border:1px solid var(--jf-border); padding:11px 14px; text-align:left; vertical-align:top; }
.jf-article-content th{ background:var(--jf-gold-soft); color:var(--jf-navy); font-weight:700; }
.jf-article-content img{ max-width:100%; height:auto; border-radius:10px; }
.jf-article-content a{ color:var(--jf-gold-dark) !important; text-decoration:underline; text-underline-offset:2px; }
.jf-article-content blockquote{ border-left:3px solid var(--jf-gold); margin:0 0 22px !important; padding:6px 20px; color:var(--jf-navy-2); font-style:italic; }
.jf-takeaways{ background:var(--jf-gold-soft); border:1px solid var(--jf-gold-line); border-radius:12px; padding:20px 24px; margin:0 0 30px; }
.jf-takeaways h3{ margin:0 0 10px !important; font-size:16px !important; color:var(--jf-navy) !important; text-transform:uppercase; letter-spacing:.04em; }
.jf-takeaways p{ margin:0 !important; font-size:16px; line-height:1.65; color:var(--jf-navy-2); }
.jf-art-bottom{ margin-top:48px; border-top:1px solid var(--jf-border); padding-top:32px; }
.jf-art-bottom h2{ font-size:23px !important; color:var(--jf-navy) !important; margin:0 0 18px !important; }
.jf-official-sources ul{ list-style:none; margin:0 !important; padding:0 !important; }
.jf-official-sources li{ margin:0 0 10px !important; }
.jf-official-sources a{ color:var(--jf-gold-dark) !important; text-decoration:none; font-weight:600; }
.jf-related-insights .jf-ri-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.jf-ri-card{ display:block; background:var(--jf-card); border:1px solid var(--jf-border); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--jf-navy); transition:transform .15s, box-shadow .15s; }
.jf-ri-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(23,32,51,.08); }
.jf-ri-card img{ width:100%; height:150px; object-fit:cover; display:block; }
.jf-ri-title{ display:block; padding:14px 16px; font-size:14.5px; font-weight:600; line-height:1.35; }
.jf-explore-more .jf-em-links{ display:flex; flex-wrap:wrap; gap:14px; }
.jf-em-link{ display:inline-block; background:var(--jf-navy); color:#fff; text-decoration:none; padding:12px 20px; border-radius:10px; font-weight:600; font-size:14.5px; transition:background .15s; }
.jf-em-link:hover{ background:#061427; }
.jf-col-right{ position:relative; }
/* more space between the right-side modules */
.jf-right-sticky{ position:sticky; top:96px; display:flex; flex-direction:column; gap:26px; }
.jf-mod{ background:var(--jf-card); border:1px solid var(--jf-border); border-radius:14px; padding:22px; }
.jf-mod-title{ font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--jf-navy); margin:0 0 16px !important; font-weight:700; border-bottom:2px solid var(--jf-gold-soft); padding-bottom:10px; }
.jf-mod-list{ display:flex; flex-direction:column; gap:12px; }
.jf-mod-list-col a{ display:block; }
.jf-uni-card, .jf-prog-card{ display:block; text-decoration:none; color:var(--jf-navy); background:var(--jf-cream); border:1px solid var(--jf-border); border-radius:10px; padding:14px 16px; transition:border-color .15s, transform .15s; }
.jf-uni-card:hover, .jf-prog-card:hover{ border-color:var(--jf-gold); transform:translateY(-1px); }
.jf-uni-name{ display:block; font-weight:700; font-size:14.5px; line-height:1.3; }
.jf-uni-city{ display:block; font-size:13px; color:var(--jf-muted); margin:3px 0 8px; }
.jf-uni-view, .jf-prog-view{ display:inline-block; font-size:12.5px; font-weight:600; color:var(--jf-gold-dark); }
.jf-prog-card .jf-prog-name{ display:block; font-weight:700; font-size:14.5px; line-height:1.3; }
.jf-prog-card .jf-prog-uni{ display:block; font-size:13px; color:var(--jf-muted); margin:3px 0 8px; }
.jf-prog-card .jf-prog-tags{ display:block; margin-bottom:8px; }
.jf-prog-card .jf-tag{ display:inline-block; background:var(--jf-gold-soft); color:var(--jf-navy); font-size:11.5px; padding:2px 8px; border-radius:6px; margin:0 4px 4px 0; }
.jf-prog-card .jf-prog-tuition{ display:block; font-size:13px; color:var(--jf-navy-2); font-weight:600; margin-bottom:8px; }
.jf-find-link{ display:block; font-size:14px; font-weight:600; color:var(--jf-gold-dark); text-decoration:none; line-height:1.5; }
.jf-prep-link{ display:block; background:var(--jf-cream); border:1px solid var(--jf-border); border-radius:10px; padding:12px 14px; text-decoration:none; color:var(--jf-navy); font-weight:600; font-size:14px; margin-bottom:10px; transition:border-color .15s; }
.jf-prep-link:hover{ border-color:var(--jf-gold); }
.jf-mod-match.jf-mod-disabled{ background:var(--jf-cream); border-style:dashed; }
.jf-mod-match .jf-mod-note{ margin:0 !important; font-size:13.5px; color:var(--jf-muted); line-height:1.6; }

@media (max-width: 1280px){
  .jf-insight-container{ padding:36px 28px 72px; }
  .jf-col-center{ padding:44px 44px; }
}
@media (max-width: 1024px){
  .jf-insight-body{ grid-template-columns:170px minmax(0,1fr); }
  .jf-col-right{ grid-column:1 / -1; position:static; }
  .jf-right-sticky{ position:static; flex-direction:row; flex-wrap:wrap; }
  .jf-right-sticky .jf-mod{ flex:1 1 240px; }
}
@media (max-width: 860px){
  .jf-insight-body{ grid-template-columns:minmax(0,1fr); }
  .jf-col-left{ grid-row:1; }
  .jf-toc{ position:static; max-height:none; border-left:none; border:1px solid var(--jf-border); border-radius:12px; padding:14px 16px; }
  .jf-toc-toggle{ display:block; width:100%; text-align:left; background:var(--jf-navy); color:#fff; border:none; border-radius:8px; padding:12px 16px; font-weight:600; cursor:pointer; font-size:14px; }
  .jf-toc ul{ display:none; margin-top:12px !important; }
  .jf-toc.open ul{ display:block; }
  .jf-col-center{ padding:30px 24px; }
  .jf-related-insights .jf-ri-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .jf-insight-container{ padding:24px 16px 56px; }
  .jf-art-title{ font-size:30px; }
  .jf-col-center{ padding:22px 18px; }
  .jf-article-content{ font-size:16px; }
  .jf-article-content h2{ font-size:23px !important; margin:40px 0 16px !important; }
  .jf-related-insights .jf-ri-grid{ grid-template-columns:1fr; }
  .jf-right-sticky{ flex-direction:column; }
  .jf-right-sticky .jf-mod{ flex:1 1 auto; }
  .jf-article-content table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
}