/*==========================================================================
=> Mintifi Insights
   Layered on top of main.css. Reuses the site's tokens (--clr, --dark,
   --txtclr, --headerHeight) and the shared .container / .hdn* / .button
   classes so the section reads as part of the same site.
==========================================================================*/

:root {
  --ins-border: #e6ecf5;
  --ins-surface: #f7f9fc;
  --ins-measure: 68ch;
  --ins-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* main.css sets the base font on body to 'regular', a family no @font-face ever
   defines, and only pulls h1-h6/p/a back to Inter. Anything else - list items,
   figcaption, table cells - therefore falls through to the browser's default
   serif. Setting the family on the Insights root fixes it for this section
   without touching how the hand-authored pages render. */
#ins-main,
#ins-main h1,
#ins-main h2,
#ins-main h3,
#ins-main h4,
#ins-main p,
#ins-main a {
  font-family: var(--ins-font);
}

/* main.css also applies `ul { list-style: none; padding: 0 }` globally, which
   strips the bullets off prose written in Markdown. Restore them, scoped. */
#ins-main .ins-prose ul {
  list-style: disc;
}
#ins-main .ins-prose ol {
  list-style: decimal;
}
#ins-main .ins-prose ul ul {
  list-style: circle;
}

.ins-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--clr);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
}
.ins-skip:focus {
  left: 0;
}

/*=============================== Shared bits ==============================*/

.ins-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr);
  margin: 0 0 10px;
}

.ins-meta {
  font-size: 14px;
  color: var(--txtclr);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ins-breadcrumb {
  font-size: 14px;
  color: var(--txtclr);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ins-breadcrumb a {
  color: var(--txtclr);
  text-decoration: none;
}
.ins-breadcrumb a:hover {
  color: var(--clr);
  text-decoration: underline;
}

/*============================== Hero band =================================*/

.ins-hero-band {
  background: var(--ins-surface);
  border-bottom: 1px solid var(--ins-border);
  padding: 56px 0 48px;
}
.ins-hero-band .hdn1 {
  color: var(--dark);
  margin: 0 0 16px;
}
.ins-hero-lede {
  max-width: 60ch;
  margin: 0;
}

/*============================ Category chips ==============================*/

.ins-catnav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 28px 0 4px;
}
.ins-chip {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  border: 1px solid var(--ins-border);
  background: #fff;
  color: var(--txtclr);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s;
  white-space: nowrap;
}
.ins-chip:hover {
  border-color: var(--clr);
  color: var(--clr);
}
.ins-chip.is-active {
  background: var(--clr);
  border-color: var(--clr);
  color: #fff;
}

/*=============================== Card grid ================================*/

.ins-listing {
  padding-top: 32px;
}

.ins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

.ins-card {
  background: #fff;
  border: 1px solid var(--ins-border);
  border-radius: 12px;
  overflow: hidden;
  transition: 0.25s;
}
.ins-card:hover {
  border-color: #c9d8ef;
  box-shadow: 0 12px 28px rgba(2, 2, 81, 0.08);
  transform: translateY(-2px);
}
.ins-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.ins-card-media {
  aspect-ratio: 16 / 9;
  background: var(--ins-surface);
  overflow: hidden;
}
.ins-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ins-card-media-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--dark), var(--clr));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}
.ins-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ins-card-title {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.35;
  color: var(--dark);
  margin: 0;
}
.ins-card-desc {
  font-size: 15px;
  color: var(--txtclr);
  margin: 0;
  flex: 1;
}

.ins-empty {
  color: var(--txtclr);
  font-size: 18px;
  padding: 40px 0;
}

/*=============================== Pagination ===============================*/

.ins-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 48px;
}
.ins-pagination .button {
  width: auto;
  padding: 0 24px;
}

/*================================ Article =================================*/

.ins-article-head {
  background: var(--ins-surface);
  border-bottom: 1px solid var(--ins-border);
  padding: 48px 0 40px;
}
.ins-article-title {
  font-size: 42px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 20px;
  max-width: 22ch;
}
.ins-article-standfirst {
  font-size: 20px;
  line-height: 1.6;
  color: var(--txtclr);
  max-width: var(--ins-measure);
  margin: 0 0 28px;
}

.ins-byline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ins-byline-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.ins-byline-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 2px;
}
.ins-byline-name span {
  font-weight: 400;
  color: var(--txtclr);
}

.ins-hero {
  margin: 40px 0 0;
}
.ins-hero img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.ins-hero figcaption {
  font-size: 14px;
  color: var(--txtclr);
  padding-top: 10px;
}

.ins-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  padding: 48px 0 64px;
  align-items: start;
}

.ins-aside {
  position: sticky;
  top: calc(var(--headerHeight) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ins-aside-block {
  border: 1px solid var(--ins-border);
  border-radius: 12px;
  padding: 24px;
}
.ins-aside-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txtclr);
  margin: 0 0 12px;
}
.ins-author-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 4px;
}
.ins-author-bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txtclr);
  margin: 12px 0 0;
}
.ins-cta {
  background: var(--ins-surface);
}
.ins-cta p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txtclr);
  margin: 0 0 18px;
}
.ins-cta .button {
  width: 100%;
}

/*============================= Article prose ==============================*/

.ins-prose {
  max-width: var(--ins-measure);
  font-size: 18px;
  line-height: 1.75;
  color: #1c2d41;
}
.ins-prose > * + * {
  margin-top: 1.4em;
}
.ins-prose h2 {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.3;
  color: var(--dark);
  margin-top: 2em;
}
.ins-prose h3 {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.35;
  color: var(--dark);
  margin-top: 1.8em;
}
.ins-prose a {
  color: var(--clr);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ins-prose ul,
.ins-prose ol {
  padding-left: 1.4em;
}
.ins-prose li + li {
  margin-top: 0.5em;
}
.ins-prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--clr);
  color: var(--txtclr);
  font-size: 20px;
}
.ins-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.ins-prose figure figcaption {
  font-size: 14px;
  color: var(--txtclr);
  padding-top: 8px;
}
.ins-prose code {
  background: var(--ins-surface);
  border: 1px solid var(--ins-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
}
.ins-prose pre {
  background: var(--ins-surface);
  border: 1px solid var(--ins-border);
  border-radius: 8px;
  padding: 18px;
  overflow-x: auto;
}
.ins-prose pre code {
  background: none;
  border: 0;
  padding: 0;
}
.ins-prose table {
  width: 100%;
  font-size: 16px;
  display: block;
  overflow-x: auto;
}
.ins-prose th,
.ins-prose td {
  border: 1px solid var(--ins-border);
  padding: 10px 14px;
  text-align: left;
}
.ins-prose th {
  background: var(--ins-surface);
}
.ins-prose hr {
  border: 0;
  border-top: 1px solid var(--ins-border);
}

.ins-disclaimer {
  margin-top: 3em;
  padding: 20px 24px;
  background: var(--ins-surface);
  border: 1px solid var(--ins-border);
  border-radius: 12px;
}
.ins-disclaimer p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--txtclr);
  margin: 0;
}

/*============================== Related ===================================*/

.ins-related {
  background: var(--ins-surface);
  border-top: 1px solid var(--ins-border);
  padding: 56px 0 64px;
}
.ins-related .hdn2 {
  color: var(--dark);
}

/*============================== Responsive ================================*/

@media (max-width: 1024px) {
  .ins-article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .ins-aside {
    position: static;
    max-width: var(--ins-measure);
  }
}

@media (max-width: 767px) {
  .ins-hero-band {
    padding: 36px 0 32px;
  }
  .ins-article-head {
    padding: 32px 0 28px;
  }
  .ins-article-title {
    font-size: 30px;
    max-width: none;
  }
  .ins-article-standfirst {
    font-size: 18px;
  }
  .ins-prose {
    font-size: 17px;
  }
  .ins-prose h2 {
    font-size: 24px;
  }
  .ins-prose h3 {
    font-size: 20px;
  }
  .ins-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ins-pagination {
    flex-direction: column;
    gap: 14px;
  }
}