/* Industry research detail — Figma hero 2530:19367 / 2531:7736, body 2529:18893 / 2531:7749 */

/* --- Hero --- */

.research-hero {
  padding-block-start: 6.25rem;
  padding-block-end: 0.25rem;
  padding-inline: var(--d-4);
  background: var(--color-grey-200);
}

.research-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--d-12);
  max-width: var(--width-content);
}

.research-hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
  width: 100%;
}

.research-hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  min-width: 0;
}

.research-hero__date {
  margin: 0;
}

.research-hero__title {
  margin: 0;
  font-family: var(--font-display-s-family);
  font-size: 2.5rem; /* 40px mobile */
  font-weight: var(--font-display-s-weight);
  line-height: 1.2; /* 48px */
  letter-spacing: -0.4px;
  color: var(--text);
}

.research-hero__aside {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--d-10);
  width: 100%;
}

.research-hero__industry {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  min-width: 0;
}

.research-hero__industry-label {
  margin: 0;
}

.research-hero__industry-value {
  margin: 0;
  /* Mobile: H3/Mono (16/22); desktop keeps .h1--mono */
  font-family: var(--font-h3-mono-family);
  font-size: var(--font-h3-mono-size);
  font-weight: var(--font-h3-mono-weight);
  line-height: var(--font-h3-mono-line);
  letter-spacing: var(--font-h3-mono-tracking);
}

.research-hero__share {
  flex-shrink: 0;
}

.research-hero__share .btn__icon,
.research-body__share .btn__icon {
  width: 16px;
  height: 16px;
  /* link.svg is drawn white for primary buttons; invert to grey-800 on secondary */
  filter: brightness(0);
}

.research-hero__inner > .dotted-divider {
  width: 100%;
}

@media (min-width: 40rem) {
  .research-hero {
    padding-inline: var(--d-10);
  }

  .research-hero__inner {
    gap: var(--d-20);
  }

  .research-hero__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--d-10);
  }

  .research-hero__lead {
    flex: 1 1 auto;
  }

  .research-hero__title {
    font-size: var(--font-display-s-size);
    line-height: var(--font-display-s-line-ratio);
    letter-spacing: var(--font-display-s-tracking);
  }

  .research-hero__aside {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--d-6);
    width: 15rem; /* 240px */
    flex-shrink: 0;
  }

  .research-hero__industry-value {
    font-family: var(--font-h1-mono-family);
    font-size: var(--font-h1-mono-size);
    font-weight: var(--font-h1-mono-weight);
    line-height: var(--font-h1-mono-line);
    letter-spacing: var(--font-h1-mono-tracking);
  }
}

/* --- Body --- */

.research-body {
  padding-block-start: 3.9375rem; /* ~63px mobile */
  padding-block-end: var(--d-10);
  padding-inline: var(--d-4);
  background: var(--color-grey-200);
}

.research-body__inner {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
  width: 100%;
  max-width: var(--width-blog-prose);
  margin-inline: auto;
}

.research-body__section {
  display: flex;
  flex-direction: column;
  gap: var(--d-5);
  width: 100%;
}

.research-body__section-title {
  margin: 0;
}

.research-body__overview {
  margin: 0;
}

.research-body__stories {
  display: flex;
  flex-direction: column;
  gap: var(--d-5);
  width: 100%;
}

.research-body__stories > p {
  margin: 0;
}

.research-body__stories > .dotted-divider {
  width: 100%;
}

.research-body a {
  color: var(--periwinkle-150);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.research-body a:hover {
  color: var(--text);
}

.research-body__share {
  align-self: flex-start;
}

@media (min-width: 40rem) {
  .research-body {
    padding-block-start: var(--d-20);
    padding-block-end: var(--d-35);
    padding-inline: var(--d-10);
  }
}

/* =============================================================================
   Index — Figma hero 2531:7418 / 2537:8515
   List body: desktop 2531:7456, tablet 2538:8636, mobile 2536:8285
   ============================================================================= */

.research-index-hero {
  padding-block: var(--d-16) var(--d-20);
  padding-inline: var(--d-4);
  background: var(--color-grey-200);
}

.research-index-hero__eyebrow {
  margin: 0 0 var(--d-4);
}

.research-index-hero__title {
  margin: 0;
  max-width: 57.75rem;
}

/* Override global 40rem desktop/mobile toggle — desktop lockup overflows below 64rem */
.research-index-hero__title .display--illustrated-desktop {
  display: none;
}

@media (max-width: 39.99rem) {
  .research-index-hero__title {
    font-size: 2.5rem; /* 40px mobile */
    line-height: 1.2; /* 48px */
    letter-spacing: -0.4px;
  }
}

@media (max-width: 63.99rem) {
  .research-index-hero__title .display--illustrated-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
  }

  .research-index-hero__title .display--illustrated-mobile .display__line {
    flex: 0 0 100%;
  }

  .research-index-hero__title .display--illustrated-mobile .display__line--with-art {
    --display-art-gap: 0;
    align-items: center;
  }

  .research-index-hero__title .display--illustrated-mobile .display__art-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding-inline: var(--d-1);
  }

  .research-index-hero__title .display--illustrated-mobile .display__art {
    height: 3.5rem; /* 56px */
  }
}

@media (min-width: 40rem) {
  .research-index-hero {
    padding-block: 6.25rem;
  }

  .research-index-hero__title {
    font-size: var(--font-display-s-size);
    line-height: var(--font-display-s-line-ratio);
    letter-spacing: var(--font-display-s-tracking);
  }
}

@media (min-width: 64rem) {
  .research-index-hero__title .display--illustrated-mobile {
    display: none;
  }

  .research-index-hero__title .display--illustrated-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
  }

  .research-index-hero__title .display--illustrated-desktop .display__line {
    flex-shrink: 0;
  }

  .research-index-hero__title .display--illustrated-desktop .display__line:not(.display__line--with-art) {
    flex: 0 0 100%;
  }

  .research-index-hero__title .display--illustrated-desktop .display__line--with-art {
    --display-art-gap: 0;
    align-items: center;
  }

  .research-index-hero__title .display--illustrated-desktop .display__art-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1lh;
    padding-inline: var(--d-4);
  }

  .research-index-hero__title .display--illustrated-desktop .display__art {
    height: 5rem; /* 80px */
  }
}

/* --- Index list --- */

.research-index-list {
  padding-block-start: var(--d-2);
  padding-block-end: var(--d-10);
  padding-inline: var(--d-4);
  background: var(--color-grey-200);
}

.research-index-list__inner {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
  max-width: var(--width-content);
}

.research-index-list__inner > .dotted-divider {
  width: 100%;
}

.research-index-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.research-index-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
}

.research-index-list__item > .dotted-divider {
  width: 100%;
}

.research-index-list__link {
  display: flex;
  flex-direction: column;
  gap: var(--d-8);
  padding-inline: var(--d-4);
  color: inherit;
  text-decoration: none;
}

.research-index-list__link:hover .research-index-list__title {
  color: var(--text-muted);
}

.research-index-list__link:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.research-index-list__col {
  display: flex;
  flex-direction: column;
  gap: var(--d-2);
  min-width: 0;
}

.research-index-list__label {
  margin: 0;
}

.research-index-list__industry-value {
  margin: 0;
  font-family: var(--font-h4-mono-family);
  font-size: var(--font-h4-mono-size);
  font-weight: var(--font-h4-mono-weight);
  line-height: var(--font-h4-mono-line);
  letter-spacing: var(--font-h4-mono-tracking);
  color: var(--text);
}

.research-index-list__title {
  margin: 0;
}

.research-index-list__desc-text {
  margin: 0;
  color: var(--text-muted);
}

/* Tablet — Figma 2538:8636 (768): industry + title stacked, description beside */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .research-index-list {
    padding-block-start: var(--d-2);
    padding-block-end: var(--d-10);
    padding-inline: var(--d-4);
  }

  .research-index-list__link {
    display: grid;
    grid-template-columns: 18.75rem minmax(0, 1fr); /* 300px + rest */
    column-gap: var(--d-6);
    row-gap: var(--d-6);
    align-items: start;
  }

  .research-index-list__col--industry {
    grid-column: 1;
    grid-row: 1;
    width: 7.5rem; /* 120px */
  }

  .research-index-list__col--report {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  .research-index-list__col--desc {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
  }

  /* Keep H4/Mono industry value from base (12/16) */
}

/* Desktop — Figma 2531:7456 (1440) */
@media (min-width: 64rem) {
  .research-index-list {
    padding-block-start: 0.5rem;
    padding-block-end: 6.25rem;
  }

  .research-index-list__link {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--d-10);
  }

  .research-index-list__col--industry {
    width: 10rem; /* 160px */
    flex-shrink: 0;
  }

  .research-index-list__col--report {
    flex: 0 0 25rem; /* 400px */
    width: 25rem;
  }

  .research-index-list__col--desc {
    flex: 1 1 auto;
  }

  .research-index-list__industry-value {
    font-family: var(--font-h3-mono-family);
    font-size: var(--font-h3-mono-size);
    font-weight: var(--font-h3-mono-weight);
    line-height: var(--font-h3-mono-line);
    letter-spacing: var(--font-h3-mono-tracking);
  }
}

/* Same shell gutter as 3-up / trusted / use-cases. On the shell (not the
   1300px container) so it still applies when the column fills the viewport. */
@media (min-width: 56.25rem) {
  .research-index-hero,
  .research-index-list {
    padding-inline: var(--d-10);
  }
}