/* HelpHeadlines additions to the Sharpnaija stylesheet. Layout grid for the sidebar, story extras and a few small blocks. */
.hh-sn-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start;padding-top:24px;padding-bottom:40px}
.hh-sn-layout.hh-sb-right{grid-template-columns:minmax(0,1fr) var(--sn-sidebar)}
.hh-sn-layout.hh-sb-left{grid-template-columns:var(--sn-sidebar) minmax(0,1fr)}
.hh-sn-layout.hh-sb-left .hh-sn-main{order:2}
.hh-sn-layout.hh-sb-left .sn-sidebar{order:1}
.hh-sn-layout.hh-sb-sticky .sn-sidebar{position:sticky;top:90px}
.hh-sn-main{min-width:0}
.sn-sidebar{min-width:0}
.sn-sidebar__list{margin:0;padding-left:1.25em}
.sn-sidebar__list li{margin:0 0 10px}
.sn-sidebar__list small{display:block;color:var(--sn-muted);font-size:12px}
.sn-note{color:var(--sn-muted);font-size:14px}
.sn-inrel{margin:24px 0;padding:16px 18px;border:var(--sn-bw) solid var(--sn-border);border-left:4px solid var(--sn-primary);border-radius:var(--sn-radius);background:var(--sn-surface)}
.sn-inrel__label{display:block;font-family:var(--sn-font-head);font-weight:var(--sn-head-weight);margin-bottom:6px}
.sn-inrel ul{margin:0;padding-left:1.1em}
.sn-continue{margin:28px 0 8px}
.sn-featured img{width:100%;height:auto;display:block;border-radius:var(--sn-radius);object-fit:cover}
.sn-ad-below{padding-top:12px}
.sn-ad__label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sn-muted);margin-bottom:4px}
.sn-authorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.sn-footer__band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.sn-footer__list{list-style:none;margin:0;padding:0}
.sn-footer__list li{margin:0 0 8px}
.sn-footer__list a{color:inherit}
.sn-authormini__av img{width:48px;height:48px;border-radius:50%;object-fit:cover}
@media (max-width:900px){
  .hh-sn-layout.hh-sb-right,.hh-sn-layout.hh-sb-left{grid-template-columns:minmax(0,1fr)}
  .hh-sn-layout.hh-sb-left .hh-sn-main{order:1}
  .hh-sn-layout.hh-sb-left .sn-sidebar{order:2}
  .hh-sb-hide-mobile .sn-sidebar{display:none}
}

/* Headings use the Branding & design heading colour (light) or the dark text colour. */
h1,h2,h3,h4,h5,h6{color:var(--sn-heading)}

/* Story button: full width, the source's own text. */
.sn-continue{display:block}
.sn-continue .sn-btn--block{display:flex;width:100%;box-sizing:border-box;padding:16px 22px;font-size:17px}
