/* blog-post.css — makes a PUBLISHED post render identically to the Blog Studio
   editor. Ports the studio's .ql-editor article styling (editorial typography +
   the Story Desk rich blocks) onto .blogpost-body, which blog-post.template.html
   uses. Loaded AFTER site.css so it wins. Scoped entirely to .blogpost-body. */

.blogpost-body{
  --serif:'Fraunces',Georgia,serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --paper:#F7F4ED; --paper2:#EFE9DE; --card:#FDFBF6;
  --ink:#17140E; --ink2:#5E574A; --ink3:#968D7B;
  --line:#E1D9C8; --line2:#CFC6B1; --signal:#C4611B; --signal2:#E08A34;
  font-family:'Newsreader',Georgia,serif;
  font-size:1.18rem; line-height:1.68; color:#221d14;
}
/* studio has no navy "lead" paragraph — neutralise site.css's version */
.blogpost-body>p:first-of-type{font-size:1.18rem;line-height:1.68;color:#221d14;}
.blogpost-body p{margin:0 0 18px;}
.blogpost-body strong{color:inherit;}
.blogpost-body h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;margin:26px 0 10px;color:#221d14;}
.blogpost-body h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:22px 0 8px;color:#221d14;}
.blogpost-body blockquote{border-left:3px solid var(--signal);font-family:var(--serif);font-size:1.3rem;color:var(--ink);font-style:italic;margin:24px 0;padding:4px 0 4px 20px;}
.blogpost-body img{max-width:100%;border-radius:10px;}
/* Quill alignment/indent — Quill's own CSS isn't loaded on the published page */
.blogpost-body .ql-align-center{text-align:center;}
.blogpost-body .ql-align-right{text-align:right;}
.blogpost-body .ql-align-justify{text-align:justify;}
.blogpost-body .ql-indent-1{padding-left:3em;}
.blogpost-body .ql-indent-2{padding-left:6em;}
.blogpost-body .ql-indent-3{padding-left:9em;}

/* ---- Story Desk rich blocks (ported verbatim from blog-studio .ql-editor) ---- */
.blogpost-body .jr-inbrief{background:var(--paper2);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:10px;padding:16px 20px 4px;margin:18px 0;}
.blogpost-body .jr-inbrief h3{font-family:'Inter',system-ui,sans-serif;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 10px;font-weight:700;}
.blogpost-body .jr-inbrief ul{list-style:none;padding:0;margin:0;}
.blogpost-body .jr-inbrief li{font-family:'Inter',system-ui,sans-serif;font-size:.95rem;line-height:1.45;padding:0 0 9px 22px;position:relative;}
.blogpost-body .jr-inbrief li::before{content:"";position:absolute;left:0;top:.6em;width:12px;height:2px;background:var(--signal);}
.blogpost-body .jr-reasons{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;margin:20px 0;counter-reset:jrn;}
.blogpost-body .jr-reasons li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px;}
.blogpost-body .jr-reasons li::before{counter-increment:jrn;content:counter(jrn,decimal-leading-zero);font-family:var(--mono);font-size:.68rem;font-weight:700;color:var(--signal);}
.blogpost-body .jr-reasons h4{font-family:var(--serif);font-weight:600;font-size:1.04rem;margin:6px 0 5px;}
.blogpost-body .jr-reasons p{font-family:'Inter',system-ui,sans-serif;font-size:.9rem;line-height:1.45;color:var(--ink2);margin:0;}
.blogpost-body .jr-featurecards{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0;margin:20px 0;}
.blogpost-body .jr-featurecards li{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:0;}
.blogpost-body .jr-featurecards li img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0;}
.blogpost-body .jr-featurecards h4{font-family:var(--serif);font-weight:600;font-size:1rem;margin:12px 14px 5px;}
.blogpost-body .jr-featurecards p{font-family:'Inter',system-ui,sans-serif;font-size:.86rem;line-height:1.45;color:var(--ink2);margin:0 14px 14px;}
.blogpost-body figure.body-figure{margin:20px 0;}
.blogpost-body figure.body-figure img{display:block;}
.blogpost-body figure.body-figure figcaption{font-family:'Inter',system-ui,sans-serif;font-size:.8rem;color:var(--ink3);text-align:center;margin-top:8px;}
.blogpost-body blockquote.jr-pull{text-align:center;font-style:normal;border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 6px;margin:24px 0;}

/* the multi-column grids stack on small screens */
@media (max-width:640px){
  .blogpost-body .jr-reasons,.blogpost-body .jr-featurecards{grid-template-columns:1fr;}
}