/* Reusable "Research, talks, and partners" showcase: grid on desktop, horizontal scroll + dots on mobile.
   Included via the researchTalks.html partial. The full-bleed band assumes a centered 1180px column. */
.researchShowcase {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 34px 0 8px;
  background: linear-gradient(180deg, #f6f4fd 0%, #f2f6fb 100%);
  border-top: 1px solid #ece8fb;
  border-bottom: 1px solid #ece8fb;
}
.researchShowcaseHead {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 20px;
}
.researchShowcaseHead h2 { margin: 0 0 6px; font-weight: 700; color: var(--bia-fg); }
.researchShowcaseHead p { margin: 0; color: var(--bia-muted); }
.researchShowcaseScroller {
  /* Desktop: cards stack into a centered grid within the 1180 column. */
  --research-inset: max(20px, calc(50vw - 590px));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 6px 20px 8px;
}
.researchCard {
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #ece9f9;
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 14px 34px -28px rgba(60, 50, 120, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.researchTag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--bia-accent);
  background: #f1eefd;
  border-radius: 999px;
  padding: 4px 11px;
}
.researchCard.isPartner .researchTag { color: var(--bia-teal); background: #e5f3ee; }
.researchName { font-weight: 700; font-size: 1.05rem; color: var(--bia-fg); margin: 0; }
/* Speaker/author byline: sits under the title, above the venue line. */
.researchAuthors { font-size: 0.82rem; line-height: 1.45; color: var(--bia-fg); margin: 0; }
.researchMeta { font-size: 0.85rem; color: var(--bia-muted); margin: 0; }
.researchBody { font-size: 0.9rem; line-height: 1.55; color: var(--bia-fg); margin: 0; }
.researchLink { margin-top: auto; font-size: 0.88rem; font-weight: 600; color: var(--bia-link); }
.researchShowcaseScroller:focus-visible { outline: 3px solid var(--bia-focus); outline-offset: 2px; }

/* Media block sits at the top of each research card: a photo (conference) or a contained logo (partner). */
.researchMedia {
  height: 132px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.researchMedia.isPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.researchMedia.isLogo {
  background: #f7f6fd;
  border: 1px solid #ece9f9;
  padding: 16px 22px;
}
.researchMedia.isLogo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Closing "partner on research" call to action card. */
.researchCard.isCta {
  background: linear-gradient(160deg, #efe9fd 0%, #e8f1fb 100%);
  border: 1px solid #ded6f7;
  justify-content: center;
}
.researchCta { font-weight: 700; font-size: 1.1rem; color: var(--bia-fg); margin: 0; }
.researchCtaBody { font-size: 0.92rem; line-height: 1.55; color: var(--bia-fg); margin: 0; }
.researchCtaLink {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bia-link);
}

/* Mobile: revert to a full-bleed horizontal scroller, one card per swipe, with status dots. */
@media (max-width: 768px) {
  .researchShowcaseScroller {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--research-inset);
    padding: 6px var(--research-inset) 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .researchShowcaseScroller::-webkit-scrollbar { display: none; }
  .researchCard {
    flex: 0 0 80vw;
    max-width: 80vw;
  }
}

/* Scroll status dots (mobile only), matching the reviews/journey pattern. */
.researchDots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width: 768px) { .researchDots { display: flex; } }
/* 24x24 hit area (WCAG AA target size); the visible dot stays 8px via the radial gradient. */
.researchDot {
  width: 24px;
  height: 24px;
  background: transparent;
  background-image: radial-gradient(circle, #d4d0ea 4px, transparent 5px);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-image 0.2s ease;
}
.researchDot.active {
  background-image: radial-gradient(circle, var(--bia-accent) 5px, transparent 6px);
}