/**
 * Single Blog ("post") / single News: navy hero + sidebar layout.
 * Ported from the approved single-post mockup. Fonts (Anek Latin, Inter)
 * are already loaded globally via the plugin's swissgrc-pp-fonts handle -
 * no @font-face here. Scoped under #sgblog-hero / #sgblog-body /
 * #sgblog-related so nothing here leaks site-wide.
 */
#sgblog-hero, #sgblog-body, #sgblog-related {
  --navy:#1A2E4C; --navy-2:#152743; --navy-deep:#0f1c30;
  --teal:#17a2ac; --teal-light:#2dc6cb; --teal-deep:#0f7c84;
  --ink:#182338; --grey:#616d80; --grey-soft:#8892a1;
  --line:#e1e7f0; --card:#ffffff; --card-grey:#eef1f6;
  --tealtint: color-mix(in srgb, var(--teal) 9%, transparent);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
}
#sgblog-hero *, #sgblog-body *, #sgblog-related * { box-sizing:border-box; }
#sgblog-hero.sgblog-hero h1, #sgblog-body.sgblog-body h2, #sgblog-body.sgblog-body h3,
#sgblog-hero h1, #sgblog-body h2, #sgblog-body h3, #sgblog-related h2 {
  font-family:'Anek Latin','Inter',-apple-system,sans-serif; font-weight:700; margin:0; color:var(--ink); text-wrap:balance;
}
#sgblog-hero p, #sgblog-body p, #sgblog-related p { margin:0; }
#sgblog-hero a, #sgblog-body a, #sgblog-related a { color:inherit; text-decoration:none; }
#sgblog-hero img, #sgblog-body img, #sgblog-related img { max-width:100%; display:block; }
#sgblog-hero .wrap, #sgblog-body .wrap, #sgblog-related .wrap { max-width:1180px; margin:0 auto; padding:0 28px; }
@media (max-width:640px){ #sgblog-hero .wrap, #sgblog-body .wrap, #sgblog-related .wrap { padding:0 20px; } }

/* ============ Hero ============ */
#sgblog-hero{
  position:relative; overflow:hidden; color:#eef2f9;
  background:linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding:96px 0 108px;
}
#sgblog-hero .sgblog-hero-tex{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(700px 460px at 82% 0%, #000, transparent 72%);
  mask-image:radial-gradient(700px 460px at 82% 0%, #000, transparent 72%);
}
#sgblog-hero .sgblog-hero-glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
#sgblog-hero .sgblog-hero-glow.g1{ top:-220px; right:-120px; width:820px; height:600px; background:radial-gradient(closest-side, rgba(45,198,203,.22), transparent 70%); }
#sgblog-hero .sgblog-hero-glow.g2{ display:none; }
#sgblog-hero .sgblog-hero-in{ position:relative; z-index:1; }
#sgblog-hero .sgblog-crumb{
  display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:#c7d2e2; margin-bottom:26px; max-width:100%;
}
#sgblog-hero .sgblog-crumb .dash{ width:22px; height:2px; border-radius:2px; background:var(--teal-light); flex:none; }
#sgblog-hero .sgblog-crumb a{ color:var(--teal-light); transition:color .15s ease; }
#sgblog-hero .sgblog-crumb a:hover{ color:#fff; }
#sgblog-hero .sgblog-crumb .sep{ opacity:.4; }
#sgblog-hero .sgblog-crumb .current{ color:#c7d2e2; }
#sgblog-hero h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.22; color:#fff; letter-spacing:-.01em; max-width:760px; }
#sgblog-hero .sgblog-divider{ height:1px; background:rgba(255,255,255,.14); margin-top:34px; }
#sgblog-hero .sgblog-meta{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:26px; }
#sgblog-hero .sgblog-byline{ display:flex; align-items:center; gap:12px; }
#sgblog-hero .sgblog-byline .av{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
#sgblog-hero .sgblog-byline .av-initials{
  display:flex; align-items:center; justify-content:center; background:var(--teal); color:#06262a; font-weight:700; font-size:15px;
}
#sgblog-hero .sgblog-byline .nm{ display:block; font-size:14.5px; font-weight:700; color:#fff; }
#sgblog-hero .sgblog-byline .ti{ display:block; font-size:12.5px; color:#aebbd2; margin-top:1px; }
#sgblog-hero .sgblog-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-left:auto; }
#sgblog-hero .sgblog-when{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#aebbd2; }
#sgblog-hero .sgblog-when .dot{ width:3px; height:3px; border-radius:50%; background:#5c6c8a; }
#sgblog-hero .sgblog-share{ display:flex; align-items:center; gap:12px; }
#sgblog-hero .sgblog-share .prompt{ font-size:13px; color:#aebbd2; }
#sgblog-hero .sgblog-share button{
  width:34px !important; height:34px !important; padding:0 !important; box-sizing:border-box !important;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:#dfe6f2; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
  transition:border-color .15s ease, background .15s ease;
}
#sgblog-hero .sgblog-share button:hover{ border-color:var(--teal-light); background:rgba(45,198,203,.14); }
#sgblog-hero .sgblog-share svg{ width:17px; height:17px; flex-shrink:0; fill:currentColor; stroke:none; }
@media (max-width:640px){
  #sgblog-hero{ padding:46px 0 38px; }
  #sgblog-hero .sgblog-meta{ flex-direction:column; align-items:flex-start; gap:16px; }
  #sgblog-hero .sgblog-right{ align-items:flex-start; margin-left:0; width:100%; }
  #sgblog-hero .sgblog-share{ margin-left:0; width:100%; flex-wrap:wrap; }
}

/* ============ Body layout ============ */
#sgblog-body .sgblog-layout{
  display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start;
  padding-top:64px; padding-bottom:84px;
}
@media (max-width:920px){
  #sgblog-body .sgblog-layout{ grid-template-columns:1fr; padding-top:40px; padding-bottom:56px; }
  #sgblog-body .side{ position:static; }
}

#sgblog-body .prose-cover{ margin:4px 0 28px; border-radius:14px; overflow:hidden; }
#sgblog-body .prose-cover img{ width:100%; height:auto; display:block; }
#sgblog-body .prose > p{ font-size:16px; color:var(--grey); margin-bottom:20px; }
#sgblog-body .prose > p:first-of-type{ font-size:19px; color:var(--ink); font-weight:500; line-height:1.55; }
#sgblog-body .prose h2{
  font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--teal-deep); margin:52px 0 18px; line-height:1.4; scroll-margin-top:100px;
}
#sgblog-body .prose h3{ font-size:19px; font-weight:700; margin:36px 0 14px; line-height:1.35; }
#sgblog-body .prose h2 + p, #sgblog-body .prose h3 + p{ margin-top:0; }
#sgblog-body .prose blockquote, #sgblog-body .prose .callout{
  margin:28px 0; padding:22px 24px; border-radius:14px;
  background:var(--tealtint); border-left:3px solid var(--teal);
}
#sgblog-body .prose blockquote p, #sgblog-body .prose .callout p{ color:var(--ink); font-weight:600; font-size:16px; margin:0; }
#sgblog-body .prose blockquote p + p, #sgblog-body .prose .callout p + p{ margin-top:10px; font-weight:400; color:var(--grey); font-size:14.5px; }
#sgblog-body .prose ul:not(.sol-list), #sgblog-body .prose ol{ margin:18px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
#sgblog-body .prose ul:not(.sol-list) li, #sgblog-body .prose ol li{
  display:flex; align-items:flex-start; gap:10px; font-size:16px; color:var(--ink); font-weight:500;
}
#sgblog-body .prose ul:not(.sol-list) li::before, #sgblog-body .prose ol li::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); flex:none; margin-top:8px;
}
#sgblog-body .prose figure:not(.prose-cover){ margin:28px 0; border-radius:14px; overflow:hidden; }
#sgblog-body .prose figure:not(.prose-cover) figcaption{ font-size:12.5px; color:var(--grey-soft); margin-top:10px; }
#sgblog-body .prose strong{ color:var(--ink); font-weight:700; }
#sgblog-body .prose a:not(.author-card a):not(.toc-card a){ color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px; }

/* author card (sidebar) */
#sgblog-body .side-block.author-card{ padding:22px 24px; box-shadow:none; }
#sgblog-body .author-card{ display:flex; flex-direction:column; align-items:flex-start; }
#sgblog-body .author-card .pic{ width:56px; height:56px; border-radius:50%; flex:none; object-fit:cover; margin-bottom:14px; }
#sgblog-body .author-card .pic-initials{
  display:flex; align-items:center; justify-content:center; background:var(--teal); color:#06262a; font-weight:700; font-size:18px;
}
#sgblog-body .author-card .name{ font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-soft); margin-bottom:6px; }
#sgblog-body .author-card h3{ font-size:17px; line-height:24px; margin:0 0 3px; color:var(--ink); }
#sgblog-body .author-card p{ font-size:13.5px; color:var(--grey); margin:0; }
#sgblog-body .author-card p.title{ font-size:14.5px; font-weight:600; color:var(--teal-deep); margin:0 0 10px; }
#sgblog-body .author-card p.bio{ line-height:1.65; }


/* ============ Sidebar ============ */
#sgblog-body .side{ position:sticky; top:calc(var(--sgblog-rail-top,78px) + 20px); display:flex; flex-direction:column; gap:18px; }
#sgblog-body .side-block{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 24px 10px; box-shadow:0 24px 50px -38px rgba(20,40,75,.3); }
#sgblog-body .side-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
#sgblog-body .side-label{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-soft); }
#sgblog-body .side-head svg{ width:18px; height:18px; stroke:var(--teal-deep); stroke-width:2; fill:none; flex:none; }
#sgblog-body .sol-list{ display:flex; flex-direction:column; }
#sgblog-body .sol-list a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:13px 2px;
  font-size:13.5px; font-weight:600; color:var(--ink); border-top:1px solid var(--line); transition:color .15s ease;
}
#sgblog-body .sol-list a:hover{ color:var(--teal-deep); }
#sgblog-body .sol-list a svg{ width:13px; height:13px; stroke:var(--grey-soft); fill:none; stroke-width:2; flex:none; transition:stroke .15s ease, transform .15s ease; }
#sgblog-body .sol-list a:hover svg{ stroke:var(--teal-deep); transform:translateX(2px); }

/* Contents (TOC) card - rendered twice (sidebar for desktop, inline in the
   article for mobile); only one is ever visible at a given width. */
#sgblog-body .prose .toc-card{ display:none; margin:4px 0 28px; }
@media (max-width:920px){
  #sgblog-body .side .toc-card{ display:none; }
  #sgblog-body .prose .toc-card{ display:block; }
}
#sgblog-body .toc-card{ border-radius:20px; padding:24px; }
#sgblog-body .toc-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:0; padding:0; margin:0 0 18px; font:inherit; text-align:left; cursor:default;
}
#sgblog-body .toc-toggle-lbl{ display:flex; align-items:center; gap:9px; }
#sgblog-body .toc-count{ display:none; }
@media (max-width:920px){
  #sgblog-body .toc-count{
    display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
    border-radius:10px; background:var(--tealtint); color:var(--teal-deep); font-size:11px; font-weight:700;
  }
}
#sgblog-body .toc-toggle .chev{ display:none; width:18px; height:18px; stroke:var(--grey-soft); stroke-width:2; fill:none; flex:none; transition:transform .2s ease; }
@media (max-width:920px){
  #sgblog-body .toc-toggle{ cursor:pointer; margin-bottom:0; }
  #sgblog-body .toc-card.is-open .toc-toggle{ margin-bottom:18px; }
  #sgblog-body .toc-toggle .chev{ display:block; }
  #sgblog-body .toc-card .toc-list{ display:none; margin-top:18px; }
  #sgblog-body .toc-card.is-open .toc-list{ display:flex; }
  #sgblog-body .toc-card.is-open .chev{ transform:rotate(180deg); }
}
#sgblog-body .toc-list{ display:flex; flex-direction:column; gap:13px; }
#sgblog-body .toc-list a{
  display:flex; align-items:flex-start; gap:12px; padding:2px 0 2px 14px; margin-left:-14px;
  border:0; border-left:3px solid transparent;
  font-size:13.5px; font-weight:400; line-height:1.45; color:#57647a;
  transition:color .15s ease, border-color .15s ease;
}
#sgblog-body .toc-list a:hover{ color:var(--teal-deep); }
#sgblog-body .toc-list .num{ flex:none; padding-top:1px; font-size:12px; font-weight:600; color:#9aa5b8; transition:color .15s ease; }
#sgblog-body .toc-list a.active{ border-left-color:var(--teal); font-weight:700; color:var(--ink); }
#sgblog-body .toc-list a.active .num{ color:var(--teal-deep); }

#sgblog-body .toolbox-card{
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius:16px; padding:24px; color:#eef2f9;
}
#sgblog-body .toolbox-card .side-label{ color:var(--teal-light); margin-bottom:12px; }
#sgblog-body .toolbox-card h3{ color:#fff; font-size:16.5px; margin:0 0 10px; line-height:1.35; }
#sgblog-body .toolbox-card p{ font-size:13.5px; color:#b7c4da; margin-bottom:18px; }
#sgblog-body .toolbox-card a{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#fff; white-space:nowrap;
  background:var(--teal); padding:10px 16px; border-radius:99px; box-shadow:0 16px 34px -16px rgba(23,162,172,.6);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#sgblog-body .toolbox-card a:hover{ background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(23,162,172,.85); }
#sgblog-body .toolbox-card a svg{ stroke:currentColor; fill:none; stroke-width:2; }

/* ============ Related ============ */
#sgblog-related{ padding:72px 0 76px; background:var(--card-grey); }
#sgblog-related .related-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:34px; }
#sgblog-related .related-head .eyebrow{
  display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:10px;
}
#sgblog-related .related-head .eyebrow .dash{ width:20px; height:2px; border-radius:2px; background:currentColor; opacity:.85; }
#sgblog-related .related-head h2{ font-size:26px; margin:0; }
#sgblog-related .related-head a{ font-size:13.5px; font-weight:600; color:var(--teal-deep); }
#sgblog-related .rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ #sgblog-related .rel-grid{ grid-template-columns:1fr; } }
#sgblog-related .rel-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
#sgblog-related .rel-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(20,37,63,.3); }
#sgblog-related .rel-img{ aspect-ratio:16/9; background:linear-gradient(150deg,var(--navy-2),var(--navy-deep)); overflow:hidden; }
#sgblog-related .rel-img img{ width:100%; height:100%; object-fit:cover; display:block; }
#sgblog-related .rel-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; gap:0; }
#sgblog-related .rel-tag{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 8px; }
#sgblog-related .rel-body h4{ font-size:16.5px; font-weight:700; line-height:1.35; font-family:'Anek Latin','Inter',sans-serif; margin:0 0 8px; color:var(--ink); }
#sgblog-related .rel-body p{ font-size:13.5px; color:var(--grey); line-height:1.6; margin-bottom:16px; }
#sgblog-related .rel-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto; font-size:13.5px; font-weight:700; color:var(--teal-deep); transition:gap .15s ease;
}
#sgblog-related .rel-more svg{ width:15px; height:15px; stroke:currentColor; stroke-width:2.3; fill:none; }
#sgblog-related .rel-card:hover .rel-more{ gap:10px; }