/* ==========================================================================
   NorthStar Insights — Our Insights listing + article detail template
   Builds on css/styles.css. Desktop values are --u design pixels (1440 frame).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Introduction
   -------------------------------------------------------------------------- */
.insights-intro { padding-top: calc(195 * var(--u)); text-align: center; }
.insights-intro__title {
  font-size: calc(64 * var(--u));
  line-height: calc(76 * var(--u));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--burgundy);
}
.insights-intro__sub {
  margin-top: calc(20 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  color: var(--burgundy);
}
.insights-intro__lead {
  max-width: calc(960 * var(--u));
  margin: calc(12 * var(--u)) auto 0;
  font-size: calc(28 * var(--u));
  line-height: calc(39 * var(--u));
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   InsightsCategoryTabs — four equal segments, a sliding underline
   -------------------------------------------------------------------------- */
.insights-hub { padding: calc(92 * var(--u)) 0 calc(140 * var(--u)); }
.insights-tabs {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-bottom: 1px solid #d8d8d8;
}
.insights-tab {
  height: calc(52 * var(--u));
  padding-bottom: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  color: var(--burgundy);
  transition: color .3s ease;
}
.insights-tab:hover { color: var(--burgundy-deep); }
.insights-tab.is-active { font-weight: 600; }
.insights-tabs__line {
  position: absolute; left: 0; bottom: -1px;
  width: calc(100% / var(--tab-count, 4)); height: 2px;
  background: var(--burgundy);
  transform: translateX(calc(var(--tab-index, 0) * 100%));
  transition: transform .5s var(--ease-out);
}

/* Category panel */
.insights-panel { margin-top: calc(68 * var(--u)); outline: none; transition: opacity .22s ease; }
.insights-panel.is-leaving { opacity: 0; }
.insights-empty { padding: calc(80 * var(--u)) 0; text-align: center; font-size: calc(22 * var(--u)); color: var(--charcoal); }

/* Optional nested toggle (e.g. Company News) */
.insights-subfilters { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); margin: calc(-28 * var(--u)) 0 calc(40 * var(--u)); }
.insights-subfilter {
  padding: calc(8 * var(--u)) calc(20 * var(--u));
  border: 1px solid rgba(80, 5, 35, .4);
  font-size: calc(18 * var(--u)); color: var(--burgundy);
  transition: background-color .3s ease, color .3s ease;
}
.insights-subfilter:hover { background: rgba(80, 5, 35, .08); }
.insights-subfilter.is-active { background: var(--burgundy-deep); border-color: var(--burgundy-deep); color: var(--white); }

/* Shared bits */
.insight-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.3; }
.insight-cta { display: inline-flex; align-items: center; gap: calc(16 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.2; }
.insight-cta__arrow { width: calc(36 * var(--u)); height: calc(12 * var(--u)); min-width: 26px; min-height: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .45s var(--ease-out); }

/* --------------------------------------------------------------------------
   FeaturedStory — 42 / 58 split, burgundy → gold on hover
   -------------------------------------------------------------------------- */
.insight-feature {
  display: grid;
  grid-template-columns: calc(548 * var(--u)) 1fr;
  min-height: calc(549 * var(--u));
  color: var(--white);
}
.insight-feature__body {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(92 * var(--u)) calc(48 * var(--u)) calc(86 * var(--u));
  background: var(--burgundy-deep);
  transition: background-color .5s var(--ease-out);
}
.insight-feature .insight-meta { font-size: calc(18 * var(--u)); }
.insight-feature__title {
  margin-top: calc(12 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(56 * var(--u));
  font-weight: 600;
  letter-spacing: -0.005em;
}
.insight-feature__subtitle { font-size: calc(28 * var(--u)); line-height: calc(40 * var(--u)); font-weight: 400; }
.insight-feature .insight-cta { margin-top: auto; padding-top: calc(48 * var(--u)); }
.insight-feature__arrow {
  position: absolute; right: 0; bottom: 0;
  width: calc(97 * var(--u)); height: calc(97 * var(--u));
  color: rgba(255, 255, 255, .7);
}
.insight-feature__media { position: relative; overflow: hidden; background: #e9dfe2; }
.insight-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); }
/* Burgundy wash on the featured photograph, as in the design */
.insight-feature__media::after {
  content: ""; position: absolute; inset: 0;
  background: #f3c9d6; mix-blend-mode: multiply; opacity: .55;
  pointer-events: none;
}
.insight-feature:hover .insight-feature__body,
.insight-feature:focus-visible .insight-feature__body { background: var(--gold); }
.insight-feature:hover .insight-cta__arrow,
.insight-feature:focus-visible .insight-cta__arrow { transform: translateX(6px); }
.insight-feature:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   InsightsCardGrid / InsightsCard
   -------------------------------------------------------------------------- */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
  row-gap: calc(50 * var(--u));
  margin-top: calc(50 * var(--u));
}
.insight-card__link {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  background: #f7f7f7;
  color: var(--ink);
  transition: background-color .45s var(--ease-out);
}
.insight-card__media { aspect-ratio: 420 / 242; overflow: hidden; background: #ece6e1; }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.insight-card__body {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  min-height: calc(298 * var(--u));
  padding: calc(30 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));
}
.insight-card .insight-meta { font-size: calc(14 * var(--u)); color: var(--charcoal); }
.insight-card__title { margin-top: calc(18 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 400; }
.insight-card__headline { font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 700; color: var(--burgundy); }
.insight-card__subtitle { display: block; color: var(--charcoal); }
/* Two-line headlines read better with the subtitle running on, as in the design */
.insight-card__desc { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.45; color: var(--charcoal); }
.insight-card .insight-cta { margin-top: auto; padding-top: calc(32 * var(--u)); font-size: calc(18 * var(--u)); }
.insight-card__arrow {
  position: absolute; right: 0; bottom: 0;
  width: calc(58 * var(--u)); height: calc(58 * var(--u));
  min-width: 40px; min-height: 40px;
  color: rgba(80, 5, 35, .65);
}
.insight-card__link:hover .insight-card__media img, .insight-card__link:focus-visible .insight-card__media img { transform: scale(1.04); }
.insight-card__link:hover .insight-cta__arrow, .insight-card__link:focus-visible .insight-cta__arrow { transform: translateX(6px); }
.insight-card__link:hover, .insight-card__link:focus-visible { background: #f0ece9; }

/* Compact text-only teaser (items without a card image) */
.insight-card--compact .insight-card__link { background: none; border-left: 1px solid #cfcfcf; }
.insight-card--compact .insight-card__body { min-height: 0; padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.insight-card--compact .insight-card__headline { color: var(--ink); }
.insight-card--compact .insight-card__title { margin-top: 0; }

/* ==========================================================================
   Article / case study detail template
   ========================================================================== */

.article-page { padding: calc(212 * var(--u)) 0 calc(140 * var(--u)); }
.article__header { position: relative; text-align: center; }
.article__close {
  position: absolute; top: calc(18 * var(--u)); right: var(--margin);
  display: grid; place-items: center;
  width: 48px; height: 48px;
  color: var(--burgundy);
}
.article__close svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); min-width: 24px; min-height: 24px; fill: none; stroke: currentColor; stroke-width: 3.2; transition: transform .45s var(--ease-out); }
.article__close:hover svg { transform: rotate(90deg); }
.article__title {
  max-width: calc(900 * var(--u));
  margin: 0 auto;
  font-size: calc(62 * var(--u));
  line-height: calc(88 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--burgundy);
  text-wrap: balance;
}
.article__subtitle { margin-top: calc(4 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.35; color: var(--charcoal); }
.article__hero {
  max-width: calc(1080 * var(--u));
  margin: calc(36 * var(--u)) auto 0;
  aspect-ratio: 1080 / 605;
  overflow: hidden;
  background: #ece6e1;
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: calc(26 * var(--u));
  margin-top: calc(36 * var(--u));
  padding-inline: var(--margin);
  font-size: calc(26 * var(--u));
  line-height: 1.3;
  color: var(--ink);
}
/* Reading column: narrower than the hero for a comfortable line length */
.article__body {
  max-width: calc(880 * var(--u) + 2 * var(--margin));
  margin: calc(64 * var(--u)) auto 0;
  padding-inline: var(--margin);
  font-size: calc(20 * var(--u));
  line-height: calc(33 * var(--u));
  color: var(--ink);
}
.article__body > * + * { margin-top: calc(18 * var(--u)); }
.article__body h2 { margin-top: calc(48 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.3; font-weight: 600; color: var(--burgundy); }
.article__body h3 { margin-top: calc(36 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.35; font-weight: 600; color: var(--ink); }
.article__body h2 + *, .article__body h3 + * { margin-top: calc(12 * var(--u)); }
.article__body ul { padding-left: 1.2em; list-style: disc; }
.article__body li + li { margin-top: calc(10 * var(--u)); }
.article__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .25s ease; }
.article__body a:hover { color: var(--burgundy); }
.article__body blockquote { margin: calc(40 * var(--u)) 0; padding-left: calc(28 * var(--u)); border-left: 2px solid var(--gold); font-size: calc(26 * var(--u)); line-height: 1.4; color: var(--burgundy); }
.article__body blockquote cite { display: block; margin-top: 12px; font-size: .6em; font-style: normal; color: var(--charcoal); }
.article__cta { margin-top: calc(90 * var(--u)); padding-inline: var(--margin); text-align: center; }
.article__cta-lead { margin-bottom: calc(24 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; color: var(--burgundy); }
.article__figure { margin: calc(40 * var(--u)) 0; }
.article__figure img { width: 100%; height: auto; }
.article__figure figcaption { margin-top: 10px; font-size: .8em; color: var(--charcoal); }

/* ==========================================================================
   Tablet (≤1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  .insights-intro { padding-top: 140px; }
  .insights-intro__title { font-size: 48px; line-height: 58px; }
  .insights-intro__sub { font-size: 22px; line-height: 30px; margin-top: 14px; }
  .insights-intro__lead { font-size: 20px; line-height: 30px; max-width: 640px; }

  .insights-hub { padding: 64px 0 104px; }
  .insights-tab { height: 48px; font-size: 18px; padding-bottom: 8px; }
  .insights-panel { margin-top: 44px; }

  .insight-meta { font-size: 15px; }
  .insight-cta { font-size: 18px; gap: 12px; }
  .insight-feature { grid-template-columns: 45% 1fr; min-height: 420px; }
  .insight-feature__body { padding: 44px 32px 56px; }
  .insight-feature .insight-meta { font-size: 15px; }
  .insight-feature__title { font-size: 30px; line-height: 40px; }
  .insight-feature__subtitle { font-size: 20px; line-height: 28px; }
  .insight-feature .insight-cta { padding-top: 32px; }
  .insight-feature__arrow { width: 72px; height: 72px; }

  .insight-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; margin-top: 32px; }
  .insight-card__body { min-height: 260px; padding: 24px 24px 26px; }
  .insight-card .insight-meta { font-size: 13px; }
  .insight-card__title { font-size: 16px; line-height: 23px; }
  .insight-card__headline { font-size: 20px; line-height: 27px; }
  .insight-card .insight-cta { font-size: 16px; }

  .article-page { padding: 140px 0 104px; }
  .article__header { padding-inline: 72px; }
  .article__close { top: -8px; right: 16px; }
  .article__title { font-size: 42px; line-height: 54px; }
  .article__subtitle { font-size: 21px; }
  .article__hero { margin: 28px var(--margin) 0; }
  .article__meta { font-size: 18px; gap: 16px; margin-top: 24px; }
  .article__body { max-width: 760px; margin-top: 44px; font-size: 18px; line-height: 30px; }
  .article__body h2 { font-size: 23px; margin-top: 40px; }
}

/* ==========================================================================
   Mobile (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
  .insights-intro { padding-top: 116px; }
  .insights-intro__title { font-size: 40px; line-height: 48px; }
  .insights-intro__sub { font-size: 19px; line-height: 26px; }
  .insights-intro__lead { font-size: 17px; line-height: 26px; }

  /* Tabs scroll sideways when four no longer fit */
  .insights-tabs {
    grid-auto-columns: max-content;
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin);
  }
  .insights-tabs::-webkit-scrollbar { display: none; }
  .insights-tab { height: 48px; padding: 0 16px 8px; font-size: 17px; white-space: nowrap; }
  .insights-tabs__line { display: none; }
  .insights-tab.is-active { box-shadow: inset 0 -2px 0 var(--burgundy); }

  .insight-feature { grid-template-columns: 1fr; min-height: 0; }
  .insight-feature__media { order: -1; aspect-ratio: 750 / 549; }
  .insight-feature__body { padding: 28px 22px 40px; min-height: 300px; }
  .insight-feature__title { font-size: 26px; line-height: 34px; }
  .insight-feature__subtitle { font-size: 18px; line-height: 26px; }
  .insight-feature__arrow { width: 60px; height: 60px; }

  .insight-grid { grid-template-columns: 1fr; row-gap: 20px; margin-top: 20px; }
  .insight-card__body { min-height: 0; }

  .article-page { padding: 112px 0 88px; }
  .article__header { padding-inline: 20px; padding-top: 44px; }
  .article__close { top: 0; right: 8px; }
  .article__title { font-size: 31px; line-height: 40px; }
  .article__subtitle { font-size: 18px; }
  .article__meta { font-size: 15px; gap: 10px; }
  .article__body { margin-top: 32px; font-size: 17px; line-height: 28px; }
  .article__body h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .insights-panel, .insights-tabs__line, .insight-feature__body, .insight-card__media img { transition: none; }
}