/* ============================================
   RESEARCH 2026
   Mockup: graphic-dev/research-page/Research page.png  (exported @2x of a 1920 canvas)

   Layout: a dark full-bleed hero, then a light band holding a two-column grid of
   paper cards. Each grid cell is a bordered card with the action row (purple pill
   + optional text link) sitting *below* the card on the page background.

   Every value below was measured off the mockup at the 1920px design width:
     content column   1340px centred          -> max-width 1444 (1340 + 2 x 52 gutter)
     hero band        567px tall              -> padding 245 / 157 around a 165px title
     card grid        2 x 649px, 42px gap, 74px row-gap
     card             #F7F6F3, 2px #E8E8E8 border, 20px radius, 32/36px padding
     card title       Montserrat 700 22/30.5  #4739C2
     card body        Montserrat 400 18/32    #464646
     hero title       Montserrat 700 46/55    #fff
     pill             #4739C2, 64px tall, 38px side padding, 16px uppercase
     band background  #FCFCFC

   Type sizes were confirmed by rendering this stylesheet and diffing the ink
   extents of each text line against the same lines in the mockup — reading cap
   heights off the antialiased PNG put the hero 2px and the card title 2px high.

   All type is in px, NOT rem. main.css steps the root font-size by viewport
   (10px base / 12px at 1200-1512 / 14px at 1513-1919 / 16px at >=1920 and <=768),
   so a rem value renders at four different sizes across the range and cannot hold
   the mockup's scale. Verified by rendering: 3rem measured 36px at 1440.

   Everything is scoped under .research-2026 (body class) so nothing leaks.
   ============================================ */

/* Shared gutter. The 52 / 40 / 20 steps are the same values .header-2026-inner uses.
   The max-width is the mockup's 1340px content column plus those gutters — wider
   than the 1280 used on other 2026 pages, because this grid is drawn wider.

   Note the grid does NOT sit on the same line as the header logo at wide viewports,
   and is not meant to: the header runs flush (content at 52px even at 2560), while
   this container caps at 1444 and centres, so at 1920 the grid starts at 290. That
   is exactly what the mockup shows — logo at 52, cards at 290. */
.research-2026 .r26-inner {
  max-width: 1444px;
  margin: 0 auto;
  padding: 0 52px;
}

/* ── Hero (dark) ───────────────────────────────────────────────── */
.research-2026 .r26-hero {
  position: relative;
  overflow: hidden;
  /* Solid base under the artwork: this is what shows if the image 404s or has not
     loaded yet, and it matches the near-black the photograph fades out to. */
  background: #0C0B0A;
  /* 245 + (3 lines x 55) + 157 = 567px, the mockup's hero height. The top value
     also clears the fixed header (~88px) with the breathing room the design shows. */
  padding: 245px 0 157px;
}

/* Background artwork. object-fit: cover on the img (not a CSS background) so the
   <picture> element can swap sources at the mobile breakpoint. */
.research-2026 .r26-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.research-2026 .r26-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject stands at ~72% of the artwork's width. Anchoring right of centre
     keeps her in frame as the 3.39:1 image is cropped on narrower viewports. */
  object-position: 68% center;
  display: block;
}

/* Hero copy above the artwork. */
.research-2026 .r26-hero .r26-inner {
  position: relative;
  z-index: 1;
}

.research-2026 .r26-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 55px;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  /* Holds "Shaping the Future of" (519px at this size) on one line and pushes
     "Speech Intelligence" to the next. The break after the colon is authored in
     the field itself — see hero.php. */
  max-width: 560px;
}

/* Not in the mockup; styled so an added subhead does not land unformatted. */
.research-2026 .r26-hero-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin: 28px 0 0;
  max-width: 560px;
}

/* ── Papers (light) ────────────────────────────────────────────── */
.research-2026 .r26-papers {
  background: #FCFCFC;
  padding: 62px 0 84px;
}

.research-2026 .r26-papers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 42px;
  row-gap: 74px;
}

/* Card + action row in one column. align-items on the grid defaults to stretch, so
   both cells in a row share a height, the card absorbs the slack via flex: 1, and
   the two action rows sit on the same baseline — the behaviour the mockup implies
   with its equal-height cards. */
.research-2026 .r26-paper {
  display: flex;
  flex-direction: column;
  min-width: 0; /* lets long unbroken titles shrink instead of widening the track */
}

.research-2026 .r26-paper-card {
  flex: 1;
  background: #F7F6F3;
  border: 2px solid #E8E8E8;
  border-radius: 20px;
  /* Asymmetric, and measured that way: 36px sides, 32px top and bottom. Verified by
     diffing the title's ink offset from the card's outer corner against the mockup. */
  padding: 32px 36px;
}

.research-2026 .r26-paper-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 30.5px;
  color: #4739C2;
  margin: 0;
  /* Titles carry long model names and URLs; break rather than overflow the card. */
  overflow-wrap: break-word;
}

.research-2026 .r26-paper-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  color: #464646;
  margin: 32px 0 0;
}

.research-2026 .r26-paper-body p {
  margin: 0;
}

.research-2026 .r26-paper-body p + p {
  margin-top: 1em;
}

/* Action row — outside the card, on the page background. */
.research-2026 .r26-paper-actions {
  display: flex;
  align-items: center;
  /* 42px matches the column gap; the row value only applies once these wrap. */
  gap: 20px 42px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Primary pill. */
.research-2026 .r26-paper-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 64px;
  padding: 8px 38px;
  border-radius: 999px;
  background: #4739C2;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.research-2026 .r26-paper-cta:hover,
.research-2026 .r26-paper-cta:focus-visible {
  background: #382CA6;
  color: #fff;
  text-decoration: none;
}

.research-2026 .r26-paper-cta-arrow {
  flex: none;
  /* Optical centring: the chevron's stroke sits high against uppercase text. */
  margin-top: 1px;
}

/* Secondary text link. */
.research-2026 .r26-paper-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #464646;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.research-2026 .r26-paper-link:hover,
.research-2026 .r26-paper-link:focus-visible {
  color: #4739C2;
  text-decoration: underline;
}

.research-2026 .r26-paper-link-icon {
  flex: none;
  width: 17px;
  height: auto;
  /* The bundled Hugging Face mark is a black alpha mask, so it reads as the same
     grey as the label without a second asset. */
  opacity: 0.85;
}

/* Keyboard focus — the theme does not supply a visible ring for these. */
.research-2026 .r26-paper-cta:focus-visible,
.research-2026 .r26-paper-link:focus-visible {
  outline: 2px solid #4739C2;
  outline-offset: 3px;
}

/* ── Tablet ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .research-2026 .r26-inner {
    padding: 0 40px;
  }

  .research-2026 .r26-hero {
    padding: 168px 0 104px;
  }

  .research-2026 .r26-hero-title {
    font-size: 40px;
    line-height: 1.15;
    max-width: 470px;
  }

  .research-2026 .r26-papers {
    padding: 56px 0 72px;
  }

  /* Two columns still fit here, but the card interior does not carry 24/18 type
     at ~456px wide without the titles running to five or six lines. */
  .research-2026 .r26-papers-grid {
    column-gap: 32px;
    row-gap: 56px;
  }

  .research-2026 .r26-paper-card {
    padding: 24px 28px;
  }

  .research-2026 .r26-paper-title {
    font-size: 20px;
    line-height: 1.3;
  }

  .research-2026 .r26-paper-body {
    font-size: 16px;
    line-height: 28px;
    margin-top: 24px;
  }

  .research-2026 .r26-paper-actions {
    gap: 16px 28px;
    margin-top: 24px;
  }

  .research-2026 .r26-paper-cta {
    min-height: 56px;
    padding: 8px 30px;
  }

  .research-2026 .r26-paper-link {
    font-size: 16px;
  }
}

/* ── Single column ─────────────────────────────────────────────── */
/* Below this a two-up grid leaves cards under ~390px, where these titles wrap to
   four lines and the body becomes a four-word ribbon — measured at 769px, the
   cards were 329px. One wide card reads better. The cap keeps the line length
   near 75 characters instead of the ~95 an ungoverned 820px card would give at
   900px, and it is left-aligned so the grid still starts on the hero's gutter. */
@media (max-width: 900px) {
  .research-2026 .r26-papers-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
    row-gap: 40px;
  }
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .research-2026 .r26-inner {
    padding: 0 20px;
  }

  .research-2026 .r26-hero {
    padding: 132px 0 80px;
  }

  .research-2026 .r26-hero-title {
    font-size: 32px;
    line-height: 1.2;
    /* Let the authored line breaks do the work at this width. */
    max-width: none;
  }

  .research-2026 .r26-hero-body {
    font-size: 16px;
    margin-top: 20px;
    max-width: none;
  }

  .research-2026 .r26-papers {
    padding: 40px 0 56px;
  }

  .research-2026 .r26-paper-card {
    padding: 20px 24px;
    border-radius: 16px;
  }

  .research-2026 .r26-paper-cta {
    min-height: 52px;
    padding: 8px 26px;
    font-size: 14px;
  }
}