/* Insights page */

/* ---------- News & announcements ---------- */
.news { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-80); }
.news .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.news__head { align-items: center; }
.news__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
.search { display: inline-flex; align-items: center; gap: 4px; width: 320px; height: 44px; padding: 10px 4px; border-bottom: 1px solid var(--color-blue-50); font-family: var(--font-body); font-size: 16px; color: var(--color-blue-50); }
.search svg { width: 20px; height: 20px; }
.news__body { align-items: stretch; }
.news__list { display: flex; flex-direction: column; }
.news-item { border-bottom: 1px solid var(--color-blue-10); padding: 24px 16px 24px 32px; display: flex; flex-direction: column; gap: 8px; }
.news-item__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.news-item__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.28px; color: var(--color-night); max-width: 334px; }
.news-item__desc { max-width: 302px; font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-night); -webkit-mask-image: linear-gradient(180deg, #000 1%, transparent 85%); mask-image: linear-gradient(180deg, #000 1%, transparent 85%); }
.news-item .link { margin-top: 4px; }
.news__featured { position: relative; overflow: hidden; background: var(--color-blue-10); min-height: 643px; display: flex; align-items: flex-end; }
.news__featured-maze { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 1030px; max-width: none; opacity: 0.5; pointer-events: none; }
.news__featured-card { position: relative; z-index: 1; background: var(--color-almost-white); margin: 16px; padding: 16px; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 16px; }
.news__featured-card .tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.news__featured-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.news__featured-card a { font-family: var(--font-body); font-size: 14px; color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 992px) {
  .news__head h2 { font-size: 40px; }
  .news__featured { min-height: 420px; }
  .news__featured-card { width: auto; }
}

/* ---------- In the media ---------- */
.media { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.media .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.media__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.4px; color: var(--color-night); max-width: 640px; }
.media__head h2 .muted { color: var(--color-blue-50); }
.media__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-lg); }
.media-card { display: flex; flex-direction: column; gap: 16px; }
/* The keyline matters once the covers are real artwork: the Press ground is
   Almost White, which is also the page ground, so without it that card
   reads as one whose image failed to load. Harmless on the dark grounds. */
.media-card__img {
  height: 176px;
  background: var(--color-blue-10);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(23, 34, 58, 0.14);
}
/* Was 0.5, which washed every ground to the same grey and took the
   categories with it — the grid looked uniform because of this line, not
   because of the artwork. */
.media-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.media-card__tag { font-family: var(--font-heading); font-style: italic; font-size: 14px; line-height: 20px; color: var(--color-blue-50); }
.media-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.05; letter-spacing: -0.24px; color: var(--color-night); }
.media-card .link { color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 992px) { .media__grid { grid-template-columns: 1fr; } }

/* ---------- Company news band (deep-blue) ---------- */
.company-band { background: var(--color-deep-blue); color: var(--color-almost-white); padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.company-band__inner { display: grid; grid-template-columns: 4fr 8fr; align-items: end; column-gap: 40px; }
.company-band__head .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.company-band__head h2 { margin-top: 40px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
.company-band__desc { margin-top: 12px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 520px; }
.company-band__form { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-gray-40); }
.company-band__form input { flex: 1; min-width: 0; padding: 12px 16px 12px 0; border: none; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); }
.company-band__form input::placeholder { color: var(--color-gray-40); }
.company-band__form input:focus { outline: none; }
.company-band__form button { flex-shrink: 0; padding: 12px 16px; border: none; border-left: 1px solid var(--color-gray-40); background: none; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); cursor: pointer; }
@media (max-width: 992px) { .company-band__inner { grid-template-columns: 1fr; row-gap: 40px; align-items: stretch; } .company-band__head h2 { margin-top: 16px; } }

/* ---------- Research & Insights ---------- */
.ri { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.ri .container { display: flex; flex-direction: column; gap: var(--sp-80); }
.ri__head { display: grid; grid-template-columns: 4fr 8fr; align-items: start; }
.ri__head p { max-width: 220px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.ri__head h2 { text-align: center; font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); }
/* Night band bleeding past the label column, with a light card set to the
   right. Figma 1051:11356 — the ascii sits at 10% over the night ground. */
.ri__featured {
  position: relative; overflow: hidden; background: var(--color-night);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 16px 16px 16px 0;
}
.ri__featured-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1376px; max-width: none; opacity: 0.1; pointer-events: none; }
.ri__card {
  position: relative; z-index: 1; width: 908px; max-width: 100%; min-height: 300px;
  background: var(--color-blue-5); padding-top: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ri__card-top { display: flex; align-items: flex-start; gap: 16px; padding: 0 16px; }
.ri__f-title { display: flex; flex-direction: column; gap: 8px; width: 471px; max-width: 100%; }
.ri__f-title .tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; line-height: 20px; color: var(--color-blue-50); }
.ri__f-title h3 { max-width: 383px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
/* the copy fades into the card as it descends */
.ri__f-desc {
  width: 309px; font-family: var(--font-body); font-size: 14px; line-height: 22px;
  background-image: linear-gradient(179deg, var(--color-night) 2%, var(--color-blue-5) 91%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ri__card-bottom { border-top: 1px solid var(--color-blue-10); display: flex; align-items: center; padding: 8px 16px; }
.ri__card-bottom span { width: 470px; max-width: 60%; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.ri__card-bottom a { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
.ri__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap-lg); }
.ri-col { display: flex; flex-direction: column; gap: 16px; }
.ri-col__tag { font-family: var(--font-heading); font-style: italic; font-size: 16px; color: var(--color-blue-50); }
.ri-col h3 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-night); }
.ri-col p { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--color-blue-50); max-width: 240px; }
.ri-col .link { margin-top: 8px; color: var(--color-night); text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 992px) {
  .ri__head { grid-template-columns: 1fr; row-gap: 24px; } .ri__head h2 { text-align: left; font-size: 40px; }
  .ri__featured { padding: 16px; }
  .ri__card-top { flex-direction: column; }
  .ri__f-desc { width: 100%; }
  .ri__cols { grid-template-columns: 1fr; }
}

/* ---------- Publication library ---------- */
.publib { background: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.publib__inner { align-items: start; }
.publib__inner > .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-blue-50); }
.publib__main h2 { font-family: var(--font-heading); font-weight: 400; font-size: 62px; line-height: 0.9; letter-spacing: -0.93px; color: var(--color-night); margin-bottom: 80px; }
@media (max-width: 992px) {
  .publib__inner { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (max-width: 768px) {
  .publib__main h2 { font-size: 32px; margin-bottom: 44px; }
  /* Figma 375: rows sit close together, the label carries the separation */
  .publib .doc-list { gap: 8px; }
}

/* ---------- Newsletter signup (forest band) ---------- */
.signup { background: var(--color-forest); color: var(--color-almost-white); padding-top: var(--sp-120); padding-bottom: var(--sp-120); }
.signup > .split { align-items: start; }
.signup .label { font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); }
.signup__main { display: flex; flex-direction: column; gap: 40px; }
.signup__head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.4px; color: var(--color-almost-white); }
.signup__head p { margin-top: 12px; font-family: var(--font-body); font-size: 16px; line-height: 22px; color: var(--color-gray-40); max-width: 620px; }
.signup__form { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-gray-40); }
.signup__form input { flex: 1; min-width: 0; padding: 12px 16px 12px 0; border: none; background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); }
.signup__form input::placeholder { color: var(--color-gray-40); }
.signup__form input:focus { outline: none; }
.signup__form button { flex-shrink: 0; padding: 12px 16px; border: none; border-left: 1px solid var(--color-gray-40); background: none; font-family: var(--font-body); font-size: 16px; color: var(--color-almost-white); cursor: pointer; }
@media (max-width: 768px) { .signup__head h2 { font-size: 32px; } }

/* Mobile type scale — verified against Figma 375 frames */
@media (max-width: 768px) {
  .news__head h2 { font-size: 32px; }
  .news-item__title { font-size: 28px; }
  .news__featured-card h3 { font-size: 28px; }
  .media__head h2 { font-size: 24px; }
  .media-card__title { font-size: 28px; }
  .company-band__head h2 { font-size: 32px; }
  .ri__head h2 { font-size: 32px; }
  .ri__f-title h3 { font-size: 28px; }
  .ri-col h3 { font-size: 28px; }
}