/* NPRO blog article layout — master template for /blog/*.html
   Opt-in via .blog-layout; does not alter global chrome alone. */

.blog-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,0.34fr);
  gap:40px;
  align-items:start;
  max-width:1240px;
  margin:0 auto;
  padding:48px 24px 64px;
}
.blog-main{min-width:0;}
.blog-main .prose{
  max-width:68ch;
  font-size:1.02rem;
  color:#33393F;
  line-height:1.65;
}
.blog-main .prose p,
.blog-main .prose li{margin-bottom:14px;}
.blog-main .prose ul,
.blog-main .prose ol{padding-left:1.25em;margin-bottom:18px;}
.blog-main .prose h2{
  font-size:1.35rem;
  margin:36px 0 12px;
  color:var(--ink,#12181D);
  font-family:'Big Shoulders Display',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  scroll-margin-top:88px;
  line-height:1.15;
}
.blog-main .prose h3{
  font-size:1.06rem;
  margin:22px 0 10px;
  color:var(--ink,#12181D);
  scroll-margin-top:88px;
}
.blog-main .prose a{color:var(--cyan-dim,#3D8B90);font-weight:600;}
.blog-main .prose .callout{
  border-left:3px solid var(--rust,#BD5326);
  padding:14px 18px;
  background:#fff;
  margin:22px 0;
  font-size:0.95rem;
}

/* Figures */
.blog-main .figure,
.blog-figure{
  margin:28px 0;
  border:1px solid var(--paper-line,#DADCD1);
  background:#fff;
  max-width:100%;
}
.blog-main .figure img,
.blog-figure img,
.blog-main .prose > p > img{
  width:100%;
  height:auto;
  display:block;
  border:0;
  max-width:100%;
}
.blog-main .figure img,
.blog-figure img{
  aspect-ratio:16 / 9;
  object-fit:contain;
  background:#0A1A29;
}
.blog-main .figure figcaption,
.blog-figure figcaption{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  color:#5A6570;
  padding:10px 14px;
  border-top:1px solid var(--paper-line,#DADCD1);
  line-height:1.4;
}

/* Tables — scroll contained */
.blog-main .table-wrap,
.blog-main .prose table{
  max-width:100%;
}
.blog-main .table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:18px 0 28px;
  border:1px solid var(--paper-line,#DADCD1);
  background:#fff;
}
.blog-main .table-wrap::after{
  content:"";
}
.blog-main table.compare,
.blog-main .table-wrap table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  margin:0;
  font-size:0.88rem;
  background:#fff;
}
.blog-main table.compare th,
.blog-main table.compare td,
.blog-main .table-wrap th,
.blog-main .table-wrap td{
  border:1px solid var(--paper-line,#DADCD1);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.blog-main table.compare th,
.blog-main .table-wrap th{
  background:var(--navy,#0F2438);
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  font-weight:500;
}
.blog-main table.compare tr:nth-child(even) td{background:#EDEEE7;}

.blog-main .author-box{
  margin-top:40px;
  padding:22px;
  border:1px solid var(--paper-line,#DADCD1);
  background:#fff;
  max-width:100%;
}
.blog-main .author-box h3{font-size:0.95rem;margin-bottom:8px;}
.blog-main .author-box p{font-size:0.88rem;color:#5A6570;margin:0;}

.blog-main .related{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:100%;
  margin-top:18px;
}
.blog-main .related a{
  border:1px solid var(--paper-line,#DADCD1);
  background:#fff;
  padding:16px;
  text-decoration:none;
  color:var(--ink,#12181D);
  font-size:0.9rem;
  min-height:44px;
}
.blog-main .related a:hover{border-color:var(--rust,#BD5326);}
.blog-main .related .cat{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.65rem;
  color:var(--rust,#BD5326);
  margin-bottom:6px;
}

/* Sidebar */
.blog-aside{
  position:sticky;
  top:76px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:calc(100vh - 96px);
  overflow:auto;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
}
.blog-aside-card{
  border:1px solid var(--paper-line,#DADCD1);
  background:#fff;
  padding:16px 16px 14px;
}
.blog-toc-slot{
  display:flex;
  flex-direction:column;
  gap:0;
}
.blog-aside-card h2,
.blog-aside-card .aside-title{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rust,#BD5326);
  margin:0 0 12px;
  font-weight:600;
}

/* TOC — single list; checkbox disclosure on mobile; always visible on desktop.
   Replaces <details>: closed details does not expand to fit forced-visible children,
   so TOC links were clipped/covered by the next sidebar cards. */
.blog-toc-check{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
  margin:0;
}
.blog-toc-summary{
  list-style:none;
  cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rust,#BD5326);
  font-weight:600;
  padding:4px 0 10px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
}
.blog-toc-summary::after{
  content:"+";
  font-family:'IBM Plex Mono',monospace;
  color:var(--cyan-dim,#3D8B90);
  font-size:1rem;
}
.blog-toc-check:checked + .blog-toc-summary::after{content:"–";}
.blog-toc-check:focus-visible + .blog-toc-summary{
  outline:2px solid var(--cyan,#5FC8CE);
  outline-offset:2px;
}
.blog-toc{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.blog-toc a{
  display:block;
  text-decoration:none;
  color:#3A4550;
  font-size:0.82rem;
  line-height:1.35;
  padding:8px 8px;
  border-left:2px solid transparent;
  min-height:40px;
}
.blog-toc a:hover,
.blog-toc a:focus-visible{
  color:var(--cyan-dim,#3D8B90);
  border-left-color:var(--cyan,#5FC8CE);
  background:rgba(95,200,206,0.08);
  outline:none;
}

.blog-aside-links{
  list-style:none;
  margin:0;
  padding:0;
}
.blog-aside-links li{margin:0;}
.blog-aside-links a{
  display:block;
  text-decoration:none;
  color:#3A4550;
  font-size:0.84rem;
  padding:10px 0;
  border-bottom:1px solid var(--paper-line,#DADCD1);
  min-height:44px;
  line-height:1.35;
}
.blog-aside-links li:last-child a{border-bottom:none;}
.blog-aside-links a:hover,
.blog-aside-links a:focus-visible{
  color:var(--cyan-dim,#3D8B90);
  outline:none;
}
.blog-aside-cta{
  background:var(--navy,#0F2438);
  color:#fff;
  border:1px solid rgba(95,200,206,0.25);
  padding:18px 16px;
}
.blog-aside-cta .aside-title{color:var(--cyan,#5FC8CE);}
.blog-aside-cta p{
  font-size:0.84rem;
  color:rgba(255,255,255,0.78);
  margin:0 0 12px;
  line-height:1.5;
}
.blog-aside-cta ul{
  margin:0 0 14px;
  padding-left:1.1em;
  font-size:0.8rem;
  color:rgba(255,255,255,0.72);
}
.blog-aside-cta li{margin-bottom:4px;}
.blog-aside-cta .aside-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--rust,#BD5326);
  color:#fff;
  text-decoration:none;
  font-size:0.84rem;
  font-weight:600;
  padding:12px 16px;
  min-height:44px;
}
.blog-aside-cta .aside-btn:hover,
.blog-aside-cta .aside-btn:focus-visible{
  background:#a84820;
  outline:2px solid var(--cyan,#5FC8CE);
  outline-offset:2px;
}
.blog-aside-note{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.68rem;
  color:#8B95A1;
  margin-top:10px;
  line-height:1.4;
}

/* Desktop: TOC always expanded (checkbox ignored) */
@media (min-width:1101px){
  .blog-toc-summary{
    cursor:default;
    pointer-events:none;
    min-height:0;
    padding-bottom:12px;
  }
  .blog-toc-summary::after{display:none;}
  .blog-toc-slot > .blog-toc{
    display:flex!important;
  }
}

/*
  Mobile reading order (single TOC source — no duplicate markup):
  hero → On this page → article → related / markets / CTA
  Achieved by making .blog-aside display:contents so .blog-toc-slot
  can order above .blog-main while remaining siblings in the aside on desktop.
*/
@media (max-width:1100px){
  .blog-layout{
    display:flex;
    flex-direction:column;
    gap:24px;
    padding:36px 24px 52px;
  }
  .blog-aside{
    display:contents;
    position:static;
    max-height:none;
    overflow:visible;
  }
  /* Flex + display:contents: force shrink so wide tables don't expand the page */
  .blog-main,
  .blog-toc-slot,
  .blog-aside-card{
    min-width:0;
    max-width:100%;
    width:100%;
  }
  .blog-toc-slot{
    order:1;
    margin:0;
  }
  .blog-main{
    order:2;
  }
  .blog-aside-card:not(.blog-toc-slot){
    order:3;
  }
  .blog-main .prose{max-width:74ch;}
  .blog-main .related{grid-template-columns:1fr 1fr;}
  .blog-main .table-wrap{min-width:0;}
  /* Mobile TOC collapsed until checkbox checked */
  .blog-toc-slot > .blog-toc{display:none;}
  .blog-toc-check:checked ~ .blog-toc{display:flex;}
}

@media (max-width:640px){
  .blog-layout{padding:28px 16px 44px;gap:18px;}
  .blog-main .prose{font-size:1rem;line-height:1.7;}
  .blog-main .prose h2{font-size:1.2rem;margin:28px 0 10px;}
  .blog-main .prose h3{font-size:1.02rem;}
  .blog-main .related{grid-template-columns:1fr;}
  .blog-main table.compare,
  .blog-main .table-wrap table{font-size:0.8rem;min-width:440px;}
  .blog-aside-card{padding:14px;}
  /* Compact article hero when this stylesheet is present */
  .hero-inner{padding:28px 16px 0!important;gap:16px!important;}
  .hero h1{font-size:clamp(1.65rem,7.5vw,2.15rem)!important;line-height:1.05!important;}
  .hero-lede{font-size:0.95rem!important;margin-bottom:12px!important;}
  .hero-cover{min-height:0!important;}
  .meta-bar{padding:10px 16px 18px!important;gap:10px 14px!important;font-size:0.68rem!important;}
  .breadcrumb-inner{padding:8px 16px!important;line-height:1.45;white-space:normal;}
  .cta-strip{padding:36px 16px!important;}
  .cta-strip .btn-primary{min-height:44px;display:inline-flex;align-items:center;}
}